/**
 * tf-home — homepage content layer: hero, USP row, promo card, travel-guide
 * cards, bottom tout. Loaded by welcome.blade.php only.
 *
 * SCOPE GUARD: this file must never target the booking form/container —
 * no #resFormGrid, #resFormHeader, #resformStart*, #resFormMain, .res-form-*,
 * .grid-label, #continueProxy, #thriftyArrow, #discount_code, etc. That
 * subtree (.lp-section-form > .res-form-container) stays 100% as-is.
 */
@import url("tokens.css?v=2");

body {
    font-family: var(--tf-font-body);
    color: var(--tf-ink);
    overflow-x: hidden;
}

/* ---------------------------------------------------------------- scroll reveal
   Gated on html.tf-motion (set inline, before first paint — see welcome.blade.php)
   so a blocked/slow script never leaves a section invisible: absent the class,
   .tf-reveal simply renders at full opacity. */
.tf-motion .tf-reveal {
    opacity: 0;
    translate: 0 28px;
    transition:
        opacity 640ms var(--tf-ease),
        translate 640ms var(--tf-ease);
}

.tf-motion .tf-reveal-in {
    opacity: 1;
    translate: none;
}

@media (prefers-reduced-motion: reduce) {
    .tf-motion .tf-reveal,
    .tf-motion .tf-reveal-in {
        opacity: 1;
        translate: none;
        transition: none;
    }
}

/* ---------------------------------------------------------------- USP row ("Why book with Thrifty")
   .content-container-home is still nested inside the same Bootstrap
   .container (max-width ~1140px) that wraps the booking form above it — this
   breaks it out to the full viewport width without touching that container
   or the form inside it. */
.content-container-home {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* This was space-2 (8px), on the reasoning that the section already pulled itself
       up under the booking form with an inline margin-top:-155px, so generous padding
       here would just re-open the gap that pull existed to close.
       That pull is gone — the card lives inside the hero now and nothing overlaps this
       section — so 8px stopped being a deliberate overlap and became the section's only
       separation, leaving the heading against the hero's bottom border. space-6 gives it
       the break a section opener needs. */
    padding: var(--tf-space-6) 0 var(--tf-space-4);
    background: var(--tf-surface);
    overflow: hidden;
}

.content-container-home > .container,
.content-container-home > .th-row {
    position: relative;
    z-index: 1;
}

.content-container-home .th-h1 {
    font-family: var(--tf-font-headline);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--tf-ink);
    text-align: center;
    letter-spacing: -0.01em;
    margin: 0 0 var(--tf-space-2);
}

/* Color Wave accent mark under "Thrifty car hire" specifically — a decorative
   bar, not a native text-decoration underline, and the text itself keeps the
   heading's own ink color (no blue). */
.tf-underline {
    position: relative;
    display: inline-block;
}

.tf-underline::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -8px;
    height: 4px;
    border-radius: var(--tf-radius-pill);
    background: var(--tf-wave-gradient);
}

.content-container-home .container {
    padding-bottom: var(--tf-space-1);
}

.content-container-home .th-row {
    display: flex;
    justify-content: center;
    /* Legacy new.css sets .th-row{margin-top:80px} — that's most of the gap
       between the heading and the cards below it. */
    margin-top: var(--tf-space-5);
}

/* Editorial columns, not cards. Three boxed tiles on a landing page compete
   with the promo band and guide cards further down — everything becomes a box.
   Open columns divided by hairlines read as one continuous statement and let
   the page breathe. */
.content-container-home .th-row .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

.tf-feature {
    position: relative;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 var(--tf-space-5);
    cursor: default;
}

/* No vertical rule between the columns. The hairlines were there to tie the three
   into one block, but the icon, heading and paragraph in each column already give
   it an edge to scan down — the rules just added chrome. The column padding is
   what separates them now.
   Desktop only: the stacked mobile layout still divides with a border-top (see the
   900px block below), where the features genuinely do run together. */
.tf-feature + .tf-feature {
    border-left: 0;
}

/* The decorative glow is gone with the cards — on an open column it had no
   edge to fade against and just muddied the background. */

