/**
 * assets/css/about.css — /about-me/ only.
 * Design: mrgentleman.gr css/about.css (PROFILE / DETAILS + STORY), adapted to this site's tokens.
 * Shared look (img-frame, eyebrows, booking box, ornaments) comes from base.css.
 */

.section-intro { max-width: 820px; margin: 0 auto; }
h2.title-spaced { margin-bottom: 2rem; }

/* ── About Me / profile ── */
.profile-split { grid-template-columns: 0.85fr 1.15fr; align-items: end; }   /* photo bottom = bottom of the details list (round 37) */
.profile-details { margin-bottom: 0; }
.profile-split .img-frame { max-width: 480px; }
.profile-details {
    display: grid; grid-template-columns: repeat(2, 1fr);
    margin: 2.2rem 0 0; padding: 0;
}
.detail-row {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.75rem 0; border-bottom: 1px solid rgba(201,168,76,0.12);
}
.detail-row:nth-child(even) { padding-left: 1.8rem; }
.detail-label {
    font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--gold-dim); font-weight: 400;
}
.detail-value { margin: 0; font-family: var(--font-serif); font-size: 1.12rem; font-style: italic; color: var(--text); line-height: 1.45; }

/* ── My Story ── */
.story-section { padding: 8rem 0; }
.story-layout {
    display: grid; grid-template-columns: minmax(0, 760px) 380px; gap: 6rem;
    justify-content: center; align-items: start; margin-top: 4.5rem;
}
.story-inner { position: relative; }
.story-inner::before {                       /* vertical gold line left of the story (design) */
    content: ''; position: absolute; top: 0; bottom: 0; left: -3rem; width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.4) 15%, rgba(201,168,76,0.5) 50%, rgba(201,168,76,0.4) 85%, transparent);
}
.story-chapter {
    font-family: var(--font-script); font-size: clamp(2rem, 3.5vw, 2.7rem); font-weight: 400;
    color: var(--gold-light); margin: 3.4rem 0 1rem; line-height: 1.2; text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.story-chapter:first-child { margin-top: 0; }
.story-pullquote {
    font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    color: var(--gold-light); border-left: 2px solid var(--gold-dim);
    padding: 0.4rem 0 0.4rem 1.5rem; margin: 1.6rem 0; line-height: 1.6;
}
.about-closing {
    max-width: 820px; margin: 5rem auto 0; text-align: center;
    font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    color: rgba(228,201,123,0.8); line-height: 1.7;
}

/* ── My Philosophy: 4 cards (2 × 2) ── */
/* cards wide and under each other (round 28) */
/* ── My Philosophy: one big box (round 36) ── */
.philosophy-box {
    position: relative; max-width: 1080px; margin: 0 auto; padding: 4.2rem 4rem 3.6rem;
    background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.08), transparent 60%), rgba(30,38,54,0.98);
    border: 1px solid rgba(201,168,76,0.55);
    box-shadow: 0 0 22px rgba(201,168,76,0.18), 0 0 8px rgba(74,158,224,0.12), inset 0 1px 0 rgba(201,168,76,0.15);
}
.philosophy-box::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(201,168,76,0.14); pointer-events: none; }
.philosophy-box__corner { position: absolute; width: 22px; height: 22px; border-color: var(--gold-light); border-style: solid; }
.philosophy-box__corner--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.philosophy-box__corner--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.philosophy-box__corner--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.philosophy-box__corner--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.philosophy-box__intro { max-width: 760px; margin: 1.6rem auto 0; }
.philosophy-parts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 3.2rem; border-top: 1px solid rgba(201,168,76,0.18); }
.philosophy-part { padding: 2.4rem 2.4rem 2.2rem; position: relative; }
.philosophy-part:nth-child(even)::before {               /* fading vertical gold line between the columns */
    content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.45), transparent);
}
.philosophy-part:nth-child(n+3) { border-top: 1px solid rgba(201,168,76,0.12); }
.philosophy-part__title { font-family: var(--font-script); font-weight: 400; font-size: clamp(2rem, 2.6vw, 2.4rem); color: var(--gold-light); line-height: 1.15; margin: 0 0 0.9rem; text-shadow: 0 0 2px rgba(0,0,0,0.5); }
.philosophy-part__lead { font-style: italic; color: var(--text); font-size: 1.15rem; }
.philosophy-part p { margin-bottom: 0.9rem; }
.philosophy-part p:last-child { margin-bottom: 0; }

/* ── Photo carousel above My Philosophy (round 36) ── */
.about-gallery { padding: 0; }
.about-gallery .carousel { margin: 0; }
.carousel--wide .carousel__item { height: 480px; }

