/**
 * TRQuestionSection / TRQuestionCard / TROptionButton Styles
 *
 * Reusable question/selection UI (role selection, onboarding questions,
 * consent choices, etc.). Used by ROOTS Slide 7 today; the same classes
 * are meant to be reused by future question screens.
 *
 * Unlike the other hero zones (.tr-hero-copy / .tr-hero-cta, both
 * absolutely positioned and a fixed short height), a question slide's
 * content is variable-height (title length, option count, wrapped
 * labels) and must be able to exceed the viewport. So this zone is its
 * own single scrollable region between the header and the bottom nav,
 * rather than being absolutely bottom/top anchored like the other zones.
 */

:root {
    /* Question zone vertical bounds: starts where the hero headline
       normally starts, ends just above the bottom nav. */
    --tr-question-scroll-top: var(--tr-hero-copy-top);
    --tr-question-scroll-bottom: calc(var(--tr-nav-total-height) + var(--tr-space-md));

    /* Question card appearance */
    --tr-question-card-bg: rgba(10, 12, 8, 0.55);
    --tr-question-card-border-color: rgba(255, 255, 255, 0.3);
    --tr-question-card-radius: var(--tr-radius-lg);
    --tr-question-card-padding: var(--tr-space-lg) var(--tr-space-lg);

    /* Question typography, derived from the already-approved hero type
       scale (never a new vw-to-number conversion -- plain length*number
       or length+-length only). */
    --tr-question-title-font-size: calc(var(--tr-hero-title-font-size) * 0.68);
    --tr-question-option-font-size: calc(var(--tr-hero-subtitle-font-size) * 0.95);

    /* Slide 7 only: extra darkening layered on top of the shared
       .tr-hero-bottom-gradient (--tr-bottom-gradient-* in tokens.css,
       used by every slide) so the helper text below the question card
       reads clearly against any background image. Percentages are in
       the same coordinate space as the shared gradient's own position
       tokens: 0%/100% is the top/bottom of the bottom-gradient box
       itself (which is --tr-bottom-gradient-height tall, bottom-anchored
       to the section), not the full section height.
       - boost-opacity: how dark the extra layer gets at its darkest.
       - boost-start: where the extra darkening begins (still 0 here).
       - boost-mid: where it reaches its full boost-opacity (holds
         from here to the bottom).
       Tune these three to go darker/lighter or move the effect up/down;
       everything else (Slides 1-6's gradient, this file's other rules)
       is untouched. */
    --tr-question-bottom-gradient-boost-opacity: 0.55;
    --tr-question-bottom-gradient-boost-start: 45%;
    --tr-question-bottom-gradient-boost-mid: 85%;
}

/* ─── Slide 7 bottom gradient reinforcement ───
   Scoped to this one section via data-section-id (set in
   tr-hero-section.js), so Slides 1-6 never match this rule and keep
   rendering the shared .tr-hero-bottom-gradient exactly as before.
   The declaration below does not change the shared gradient -- it adds
   a second, independent gradient layer (comma-separated background
   list) painted first (visually behind) the untouched original, which
   itself still reads the same shared --tr-bottom-gradient-* tokens.
   The extra layer ramps smoothly from transparent to
   --tr-question-bottom-gradient-boost-opacity between boost-start and
   boost-mid, then holds flat to the bottom -- no hard edge. */
.tr-hero-section[data-section-id="slide7"] .tr-hero-bottom-gradient {
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) var(--tr-question-bottom-gradient-boost-start),
            rgba(0, 0, 0, var(--tr-question-bottom-gradient-boost-opacity)) var(--tr-question-bottom-gradient-boost-mid),
            rgba(0, 0, 0, var(--tr-question-bottom-gradient-boost-opacity)) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-0)) 0%,
            rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-20)) var(--tr-bottom-gradient-position-20),
            rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-40)) var(--tr-bottom-gradient-position-40),
            rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-60)) var(--tr-bottom-gradient-position-60),
            rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-80)) var(--tr-bottom-gradient-position-80),
            rgba(0, 0, 0, var(--tr-bottom-gradient-opacity-100)) 100%
        );
}

/* ─── Scrollable question zone ───
   Replaces .tr-hero-copy + .tr-hero-cta for slides driven by
   sectionData.question. Header and bottom nav are untouched siblings
   outside .tr-hero-section, so they are never affected by this scroll. */
.tr-hero-question-scroll {
    position: absolute;
    top: var(--tr-question-scroll-top);
    bottom: var(--tr-question-scroll-bottom);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - (2 * var(--tr-grid-margin)));
    z-index: 10;
    overflow-y: auto;
    overflow-x: hidden;
    /* auto (not contain): once this region's own scroll range is exhausted
       in a direction, let the gesture chain through to .mobile-main so the
       outer ROOTS scroll-snap slideshow can move to the adjacent slide.
       "contain" here would trap the user on Slide 7. */
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    /* Hide the scrollbar visually (same treatment as .mobile-main) while
       keeping the region scrollable. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tr-hero-question-scroll::-webkit-scrollbar {
    display: none;
}

.tr-hero-question-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    box-sizing: border-box;
    padding-bottom: 1px; /* let the scroll height include the last element's margin */
}