/* No accent rule — the icon opens each column on its own. */
.tf-feature::before {
    content: none;
}

/* The per-column Color Wave accents (--tf-accent) and glow anchors that used to
   live here are removed with the rule they fed — nothing on .tf-feature consumes
   them now. The guide cards below still use --tf-accent; that's separate. */

/* No lift/shadow on hover — there's no card to lift. The numeral brightening
   and the icon shifting is the whole interaction. */

.tf-feature:hover::before,
.tf-feature:focus-within::before {
    transform: scaleX(1);
}

/* Left-aligned: centred text works inside a boxed card, but across open
   columns it leaves three ragged edges and no shared baseline to scan down. */
.content-container-home .th-icons {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Circular badge in a soft brand-blue tint with a matching soft shadow —
   turns a flat glyph into a proper "feature tile" accent. Tints toward the
   card's own accent hue on hover so the interaction feels tied to that card. */
/* Bare mark, no tile: a badge is card language, and the tile was the last thing
   making these read as boxes. The icon now sits directly on the page. */
.tf-icon-badge {
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 var(--tf-space-3);
    border-radius: 0;
    background: none;
    box-shadow: none;
    transition: transform 320ms var(--tf-ease);
}

.tf-feature:hover .tf-icon-badge {
    transform: translateY(-4px);
}

/* Source icons are already blue/dark-toned — no recolor needed once they sit
   on the soft blue badge; just unify the sizing (a tall pin vs. two square
   glyphs at native size). */
.content-container-home .th-icons img {
    width: auto !important;
    height: 36px !important;
    max-width: 44px;
    object-fit: contain;
    margin-bottom: 0;
}

/* h3 shares this rule because these labels were demoted from h6 to h3: sitting directly under an
   h2 they skipped three levels, which breaks the document outline for screen readers and heading
   audits alike. The declarations are untouched -- only the selector widened -- so the 18px
   rendering is identical. h6 is kept in case any other markup still uses it. */
.content-container-home .th-icons h6,
.content-container-home .th-icons h3 {
    font-family: var(--tf-font-headline);
    color: var(--tf-ink) !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
    margin: var(--tf-space-1) 0 var(--tf-space-2);
}

.content-container-home .th-icons span {
    color: var(--tf-ink-soft) !important;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    /* margin-top:0 on mobile, deliberately. Legacy new.css pulls this section
       up with `margin-top:-120px!important`, a value tuned for the COLLAPSED
       booking form. The form expands to show its date/time fields, and the
       overlap is fixed, not proportional — so any negative value either leaves
       a gap when collapsed or slides the heading under the Continue button when
       expanded. Sitting the section below the form makes the spacing correct in
       both states; the padding below then controls the gap. */
    .content-container-home {
        margin-top: 0 !important;
        /* space-3, down from space-4 — the band's own top and bottom air, on top
           of which the heading and the feature rows carry their own. */
        padding: var(--tf-space-3) 0;
    }

    /* Legacy new.css sets `.lp-row{min-height:257px}` — sized for the expanded
       desktop form, so a collapsed phone form leaves empty height beneath it. */
    .lp-row {
        min-height: 0;
    }

    /* THE gap. Legacy new.css shifts the form row with
       `#lpFormRow{top:-135px!important;margin-top:55px!important}` (and
       `top:-100px` at its 767px breakpoint). `top` on a relatively-positioned
       element moves it VISUALLY but leaves its original box in the flow — so
       the form floats up while still reserving ~135px of empty space below it.
       Converting that offset to a negative margin keeps the same visual
       position but collapses the flow with it, so nothing is reserved.
       Layout scaffolding only — no form control is touched. */
    #lpFormRow {
        top: 0 !important;
        margin-top: -80px !important;
    }

    /* Gap between the heading's accent rule and the first feature. The rule is
       an ::after hanging 8px BELOW the heading's box, so this margin has to
       clear that before it reads as separation at all — at space-2 (8px) the
       rule and "WIDE SELECTION" were effectively touching.
       space-4 (24px), down from space-5 (40px): still well clear of the 8px
       overhang, without a screen's worth of white between the two. */
    .content-container-home .th-row {
        margin-top: var(--tf-space-4);
    }

    /* Space above the heading (clearing the booking form) and below it
       (clearing the accent rule, which hangs 8px under the heading's box).
       Top drops to space-3: the section's own padding below already separates
       this from the card, so 40px here was stacking gap on gap. */
    .content-container-home .container {
        padding-top: var(--tf-space-3);
        padding-bottom: var(--tf-space-3);
    }

    /* The USP row breaks out to full viewport width, so it carries no inherited
       gutter — without this the feature text runs to the screen edges. */
    .content-container-home .th-row .row {
        grid-template-columns: 1fr;
        gap: var(--tf-space-4);
        padding: 0 var(--tf-space-3);
    }

    /* Icon beside the text, not stacked above it. Stacked, each feature became
       three loose fragments with no relationship — icon, gap, heading, gap,
       copy — which is what made the section read as unstructured. A grid with
       the icon in its own column binds them, and a rule between features
       replaces the card chrome that's dropped here. */
    .tf-feature {
        display: grid;
        /* Column sized to the icon (32px max-width) rather than a wider track:
           any surplus became dead space, since the icon left-aligns in it and
           the column-gap sits on top of that. */
        grid-template-columns: 32px 1fr;
        column-gap: var(--tf-space-2);
        align-items: start;
        background: none;
        border: 0;
        border-radius: 0;
        /* Air on both sides of the divider — at 0 top padding the features ran
           together as one continuous block of text. */
        padding: var(--tf-space-4) 0;
        box-shadow: none !important;
    }

    .tf-feature + .tf-feature {
        border-top: 1px solid var(--tf-line);
        padding-top: var(--tf-space-4);
    }

    /* First feature needs no top pad — the heading's own gap already precedes
       it, and doubling them widened the space under the accent rule. */
    .tf-feature:first-child {
        padding-top: 0;
    }

    .tf-feature:last-child {
        padding-bottom: 0;
    }

    /* Accent rule is desktop-only: in the mobile icon-left row it would add a
       third column of chrome to a layout that's already tight. */
    .tf-feature::before {
        display: none;
    }

    /* No vertical rules when stacked — the horizontal divider between features
       already separates them. */
    .tf-feature + .tf-feature {
        border-left: 0;
    }

    /* First cell = the icon, second = the text block. */
    .content-container-home .tf-feature > .th-icons:first-child {
        grid-column: 1;
    }

    .content-container-home .tf-feature > .th-icons:last-child {
        grid-column: 2;
    }

    .content-container-home .th-icons {
        text-align: left !important;
    }

    /* Bare mark, matching desktop. The tinted tile left a grey box floating
       beside each heading and was the main thing making this look unfinished. */
    .tf-icon-badge {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        height: auto;
        margin: 0;
        background: none;
        box-shadow: none;
    }

    .content-container-home .th-icons img {
        height: 28px !important;
        max-width: 32px;
    }

    /* Breathing room around the heading: it sat 4px off its body copy and hard
       against the icon row above, so each feature read as one dense clump. */
    .content-container-home .th-icons h6 {
        margin: 0 0 var(--tf-space-2);
        padding-top: var(--tf-space-1);
        font-size: 15px;
    }

    /* Justified text was splitting words mid-line ("vehi-cles") and still left
       wide gaps — at ~38 characters the column is too narrow for it. Ragged
       right reads cleaner and keeps words whole. */
    .content-container-home .th-icons span {
        display: block;
        font-size: 13.5px;
        line-height: 1.6;
        text-align: left;
        hyphens: none;
        -webkit-hyphens: none;
    }
}

