/*
 * ============================================================
 * FEARANN ALBA — historic-site.css (formerly time-travel.css)
 * ============================================================
 * Styles for the Time Travel page hero:
 *   - Historic reconstruction reveal layer
 *   - Draggable phone (landscape on desktop, portrait on
 *     mobile) and its drag hint
 *   - Hero title/subtitle layout
 *   - Feature pills along the bottom
 *
 * Loaded only on the Time Travel page (see inc/enqueue.php).
 * Inherits CSS variables from main.css and reuses the shared
 * .hero / .hero__bg / .hero__gradient classes from hero.css.
 * ============================================================
 */


/*
 * ============================================================
 * HERO — OUTER SECTION
 * ============================================================
 * .hero (from hero.css) already provides 100vh, overflow
 * hidden and relative positioning. We only need additions.
 */

.tt-hero {
    /* The hero is a free-form drag area, not a flex column —
       override hero.css's space-between layout */
    display: block;

    /* Trim the hero by the height of the fixed 70px site header.
       hero.css sets height:100vh, but the body carries a 70px
       padding-top to clear the fixed header — so a full-100vh hero
       overflows the first screen by exactly the nav bar's height.
       Subtracting 70px lets the hero sit flush in the viewport
       beneath the header on both desktop and mobile.
       The svh line is a progressive enhancement (same approach as
       .tt-scrub__sticky): on mobile, 100vh counts the retracting
       address bar, so svh gives a stable "smallest viewport"
       height; browsers without svh simply keep the vh line above. */
    height: calc(100vh - 70px);
    height: calc(100svh - 70px);

    /* Pull the floor (hero.css min-height:600px) down by the same
       70px so short viewports stay consistent with the trim above. */
    min-height: calc(600px - 70px);

    /* Stop mobile browsers interpreting a drag that STARTS on
       the hero background as anything weird — scrolling still
       works because touch-action is only locked on the phone */
    user-select: none;
    -webkit-user-select: none;
}

/*
 * DESKTOP — trim a little more height
 * ------------------------------------------------------------
 * On desktop only, shorten the hero by a further 70px (roughly
 * the height of the fixed nav bar) on top of the 70px already
 * subtracted above — total 140px below 100vh. Mobile is left at
 * the base calc(100vh - 70px) defined in .tt-hero, since the
 * mobile hero height is fine as-is.
 *
 * Both hero images (.hero__bg modern photo + .tt-hero__historic
 * reconstruction layer) use inset:0, so they continue to fill
 * the container at exactly the same size and stay aligned. The
 * phone clip-path is recomputed live from rendered geometry in
 * time-travel.js, so functionality is unaffected. The 769px
 * lower bound matches the existing 768px mobile breakpoint.
 */
@media (min-width: 769px) {
    .tt-hero {
        height: calc(100vh - 140px);
        height: calc(100svh - 140px);
        min-height: calc(600px - 140px);
    }
}


/*
 * ============================================================
 * DIMMING LAYER
 * ============================================================
 * A whisper of black over the modern photo. The historic
 * layer sits ABOVE this, so the reconstruction inside the
 * phone screen appears brighter and more saturated than the
 * present-day world around it — the effect seen in the video.
 */

.tt-hero__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    pointer-events: none;
    z-index: 1;
}


/*
 * ============================================================
 * HISTORIC RECONSTRUCTION LAYER
 * ============================================================
 * Sized and positioned EXACTLY like .hero__bg (cover, centre)
 * so the two photographs stay pixel-aligned. time-travel.js
 * moves the clip-path window to match the phone screen.
 */

.tt-hero__historic {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 2;

    /* The phone (not this layer) handles all interaction */
    pointer-events: none;
}


/*
 * ============================================================
 * THE PHONE
 * ============================================================
 * Absolutely positioned wrapper that the JS drags around via
 * transform: translate3d(). Width is responsive; height comes
 * from the SVG's aspect ratio (656 × 367 landscape).
 */

.tt-phone {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;

    /* Landscape proportions on desktop */
    width: clamp(340px, 42vw, 620px);
    aspect-ratio: 656 / 367;

    cursor: grab;

    /* CRITICAL for mobile: tells the browser that touches on
       the phone belong to us — prevents the page scrolling
       while the user drags the phone around the hero */
    touch-action: none;

    /* The JS positions it before removing this — avoids a
       flash of the phone at 0,0 on page load */
    visibility: hidden;
}