/* ── Story slideshow (assets/js/about.js) ──
   Desktop: the column stretches next to the whole story; the photo is sticky and sits in the
   middle of the screen while you read. It starts level with "A Friend's Remark" and stops at the
   end of the story by itself (sticky inside its column). */
.story-aside { align-self: stretch; padding: 14px; }
.story-sticky { position: sticky; top: max(calc(var(--header-h, 84px) + 24px), calc(50vh - 246px)); }   /* 246px = half the photo height → photo centred */
.story-slides { position: relative; aspect-ratio: 5 / 7; max-width: 100%; touch-action: pan-y; }
.story-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; z-index: 1; }
.story-slide.is-active { opacity: 1; z-index: 1; }
.story-slides .story-slide img { width: 100%; height: 100%; object-fit: cover; }
/* click / tap the left or right half of the photo = previous / next */
.story-nav {
    position: absolute; top: 0; bottom: 0; width: 50%; z-index: 5;
    background: none; border: 0; padding: 0 1rem; cursor: pointer;
    display: flex; align-items: center; color: #f6e3ae;
    -webkit-tap-highlight-color: transparent;
}
.story-nav--prev { left: 0; justify-content: flex-start; }
.story-nav--next { right: 0; justify-content: flex-end; }
.story-nav span {
    font-family: var(--font-serif); font-size: 2.6rem; line-height: 1; padding: 0 0.15em 0.12em;
    text-shadow: 0 0 8px rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease;
}
.story-slides:hover .story-nav span { opacity: 0.55; }
.story-nav:hover span, .story-nav:focus-visible span { opacity: 1; }
.story-nav--prev:hover span { transform: translateX(-3px); }
.story-nav--next:hover span { transform: translateX(3px); }
@media (hover: none) { .story-nav span { opacity: 0.45; } }      /* phones: small hint arrows */
.story-nav:focus-visible { outline: none; }

/* dots: max 7 visible; the filled one stays in the middle and only moves at the first/last 3
   (the track slides, assets/js/about.js). Dot = 9px + 10px gap = 19px step. */
.story-dots { width: fit-content; max-width: calc(7 * 19px - 10px); margin: 1.6rem auto 0; overflow: hidden; }
.story-dots__track { display: flex; gap: 10px; transition: transform 0.5s ease; padding: 2px 0; }
.story-dot { flex: 0 0 9px; }
.story-dot {
    width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--gold-dim); background: transparent;
    transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.story-dot:hover { border-color: var(--gold-light); }
.story-dot.is-active { background: var(--gold-light); border-color: var(--gold-light); transform: scale(1.15); }
/* bigger tap area on phones without changing the look */
@media (hover: none) { .story-dot { position: relative; } .story-dot::after { content: ''; position: absolute; inset: -10px; } }

/* ── Responsive ── */
@media (max-width: 1080px) {
    .profile-split { grid-template-columns: 1fr 1fr; }
    .profile-details { gap: 0 1.2rem; }            /* stays 2 columns (round 31) */
    .detail-row:nth-child(even) { padding-left: 0; }
    .story-layout { grid-template-columns: minmax(0, 760px); gap: 3.5rem; }
    .story-aside { order: -1; max-width: 420px; justify-self: center; width: 100%; align-self: start; }
    .story-sticky { position: static; }
    .story-inner::before { display: none; }
}
@media (max-width: 968px) {
    .profile-split { grid-template-columns: 1fr; }
    .philosophy-box { padding: 3rem 1.4rem 2.4rem; }
    .philosophy-parts { grid-template-columns: 1fr; }
    .philosophy-part { padding: 2rem 0.6rem 1.8rem; }
    .philosophy-part:nth-child(even)::before { display: none; }
    .philosophy-part + .philosophy-part { border-top: 1px solid rgba(201,168,76,0.12); }
    .carousel--wide .carousel__item { height: 300px; }
    .story-section { padding: 5.5rem 0; }
}
@media (max-width: 768px) {
    .profile-details { grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
    .detail-row:nth-child(even) { padding-left: 0; }
    .detail-value { font-size: 1.05rem; }
    .story-layout { margin-top: 3rem; }
    .about-closing { margin-top: 3.5rem; }
}

/* round 51: subtitle in the style of the lead sentences of the parts, a little bigger and whiter */
.philosophy-box__sub { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0.02em;
    font-size: clamp(1.25rem, 1.9vw, 1.42rem); color: #fff; opacity: 1; margin-top: 0.4rem; }