/* ---------------------------------------------------------------- promo band ("Welcome to Thrifty...")
   Flat, bold, full-bleed shout band — hrtz's yellow-band pattern translated to
   Thrifty Blue: one solid color, oversized headline, one button, nothing else
   competing for attention. Same breakout trick as the USP section above: this
   card is still nested inside the booking form's Bootstrap .container, so a
   plain width:100% would stay capped at ~1140px. */
.tf-promo-band {
    position: relative;
    background: var(--tf-surface-alt) !important;
    border: 0;
    border-radius: 0;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: var(--tf-space-5);
    overflow: hidden;
}

/* Abstract diagonal glow behind the headline — the one flourish on an
   otherwise flat, deliberately calm band. */
.tf-promo-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    height: 640px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 122, 195, 0.12),
        transparent 65%
    );
    pointer-events: none;
    z-index: 0;
}

/* The band's height is its content plus this padding — there is no fixed height to set, and
   giving it one would clamp the headline on a narrow window where it wraps to three lines.
   calc(space-6 + space-5) = 104px top and bottom, which is what gives the band presence as a
   full-bleed section rather than a wide paragraph. */
.tf-promo-band .card-body {
    position: relative;
    z-index: 1;
    padding: calc(var(--tf-space-6) + var(--tf-space-5)) var(--tf-space-4);
}