.tt-phone.is-ready {
    visibility: visible;
}

.tt-phone.is-dragging {
    cursor: grabbing;
}

/* Both SVG variants fill the wrapper; the bezel is near-black
   rather than pure black so it reads as an object, with a soft
   drop shadow lifting it off the photograph */
.tt-phone__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: #0a0a0a;
    filter: drop-shadow(0 18px 45px rgba(0, 0, 0, 0.55));
}

/* Desktop: show landscape, hide portrait */
.tt-phone__svg--portrait {
    display: none;
}


/*
 * ============================================================
 * SCREEN TRACKER
 * ============================================================
 * Invisible div positioned over the transparent cut-out of
 * the SVG. The percentages below are derived from the SVG
 * path geometry:
 *
 *   Landscape (viewBox 656 × 367):
 *     screen = x 92.6 → 572.6, y 48.7 → 319.7
 *     left 14.12% · top 13.27% · width 73.17% · height 73.84%
 *
 * The JS reads this element's bounding box each frame to set
 * the clip-path on the historic layer — so the mask always
 * matches the visible cut-out, on any screen size.
 */

.tt-phone__screen {
    position: absolute;
    left: 14.12%;
    top: 13.27%;
    width: 73.17%;
    height: 73.84%;
    pointer-events: none;
}


/*
 * ============================================================
 * DRAG HINT
 * ============================================================
 * Hand icon flanked by < > chevrons, sitting just below the
 * phone (as in the videos). It travels with the phone because
 * it is a child of the wrapper. Gently pulses to invite
 * interaction; fades while actively dragging so it never
 * distracts from the reveal itself.
 */

.tt-phone__hint {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.4rem;

    display: flex;
    align-items: center;
    gap: 0.4rem;

    color: #ffffff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
    pointer-events: none;

    animation: ttHintPulse 2.4s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

.tt-phone.is-dragging .tt-phone__hint {
    opacity: 0;
}

.tt-phone__hint-hand {
    width: 34px;
    height: 34px;
}

.tt-phone__hint-chevron {
    width: 16px;
    height: 16px;
    opacity: 0.85;
}

@keyframes ttHintPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) scale(1.08); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tt-phone__hint {
        animation: none;
    }
}


/*
 * ============================================================
 * HERO TITLE + SUBTITLE
 * ============================================================
 * Desktop: left-aligned, vertically centred (per video 1).
 * The phone passes BEHIND nothing — the title is above the
 * phone in z-order but lets all pointer events through, so
 * dragging straight across the text works seamlessly.
 */

.tt-hero__title-wrap {
    position: absolute;
    z-index: 4;
    left: clamp(2rem, 6vw, 5.5rem);
    top: 50%;
    transform: translateY(-58%);

    pointer-events: none;
    user-select: none;
}

.tt-hero__title {
    margin: 0;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    font-weight: var(--weight-regular);
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.tt-hero__title--main {
    font-weight: var(--weight-regular);
    color: #ffffff;
}

.tt-hero__title--light {
    font-weight: var(--weight-light);
    color: rgba(255, 255, 255, 0.75);
}

.tt-hero__subtitle {
    margin: 0.4rem 0 0;
    font-size: clamp(0.95rem, 1.6vw, 1.35rem);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-gold);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}


/*
 * ============================================================
 * FEATURE PILLS
 * ============================================================
 * Four bordered labels along the bottom of the hero. Visually
 * they echo the .btn style (square corners, 1px border) but
 * they are inert labels — pointer-events: none means they can
 * never block the phone being dragged beneath them.
 */

.tt-hero__features {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    justify-content: center;
    gap: clamp(1rem, 4vw, 4rem);
    padding: 0 2.5rem 2.2rem;

    pointer-events: none;
    user-select: none;
}

.tt-hero__feature {
    display: inline-block;
    padding: 0.7rem 1.8rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 0; /* Square corners — core to the visual identity */

    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}