/* ─── Intro copy (headline + highlight) ───
   Reuses .tr-hero-copy-headline / .tr-hero-copy-highlight for identical
   typography to Slides 1-6, but in-flow (not absolutely positioned)
   since it now shares a scrollable flex column with the question card. */
.tr-question-intro {
    display: flex;
    flex-direction: column;
    gap: var(--tr-space-md);
    text-align: center;
}

/* ─── Question section ───
   Structurally split into two independent zones (built by
   TRQuestionSection): .tr-question-content (card + helper, content-driven)
   and .tr-question-bottom-action (e.g. SALTA, bottom-anchored). flex:1
   makes this fill whatever vertical space is left after the intro block
   inside the 100%-tall .tr-hero-question-content, so .tr-question-content's
   own height (card size, option count, spacing) never moves the bottom
   action -- it always sits at the bottom of this box via margin-top:auto,
   until content genuinely overflows, at which point it simply follows in
   normal flow and the whole zone scrolls together. */
.tr-question-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    width: 100%;
    gap: var(--tr-space-md);
}

/* Questionnaire zone (card + helper): same spacing as before, just its own
   wrapper now, decoupled from where the bottom action sits. */
.tr-question-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 12px;
}

/* Bottom action zone (e.g. SALTA): pinned to the bottom of
   .tr-question-section via margin-top:auto -- not a fixed/magic margin,
   so it never needs retuning when the questionnaire above it changes. */
.tr-question-bottom-action {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: auto;
    transform: translateY(-15px);
}

/* ─── Question card ───
   Height is intentionally never set -- always exactly title + options +
   padding + gaps. */
.tr-question-card {
    width: 100%;
    box-sizing: border-box;
    background: var(--tr-question-card-bg);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid var(--tr-question-card-border-color);
    border-radius: var(--tr-question-card-radius);
    padding: var(--tr-question-card-padding);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tr-question-card-title {
    margin: 0;
    text-align: center;
    font-family: var(--tr-font-garamond-book-condensed);
    font-size: var(--tr-question-title-font-size);
    font-weight: 400;
    line-height: var(--tr-hero-title-leading);
    letter-spacing: var(--tr-hero-title-tracking);
    color: var(--tr-hero-title-color);
}

.tr-question-card-options {
    display: flex;
    flex-direction: column;
    gap: var(--tr-space-sm);
}

/* ─── Option button ───
   Full-width pill, min-height (not fixed) so a longer label can wrap
   onto a second line without breaking the layout. */
.tr-option-button {
    width: 100%;
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
    padding: calc(var(--tr-space-xs) + 3px) var(--tr-space-lg)
            calc(var(--tr-space-xs) - 2px);
    border: var(--tr-button-border-width) solid var(--tr-color-green);
    border-radius: var(--tr-button-radius);
    background: #000000;
    color: var(--tr-color-green);
    font-family: var(--tr-font-franklin-demi);
    font-size: var(--tr-question-option-font-size);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background var(--tr-transition-fast), color var(--tr-transition-fast);
}

.tr-option-button:active {
    background: var(--tr-color-green);
    color: #10160c;
}

.tr-option-button--selected {
    background: var(--tr-color-green);
    color: #10160c;
}

/* ─── Helper text ─── */
.tr-question-helper {
    margin: 0;
    text-align: center;
    width: 100%;
    font-family: var(--tr-font-franklin-book-condensed);
    font-size: var(--tr-hero-cta-description-font-size);
    line-height: var(--tr-hero-cta-description-leading);
    letter-spacing: var(--tr-hero-cta-description-tracking);
    color: var(--tr-hero-cta-description-color);
}

/* ─── Skip button ───
   Mirrors .tr-hero-cta .tr-button's small pill treatment (same
   responsive header/CTA button tokens), without needing the .tr-hero-cta
   wrapper's absolute bottom-positioning, which this zone does not use. */
.tr-question-skip.tr-button {
    height: var(--tr-hero-cta-height);
    width: fit-content;
    padding: var(--tr-hero-cta-padding-top) var(--tr-hero-cta-padding-right) var(--tr-hero-cta-padding-bottom) var(--tr-hero-cta-padding-left);
    box-sizing: border-box;
    font-family: var(--tr-font-franklin-demi);
    font-size: var(--tr-header-button-font-size);
    letter-spacing: var(--tr-header-button-tracking);
    text-transform: uppercase;
    white-space: nowrap;
    border: var(--tr-button-border-width) solid var(--tr-color-green);
    background: #000000;
    color: var(--tr-color-green);
    border-radius: var(--tr-button-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tr-question-skip.tr-button:active {
    background: var(--tr-color-green);
    color: #10160c;
}