.tf-promo-band .next-th-h2 {
    font-family: var(--tf-font-headline);
    text-transform: uppercase;
    color: var(--tf-blue);
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 auto var(--tf-space-4);
    max-width: 46ch;
}

/* No line-clamp: the copy runs in full. Clamping to 2 lines cut it mid-word
   ("...renting for a day,a weekend,a wee") with no way to reveal the rest.
   Wider measure than the usual ~60ch because the text is centred under a
   full-width headline — a narrow column left it as a thin strip adrift in
   the band. */
.tf-promo-band .card-body p {
    color: var(--tf-ink);
    font-family: var(--tf-font-body);
    font-size: 16px;
    line-height: 1.65;
    max-width: 84ch;
    margin: 0 auto var(--tf-space-5);
}

.tf-promo-band .tf-cta {
    background: var(--tf-blue);
    color: var(--tf-white);
}

.tf-promo-band .tf-cta:hover {
    background: var(--tf-blue-deep);
    color: var(--tf-white);
}

/* ---------------------------------------------------------------- travel guide cards */
.tf-guides-header {
    text-align: center;
    padding-top: var(--tf-space-5);
}

.tf-h2 {
    font-family: var(--tf-font-headline);
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--tf-ink);
    margin: 0;
}

/* auto-fit + a fixed card width (not 1fr) means 2 guides sit as 2 evenly
   sized, centered cards instead of stretching to fill a 3-column track with
   an empty gap on the right — the layout adapts to however many exist. */
/* The track MINIMUM is what sets the column count — auto-fit packs in as many
   minimums as fit, then shares the remainder.

   Back to three columns. 440px forced two, which widened each card to ~520px:
   a guide excerpt is a couple of lines, and at that width it ran as one long
   measure with the thumbnail stretched to match. Three ~350px cards suit both
   the content and the three guides the homepage actually shows. */
/* MUST stay #id-scoped: legacy new.css:73 is
   `#banner_content .homepage-touts-section{display:flex;max-width:100%}`.
   An ID beats a class no matter which file loads last, so a class-only rule
   here left the cards in the legacy flex layout — `display:grid` never
   applied and every track change was inert. */
#banner_content .homepage-touts-section {
    display: grid;
    /* 3 x 350 + 2 x 24px gap = 1098, inside the 1100 the 1140 cap leaves after padding. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 350px));
    justify-content: center;
    /* The legacy rule quoted above also carries `align-items: center`, and this
       rule only overrode `display` — so the centring survived into the grid.
       In grid that means each item sizes to its own content and floats in the
       middle of its track, which is why a card with a one-line title sat short
       AND vertically centred beside its taller neighbours. Stretch is the grid
       default; it has to be restated here only because the legacy rule set
       otherwise at the same specificity. */
    align-items: stretch;
    gap: var(--tf-space-4);
    max-width: 1140px;
    margin: var(--tf-space-4) auto 0;
    padding: 0 20px;
}

@media (max-width: 1000px) {
    /* 1fr, not a capped track: below two columns a fixed minimum would
       overflow the viewport, and a max-width would leave dead margins.
       Padding drops to 0 because legacy new.css already gives #banner_content
       15px a side on mobile — keeping our 20px made 35px of dead margin. */
    #banner_content .homepage-touts-section {
        grid-template-columns: 1fr;
        padding: 0;
    }
}