/*
 * ============================================================
 * MOBILE — max-width 768px
 * ============================================================
 * Matches video 2:
 *   - phone becomes PORTRAIT (rotated SVG variant)
 *   - title centred near the top, dark text (it sits over the
 *     bright sky in the photograph)
 *   - pills shrink and spread across the bottom in one row
 * ============================================================
 */

@media (max-width: 768px) {

    /* --- Phone: swap to the portrait SVG --- */
    .tt-phone {
        width: clamp(180px, 52vw, 240px);
        aspect-ratio: 367 / 656;
    }

    .tt-phone__svg--landscape {
        display: none;
    }

    .tt-phone__svg--portrait {
        display: block;
    }

    /* Screen cut-out percentages for the rotated geometry:
         Portrait (viewBox 367 × 656):
           screen = x 47.3 → 318.3, y 92.6 → 572.6
           left 12.89% · top 14.12% · width 73.84% · height 73.17% */
    .tt-phone__screen {
        left: 12.89%;
        top: 14.12%;
        width: 73.84%;
        height: 73.17%;
    }

    /* --- Title: centred at the top, dark over the sky --- */
    .tt-hero__title-wrap {
        left: 0;
        right: 0;
        top: 0;
        transform: none;
        padding: 110px 1.25rem 0;
        text-align: center;
    }

    .tt-hero__title {
        font-size: clamp(1.9rem, 8vw, 2.4rem);
        color: #1d1d1d;
        text-shadow: none;
    }

    .tt-hero__title--main {
        color: #1d1d1d;
    }

    .tt-hero__title--light {
        color: rgba(29, 29, 29, 0.6);
    }

    .tt-hero__subtitle {
        color: #2b2b2b;
        text-shadow: none;
        font-size: 0.9rem;
    }

    /* --- Pills: one compact row across the full width --- */
    .tt-hero__features {
        justify-content: space-between;
        gap: 0.4rem;
        padding: 0 0.75rem 1.5rem;
    }

    .tt-hero__feature {
        padding: 0.5rem 0.6rem;
        font-size: 0.55rem;
        letter-spacing: 0.06em;
    }

    /* Smaller hint on small screens */
    .tt-phone__hint-hand {
        width: 28px;
        height: 28px;
    }
}


/*
 * ============================================================
 * EXTRA-WIDE SCREENS — min-width 1900px
 * ============================================================
 * On very large displays the title and subtitle grow to roughly
 * 75% larger than their usual desktop size so the hero copy keeps
 * presence on the extra screen real estate. Each clamp() value is
 * multiplied by 1.75, preserving the same fluid min/preferred/max
 * behaviour at a bigger scale:
 *   title    clamp(2.4rem, 4.5vw, 3.6rem)  → clamp(4.2rem, 7.875vw, 6.3rem)
 *   subtitle clamp(0.95rem, 1.6vw, 1.35rem) → clamp(1.6625rem, 2.8vw, 2.3625rem)
 * ============================================================
 */
@media (min-width: 1900px) {
    .tt-hero__title {
        font-size: clamp(4.2rem, 7.875vw, 6.3rem);
    }

    .tt-hero__subtitle {
        font-size: clamp(1.6625rem, 2.8vw, 2.3625rem);
    }
}


/*
 * ============================================================
 * TIME-TRAVEL SECTION — SCROLL-SCRUBBED VIDEO
 * ============================================================
 * A full-width video pinned to the screen while the user
 * scrolls "through" it. The scroll position drives the video
 * playhead (see time-travel.js), so scrolling down plays the
 * transformation forward and scrolling up plays it in reverse.
 *
 * Layout model:
 *
 *   .tt-scrub            tall outer track (4 viewports high)
 *   └ .tt-scrub__sticky  1-viewport sticky frame — pins below
 *                        the fixed header while the track
 *                        scrolls past
 *     └ .tt-scrub__video full viewport width, height follows
 *                        the video's own 16:9 ratio
 *
 * The video plays over the scroll distance of
 * (track height − sticky height) = 3 viewports — a
 * comfortable, unhurried scrub. To make the playback faster
 * or slower, change ONLY the --tt-scrub-distance variable
 * below; the JS measures the section, so it adapts
 * automatically.
 * ============================================================
 */

