/* ============================================
   ABOUT PAGE
   Extends the global tokens (styles.css) and
   reuses case-study patterns (case-study.css).
   ============================================ */

/* Case-study pattern tokens, scoped for this page
   (mirrors .cs-page in case-study.css) */
.about-page {
    background-color: var(--bg-primary);
    --cs-gap: 80px;
    --cs-gutter: clamp(12px, 1.5vw, 24px);
}

@media (max-width: 768px) {
    .about-page { --cs-gap: 60px; }
}

/* ============================================
   INTRO — B&W photo left, large statement right
   ============================================ */
.about-intro {
    padding: calc(var(--nav-height) + 72px) var(--pm) 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--cs-gutter);
    align-items: start;
}

.about-photo {
    grid-column: 1 / 3;
    align-self: start;
}

/* Pinned for the whole scroll, at exactly the position it loads in:
   the intro's top padding (nav height + 72px) and the width of grid
   columns 1–2 plus the gutter between them. The 12-column template means
   removing it from flow doesn't shift the intro copy.

   The grid-derived width shrank with the viewport (289px at 1920 down to
   112px by 769px). A 211px floor — the width it computes to at 1440px, the
   reference desktop size — stops it shrinking: it holds at 211px from 1440px
   all the way down, and above 1440px the original calc still wins, so wide
   screens render exactly as before. */
.about-photo img {
    position: fixed;
    top: calc(var(--nav-height) + 72px);
    left: var(--pm);
    width: max(211px, calc((100vw - 2 * var(--pm) - 11 * var(--cs-gutter)) / 12 * 2 + var(--cs-gutter)));
    height: auto;
    display: block;
    /* Renders any photo black & white — drop in a colour original */
    filter: grayscale(1);
}

.about-text {
    grid-column: 5 / 13;
    display: flex;
    flex-direction: column;
    gap: 1.15em;
}

.about-lead {
    margin: 0;
    font-size: clamp(24px, 2.7vw, 44px);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

/* Paragraph break — extra air between thoughts, like the reference */
.about-lead + .about-lead {
    margin-top: 0.35em;
}

@media (max-width: 768px) {
    .about-intro {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    .about-photo,
    .about-text {
        grid-column: 1 / -1;
    }

    /* Halved from 62% — at full width the stacked photo dominated the page
       (456px at 768px). 31% keeps it proportional to the column it sits in. */
    .about-photo {
        width: 31%;
    }

    /* Single-column layout — the photo returns to normal flow so it can't
       sit on top of the intro copy, and fills its (now halved) wrapper */
    .about-photo img {
        position: static;
        width: 100%;
    }
}

/* ============================================
   HOW I WORK — expandable rows (plus toggle)
   ============================================ */

/* Sits on the same 12-column grid as the intro so the label and the list
   line up with the intro copy (.about-text starts at column 5). */
.about-hiw {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--cs-gutter);
}

.about-hiw .cs-note-label,
.about-hiw .cs-hmw {
    grid-column: 5 / 13;
}

/* Contact buttons sit under the list, aligned to its left edge */
.about-hiw .contact-actions {
    grid-column: 5 / 13;
    justify-content: flex-start;
    margin-top: clamp(80px, 10vw, 128px);
}

/* No keyline between the list and the footer on this page */
.about-page .footer {
    border-top: none;
}

@media (max-width: 768px) {

    .about-hiw .cs-note-label,
    .about-hiw .cs-hmw,
    .about-hiw .contact-actions {
        grid-column: 1 / -1;
    }
}

/* Title + plus sit on one line; the sub copy lives in a collapsible panel. */
.hiw .cs-hmw-body {
    gap: 0;
    /* the panel supplies its own spacing so nothing shows when collapsed */
    flex: 1;
    min-width: 0;
}

.hiw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* Plus icon — same grey and height as the row number (.cs-hmw-num) */
.hiw-plus {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    /* matches the number's optical drop onto the title's cap line */
    margin-top: 4px;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.hiw-plus::before,
.hiw-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hiw-plus::before {
    width: 100%;
    height: 1.5px;
}

.hiw-plus::after {
    width: 1.5px;
    height: 100%;
}

.hiw-head:hover .hiw-plus {
    color: var(--text-primary);
}

/* Open — the vertical bar collapses, leaving a minus */
.hiw-item.is-open .hiw-plus::after {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
}

/* Collapsible panel. 0fr → 1fr animates to the content's natural height.
   Default is open so the copy is still readable without JS; the script adds
   .is-ready, which switches the rows to collapsed-by-default. */
.hiw-panel {
    display: grid;
    grid-template-rows: 1fr;
}

.hiw-panel-inner {
    overflow: hidden;
}

.hiw-panel-inner .cs-hmw-sub {
    padding-top: 8px;
}

.hiw.is-ready .hiw-panel {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.hiw.is-ready .hiw-item.is-open .hiw-panel {
    grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {

    .hiw.is-ready .hiw-panel,
    .hiw-plus::before,
    .hiw-plus::after {
        transition: none;
    }
}