/* ============================================================
   FAQs Section
   - Heading + horizontal divider + 2-column body
   - Left: accordion list (only one open at a time)
   - Right: "Clarity Building" shape that grows from bottom on enter
   - Below FAQ heading: full-width edge-to-edge dashed line
   - Below each accordion: dashed line from left edge to gap, fades
   - Vertical dashed guide line at right padding spans whole section
   ============================================================ */


/* ── Section wrapper ── */
.faqs-section {
    /* Section-scoped horizontal pad in viewport units.
       Mirrors --pad-x (2% / 4%) but uses vw so it resolves consistently
       even inside grid cells (where % is relative to the cell, not viewport). */
    --faqs-x: 2vw;

    position: relative;
    width: 100%;
    background: var(--color-white);
    color: var(--color-black2);
    padding-top: clamp(60px, 9vh, 120px);
    overflow: hidden;
}


/* ── Heading row ── */
.faqs-section__heading-wrap {
    padding: 0 var(--faqs-x);
    margin-bottom: clamp(40px, 6vh, 80px);
}

.faqs-section__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
    color: var(--color-black2);
    margin: 0;
}


/* ── Full-width dashed line below heading (no padding) ── */
.faqs-section__hr {
    width: 100%;
    height: 0;
    border-top: 1px dashed var(--color-greyish);
}


/* ── Body (2-column on desktop/tablet) ── */
.faqs-section__body {
    position: relative;
    display: grid;
    /* Clarity column has a tighter max-width — accordion column (1fr) absorbs the
       remaining space; column-gap stays fixed so the visual gap between columns
       does not grow. */
    grid-template-columns: 1fr clamp(280px, 26%, 360px);
    /* Desktop: triplicated gap. */
    column-gap: clamp(120px, 18vw, 288px);
    /* Right padding doubled so the clarity column ends one --faqs-x in
       from the vertical dashed line (vline still sits at single --faqs-x). */
    padding: 0 calc(var(--faqs-x) * 2) 0 0;
    align-items: stretch;
}


/* ── Accordions column ──
   Larger bottom padding (desktop/tablet) so there's breathing room
   between the last accordion and the section's bottom edge. Mobile
   keeps a smaller, balanced top/bottom inside its own @media block. */
.faqs-section__accordions {
    padding: clamp(24px, 4vh, 48px) 0 clamp(64px, 11vh, 140px) 0;
}

.faqs-section__item {
    position: relative;
    padding-left: var(--faqs-x);
}

.faqs-section__trigger {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(20px, 3vh, 36px) 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.faqs-section__question {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--color-black2);
}


/* ── Arrow ──
   The source SVG points right. We first rotate it 90° to point DOWN
   (--arrow-base), then add a state offset:
   • closed: -15° (slight tilt)
   • open:   165° (tip aims toward upper-left/upper-right area)
   The SVG keeps its built-in breathing animation. */
.faqs-section__arrow {
    --arrow-base: 90deg;
    --arrow-state: -15deg;
    flex-shrink: 0;
    width: 18px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(calc(var(--arrow-base) + var(--arrow-state)));
    transition: transform 0.45s var(--ease-primary);
    transform-origin: center;
}

.faqs-section__arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.faqs-section__item.is-open .faqs-section__arrow {
    --arrow-state: 165deg;
}


/* ── Answer panel — height-animated ── */
.faqs-section__panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 0.5s var(--ease-primary),
        opacity 0.35s var(--ease-primary);
}

.faqs-section__item.is-open .faqs-section__panel {
    /* Generous cap — accommodates longer answers and avoids clipping
       when the list grows. max-height is animated so we keep it bounded
       instead of switching to `none` (which wouldn't transition). */
    max-height: 1200px;
    opacity: 1;
}

.faqs-section__answer {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-relaxed);
    color: var(--color-black2);
    max-width: 80%;
    padding-bottom: clamp(20px, 3vh, 32px);
}


/* ── Per-accordion dashed divider ──
   Spans from screen left edge to the right side of the left column
   (i.e. up to the column gap), with a soft fade on its right end. */
.faqs-section__item-divider {
    height: 0;
    border-top: 1px dashed var(--color-greyish);
    margin-left: calc(var(--faqs-x) * -1); /* extend back to viewport left edge */
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 75%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 75%, transparent 100%);
}