/* Scoped to the guides grid ONLY. `.homepage-tout` is also worn by both halves
   of the Travel Safely row (.tf-safety-copy / .tf-safety-fleet); unscoped, the
   width:100% + max-width:none here forced each to full width and the row
   wrapped into a column.
   max-width clears legacy `.homepage-tout-lower{max-width:500px}` (new.css:88),
   which otherwise caps the guide card below its grid track. */
#banner_content .homepage-tout {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* The guide cards also carry .homepage-tout-primary-left, and legacy new.css:81
   is `#banner_content .homepage-tout-primary-left{padding-right:30px!important}`.
   That inset the white box on ONE side, so the card looked shifted left with a
   dead strip on the right. ID-scoped + !important to match it. */
#banner_content .homepage-tout.homepage-tout-primary-left {
    padding: 0 !important;
}

/* Equal card heights across the row.

   Everything needed for this was already in place -- the grid stretches its
   items, .homepage-tout-box is a flex column with height:100%, the excerpt is
   clamped to three lines and .tf-card-cue has margin-top:auto to pin itself to
   the bottom. The chain broke one level above the box: each card is wrapped in
   an <a>, and that anchor sized to its content. height:100% on the box resolved
   against a parent of height auto, which CSS ignores, so every card fell back to
   content height and a two-line title made one card taller than its neighbours.

   Stretching the anchor is the whole fix. flex:1 rather than height:100% on the
   box, because inside a column flex container the main axis is vertical and
   children size to content unless told to grow. */
#banner_content .homepage-tout {
    display: flex;
}

#banner_content .homepage-tout > a {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

#banner_content .homepage-tout > a > .homepage-tout-box {
    flex: 1;
}

/* Hairline ring + layered shadow instead of a single flat drop shadow: reads
   as an elevated surface rather than an outlined box. The Color Wave accent
   moves off the card's top border and onto the image (see .tf-guide-thumb::after)
   so the photo, not a stray rule, is the first thing the eye meets. */
.homepage-tout-box {
    position: relative;
    background: var(--tf-surface);
    border: 0 !important;
    border-radius: var(--tf-radius-lg) !important;
    box-shadow:
        0 0 0 1px rgba(16, 24, 40, 0.05),
        0 2px 4px -1px rgba(16, 24, 40, 0.04),
        0 12px 28px -10px rgba(16, 24, 40, 0.14);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition:
        transform 260ms var(--tf-ease),
        box-shadow 260ms var(--tf-ease);
}

/* Accent now sits at the FOOT of the image as a 3px bar, keeping the Color Wave
   rotation shared with the USP cards. It grows from 0 to full width on hover,
   which gives the card a reason to animate beyond a lift. */
.tf-guide-thumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 2;
    background: var(--tf-accent, var(--tf-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms var(--tf-ease);
}

.homepage-tout:nth-child(1) .homepage-tout-box {
    --tf-accent: var(--tf-magenta);
}
.homepage-tout:nth-child(2) .homepage-tout-box {
    --tf-accent: var(--tf-red);
}
.homepage-tout:nth-child(3) .homepage-tout-box {
    --tf-accent: var(--tf-orange);
}
.homepage-tout:nth-child(4) .homepage-tout-box {
    --tf-accent: var(--tf-yellow);
}

.homepage-tout-box:hover .tf-guide-thumb::after {
    transform: scaleX(1);
}

.homepage-tout-box:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 0 1px rgba(16, 24, 40, 0.06),
        0 18px 40px -12px rgba(16, 24, 40, 0.28);
}

/* Wrapper gets the gradient placeholder; the <img> paints over it, or is
   removed by onerror (see welcome.blade.php) leaving the gradient visible —
   a broken-image glyph never shows. */
.tf-guide-thumb {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--tf-blue-deep), var(--tf-blue));
}

/* Decorative map-pin mark so an empty placeholder reads as a deliberate
   "photo coming soon" card rather than a broken/missing image. Painted
   behind the <img> (see z-index below), so it's invisible once a real photo
   loads and only shows when onerror removes the img. */
.tf-guide-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.2'%3E%3Cpath d='M12 21s7-6.5 7-11a7 7 0 10-14 0c0 4.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")
        center / 44px no-repeat;
    opacity: 0.3;
}