.tt-scrub {
    position: relative;

    /* 3 viewports of scrubbing — the distance the user scrolls
       while the video plays from start to finish */
    --tt-scrub-distance: 300vh;

    /* 1 viewport for the pinned frame + the scrub distance */
    height: calc(100vh + var(--tt-scrub-distance));

    /* Black above/below the letterboxed video, matching the
       reference videos and the site background */
    background: var(--color-bg);
}

.tt-scrub__sticky {
    position: sticky;

    /* Pin directly BELOW the fixed 70px site header so the
       video is never hidden behind the glass header bar */
    top: 70px;

    height: calc(100vh - 70px);

    /* Small-viewport units: on mobile, 100vh includes the
       browser address bar, which slides away during scroll
       and makes vh-sized elements jump. svh is the stable
       "smallest" viewport height. Browsers that don't know
       svh simply keep the vh line above. */
    height: calc(100svh - 70px);

    /* Video top-aligned under the header (as in the reference
       videos) and horizontally centred */
    display: flex;
    align-items: flex-start;
    justify-content: center;

    /* On short, wide screens the 16:9 video can be slightly
       taller than the available space — crop the overflow
       rather than letting it spill into the next section */
    overflow: hidden;
}

.tt-scrub__video {
    /* Full width of the screen on every device; height follows
       the video's intrinsic 16:9 aspect ratio, letterboxing on
       tall/narrow (mobile) screens */
    display: block;
    width: 100vw;
    height: auto;
}

/* --- Mobile --- */
@media (max-width: 768px) {

    .tt-scrub {
        /* A slightly shorter scrub on mobile — flick-scrolling
           covers distance faster, so 3 desktop viewports would
           feel like a long tunnel on a phone */
        --tt-scrub-distance: 220vh;
    }

    .tt-scrub__sticky {
        /* The mobile header is the same 70px bar, so the pin
           offset is unchanged — kept here as an explicit hook
           should the mobile header height ever change */
        top: 70px;
    }
}


/*
 * ============================================================
 * TIME-TRAVEL SECTIONS — COMPARISON SLIDERS
 * ============================================================
 * Two near-identical sections between the hero and the
 * scroll-scrubbed video. Each pairs a title + body copy with
 * a before/after image slider:
 *
 *   .tt-compare                    section wrapper
 *   └ .tt-compare__inner           CSS grid (container)
 *     ├ .tt-compare__title         "Background" heading
 *     ├ .tt-compare__media         slider column
 *     │ └ .tt-compare__slider      the interactive frame
 *     │   ├ .tt-compare__img--under  HISTORIC photo (right of line)
 *     │   ├ .tt-compare__over        MODERN photo, clipped (left of line)
 *     │   └ .tt-compare__divider     line + circular handle
 *     └ .tt-compare__text          body paragraphs
 *
 * THE ONE NUMBER THAT MATTERS — the --tt-pos custom property
 * on .tt-compare__slider. It is the divider position as a
 * percentage from the left edge. time-travel.js writes it;
 * the clip-path AND the divider's left offset both read it,
 * so the line and the reveal can never drift apart.
 *
 * Layout modifiers (desktop only — mobile always stacks
 * title → image → text):
 *   .tt-compare--media-left    image left,  text right
 *   .tt-compare--media-right   image right, text left
 * ============================================================
 */

/*
 * --- THE GRID ---
 * Desktop: two columns. The title is grid-placed into the
 * text column alongside the body copy; the media column gets
 * the slider. Which column is which is decided by the
 * media-left / media-right modifier below.
 *
 * Mobile: a single column where source order takes over —
 * title first, then image, then text (the title is FIRST in
 * the markup for exactly this reason).
 */
.tt-compare__inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;   /* image slightly wider than text */
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    row-gap: 1.6rem;
    align-items: center;
    /* This section uses the shared .container class, which caps
       width at --max-width (1200px) and leaves large empty
       gutters on wide desktops. Lift that cap here so the
       section fills the viewport above ~1205px (the .container
       side padding still keeps content off the screen edges). */
    max-width: none;
}

/* --- media LEFT, text right (section 01) --- */
.tt-compare--media-left  .tt-compare__media { grid-column: 1; grid-row: 1 / span 2; }
.tt-compare--media-left  .tt-compare__title { grid-column: 2; align-self: end; }
.tt-compare--media-left  .tt-compare__text  { grid-column: 2; align-self: start; }