/* ── Clarity Building (right column) ──
   Sits in the right column of the grid, fills from top of body to bottom.
   The visible shape grows from the bottom up via clip-path on enter. */
.faqs-section__clarity {
    position: relative;
    align-self: stretch;
}

.faqs-section__clarity-shape {
    /* Inset is animated by JS (scrub-tied to scroll). Default: 100% = fully clipped. */
    --clarity-inset: 100%;

    position: absolute;
    inset: 0;
    /* Extend 1px past the section's bottom edge so subpixel rounding
       can never leave a hairline gap between this shape and whatever
       sits below it. The clip-path's bottom inset is always 0, so
       this 1px just overlaps; visually invisible. */
    bottom: -1px;
    background: var(--color-black2);
    color: var(--color-white);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    clip-path: inset(var(--clarity-inset) 0 0 0 round var(--radius) var(--radius) 0 0);
    -webkit-clip-path: inset(var(--clarity-inset) 0 0 0 round var(--radius) var(--radius) 0 0);
}

/* Fallback (no JS / mobile): show fully grown */
.faqs-section__clarity-shape.is-grown {
    --clarity-inset: 0%;
}


/* Content inside clarity shape — top-aligned, centered horizontally,
   with comfortable horizontal padding. Opacity/translate driven by JS scrub. */
.faqs-section__clarity-content {
    position: absolute;
    top: clamp(28px, 4vh, 56px);
    left: 0;
    right: 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    opacity: 0;
    transform: translateY(14px);
}

.faqs-section__clarity-shape.is-grown .faqs-section__clarity-content {
    opacity: 1;
    transform: translateY(0);
}

.faqs-section__clarity-heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--color-white);
    margin: 0;
}

.faqs-section__clarity-body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-relaxed);
    color: var(--color-greyish);
    margin: 0;
}

/* ── Clarity CTA — "rock" feel with pulsing hover and a click-to-cleave
       impact animation choreographed in JS. The CSS here owns:
       • the resting "stone slab" look (drop shadow + faint inner highlight)
       • the hover pulse keyframes (subtle scale 1.05 ↔ 1.08 + halo)
       • the .is-impacting state which disables hover styling so GSAP can
         drive transforms freely during the cleave. */
.faqs-section__clarity-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    letter-spacing: var(--tracking-btn);
    font-size: var(--text-btn);
    color: var(--color-black2);
    background: var(--color-white);
    border-radius: var(--radius);
    text-decoration: none;
    /* Inset top highlight catches the "light" — gives the slab a hint of
       depth without an outer drop shadow. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    /* Transparent placeholder border so the dashed hover border doesn't
       shift the button's box dimensions when it appears. */
    border: var(--guide-width) solid transparent;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.6, 1),
                background 0.2s var(--ease-primary),
                color 0.2s var(--ease-primary),
                border-color 0.2s var(--ease-primary),
                border-style 0s;
    position: relative;
    z-index: 4;       /* sits above the cleave halves */
    cursor: pointer;
    transform-origin: center center;
    will-change: transform;
}

/* The label is counter-scaled by JS during the cleave so the button's
   shape can grow without deforming the text. Wrapping in its own span
   gives us a transform target independent of the anchor itself. */
.faqs-section__clarity-cta-label {
    display: inline-block;
    transform-origin: center center;
    will-change: transform, opacity;
    pointer-events: none;
}

.faqs-section__clarity-cta:hover:not(.is-impacting) {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--guide-color);
    border-style: var(--guide-style);
    animation: faqsCtaPulse 1.15s ease-in-out infinite;
}

@keyframes faqsCtaPulse {
    0%, 100% { transform: scale(1.05); }
    50%      { transform: scale(1.08); }
}

/* During impact: kill the pulse + transition so GSAP can drive transforms
   without CSS fighting back. */
.faqs-section__clarity-cta.is-impacting {
    animation: none !important;
    transition: none !important;
}


/* ── Cleave overlays (created in JS) ──
   Live as siblings of .faqs-section__clarity-shape inside the wrapper, so
   they're free of the shape's clip-path and overflow:hidden — the halves
   can fly out past the shape's bounds. */

.faqs-section__cleave-half {
    position: absolute;
    inset: 0;
    background: var(--color-black2);
    border-radius: var(--radius) var(--radius) 0 0;
    pointer-events: none;
    opacity: 0;
    z-index: 5;
    will-change: transform, opacity;
}