/* Color Wave stripe along the bottom edge of the placeholder — a brand mark
   present even before a real photo is uploaded. */
.tf-guide-thumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: var(--tf-wave-gradient);
}

/* ID-scoped to beat legacy new.css:85
   `#banner_content .homepage-tout-image{height:280px}` — otherwise the thumb
   image renders 100px taller than the .tf-guide-thumb frame around it. */
#banner_content .homepage-tout-image,
.homepage-tout-image {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Must track .tf-guide-thumb's height or the photo underfills its frame. */
    height: 210px;
    object-fit: cover;
    display: block;
    transition: transform 300ms var(--tf-ease);
}

.homepage-tout-box:hover .homepage-tout-image {
    transform: scale(1.06);
}

/* Legacy new.css makes this an absolutely-positioned, 90%-opacity overlay
   caption (designed for a full-bleed photo card with text washed over the
   bottom) — that's why it read as a translucent blue-tinted panel sitting on
   top of the image instead of a normal block below it. Restoring static flow
   here is what makes it a plain card body again. */
.homepage-tout-livetext {
    position: static;
    z-index: auto;
    opacity: 1;
    height: auto;
    width: auto;
    background: var(--tf-surface);
    padding: var(--tf-space-3);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Floats over the photo's lower-left. Sits above the accent bar (z-index 3 vs
   2) and clears it by 3px so the two never touch. */
.tf-guide-date {
    position: absolute;
    left: var(--tf-space-3);
    bottom: calc(var(--tf-space-3) + 3px);
    z-index: 3;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(4px);
    border-radius: var(--tf-radius-pill);
    padding: 4px 12px;
    font-family: var(--tf-font-subtext);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tf-ink);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.16);
}

/* Casing is normalised in welcome.blade.php, not here: text-transform applies
   once, so `capitalize` would leave an all-caps entry ("RIZAL TRAVEL GUIDE")
   exactly as typed. */
.homepage-tout-livetext h4 {
    font-family: var(--tf-font-headline);
    color: var(--tf-ink);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 var(--tf-space-2);
    transition: color 200ms var(--tf-ease);
}

.homepage-tout-box:hover .homepage-tout-livetext h4 {
    color: var(--tf-blue);
}