/* --- media RIGHT, text left (section 02) ---
   Same grid, mirrored: text column first, image second. */
.tt-compare--media-right .tt-compare__inner { grid-template-columns: 1fr 1.15fr; }
.tt-compare--media-right .tt-compare__media { grid-column: 2; grid-row: 1 / span 2; }
.tt-compare--media-right .tt-compare__title { grid-column: 1; grid-row: 1; align-self: end; }
.tt-compare--media-right .tt-compare__text  { grid-column: 1; grid-row: 2; align-self: start; }

/* --- Title --- */
.tt-compare__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: var(--color-text);
    /* Centre the heading within its column area */
    text-align: center;
}

/* --- Body copy --- */
.tt-compare__text {
    /* Centre the body paragraphs within their column area */
    text-align: center;
}

.tt-compare__text p {
    /* auto left/right keeps the 65ch-capped paragraph centred
       within the column, so its centre line matches the title's
       (the shorthand previously reset these to 0, pushing the
       text block flush-left while the title stayed centred). */
    margin: 0 auto 1.4rem;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--color-text-muted);
}

.tt-compare__text p:last-child {
    margin-bottom: 0;
}


/*
 * --- THE SLIDER FRAME ---
 * A fixed 3:2 box (matching the supplied photographs) that
 * both image layers fill completely with object-fit: cover —
 * identical sizing keeps the two photos pixel-aligned, the
 * same trick as the hero's phone reveal.
 */
.tt-compare__slider {
    /* Divider position — % from the left. JS drives this. */
    --tt-pos: 50%;

    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;

    /* Grabbing anywhere on the image starts a drag */
    cursor: ew-resize;

    /* pan-y: vertical swipes still scroll the page on mobile;
       horizontal swipes belong to the slider */
    touch-action: pan-y;

    user-select: none;
    -webkit-user-select: none;
}

/* Both layers fill the frame identically */
.tt-compare__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;   /* the frame handles all interaction */
}

/*
 * The OVER layer (modern photo). clip-path inset() is defined
 * by distances IN from each edge, so to show only the LEFT
 * --tt-pos of the image we clip (100% − --tt-pos) off the
 * right-hand side.
 */
.tt-compare__over {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--tt-pos)) 0 0);
    pointer-events: none;
}


/*
 * --- DIVIDER LINE + HANDLE ---
 * The line is centred on --tt-pos via its own translateX(-50%).
 * The circular handle (hand icon in a ring, chevrons either
 * side) sits at the line's vertical centre — as in the
 * reference video.
 */
.tt-compare__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--tt-pos);
    transform: translateX(-50%);
    width: 2px;
    background: #ffffff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.55);

    cursor: ew-resize;
    outline: none;
}

/* Keyboard focus ring — on the handle circle, not the line */
.tt-compare__divider:focus-visible .tt-compare__grip {
    box-shadow: 0 0 0 3px var(--color-gold-glow);
}

/* Handle row: chevron · circle · chevron */
.tt-compare__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    gap: 0.35rem;

    color: #ffffff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
    pointer-events: none;   /* drags land on the divider/frame */
}

/* The circle around the hand icon */
.tt-compare__grip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.tt-compare__hand {
    width: 22px;
    height: 22px;
}

.tt-compare__chevron {
    width: 14px;
    height: 14px;
    opacity: 0.9;
}

/* While dragging: circle fills white, hand goes dark —
   the "active" state seen in the reference video */
.tt-compare__slider.is-dragging .tt-compare__grip {
    background: #ffffff;
    color: #111111;
}

.tt-compare__slider.is-dragging {
    cursor: grabbing;
}


/*
 * --- MOBILE — max-width 768px ---
 * Single column, centred: title → image → text, matching the
 * supplied mobile screenshot. Source order does the work —
 * the grid just collapses.
 */