/* --split-y is set per-click by JS to the button's vertical center inside
   the shape, so the cleave splits along the actual button line. */
.faqs-section__cleave-half--top {
    clip-path: inset(0 0 calc(100% - var(--split-y, 50%)) 0
                     round var(--radius) var(--radius) 0 0);
    -webkit-clip-path: inset(0 0 calc(100% - var(--split-y, 50%)) 0
                     round var(--radius) var(--radius) 0 0);
}

.faqs-section__cleave-half--bottom {
    clip-path: inset(var(--split-y, 50%) 0 0 0);
    -webkit-clip-path: inset(var(--split-y, 50%) 0 0 0);
}

/* Bright impact flash (briefly bleaches the building at the moment of contact) */
.faqs-section__cleave-flash {
    position: absolute;
    inset: 0;
    background: var(--color-white);
    border-radius: var(--radius) var(--radius) 0 0;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
    mix-blend-mode: screen;
}

/* Debris layer — flying chunks of "stone" radiating out from the impact line */
.faqs-section__cleave-debris {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 7;
}

.faqs-section__cleave-piece {
    position: absolute;
    width: 7px;
    height: 7px;
    background: var(--color-black2);
    border-radius: 1px;
    opacity: 0;
    will-change: transform, opacity;
}

/* Crack-line SVG flashed across the impact axis on contact */
.faqs-section__cleave-cracks {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--split-y, 50%);
    height: 220px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    overflow: visible;
}

.faqs-section__cleave-crack {
    fill: none;
    stroke: var(--color-white);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ── Vertical dashed line at right padding edge — full section height ──
   Stays at single --faqs-x (matching the global right padding edge). */
.faqs-section__vline {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--faqs-x);
    border-right: 1px dashed var(--color-greyish);
    pointer-events: none;
    z-index: 1;
}


/* ============================================================
   TABLET (still 2-column, just tighter)
   ============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
    .faqs-section {
        --faqs-x: 4vw;
    }

    .faqs-section__body {
        grid-template-columns: 1fr clamp(240px, 32%, 320px);
        /* Tablet: doubled gap. */
        column-gap: clamp(56px, 8vw, 120px);
    }

    .faqs-section__question {
        font-size: var(--text-base);
    }

    .faqs-section__answer {
        max-width: 100%;
    }
}


/* ============================================================
   MOBILE (stacked: accordions full width, then clarity below)
   ============================================================ */
@media (max-width: 767px) {
    .faqs-section {
        --faqs-x: 4vw;
    }

    .faqs-section__body {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding: 0;
    }

    /* Accordions column expands to full width, respecting the right padding */
    .faqs-section__accordions {
        padding: clamp(16px, 3vh, 32px) 0;
    }

    /* Mobile: chevron sits with doubled right padding from viewport edge */
    .faqs-section__item {
        padding-right: calc(var(--faqs-x) * 2);
    }

    .faqs-section__question {
        font-size: var(--text-base);
    }

    .faqs-section__answer {
        max-width: 100%;
    }

    /* Mobile accordion divider: edge-to-edge full screen width (no fade) */
    .faqs-section__item-divider {
        margin-right: calc(var(--faqs-x) * -2);
        -webkit-mask-image: none;
                mask-image: none;
    }

    /* Clarity column becomes a fixed-height block under the accordions,
       narrow and centered horizontally so it doesn't stretch across the screen. */
    .faqs-section__clarity {
        margin: clamp(32px, 5vh, 56px) auto 0 auto;
        width: 100%;
        max-width: clamp(200px, 60%, 240px);
        height: clamp(260px, 36vh, 340px);
    }

    .faqs-section__clarity-shape {
        position: relative;
        inset: auto;
        /* Paint 1px past the wrapper's bottom so subpixel rounding
           can never leave a hairline of section-cream visible between
           the shape and the section below. The section's overflow:hidden
           clips the extra pixel, so the visible result is just a solid
           black2 edge meeting the next section. */
        height: calc(100% + 1px);
        bottom: auto;
        /* Mobile: keeps the same scrub-driven grow animation as desktop;
           --clarity-inset is animated by JS from 100% → 0%. */
    }

    .faqs-section__clarity-content {
        position: relative;
        top: auto;
        height: 100%;
        justify-content: center;
        padding: clamp(24px, 4vh, 40px) 24px;
        /* opacity/transform are driven by JS scrub, not pinned here. */
    }
}