.tf-card-cue {
    /* align-self:flex-end pushes it to the card's RIGHT edge (the parent is a
       flex column, so the cross axis is horizontal); margin-top:auto pins it to
       the BOTTOM regardless of excerpt length, so cues line up across a row. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
    margin-top: auto;
    padding-top: var(--tf-space-3);
    font-family: var(--tf-font-subtext);
    font-size: 13px;
    font-weight: 600;
    color: var(--tf-blue);
}

/* Brand arrow asset, replacing the CSS triangle. */
.tf-card-cue-arrow {
    width: 26px;
    height: auto;
    flex: none;
    transition: transform 200ms var(--tf-ease);
}

.homepage-tout-box:hover .tf-card-cue-arrow {
    transform: translateX(4px);
}

/* The CSS triangle is gone — the brand arrow image supersedes it. */

.homepage-tout-box:hover .tf-card-cue {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tf-guides-more {
    text-align: center;
    margin: var(--tf-space-4) 0 0;
}

/* Clamped to 3 lines so cards keep a consistent body height regardless of how
   long each guide's excerpt runs — ragged card heights were the main thing
   making the row look untidy. */
.homepage-tout-ctabox p {
    color: var(--tf-ink-soft);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Travel Safely & Confidently" tout row, bottom of page.
   Legacy new.css fights this layout hard: `.homepage-tout-image{width:100%
   !important;height:245px;max-width:545px}` applies to the small badge icon
   too (that's what was stretching it to the full width of its flex box,
   shoving the text column off to one side with a phantom gap), and
   `.homepage-touts-section-bottom{margin-bottom:-85px !important;
   padding-top:100px}` was adding a large negative margin + top padding on
   top of that. Every legacy !important below has a matching !important here
   (this file loads after new.css, so at equal specificity+importance the
   later rule wins). */
/* Full-bleed white, no card: the fleet sits directly on the page and its
   image runs down to meet the footer, as in the original design.
   SINGLE OWNER of the gap above this section. Four sources used to stack here
   — this margin, this padding, .tf-guides-more's bottom margin, and legacy
   new.css:234 `.homepage-touts-section-bottom{padding-top:100px}` — adding up
   to ~180px of blank white that read as a rendering fault. */
/* Grey band behind the card — the card reads as an object sitting on the page
   rather than a white shape lost against white. */
.homepage-tout-container {
    background: var(--tf-surface-alt);
    padding: var(--tf-space-5) 0;
    margin-top: var(--tf-space-6);
}

.homepage-touts-section-bottom {
    position: relative;
    z-index: 2;
    display: flex !important;
    /* nowrap, deliberately: with wrap enabled every padding change had to be
       re-checked against the flex-basis sum, and exceeding it dropped the fleet
       onto its own line. Combined with min-width:0 on both halves they now
       shrink to fit instead of breaking. Mobile still stacks — its media query
       sets flex-direction:column, where wrapping is irrelevant. */
    flex-wrap: nowrap;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--tf-space-5);
    /* Wider than the 1140px page grid: this card holds a side-by-side row with
       a large fixed-aspect image, so it needs more room than the text sections
       above it. margin also resets legacy new.css's
       `margin-bottom:-85px !important`. */
    max-width: 1320px !important;
    margin: 0 auto !important;
    /* Viable at 64px a side now that both halves carry min-width:0 — before
       that, the 128px it removed from the row forced them to wrap. */
    padding: var(--tf-space-6) var(--tf-space-6) !important;
    background: var(--tf-surface);
    border-radius: var(--tf-radius-lg);
    box-shadow: var(--tf-shadow-card);
    overflow: hidden;
}

/* min-width:0 is what keeps this a single row. Flex items default to
   `min-width:auto`, i.e. they refuse to shrink below min-content — and here
   min-content is ~376px (badge + longest word) plus ~600px (the fleet PNG's
   intrinsic width) plus the gap, which just exceeds the card's inner width and
   forced a wrap. */
.tf-safety-copy {
    display: flex !important;
    align-items: center;
    gap: var(--tf-space-4);
    flex: 1 1 440px;
    min-width: 0;
    max-width: 620px;
}

/* Takes the remainder after the fixed-width badge — without flex:1 it sized to
   content and the heading broke across three lines. */
.tf-safety-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* The !importants here are what actually beat the legacy rule — without
   them the badge silently reverts to width:100% no matter what else is set. */
.tf-safety-copy .homepage-tout-image {
    width: 170px !important;
    height: 170px !important;
    max-width: 170px !important;
    object-fit: contain;
    flex: none !important;
    padding: var(--tf-space-2);
    background: var(--tf-surface-alt);
    border-radius: 50%;
}

.tf-safety-text h4 {
    font-family: var(--tf-font-headline) !important;
    color: var(--tf-blue) !important;
    font-size: 32px;
    font-weight: 700 !important;
    margin: 0 0 var(--tf-space-2);
}

/* Belt-and-suspenders: guarantee white, non-underlined text on this specific
   CTA — legacy anchor rules elsewhere on the page have a habit of leaking
   blue/underline back onto links via higher-specificity descendant selectors. */
.tf-safety-text .tf-cta,
.tf-safety-text .tf-cta:hover,
.tf-safety-text .tf-cta:focus-visible {
    color: var(--tf-white) !important;
    text-decoration: none !important;
}

/* Wider than its label needs: it's the section's only action, and at intrinsic
   width it read as small beside the badge and the fleet image. */
.tf-safety-text .tf-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 0 var(--tf-space-5);
    height: 52px;
    line-height: 1;
}

.tf-safety-text p {
    color: var(--tf-ink);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 var(--tf-space-2);
}

/* Sits flush on the footer: no bottom padding anywhere below it, and the
   image's own baseline gap removed via display:block.
   The source PNG (600x249) carries transparent padding beneath the wheels, so
   the negative bottom margin pulls that dead space below the footer edge —
   otherwise the cars appear to float above the blue band. Scales with the
   image (%, not px) so it holds at every width. */
/* Basis reduced from 560px so the copy column claims more of the row — the
   fleet still grows into any space the text doesn't use. */
.tf-safety-fleet {
    flex: 1 1 460px;
    min-width: 0;
    max-width: 660px;
    align-self: flex-end;
}

/* margin-bottom 0 now the fleet sits inside a card: the negative pull existed
   to cross onto the footer, and against a card edge it would simply clip. */
.tf-safety-fleet img {
    width: 100% !important;
    max-width: 760px;
    height: auto !important;
    display: block;
    margin-bottom: 0;
}

@media (max-width: 800px) {
    .tf-promo-band {
        margin-top: var(--tf-space-4);
    }

    .tf-promo-band .card-body {
        padding: var(--tf-space-6) var(--tf-space-4);
    }

    .tf-guides-header {
        padding-top: var(--tf-space-4);
    }

    /* Tinted band so the section has a beginning and an end — on white it
       floated between the guides above and the fleet below with no boundary. */
    .homepage-tout-container {
        background: var(--tf-surface-alt);
        padding: var(--tf-space-5) 0 0;
        margin-top: var(--tf-space-5);
    }

    /* Left-aligned, not centred: four centred elements (badge, heading, body,
       CTA) gave the eye no reading edge and no hierarchy. A single left edge
       plus grouped spacing does. */
    /* No card on mobile — the card chrome is desktop-only. At phone width a
       boxed card inside a tinted band is two nested containers doing the same
       job; the band alone is enough to bound the section. */
    .homepage-touts-section-bottom {
        flex-direction: column;
        align-items: stretch !important;
        text-align: center;
        gap: var(--tf-space-3);
        padding: 0 var(--tf-space-3) !important;
        min-height: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    /* flex:0 0 auto is the important part. The base rules use flex-basis
       (340px / 560px) to size these as COLUMNS; once the container turns
       `flex-direction: column` that basis becomes a HEIGHT, so the fleet block
       was ~560px tall around a ~150px image — the empty remainder is what read
       as a huge gap above the footer. */
    /* Badge beside the heading at a supporting size: it's a trust mark, not the
       message, so it shouldn't hold the top slot of greatest visual weight. */
    /* Stacked and centred. As a row the badge occupied a left column that only
       the heading sat beside — the body copy and CTA below started at the text's
       left edge, leaving a dead notch under the badge. */
    .tf-safety-copy {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 100%;
        gap: var(--tf-space-3);
    }

    .tf-safety-copy .homepage-tout-image {
        width: 128px !important;
        height: 128px !important;
        max-width: 128px !important;
        margin-top: 0;
    }

    /* Capped measure so the heading breaks predictably into two lines instead
       of wherever the viewport happens to land. */
    /* max-width dropped with the row layout: the 18ch cap existed to control
       wrapping in the narrow column beside the badge. Stacked, the heading has
       the full width and fits on one line. */
    .tf-safety-text h4 {
        font-size: 22px;
        line-height: 1.25;
        max-width: none;
        margin-bottom: var(--tf-space-2);
    }

    /* Proximity: 8px heading-to-body (related), 24px body-to-CTA (not). */
    .tf-safety-text p {
        margin-bottom: var(--tf-space-4);
    }

    /* inline-flex + auto margins so it sizes to its label and centres, rather
       than stretching edge to edge — a full-width bar under centred text reads
       as a form submit, not a secondary "learn more" link. */
    .tf-safety-text .tf-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 180px;
        margin: 0 auto;
        padding: 0 var(--tf-space-4);
        height: 48px;
        line-height: 1;
        text-align: center;
    }

    /* Widened by cancelling the section's own side padding rather than with
       `width:100vw`: 100vw counts the scrollbar and ignores this container's
       padding, which overflowed the page and pushed every section off-centre. */
    .tf-safety-fleet {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        margin-left: calc(-1 * var(--tf-space-3));
        margin-right: calc(-1 * var(--tf-space-3));
        margin-top: var(--tf-space-3);
    }

    .tf-safety-fleet img {
        max-width: 100%;
    }
}