@media (max-width: 768px) {

    .tt-compare__inner,
    .tt-compare--media-right .tt-compare__inner {
        grid-template-columns: 1fr;
        row-gap: 1.75rem;
    }

    /* Reset desktop placement so natural source order applies:
       title (1st) → media (2nd) → text (3rd) */
    .tt-compare--media-left  .tt-compare__media,
    .tt-compare--media-right .tt-compare__media,
    .tt-compare--media-left  .tt-compare__title,
    .tt-compare--media-right .tt-compare__title,
    .tt-compare--media-left  .tt-compare__text,
    .tt-compare--media-right .tt-compare__text {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
    }

    .tt-compare__title {
        text-align: center;
    }

    .tt-compare__text {
        text-align: center;
    }

    .tt-compare__text p {
        font-size: 0.85rem;
    }

    /* Slightly smaller handle on small screens */
    .tt-compare__grip {
        width: 40px;
        height: 40px;
    }

    .tt-compare__hand {
        width: 19px;
        height: 19px;
    }
}


/*
 * ============================================================
 * TIME-TRAVEL SECTION — CENTRED TEXT BLOCK (.tt-text)
 * ============================================================
 * A pure text section: bold heading, gold sub-heading and
 * body copy, all centred on the page (per the supplied
 * desktop screenshot).
 *
 *   .tt-text                section wrapper
 *   └ .tt-text__inner       container (centred column)
 *     ├ .tt-text__title     "Background" — bold, white
 *     ├ .tt-text__subtitle  gold sub-heading, lighter weight
 *     └ .tt-text__body      body paragraphs, muted white
 *
 * Fully independent of every other section — no shared state,
 * no JS — so it can be dropped anywhere on its own.
 * ============================================================
 */

.tt-text__inner {
    text-align: center;
    /* Lift the shared .container 1200px cap so this block fills
       the viewport on wide desktops (side padding is retained). */
    max-width: none;
}

/* --- Main heading — bold white, same scale as the compare
       section titles so the page reads consistently --- */
.tt-text__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: var(--color-text);
}

/* --- Sub-heading — gold, lighter weight, slightly larger
       than body copy (per screenshot) --- */
.tt-text__subtitle {
    margin: 0.6rem auto 0;
    font-size: clamp(1.2rem, 1.9vw, 1.6rem);
    font-weight: var(--weight-light);
    line-height: 1.3;
    color: var(--color-gold);
    max-width: none;
}

/* --- Body copy — centred, muted. The generous top margin
       creates the clear gap between the headings and the
       text seen in the screenshot. main.css gives <p> a
       65ch max-width; the screenshot shows the text running
       the width of the container, so that cap is lifted
       here. --- */
.tt-text__body {
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

.tt-text__body p {
    margin: 0 auto 1.4rem;
    max-width: none;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--color-text-muted);
}

.tt-text__body p:last-child {
    margin-bottom: 0;
}


/*
 * ============================================================
 * TIME-TRAVEL SECTION — STANDALONE COMPARISON SLIDER (.tt-solo)
 * ============================================================
 * The before/after slider on its own — no heading, no body
 * copy. The slider INSIDE the section reuses the existing
 * .tt-compare__slider / .js-tt-compare markup, so all of its
 * visuals and behaviour come from the .tt-compare__* styles
 * above and from time-travel.js — nothing slider-related is
 * redefined here.
 *
 * This wrapper only:
 *   - centres the slider in the standard container
 *   - caps its width so the 3:2 frame doesn't tower over
 *     very wide screens
 *
 * Fully independent of the .tt-text section above — either
 * can be used without the other.
 * ============================================================
 */

.tt-solo__inner {
    display: flex;
    justify-content: center;
    /* Lift the shared .container 1200px cap so the standalone
       slider is free to grow above ~1205px (side padding kept). */
    max-width: none;
}

/* The slider itself (.tt-compare__slider) is width: 100% with
   a 3:2 aspect ratio. Previously capped at 1100px; that cap is
   lifted so the standalone slider is no longer confined on wide
   desktops and scales with the (now full-width) container.
   NOTE: with a 3:2 ratio the slider's height grows with its
   width, so on very wide (e.g. ultra-wide / 4K) screens it will
   become tall — reintroduce a max-width here if you want to
   limit that. */
.tt-solo .tt-compare__slider {
    max-width: none;
}

/* --- Mobile --- */
@media (max-width: 768px) {

    .tt-text__body p {
        font-size: 0.85rem;
    }

    /* Slider fills the container edge-to-edge (inside the
       standard container padding), as in the mobile shot */
    .tt-solo .tt-compare__slider {
        max-width: none;
    }
}