/* ---------------------------------------------------------------------------
   Homepage sections.

   Ported from the legacy /v2 mockup, whose stylesheet lived inline in the view
   and carried every layout variant at once — 8,180 lines covering eleven
   sections with two to five alternatives each. This is the subset the chosen
   variants use: a rule survives only if something on the ported page still
   names its class.

   Tokens, typography, buttons, header, footer, section shell, request tray and
   the closing band are in site.css, which every page loads. Nothing is
   duplicated between the two files.

   Selectors keep the mockup's .gqv2 scope — see the note at the top of
   site.css for why.

   Block order follows the mockup, not the page; the running order is set by
   app/Views/website/home/index.php.
   --------------------------------------------------------------------------- */

.gqv2 .gqv2-slide-badge {
        display: inline-block;
        border: 1.5px solid var(--gq-gold);
        color: var(--gq-gold);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 6px 16px;
        border-radius: 999px;
        margin-bottom: 16px;
}

/* vibe-colored badge (background set inline from the vibe system) */
    .gqv2 .gqv2-slide-badge-vibe {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45);
}

.gqv2 .gqv2-slide-badge-vibe i {
        font-size: 12px;
}

.gqv2 .gqv2-slide-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
}

/* ==================== SEARCH SECTION (below hero) ==================== */
    /* ==================== VALUE PROP BAND ====================
       A slim strip under the hero whose only job is to correct the category
       assumption before the visitor reaches the search bar. */
    /* .gqv2-section is declared later in this sheet with 78px block padding, so
       these need the extra class to win — a value-prop strip should read as part
       of the hero, not as a full content section. */
    .gqv2 .gqv2-section.gqv2-vp {
        background: var(--gq-sand);
        border-top: 1px solid rgba(18, 59, 99, .08);
        border-bottom: 1px solid rgba(18, 59, 99, .08);
        padding: 20px 0;
}

/* --- Option B: what you can do --- */
    .gqv2 .gqv2-vp-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px 26px;
}

.gqv2 .gqv2-vp-list li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 600;
        color: var(--gq-navy);
        white-space: nowrap;
}

.gqv2 .gqv2-vp-list i {
        font-size: 13px;
        color: var(--gq-orange);
}

/* separator dots between items — drawn, not typed, so they never wrap alone */
    .gqv2 .gqv2-vp-list li + li::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(18, 59, 99, .28);
        margin-right: 18px;
}

@media (max-width: 760px) {
    .gqv2 .gqv2-section.gqv2-vp { padding: 14px 0;
    }

    .gqv2 .gqv2-vp-list { gap: 8px 16px;
    }

    .gqv2 .gqv2-vp-list li { font-size: 13.5px;
    }

    /* stacked on a phone, the dots read as bullets pointing at nothing */
        .gqv2 .gqv2-vp-list li + li::before { display: none;
    }
}

.gqv2 .gqv2-searchbar {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, #ffffff 0%, #f1f8fc 100%);
        border-bottom: 1px solid var(--gq-line);
        padding: 46px 0 42px;
        text-align: center;
}

/* animated aurora — soft travel-toned washes drifting slowly behind the search */
    .gqv2 .gqv2-searchbar::before {
        content: "";
        position: absolute;
        inset: -25%;
        /* washes kept very faint — this is texture behind the search, not a feature */
        background:
            radial-gradient(28% 40% at 20% 30%, rgba(36, 116, 166, .05), transparent 70%),
            radial-gradient(26% 38% at 82% 24%, rgba(0, 131, 143, .04), transparent 70%),
            radial-gradient(30% 42% at 68% 78%, rgba(255, 118, 0, .025), transparent 70%),
            radial-gradient(24% 36% at 32% 82%, rgba(95, 143, 114, .035), transparent 70%);
        animation: gqv2SearchAurora 24s ease-in-out infinite alternate;
        pointer-events: none;
        z-index: 0;
}

@keyframes gqv2SearchAurora {
        0%   { transform: translate3d(0, 0, 0) scale(1); }
        50%  { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
        100% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}

/* faint dot texture on top, masked to fade at the edges */
    .gqv2 .gqv2-searchbar::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(18, 59, 99, .032) 1px, transparent 1.6px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(ellipse 80% 74% at 50% 44%, #000 34%, transparent 100%);
        mask-image: radial-gradient(ellipse 80% 74% at 50% 44%, #000 34%, transparent 100%);
        pointer-events: none;
        z-index: 0;
}

/* animated flight path over the aurora */
    .gqv2 .gqv2-search-anim {
        position: absolute; inset: 0; width: 100%; height: 100%;
        pointer-events: none; z-index: 0;
}

/* the plane is the one moving object the eye locks onto, so it drops the most */
    .gqv2 .gqv2-route-flow { opacity: .065; animation: gqv2RouteFlow 1.1s linear infinite;
}

.gqv2 .gqv2-route-pins { opacity: .055;
}

.gqv2 .gqv2-plane { opacity: .12;
}

@media (prefers-reduced-motion: reduce) {
    .gqv2 .gqv2-searchbar::before { animation: none;
    }

    .gqv2 .gqv2-route-flow { animation: none;
    }

    .gqv2 .gqv2-plane { display: none;
    }
}

/* keep the search UI above the background decoration */
    .gqv2 .gqv2-searchbar > .gqv2-wrap { position: relative; z-index: 1;
}

.gqv2 .gqv2-searchbar h2 {
        font-size: clamp(24px, 3vw, 36px);
        font-weight: 700;
        margin: 0 0 10px;
}

.gqv2 .gqv2-search-intro {
        font-size: 16px;
        line-height: 1.55;
        color: var(--gq-mist);
        max-width: 640px;
        margin: 0 auto 26px;
}

/* mode tabs */
    .gqv2 .gqv2-search-tabs {
        display: inline-flex;
        gap: 4px;
        background: #fff;
        border: 1px solid var(--gq-line);
        /* rounded rectangle (matches the 16px location card below), not a stadium */
        border-radius: 16px;
        padding: 5px;
        margin-bottom: 22px;
        position: relative;   /* anchor for the sliding pill */
        /* the section behind is near-white, so lift the track off it with a soft
           shadow rather than an inset groove — reads as a floating control */
        box-shadow: 0 6px 22px -10px rgba(18, 59, 99, .22), 0 1px 2px rgba(18, 59, 99, .05);
}

/* The pill is one element that MOVES, rather than a background that turns on
       and off per tab — that's what makes the switch read as a single object
       travelling instead of two things blinking. Width animates too, because the
       three labels aren't the same length. */
    .gqv2 .gqv2-tab-pill {
        position: absolute;
        top: 0;
        left: 0;
        /* size comes from JS (offsetWidth/offsetHeight of the active tab) so the
           pill is correct whether the tabs sit in a row or stack */
        /* 11px = track's 16px minus its 5px padding, so the pill's corners run
           parallel to the track's inner edge and nest evenly */
        border-radius: 11px;
        /* soft diagonal gradient + a top highlight give the pill depth */
        background: linear-gradient(135deg, var(--gq-blue) 0%, var(--gq-blue-dark) 100%);
        box-shadow: 0 6px 16px -6px rgba(36, 116, 166, .7),
                    inset 0 1px 0 rgba(255, 255, 255, .18);
        transition: transform .38s cubic-bezier(.4, 0, .2, 1),
                    width     .38s cubic-bezier(.4, 0, .2, 1),
                    height    .38s cubic-bezier(.4, 0, .2, 1);
        pointer-events: none;
        z-index: 0;
}

/* first paint must not fly in from the left */
    .gqv2 .gqv2-tab-pill.no-anim { transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .gqv2 .gqv2-tab-pill { transition: none;
    }
}

.gqv2 .gqv2-search-tab {
        border: 0;
        background: transparent;
        /* a shade darker than --gq-slate for a bit more presence on the white track */
        color: #3f4b60;
        position: relative;   /* sit above the pill */
        z-index: 1;
        font-family: var(--gq-font);
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .2px;
        padding: 11px 24px;
        border-radius: 11px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        white-space: nowrap;
        transition: color .18s ease;
}

.gqv2 .gqv2-search-tab i {
        font-size: 13px;
        opacity: .85;
        transition: opacity .18s ease, transform .18s ease;
}

.gqv2 .gqv2-search-tab:hover { color: var(--gq-navy);
}

.gqv2 .gqv2-search-tab:hover i { opacity: 1;
}

/* The pill paints the background now, so the active tab only owns its label. */
    .gqv2 .gqv2-search-tab.is-active {
        background: transparent;
        color: #fff;
        box-shadow: none;
}

.gqv2 .gqv2-search-tab.is-active i { opacity: 1;
}

.gqv2 .gqv2-search-tab.is-active:hover { color: #fff;
}

.gqv2 .gqv2-search-panel[hidden] { display: none;
}

/* animatable panels container (height transitions on tab switch) */
    /* overflow visible so the vibe hover popovers aren't clipped; the panel
       crossfade is opacity-only and never needed clipping */
    .gqv2 .gqv2-panels { overflow: visible;
}

.gqv2 .gqv2-search-panel.gqv2-panel-in { animation: gqv2PanelIn .26s ease both;
}

.gqv2 .gqv2-loc-status {
        font-size: 11px;
        font-weight: 700;
        color: var(--gq-blue-dark);   /* was the dead --gq-teal-dark: no status colour at all */
        white-space: nowrap;
        opacity: 0;
        transition: opacity .3s ease;
}

.gqv2 .gqv2-loc-status.show { opacity: 1;
}

/* ---- resolved-location card ---- */
    .gqv2 .gqv2-loccard {
        display: flex;
        align-items: center;
        gap: 16px;
        max-width: 620px;
        margin: 0 auto;
        padding: 12px 16px 12px 20px;
        background: #fff;
        border: 1px solid var(--gq-line);
        border-radius: 16px;
        box-shadow: var(--gq-shadow-sm);
        text-align: left;
}

.gqv2 .gqv2-loccard[hidden] { display: none;
}

.gqv2 .gqv2-loccard-pin {
        flex-shrink: 0;
        font-size: 22px;
        color: var(--gq-navy);
}

/* the text is a button so it's clickable (and keyboard-focusable) to edit;
       reset the native chrome and keep the two-line layout */
    .gqv2 .gqv2-loccard-text {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        padding: 2px 4px;
        margin: -2px 0;
        border: 0;
        border-radius: 8px;
        background: none;
        font-family: var(--gq-font);
        line-height: 1.25;
        text-align: left;
        cursor: text;
        transition: background .15s ease;
}

.gqv2 .gqv2-loccard-text:hover { background: var(--gq-cloud);
}

/* inline edit input — sits in the same slot as the text */
    .gqv2 .gqv2-loccard-input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: none;
        font-family: var(--gq-font);
        font-size: 15.5px;
        font-weight: 700;
        color: var(--gq-navy);
        padding: 4px 0;
}

.gqv2 .gqv2-loccard-input[hidden] { display: none;
}

.gqv2 .gqv2-loccard-input::placeholder { color: var(--gq-mist); font-weight: 500;
}

/* edit state: swap the text for the input, and drop the redundant change link
       (Nearby stays — "or use my location") */
    .gqv2 .gqv2-loccard[data-loc-state="edit"] .gqv2-loccard-text { display: none;
}

.gqv2 .gqv2-loccard[data-loc-state="edit"] .gqv2-loccard-change { display: none;
}

.gqv2 .gqv2-loccard[data-loc-state="edit"] { border-color: var(--gq-blue); box-shadow: var(--gq-shadow);
}

.gqv2 .gqv2-loccard-city {
        font-size: 15.5px;
        font-weight: 800;
        color: var(--gq-navy);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.gqv2 .gqv2-loccard-region {
        font-size: 13.5px;
        font-weight: 500;
        color: var(--gq-slate);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.gqv2 .gqv2-loccard-region:empty { display: none;
}

/* "Change location" — divider on its left, blue link on the right */
    /* both actions live inside the card on the right */
    .gqv2 .gqv2-loccard-actions {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
}

/* "Nearby" — the GPS action, as a text link matching "Change location" so
       the two actions read as a consistent pair rather than mixed styles.
       The compound selector (.gqv2-loccard-near.gqv2-near) outranks the shared
       .gqv2-near pill rule that also lands on this button. */
    .gqv2 .gqv2-loccard-near.gqv2-near {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 4px 10px;
        border: 0;
        background: none;
        color: var(--gq-blue);
        font-family: var(--gq-font);
        font-size: 13.5px;
        font-weight: 800;
        cursor: pointer;
        white-space: nowrap;
        border-radius: 8px;
        transition: color .18s ease, background .18s ease;
}

.gqv2 .gqv2-loccard-near.gqv2-near i { color: var(--gq-blue); font-size: 13px;
}

.gqv2 .gqv2-loccard-near.gqv2-near:hover { color: var(--gq-blue-dark); background: var(--gq-blue-tint); border-color: transparent;
}

.gqv2 .gqv2-loccard-change {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 4px 4px 4px 14px;
        border: 0;
        border-left: 1px solid var(--gq-line);
        background: none;
        color: var(--gq-blue);
        font-family: var(--gq-font);
        font-size: 13.5px;
        font-weight: 800;
        line-height: 1.15;
        text-align: left;
        cursor: pointer;
        transition: color .18s ease;
}

.gqv2 .gqv2-loccard-change:hover { color: var(--gq-blue-dark);
}

.gqv2 .gqv2-loccard-change i { font-size: 12px;
}

/* while detecting, dim the city text and hide the change link */
    .gqv2 .gqv2-loccard[data-loc-state="detecting"] .gqv2-loccard-city { color: var(--gq-mist); font-weight: 600;
}

.gqv2 .gqv2-loccard[data-loc-state="detecting"] .gqv2-loccard-change { display: none;
}

@media (max-width: 620px) {
    /* stack: pin + location text on top, both actions on their own row below */
        .gqv2 .gqv2-loccard { flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px;
    }

    .gqv2 .gqv2-loccard-pin { font-size: 18px;
    }

    .gqv2 .gqv2-loccard-city { font-size: 14px;
    }

    .gqv2 .gqv2-loccard-region { font-size: 12.5px;
    }

    /* text / input fill the rest of row 1, forcing the actions to wrap */
        .gqv2 .gqv2-loccard-text,
.gqv2 .gqv2-loccard-input { flex: 1 1 auto;
    }

    .gqv2 .gqv2-loccard-actions {
            flex-basis: 100%;
            justify-content: flex-end;
            gap: 6px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--gq-line);
    }

    /* full labels now that the buttons have their own line */
        .gqv2 .gqv2-loccard-near.gqv2-near { padding: 5px 10px;
    }

    .gqv2 .gqv2-loccard-change { padding-left: 12px; font-size: 13px;
    }
}

/* Near me button */
    .gqv2 .gqv2-near {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        border: 1.5px solid var(--gq-line);
        background: #fff;
        color: var(--gq-navy);
        font-family: var(--gq-font);
        font-weight: 800;
        font-size: 13.5px;
        padding: 0 18px;
        border-radius: 999px;
        cursor: pointer;
        transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.gqv2 .gqv2-near i { color: var(--gq-blue);
}

/* The old teal token was never defined, so this border reset to nothing while
       a mint wash stayed behind — that's why the button looked wrong rather than
       merely off-palette. Location is blue now, same family as the pill, so
       "where" reads as one idea across the whole bar. */
    .gqv2 .gqv2-near:hover,
.gqv2 .gqv2-near:focus-visible {
        border-color: var(--gq-blue);
        background: var(--gq-blue-tint);
        color: var(--gq-blue-dark);
}

.gqv2 .gqv2-near:hover i,
.gqv2 .gqv2-near:focus-visible i { color: var(--gq-blue-dark);
}

.gqv2 .gqv2-near.locating {
        pointer-events: none;
        opacity: .7;
}

.gqv2 .gqv2-near.locating i {
        animation: gqv2Spin .8s linear infinite;
}

@keyframes gqv2Spin { to { transform: rotate(360deg); }
}

/* ---- explore cards: what am I searching for? ----
       Picking one retargets the search (reads the location box, opens that
       type's /search route) rather than jumping down the page. */
    .gqv2 .gqv2-ecards-head {
        text-align: center;
        margin: 30px 0 4px;
}

.gqv2 .gqv2-ecards-head h3 {
        font-size: 20px;
        font-weight: 800;
        color: var(--gq-navy);
        margin: 0 0 5px;
}

.gqv2 .gqv2-ecards-head p {
        font-size: 14px;
        color: var(--gq-slate);
        margin: 0;
}

.gqv2 .gqv2-ecards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        max-width: 780px;            /* a touch smaller than before */
        margin: 16px auto 0;
}

.gqv2 .gqv2-ecard {
        display: flex;
        flex-direction: column;
        padding: 0 0 15px;
        border: 1px solid var(--gq-line);
        border-radius: 14px;
        background: #fff;
        overflow: hidden;            /* clips the image to the card's top corners */
        cursor: pointer;
        text-align: center;
        box-shadow: var(--gq-shadow-sm);
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gqv2 .gqv2-ecard:hover {
        transform: translateY(-5px);
        box-shadow: var(--gq-shadow);
        border-color: var(--card-color);
}

.gqv2 .gqv2-ecard-media {
        display: block;
        position: relative;          /* anchors the tint + hover CTA */
        aspect-ratio: 16 / 10;
}

.gqv2 .gqv2-ecard-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .35s ease;
}

.gqv2 .gqv2-ecard:hover .gqv2-ecard-media img { transform: scale(1.06);
}

/* card-colour wash that fades in on hover, behind the CTA */
    .gqv2 .gqv2-ecard-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--card-color) 34%, transparent);
        opacity: 0;
        transition: opacity .25s ease;
        z-index: 1;
}

.gqv2 .gqv2-ecard:hover .gqv2-ecard-media::after { opacity: 1;
}

/* hover call-to-action — a colour pill centred on the image, no layout shift */
    .gqv2 .gqv2-ecard-cta {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, calc(-50% + 9px));
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 17px;
        border-radius: 999px;
        background: var(--card-color);
        color: #fff;
        font-size: 12.5px;
        font-weight: 800;
        white-space: nowrap;
        box-shadow: 0 10px 22px -8px rgba(18, 59, 99, .55);
        opacity: 0;
        pointer-events: none;        /* clicks pass through to the card button */
        transition: opacity .25s ease, transform .25s ease;
}

.gqv2 .gqv2-ecard-cta i { font-size: 10px;
}

.gqv2 .gqv2-ecard:hover .gqv2-ecard-cta { opacity: 1; transform: translate(-50%, -50%);
}

/* circular icon badge straddling the image's bottom edge */
    .gqv2 .gqv2-ecard-badge {
        width: 48px;
        height: 48px;
        margin: -24px auto 0;        /* pull up to overlap the image by half */
        position: relative;
        z-index: 3;                  /* above the media tint */
        border-radius: 50%;
        background: #fff;
        display: grid;
        place-items: center;
        color: var(--card-color);
        font-size: 18px;
        box-shadow: 0 6px 16px -6px rgba(18, 59, 99, .4);
}

.gqv2 .gqv2-ecard-title {
        margin: 11px 12px 4px;
        font-size: 15.5px;
        font-weight: 800;
        color: var(--card-color);
}

.gqv2 .gqv2-ecard-desc {
        margin: 0 12px;
        font-size: 12px;
        line-height: 1.5;
        color: var(--gq-slate);
}

@media (max-width: 760px) {
    .gqv2 .gqv2-ecards { grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 420px;
    }

    .gqv2 .gqv2-ecards-head h3 { font-size: 18px;
    }

    .gqv2 .gqv2-ecards-head p { font-size: 13px;
    }
}

/* ---- Free Guides: pick-a-state grid ---- */
    .gqv2 .gqv2-guide-prompt {
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        color: var(--gq-navy);
        margin: 4px 0 18px;
}

/* Mini postcard tiles — a shrunk-down Explore-by-State (Option B). The unique
       2-letter badge replaces the repeating book icon; colour comes from the
       per-state --gc (a soft tint fill + the coloured abbreviation). */
    .gqv2 .gqv2-guide-states {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        /* 1080 fits 9 per row, so 17 states land 9+8 instead of stranding a
           single chip on its own row (8+8+1) */
        max-width: 1080px;
        margin: 0 auto;
}

.gqv2 .gqv2-guide-states > * { flex: 0 1 110px;
}

/* same compaction as the state postcards: the desktop basis only fits two
       across on a phone, which makes this a very long scroll */
    @media (max-width: 640px) {
    .gqv2 .gqv2-guide-states { gap: 8px;
    }

    .gqv2 .gqv2-guide-states > * { flex: 0 1 96px;
    }

    .gqv2 .gqv2-gstate { padding: 10px 6px 9px;
    }

    .gqv2 .gqv2-gstate-abbr { font-size: 21px;
    }

    .gqv2 .gqv2-gstate-name { font-size: 11px; margin-top: 3px;
    }
}

.gqv2 .gqv2-gstate {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2px;
        padding: 13px 8px 11px;
        border: 1px solid var(--gq-line);
        border-radius: 12px;
        background: #fff;
        text-decoration: none;
        color: var(--gq-navy);
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.gqv2 .gqv2-gstate:hover,
.gqv2 .gqv2-gstate:focus-visible {
        transform: translateY(-3px);
        border-color: var(--gq-gold);
        box-shadow: var(--gq-shadow-sm);
}

/* the abbreviation is the only colour — a restrained 4-colour cycle, exactly
       like Option B's postcard letters. Each hue clears white/light backgrounds. */
    .gqv2 .gqv2-gstate-abbr {
        font-family: var(--gq-head-font);
        font-weight: 800;
        font-size: 27px;
        line-height: 1;
        color: var(--gq-navy);
}

.gqv2 .gqv2-gstate:nth-child(4n+1) .gqv2-gstate-abbr { color: var(--gq-blue);
}

.gqv2 .gqv2-gstate:nth-child(4n+2) .gqv2-gstate-abbr { color: var(--gq-green);
}

.gqv2 .gqv2-gstate:nth-child(4n+3) .gqv2-gstate-abbr { color: var(--gq-gold-dark);
}

.gqv2 .gqv2-gstate:nth-child(4n)   .gqv2-gstate-abbr { color: var(--gq-navy);
}

.gqv2 .gqv2-gstate-name {
        font-weight: 800;
        font-size: 12px;
        margin-top: 5px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.gqv2 .gqv2-gstate-cnt {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--gq-mist);
}

/* vibe chips */
    .gqv2 .gqv2-vibe-prompt {
        color: var(--gq-mist);
        font-size: 14.5px;
        font-weight: 600;
        margin: 0 0 18px;
}

.gqv2 .gqv2-vibe-chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        max-width: 820px;
        margin: 0 auto;
}

.gqv2 .gqv2-vibe-chip {
        position: relative;          /* anchor for the hover popover */
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1.5px solid var(--gq-line);
        color: var(--gq-navy);
        font-weight: 800;
        font-size: 13.5px;
        padding: 10px 18px;
        border-radius: 999px;
        transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.gqv2 .gqv2-vibe-chip > i {
        color: var(--vc, var(--gq-navy));
        font-size: 14px;
        transition: color .18s ease;
}

.gqv2 .gqv2-vibe-chip:hover {
        transform: translateY(-3px);
        background: var(--vc);
        border-color: var(--vc);
        color: #fff;
        z-index: 5;                  /* keep the hovered chip + its popover on top */
}

.gqv2 .gqv2-vibe-chip:hover > i { color: #fff;
}

/* ---- reactive prompt line: swaps to the hovered vibe, reverts on leave ----
       min-height reserves 2 lines so the chips never jump when the text grows,
       and the whole line cross-fades on each swap */
    .gqv2 .gqv2-vibe-prompt[data-vibe-prompt] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.9em;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.45;
        transition: opacity .16s ease;
}

.gqv2 .gqv2-vibe-prompt[data-vibe-prompt].is-swapping { opacity: 0;
}

/* one flex item; its inline children flow and wrap as a single sentence */
    .gqv2 .gqv2-vibe-prompt-swap { display: inline;
}

.gqv2 .gqv2-vibe-prompt-name {
        font-weight: 800;
        white-space: nowrap;   /* keep the vibe name + icon together */
}

.gqv2 .gqv2-vibe-prompt-name i { margin-right: 6px;
}

.gqv2 .gqv2-vibe-prompt-desc { color: var(--gq-slate); font-weight: 500;
}

.gqv2 .gqv2-guide-note {
        margin: 16px 0 0;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--gq-green-dark);
}

.gqv2 .gqv2-guide-note i { margin-right: 5px;
}

@media (max-width: 620px) {
    /* Tabs stay in a row. Stacking them cost three rows of height and forced
           the pill to track a moving target; dropping "Search by " fits instead. */
        .gqv2 .gqv2-search-tabs {
            width: 100%;
            justify-content: center;
    }

    .gqv2 .gqv2-tab-long { display: none;
    }

    .gqv2 .gqv2-search-tab {
            justify-content: center;
            padding: 10px 15px;
            font-size: 13px;
            gap: 6px;
    }

    /* trim the header block — it was eating most of the first screen */
        .gqv2 .gqv2-searchbar h2 { font-size: 22px; margin-bottom: 8px;
    }

    .gqv2 .gqv2-search-intro { font-size: 14px; margin-bottom: 18px;
    }

    .gqv2 .gqv2-near { flex: 1; justify-content: center; padding: 13px 14px;
    }
}

/* ---- "Surprise me" element (shared across search options) ---- */
    .gqv2 .gqv2-surprise-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 24px;
}

.gqv2 .gqv2-surprise-wrap > span {
        color: var(--gq-mist);
        font-size: 14px;
        font-weight: 600;
}

.gqv2 .gqv2-surprise {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        border: 1.5px dashed var(--gq-gold);
        background: rgba(214, 166, 58, .1);
        color: var(--gq-gold-dark);
        font-family: var(--gq-font);
        font-weight: 800;
        font-size: 14px;
        padding: 11px 22px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.gqv2 .gqv2-surprise:hover {
        background: var(--gq-gold);
        color: var(--gq-navy);
        border-style: solid;
        transform: translateY(-2px);
}

.gqv2 .gqv2-surprise i { transition: transform .3s ease;
}

.gqv2 .gqv2-surprise:hover i { transform: rotate(-18deg) scale(1.15);
}

/* brief highlight when a search option scrolls you to a section */
    .gqv2 .gqv2-flash { animation: gqv2Flash 1.4s ease;
}

@keyframes gqv2Flash {
        0%   { box-shadow: inset 0 0 0 3px rgba(214, 166, 58, 0); }
        25%  { box-shadow: inset 0 0 0 3px rgba(214, 166, 58, .9); }
        100% { box-shadow: inset 0 0 0 3px rgba(214, 166, 58, 0); }
}

/* ==================== MINI VISITOR GUIDE BOOK ==================== */
    .gqv2 .gqv2-vg {
        position: relative;
        z-index: 6;
}

/* the cover is a button, so strip the native chrome and keep the artwork */
    .gqv2 .gqv2-vg-open {
        display: block;
        position: relative;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        transition: transform .22s ease;
}

.gqv2 .gqv2-vg-open:hover { transform: translateY(-4px);
}

.gqv2 .gqv2-vg-open:focus-visible { outline: 3px solid var(--gq-gold); outline-offset: 6px; border-radius: 10px;
}

.gqv2 .gqv2-vg-book {
        position: relative;
        width: 158px;
        aspect-ratio: 3 / 4.1;
        border-radius: 7px;
        overflow: hidden;
        transform: rotate(6deg);
        box-shadow: 0 28px 48px -14px rgba(0, 0, 0, .62), 0 6px 14px rgba(0, 0, 0, .3);
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 16px 12px;
}

/* real guide cover — its own artwork, so no readability scrim and no padding */
    .gqv2 .gqv2-vg-book.is-real {
        padding: 0;
        background-position: top center;
        background-color: #0d2c4b;
}

.gqv2 .gqv2-vg-book.is-real::before { content: none;
}

.gqv2 .gqv2-vg-book::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(13, 44, 75, .8) 0%, rgba(13, 44, 75, .2) 42%, rgba(13, 44, 75, .82) 100%);
}

.gqv2 .gqv2-vg-book > * {
        position: relative;
        z-index: 2;
}

.gqv2 .gqv2-vg-top {
        display: block;
        font-family: var(--gq-script-font);
        font-size: 16px;
        color: var(--gq-gold);
        line-height: 1;
        margin-bottom: 4px;
}

.gqv2 .gqv2-vg-title {
        display: block;          /* was an <h3>; a button can only hold spans */
        font-family: var(--gq-head-font);
        font-size: 18px;
        font-weight: 800;
        line-height: 1.05;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin: 0 0 6px;
}

.gqv2 .gqv2-vg-sub {
        font-size: 6.5px;
        font-weight: 800;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .9);
        border-top: 1px solid rgba(255, 255, 255, .5);
        padding-top: 6px;
}

.gqv2 .gqv2-vg-tagline {
        margin-top: auto;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .92);
}

/* gold circular "Official Travel Guide" badge on the corner */
    .gqv2 .gqv2-vg-badge {
        position: absolute;
        top: -12px;
        right: -18px;
        width: 66px;
        height: 66px;
        border-radius: 50%;
        background: var(--gq-gold);
        color: var(--gq-navy);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-align: center;
        font-size: 7px;
        font-weight: 800;
        letter-spacing: .6px;
        text-transform: uppercase;
        line-height: 1.2;
        padding: 7px;
        transform: rotate(-8deg);
        box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45);
        z-index: 3;
}

.gqv2 .gqv2-vg-badge i {
        font-size: 11px;
}

/* mobile-only trigger — the cover itself is hidden on narrow screens */
    .gqv2 .gqv2-vg-mobilebtn {
        display: none;
        align-items: center;
        gap: 9px;
        margin-top: 16px;
        padding: 11px 18px;
        border-radius: 999px;
        border: 1.5px solid rgba(255, 255, 255, .5);
        background: rgba(255, 255, 255, .12);
        color: #fff;
        font-family: var(--gq-font);
        font-size: 13.5px;
        font-weight: 800;
        cursor: pointer;
        transition: background .2s ease, border-color .2s ease;
}

.gqv2 .gqv2-vg-mobilebtn:hover { background: rgba(255, 255, 255, .24); border-color: #fff;
}

/* ---------- visitor guide viewer ---------- */
    .gqv2-gm {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: center;
        padding: 24px;
}

.gqv2-gm[hidden] { display: none;
}

.gqv2-gm-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(6, 18, 32, .86);
        backdrop-filter: blur(6px);
        animation: gqv2ShmFade .25s ease;
}

.gqv2-gm-dialog {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 30px;
        max-width: 720px;
        width: 100%;
        padding: 30px;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
        animation: gqv2ShmRise .28s cubic-bezier(.22, .61, .36, 1);
}

.gqv2-gm-cover {
        flex: 0 0 200px;
        aspect-ratio: 3 / 4.1;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .5);
}

.gqv2-gm-cover img { width: 100%; height: 100%; object-fit: cover; display: block;
}

.gqv2-gm-body { min-width: 0;
}

.gqv2-gm-kicker {
        font-family: var(--gq-script-font);
        font-size: 22px;
        color: var(--gq-gold-dark);
        display: block;
}

.gqv2-gm-title {
        margin: 2px 0 6px;
        font-family: var(--gq-head-font);
        font-size: 26px;
        font-weight: 800;
        color: var(--gq-navy);
        line-height: 1.15;
}

.gqv2-gm-tag {
        display: block;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--gq-blue);
}

.gqv2-gm-copy {
        margin: 12px 0 18px;
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--gq-slate);
}

.gqv2-gm-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--gq-line);
        background: #fff;
        color: var(--gq-navy);
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: background .2s ease;
}

.gqv2-gm-close:hover { background: var(--gq-cloud);
}

@media (max-width: 620px) {
    .gqv2-gm { padding: 14px;
    }

    .gqv2-gm-dialog { flex-direction: column; gap: 18px; padding: 24px 20px; text-align: center;
    }

    .gqv2-gm-cover { flex: 0 0 auto; width: 150px;
    }

    .gqv2-gm-title { font-size: 21px;
    }
}

/* placement — straddles the seam: roughly half the cover sits over the photo */
    .gqv2 .gqv2-vg.vg-b { position: absolute; right: -74px; bottom: 24px;
}

@media (max-width: 900px) {
    /* the cover art is dropped, but the guide stays reachable: the wrapper
           returns to normal flow and the text button takes its place */
        .gqv2 .gqv2-vg.vg-b {
            position: static;
            right: auto;
            bottom: auto;
    }

    .gqv2 .gqv2-vg-open { display: none;
    }

    .gqv2 .gqv2-vg-mobilebtn { display: inline-flex;
    }
}

/* ==================== HERO — OPTION B: split panel ==================== */
    .gqv2 .gqv2-hb-stage {
        position: relative;
        display: grid;
        grid-template-columns: 46% 54%;
        height: 520px;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--gq-shadow);
        background: var(--gq-navy);
}

.gqv2 .gqv2-hb-left {
        position: relative;
        z-index: 3;
        background: linear-gradient(160deg, #16456f 0%, var(--gq-navy) 70%);
}

/* diagonal edge cutting into the photo */
    .gqv2 .gqv2-hb-left::after {
        content: "";
        position: absolute;
        top: -5%;
        bottom: -5%;
        right: -56px;
        width: 112px;
        background: inherit;
        transform: skewX(-5deg);
}

.gqv2 .gqv2-hb-text {
        position: absolute;
        inset: 0;
        z-index: 2;
        /* right padding keeps the copy clear of the guide cover below it */
        padding: 46px 96px 96px 46px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        opacity: 0;
        transition: opacity .6s ease;
        pointer-events: none;
}

/* the badge is inline-block, but as a flex child in a column it stretches to
       the full panel width — it has to opt out to stay a pill */
    .gqv2 .gqv2-hb-text .gqv2-slide-badge { align-self: flex-start;
}

.gqv2 .gqv2-hb-text.is-active {
        opacity: 1;
        pointer-events: auto;
}

.gqv2 .gqv2-hb-text h3 {
        font-family: var(--gq-head-font);
        font-size: clamp(26px, 2.6vw, 40px);
        font-weight: 800;
        line-height: 1.1;
        color: #fff;
        margin: 0 0 12px;
}

.gqv2 .gqv2-hb-text p {
        font-size: 15px;
        line-height: 1.6;
        color: rgba(255, 255, 255, .85);
        margin: 0 0 22px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.gqv2 .gqv2-hb-photos {
        position: relative;
        z-index: 1;
}

.gqv2 .gqv2-hb-photos img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity .7s ease;
}

.gqv2 .gqv2-hb-photos img.is-active {
        opacity: 1;
}

/* controls: arrows + counter pinned bottom-left */
    .gqv2 .gqv2-hb-controls {
        position: absolute;
        left: 46px;
        bottom: 28px;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 12px;
}

.gqv2 .gqv2-hb-controls button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, .45);
        background: transparent;
        color: #fff;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.gqv2 .gqv2-hb-controls button:hover {
        background: var(--gq-gold);
        border-color: var(--gq-gold);
        color: var(--gq-navy);
}

.gqv2 .gqv2-hb-count {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 2px;
        color: rgba(255, 255, 255, .75);
}

.gqv2 .gqv2-hb-count b {
        color: var(--gq-gold);
        font-size: 15px;
}

@media (max-width: 900px) {
    .gqv2 .gqv2-hb-stage {
            grid-template-columns: 1fr;
            height: auto;
    }

    .gqv2 .gqv2-hb-left::after {
            display: none;
    }

    .gqv2 .gqv2-hb-photos {
            order: -1;
            aspect-ratio: 16 / 10;
    }

    .gqv2 .gqv2-hb-text {
            position: relative;
            padding: 26px 24px 86px;
    }

    .gqv2 .gqv2-hb-text:not(.is-active) {
            display: none;
    }

    .gqv2 .gqv2-hb-controls {
            left: 24px;
            bottom: 22px;
    }
}

/* the ACTIVE hero (chosen in the drawer → moved right after the hero slot):
       drop the comparison framing so it sits tight, with the search bar right below */
    .gqv2 #gqv2-hero-slot + section.gqv2-section {
        padding: 18px 0 22px;
}

/* ==================== COVER STORY — LIGHT VARIANTS (C / D / E) ====================
       Airy, low-contrast alternatives to the dark spotlight looks. Fresh class
       prefixes (lcov / lcard / llist) so they never touch the older cover CSS. */

    /* --- C: light feature + thumbnail rail --- */
    .gqv2 .gqv2-lcov-feature {
        display: grid;
        grid-template-columns: 1fr 1.4fr;   /* narrower image (shorter 3:2) + wider text */
        gap: 34px;
        align-items: center;
        background: #fff;
        border: 1px solid var(--gq-line);
        border-radius: 22px;
        padding: 18px;
        box-shadow: var(--gq-shadow-sm);
}

/* single feature photo, 3:2, full column width */
    .gqv2 .gqv2-lcov-media {
        aspect-ratio: 3 / 2; width: 100%;
        border-radius: 16px; overflow: hidden; background: var(--gq-sky);
}

.gqv2 .gqv2-lcov-img {
        width: 100%; height: 100%; object-fit: cover; display: block;
        transition: opacity .3s ease;
}

.gqv2 .gqv2-lcov-text { padding: 8px 24px 8px 6px;
}

.gqv2 .gqv2-lcov-kicker {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
        color: var(--gq-blue);
}

.gqv2 .gqv2-lcov-title {
        font-family: var(--gq-head-font);
        font-size: 30px; line-height: 1.18; margin: 10px 0 12px; color: var(--gq-navy);
        font-weight: 600;
}

.gqv2 .gqv2-lcov-excerpt {
        font-size: 15px; line-height: 1.7; color: var(--gq-charcoal); margin: 0 0 18px;
        display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* rail: nav arrows flank a flex track. Chip basis is responsive so a whole
       number fit the width — 8 desktop, 4 tablet, 2 mobile; the rest scroll. */
    .gqv2 .gqv2-lcov-railwrap {
        position: relative;
        display: flex;
        align-items: stretch;
        gap: 6px;
        margin-top: 18px;
}

.gqv2 .gqv2-lcov-rail {
        display: flex;
        gap: 10px;
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        padding: 4px 2px 10px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
}

.gqv2 .gqv2-lcov-rail::-webkit-scrollbar { display: none;
}

.gqv2 .gqv2-lcov-chip {
        position: relative;
        flex: 0 0 calc((100% - 7 * 10px) / 8);   /* 8 across on desktop */
        scroll-snap-align: start;
        display: flex; flex-direction: column; gap: 7px;
        background: #fff; border: 1px solid var(--gq-line); border-radius: 14px;
        padding: 7px 7px 9px; overflow: hidden;
        cursor: pointer; text-align: left;
        transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.gqv2 .gqv2-lcov-chip-img { display: block; border-radius: 9px; overflow: hidden; background: var(--gq-sky);
}

.gqv2 .gqv2-lcov-chip-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
}

/* city / state label (was the title) */
    .gqv2 .gqv2-lcov-loc-lbl {
        display: flex; align-items: center; gap: 5px;
        font-size: 11px; font-weight: 700; line-height: 1.25; color: var(--gq-navy);
        padding: 0 2px 2px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gqv2 .gqv2-lcov-loc-lbl i { color: var(--gq-blue); font-size: 10px; flex-shrink: 0;
}

.gqv2 .gqv2-lcov-chip:hover { transform: translateY(-3px); box-shadow: var(--gq-shadow-sm);
}

.gqv2 .gqv2-lcov-chip.is-active { border-color: var(--gq-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gq-blue) 30%, transparent);
}

/* full cover title on hover */
    .gqv2 .gqv2-lcov-chip::after {
        content: attr(data-title);
        position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
        background: rgba(7, 20, 35, .95); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3;
        text-align: center; padding: 7px 11px; border-radius: 8px; width: max-content; max-width: 220px;
        pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease; z-index: 6;
        box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .55);
}

.gqv2 .gqv2-lcov-chip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0);
}

/* time bar — fills over the autoplay interval on the active chip */
    .gqv2 .gqv2-lcov-bar {
        position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
        background: var(--gq-blue); border-radius: 0 3px 0 0;
}

.gqv2 .gqv2-lcov-chip.is-active .gqv2-lcov-bar { animation: gqv2LcovBar var(--gqv2-cov-ms, 6500ms) linear forwards;
}

.gqv2 .gqv2-lcov-rail.is-paused .gqv2-lcov-chip.is-active .gqv2-lcov-bar { animation-play-state: paused;
}

@keyframes gqv2LcovBar { from { width: 0; } to { width: 100%; }
}

/* prev / next arrows — shown only when the rail overflows */
    .gqv2 .gqv2-lcov-nav {
        flex: 0 0 auto; align-self: center;
        width: 38px; height: 38px; border-radius: 50%;
        border: 1px solid var(--gq-line); background: #fff; color: var(--gq-navy);
        cursor: pointer; display: none; align-items: center; justify-content: center;
        box-shadow: var(--gq-shadow-sm); transition: background .15s ease, color .15s ease;
}

.gqv2 .gqv2-lcov-nav:hover { background: var(--gq-navy); color: #fff;
}

@media (max-width: 860px) {
    .gqv2 .gqv2-lcov-feature { grid-template-columns: 1fr; gap: 6px;
    }

    .gqv2 .gqv2-lcov-text { padding: 12px 14px 16px;
    }

    .gqv2 .gqv2-lcov-title { font-size: 24px;
    }
}

/* 4 across on smaller screens */
    @media (max-width: 1000px) {
    .gqv2 .gqv2-lcov-chip { flex-basis: calc((100% - 3 * 10px) / 4);
    }

    .gqv2 .gqv2-lcov-nav { display: inline-flex;
    }
}

/* 2 across on mobile, with the arrows */
    @media (max-width: 600px) {
    .gqv2 .gqv2-lcov-chip { flex-basis: calc((100% - 1 * 10px) / 2);
    }
}

/* ==================== GET INSPIRED (stories) ==================== */
    /* aside + scrollable guide carousel (slides-per-view set in Swiper config) */
    .gqv2 .gqv2-inspired {
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 16px;
        align-items: stretch;
}

/* shell holds the carousel with side gutters; arrows live in the gutters */
    .gqv2 .gqv2-guides-shell {
        position: relative;
        padding: 0 48px;
        min-width: 0;
}

.gqv2 .gqv2-guidesSwiper {
        width: 100%;
}

.gqv2 .gqv2-guides-shell .swiper-button-prev,
.gqv2 .gqv2-guides-shell .swiper-button-next {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fff;
        color: var(--gq-navy);
        border: 1px solid var(--gq-line);
        box-shadow: var(--gq-shadow-sm);
        top: 50%;
        margin-top: -19px;
}

.gqv2 .gqv2-guides-shell .swiper-button-prev {
        left: 0;
}

.gqv2 .gqv2-guides-shell .swiper-button-next {
        right: 0;
}

.gqv2 .gqv2-guides-shell .swiper-button-prev::after,
.gqv2 .gqv2-guides-shell .swiper-button-next::after {
        font-size: 13px;
        font-weight: 800;
}

.gqv2 .gqv2-inspired-aside {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

.gqv2 .gqv2-inspired-aside .gqv2-script {
        font-size: 40px;
        line-height: 1;
        margin-bottom: 14px;
        display: block;
}

.gqv2 .gqv2-inspired-aside p {
        color: var(--gq-mist);
        font-size: 15px;
        line-height: 1.6;
        margin: 0 0 18px;
}

/* .gqv2-textlink moved to site.css — the story page uses it too. */

.gqv2 .gqv2-story {
        position: relative;
        border-radius: var(--gq-radius);
        overflow: hidden;
        aspect-ratio: 2 / 3;
        display: flex;
        align-items: flex-end;
        color: #fff;
        box-shadow: var(--gq-shadow-sm);
        transition: transform .22s ease;
}

.gqv2 .gqv2-story:hover {
        transform: translateY(-6px);
        color: #fff;
}

.gqv2 .gqv2-story {
        background: #0d2c4b;
}

.gqv2 .gqv2-story img {
        position: absolute;
        top: 0;
        left: 0;
        /* guide covers: fill the full width at natural ratio, anchored to the top —
           never cropped horizontally; any leftover space at the bottom shows the navy bg */
        width: 100%;
        height: auto;
        transition: transform .5s ease;
}

.gqv2 .gqv2-story:hover img {
        transform: scale(1.07);
}

.gqv2 .gqv2-story::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(13, 34, 58, .97) 10%, rgba(13, 34, 58, .55) 42%, rgba(13, 34, 58, .05) 72%);
}

.gqv2 .gqv2-story-body {
        position: relative;
        z-index: 2;
        padding: 16px 10px;
        width: 100%;
}

/* small state line above the title */
    .gqv2 .gqv2-story-loc {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #FFD98A;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
        margin: 0 0 5px;
}

.gqv2 .gqv2-story-loc i {
        font-size: 10px;
        color: var(--gq-gold);
}

.gqv2 .gqv2-story-body h3 {
        font-family: var(--gq-font);
        font-size: 14.5px;
        font-weight: 800;
        line-height: 1.3;
        margin: 0 0 5px;
        color: #fff;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.gqv2 .gqv2-story-body .gqv2-readmore {
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #fff;
        border-bottom: 2px solid var(--gq-gold);
        padding-bottom: 2px;
}

/* ==================== SHORTS (hover-to-play videos) ==================== */
    .gqv2 .gqv2-shorts {
        background: linear-gradient(180deg, #0d2c4b 0%, var(--gq-navy) 100%);
}

.gqv2 .gqv2-shorts .gqv2-script {
        color: var(--gq-gold);
        font-size: 40px;
        line-height: 1;
}

.gqv2 .gqv2-shorts .gqv2-shorts-sub {
        display: block;
        margin: 9px 0 0;
        max-width: 54ch;
        color: rgba(255, 255, 255, .75);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.5;
}

.gqv2 .gqv2-shorts-head {
        margin-bottom: 26px;
}

.gqv2 .gqv2-short-ytframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        z-index: 1;
        pointer-events: none;   /* keep card hover/click behaviour */
}

/* the card title links to the listing */
    .gqv2 .gqv2-short-info h3 a { color: inherit; text-decoration: none;
}

.gqv2 .gqv2-short-info h3 a:hover { text-decoration: underline;
}

.gqv2 .gqv2-short-grad {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(7, 20, 35, .92) 0%, rgba(7, 20, 35, .25) 34%, rgba(7, 20, 35, 0) 55%);
        pointer-events: none;
}

/* center play button — fades out while playing */
    .gqv2 .gqv2-short-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: 0;
        background: rgba(255, 255, 255, .92);
        color: var(--gq-navy);
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .6);
        transition: opacity .25s ease, transform .25s ease;
}

.gqv2 .gqv2-short-play i {
        margin-left: 3px;
}

/* mute toggle — appears while playing */
    .gqv2 .gqv2-short-mute {
        position: absolute;
        right: 10px;
        bottom: 64px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 0;
        background: rgba(0, 0, 0, .55);
        color: #fff;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        transition: opacity .25s ease;
        z-index: 3;
}

.gqv2 .gqv2-short-info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 3px;
        padding: 12px 10px;
        z-index: 2;
        pointer-events: none;
}

.gqv2 .gqv2-short-info .gqv2-short-loc {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #FFD98A;
        margin-bottom: 4px;
}

.gqv2 .gqv2-short-info h3 {
        font-family: var(--gq-font);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.3;
        color: #fff;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

/* ==================== TRAVEL VIBES ==================== */
    .gqv2 .gqv2-vibes-grid {
        display: grid;
        grid-template-columns: 230px 1fr;
        gap: 30px;
        align-items: center;
}

.gqv2 .gqv2-vibes-aside .gqv2-script {
        font-size: 38px;
        line-height: 1.05;
        display: block;
        margin-bottom: 14px;
}

.gqv2 .gqv2-vibes-aside p {
        color: var(--gq-mist);
        font-size: 15px;
        line-height: 1.6;
        margin: 0 0 18px;
}

/* Reactive aside — hovering a tile turns the heading into that vibe's name (in its
       own colour) and swaps the line for its description. Both reserve height so the
       swap never nudges the "Explore all vibes" link below them: the heading holds two
       lines ("What's Your Travel Vibe?" wraps, most vibe names do not) and the line
       holds three. */
    .gqv2 .gqv2-vibes-aside .gqv2-vibe-title {
        min-height: 2.1em;
        transition: color .25s ease;
}

.gqv2 .gqv2-vibe-line {
        min-height: 4.8em;
        transition: opacity .18s ease;
}

.gqv2 .gqv2-vibe-line.is-swapping { opacity: 0;
}

.gqv2 .gqv2-vibes {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
}

.gqv2 .gqv2-vibe {
        background: #fff;
        border: 1px solid var(--gq-line);
        border-radius: var(--gq-radius);
        padding: 26px 12px;
        text-align: center;
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        color: var(--gq-navy);
}

.gqv2 .gqv2-vibe:hover {
        transform: translateY(-6px);
        box-shadow: var(--gq-shadow-sm);
        border-color: var(--gq-gold);
        color: var(--gq-navy);
}

.gqv2 .gqv2-vibe i {
        font-size: 30px;
        display: block;
        margin: 0 auto 14px;
}

.gqv2 .gqv2-vibe:nth-child(1) i { color: var(--gq-blue);
}

.gqv2 .gqv2-vibe:nth-child(2) i { color: var(--gq-green);
}

.gqv2 .gqv2-vibe:nth-child(3) i { color: var(--gq-gold);
}

.gqv2 .gqv2-vibe:nth-child(4) i { color: var(--gq-navy);
}

.gqv2 .gqv2-vibe:nth-child(5) i { color: var(--gq-blue);
}

.gqv2 .gqv2-vibe:nth-child(6) i { color: var(--gq-green);
}

.gqv2 .gqv2-vibe span {
        font-size: 12.5px;
        font-weight: 800;
        letter-spacing: .6px;
        text-transform: uppercase;
        line-height: 1.4;
        display: block;
}

/* ==================== WORTH THE DRIVE — E: auto-scroll rail ====================
       A single-row rail: rAF drift (auto-scroll), grab/touch, and prev/next arrows.
       Same real-scroll-container approach as the shorts marquee. */
    .gqv2 .gqv2-wtd-shell { position: relative;
}

.gqv2 .gqv2-wtd-marquee {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 2px 12px;
        cursor: grab;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
}

.gqv2 .gqv2-wtd-marquee::-webkit-scrollbar { display: none;
}

.gqv2 .gqv2-wtd-marquee.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none;
}

.gqv2 .gqv2-wtd-marquee.is-dragging .gqv2-wtd-card { pointer-events: none;
}

.gqv2 .gqv2-wtd-track { display: flex; gap: 18px; width: max-content;
}

.gqv2 .gqv2-wtd-card {
        flex: 0 0 262px;
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--gq-line);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--gq-shadow-sm);
        color: var(--gq-navy);
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gqv2 .gqv2-wtd-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--gq-shadow);
        border-color: var(--gq-blue);
        color: var(--gq-navy);
}

/* Fixed 16:10 window. The image is taken OUT of flow (absolute + inset) so a
       portrait source can never define the box height — with height:100% alone a
       non-definite parent height falls back to auto and one tall photo stretched
       the whole stretch-aligned row. overflow:hidden clips the cover crop. */
    .gqv2 .gqv2-wtd-media {
        position: relative;
        display: block;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        flex: 0 0 auto;
}

.gqv2 .gqv2-wtd-media img {
        position: absolute;
        inset: 0;
        width: 100%; height: 100%; object-fit: cover; display: block;
        -webkit-user-drag: none; user-select: none;
}

.gqv2 .gqv2-wtd-tag {
        position: absolute; top: 10px; left: 10px;
        padding: 4px 11px; border-radius: 999px;
        background: rgba(8, 26, 45, .68); backdrop-filter: blur(4px);
        color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .3px;
}

.gqv2 .gqv2-wtd-body { display: flex; flex-direction: column; padding: 13px 15px 15px; flex: 1 1 auto;
}

.gqv2 .gqv2-wtd-town { font-size: 11.5px; font-weight: 700; color: var(--gq-gold-dark);
}

.gqv2 .gqv2-wtd-town i { font-size: 10px; margin-right: 4px;
}

/* clamped so a long name can't drive the row taller than its neighbours */
    .gqv2 .gqv2-wtd-title {
        margin: 4px 0 5px; font-size: 15.5px; font-weight: 600; line-height: 1.25; color: var(--gq-navy);
        display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.gqv2 .gqv2-wtd-desc {
        font-size: 12.5px; line-height: 1.5; color: var(--gq-slate);
        display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* prev / next arrows, overlaying both edges */
    .gqv2 .gqv2-wtd-arrow {
        position: absolute;
        top: calc(50% - 6px);
        transform: translateY(-50%);
        z-index: 4;
        width: 44px; height: 44px;
        border-radius: 50%;
        border: 1px solid var(--gq-line);
        background: #fff;
        color: var(--gq-navy);
        font-size: 15px;
        cursor: pointer;
        display: grid; place-items: center;
        box-shadow: 0 8px 22px -8px rgba(18, 59, 99, .5);
        transition: background .18s ease, color .18s ease, transform .18s ease;
}

.gqv2 .gqv2-wtd-arrow.prev { left: -8px;
}

.gqv2 .gqv2-wtd-arrow.next { right: -8px;
}

.gqv2 .gqv2-wtd-arrow:hover { background: var(--gq-blue); color: #fff; transform: translateY(-50%) scale(1.06);
}

@media (max-width: 620px) {
    .gqv2 .gqv2-wtd-card { flex: 0 0 220px;
    }

    .gqv2 .gqv2-wtd-arrow { width: 38px; height: 38px; font-size: 13px;
    }

    .gqv2 .gqv2-wtd-arrow.prev { left: -4px;
    }

    .gqv2 .gqv2-wtd-arrow.next { right: -4px;
    }
}

/* ==================== SHORTS C: continuous marquee ====================
       A real scroll container rather than a CSS keyframe translate: that is what
       lets a finger swipe (native) and a mouse drag (JS) grab it. The drift is
       driven by rAF in JS — see the SHORTS C block. */
    .gqv2 .gqv2-shc-marquee {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 0 10px;
        position: relative;
        cursor: grab;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;             /* the rail is its own affordance */
        -ms-overflow-style: none;
}

.gqv2 .gqv2-shc-marquee::-webkit-scrollbar { display: none;
}

/* grabbing must not smear a text selection across the rail */
    .gqv2 .gqv2-shc-marquee.is-dragging {
        cursor: grabbing;
        user-select: none;
        -webkit-user-select: none;
}

/* ...nor start a native image drag */
    .gqv2 .gqv2-shc-item img {
        -webkit-user-drag: none;
        user-select: none;
        -webkit-user-select: none;
}

/* a drag must not trip hover-play or land as a click on a tile */
    .gqv2 .gqv2-shc-marquee.is-dragging .gqv2-shc-item { pointer-events: none;
}

/* edge fade sits on the shell — inside a scroll container it would scroll away */
    .gqv2 .gqv2-shc-shell::before,
.gqv2 .gqv2-shc-shell::after {
        content: "";
        position: absolute;
        top: 42px;
        bottom: 0;
        width: 90px;
        z-index: 2;
        pointer-events: none;
}

.gqv2 .gqv2-shc-shell::before { left: 0;  background: linear-gradient(to right, #0d2c4b, transparent);
}

.gqv2 .gqv2-shc-shell::after { right: 0; background: linear-gradient(to left,  var(--gq-navy), transparent);
}

.gqv2 .gqv2-shc-track {
        display: flex;
        gap: 14px;
        width: max-content;
}

/* --- marquee scroll controls --- */
    .gqv2 .gqv2-shc-shell { position: relative; padding-top: 42px; --gqv2-dwell: 500ms;
}

.gqv2 .gqv2-shc-controls {
        position: absolute;
        right: 24px;
        top: 0;
        display: flex;
        gap: 8px;
        z-index: 4;
}

.gqv2 .gqv2-shc-ctl {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .28);
        background: rgba(255, 255, 255, .10);
        color: #EAF3FA;
        font-size: 12px;
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.gqv2 .gqv2-shc-ctl:hover { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .5);
}

.gqv2 .gqv2-shc-ctl.is-on { background: #EAF3FA; border-color: #EAF3FA; color: var(--gq-navy);
}

.gqv2 .gqv2-shc-item {
        position: relative;
        width: 190px;
        height: 338px;          /* fixed height so hover can widen to the clip's real ratio */
        border-radius: 14px;
        overflow: hidden;
        flex-shrink: 0;
        cursor: pointer;
        background: #0a2038;
        transition: transform .25s ease, width .32s cubic-bezier(.22, .61, .36, 1);
}

.gqv2 .gqv2-shc-item:hover { transform: translateY(-6px);
}

.gqv2 .gqv2-shc-item img,
.gqv2 .gqv2-shc-item video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.gqv2 .gqv2-shc-item video { z-index: 1;
}

.gqv2 .gqv2-shc-item .gqv2-short-grad,
.gqv2 .gqv2-shc-item .gqv2-short-info { z-index: 2;
}

.gqv2 .gqv2-shc-item .gqv2-short-play { z-index: 3;
}

.gqv2 .gqv2-shc-item.is-playing .gqv2-short-play { opacity: 0;
}

.gqv2 .gqv2-shc-item .gqv2-short-play::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        opacity: 0;
        transition: opacity .18s ease;
        background: conic-gradient(var(--gq-orange) calc(var(--gqload) * 360deg), rgba(255, 255, 255, .28) 0);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
                mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

/* phase 1 — determinate fill over the dwell */
    .gqv2 .gqv2-shc-item.is-arming .gqv2-short-play::before {
        opacity: 1;
        animation: gqv2Arm var(--gqv2-dwell, 500ms) linear forwards;
}

@keyframes gqv2Arm { from { --gqload: 0; } to { --gqload: 1; }
}

/* phase 2 — indeterminate, only while the clip is actually fetching */
    .gqv2 .gqv2-shc-item.is-buffering .gqv2-short-play::before {
        opacity: 1;
        background: conic-gradient(var(--gq-orange) 0 90deg, rgba(255, 255, 255, .28) 90deg);
        animation: gqv2Spin .8s linear infinite;
}

@keyframes gqv2Spin { to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .gqv2 .gqv2-shc-item.is-buffering .gqv2-short-play::before { animation-duration: 2s;
    }
}

/* ---- playback progress along the bottom edge ---- */
    .gqv2 .gqv2-shc-bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        z-index: 5;
        background: rgba(255, 255, 255, .18);
        opacity: 0;
        transition: opacity .25s ease;
        pointer-events: none;
}

.gqv2 .gqv2-shc-item.is-playing .gqv2-shc-bar { opacity: 1;
}

.gqv2 .gqv2-shc-bar i {
        display: block;
        height: 100%;
        width: calc(var(--prog, 0) * 100%);
        background: var(--gq-orange);
        box-shadow: 0 0 8px rgba(217, 108, 71, .8);
}

/* YouTube tiles get a real bar too, driven by the IFrame Player API */

    /* mute toggle — only meaningful once a clip is actually playing */
    .gqv2 .gqv2-shc-item .gqv2-short-mute {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 4;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 0;
        background: rgba(8, 26, 45, .62);
        backdrop-filter: blur(4px);
        color: #fff;
        font-size: 12px;
        cursor: pointer;
        display: grid;
        place-items: center;
        opacity: 0;
        transform: scale(.85);
        transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.gqv2 .gqv2-shc-item.is-playing .gqv2-short-mute { opacity: 1; transform: scale(1);
}

.gqv2 .gqv2-shc-item .gqv2-short-mute:hover { background: rgba(8, 26, 45, .85);
}

/* ring fills over the 3s fade-in so the volume ramp is visible, not a surprise */
    .gqv2 .gqv2-shc-item .gqv2-short-mute::after {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        pointer-events: none;
        opacity: var(--volring, 0);
        background: conic-gradient(#EAF3FA calc(var(--vol, 0) * 360deg), rgba(255, 255, 255, .18) 0);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
                mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
        transition: opacity .25s ease;
}

/* ---------- shorts modal ---------- */
    .gqv2-shm {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: center;
        padding: 24px;
}

.gqv2-shm[hidden] { display: none;
}

.gqv2-shm-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(6, 18, 32, .88);
        backdrop-filter: blur(6px);
        animation: gqv2ShmFade .25s ease;
}

@keyframes gqv2ShmFade { from { opacity: 0; } to { opacity: 1; }
}

.gqv2-shm-dialog {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 18px;
        animation: gqv2ShmRise .28s cubic-bezier(.22, .61, .36, 1);
}

@keyframes gqv2ShmRise {
        from { opacity: 0; transform: translateY(18px) scale(.97); }
        to   { opacity: 1; transform: none; }
}

.gqv2-shm-col {
        display: flex;
        flex-direction: column;
        gap: 13px;
        min-width: 0;
}

.gqv2-shm-stage {
        position: relative;
        height: min(66vh, 600px);      /* leaves room for the meta block beneath */
        max-width: 86vw;
        aspect-ratio: 9 / 16;          /* JS retunes this to the clip's real ratio */
        background: #000;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
        transition: aspect-ratio .3s ease;
}

/* hover previews are click-through; the modal player must not be */
    .gqv2-shm-stage .gqv2-short-ytframe { pointer-events: auto;
}

.gqv2-shm-stage video,
.gqv2-shm-stage iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        object-fit: contain;
        background: #000;
}

.gqv2-shm-nav,
.gqv2-shm-close {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .25);
        background: rgba(255, 255, 255, .10);
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.gqv2-shm-nav:hover,
.gqv2-shm-close:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .55); transform: scale(1.06);
}

.gqv2-shm-close {
        position: absolute;
        top: -6px;
        right: -6px;
        z-index: 3;
        width: 40px;
        height: 40px;
        font-size: 14px;
        transform: translate(100%, -100%);
}

.gqv2-shm-close:hover { transform: translate(100%, -100%) scale(1.06);
}

.gqv2-shm-meta {
        display: flex;
        flex-direction: column;
        gap: 11px;
        padding: 0 2px;
        min-width: 0;
}

.gqv2-shm-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
}

.gqv2-shm-loc {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
        color: #BFDCEC;
        letter-spacing: .3px;
}

.gqv2-shm-title {
        margin: 3px 0 0;
        font-size: 19px;
        font-weight: 700;
        color: #fff;
        line-height: 1.25;
}

.gqv2-shm-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        background: rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 999px;
        padding: 7px 15px;
        transition: background .2s ease;
}

.gqv2-shm-link:hover { background: rgba(255, 255, 255, .3); color: #fff;
}

.gqv2-shm-count {
        font-size: 12px;
        font-weight: 600;
        color: #BFDCEC;
        flex-shrink: 0;
}

@media (max-width: 700px) {
    .gqv2-shm { padding: 12px;
    }

    .gqv2-shm-dialog { gap: 8px;
    }

    .gqv2-shm-stage { height: min(70vh, 560px);
    }

    .gqv2-shm-nav { width: 40px; height: 40px; font-size: 14px;
    }

    .gqv2-shm-close { top: -4px; right: 50%; transform: translate(50%, -110%);
    }

    .gqv2-shm-close:hover { transform: translate(50%, -110%) scale(1.06);
    }
}

/* ==================== CLOSE TO HOME / WORTH THE DRIVE (bento destination mosaics) ==================== */
    .gqv2 .gqv2-near-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: rgba(18, 59, 99, .08);
        border: 1px solid rgba(18, 59, 99, .16);
        color: var(--gq-navy);
        font-size: 12px;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 999px;
        margin-bottom: 10px;
}

.gqv2 .gqv2-near-chip i {
        color: var(--gq-blue);
}

.gqv2 .gqv2-ntile {
        position: relative;
        display: block;
        border-radius: 16px;
        overflow: hidden;
        background: #0a2038;
        box-shadow: var(--gq-shadow-sm);
        transition: transform .22s ease, box-shadow .22s ease;
}

.gqv2 .gqv2-ntile:hover {
        transform: translateY(-4px);
        box-shadow: var(--gq-shadow);
}

.gqv2 .gqv2-ntile.big { grid-column: span 2; grid-row: span 2;
}

.gqv2 .gqv2-ntile.wide { grid-column: span 2;
}

.gqv2 .gqv2-ntile img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
}

.gqv2 .gqv2-ntile:hover img {
        transform: scale(1.06);
}

.gqv2 .gqv2-ntile .gqv2-short-grad { z-index: 1;
}

.gqv2 .gqv2-near-info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        padding: 16px;
        pointer-events: none;
}

.gqv2 .gqv2-near-drive {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #FFD98A;
        margin-bottom: 5px;
}

.gqv2 .gqv2-near-info h3 {
        font-family: var(--gq-head-font);
        font-size: 20px;
        /* 600 across every listing-card title, matching the cover story headline —
           700/800 read as heavy blocks at these small card sizes */
        font-weight: 600;
        line-height: 1.2;
        color: #fff;
        margin: 0;
}

.gqv2 .gqv2-ntile.big .gqv2-near-info { padding: 20px;
}

.gqv2 .gqv2-ntile.big .gqv2-near-info h3 { font-size: 27px;
}

/* description only fits comfortably on the two larger tiles */
    .gqv2 .gqv2-near-info p { display: none;
}

.gqv2 .gqv2-ntile.big .gqv2-near-info p,
.gqv2 .gqv2-ntile.wide .gqv2-near-info p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12.5px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .85);
        margin: 5px 0 0;
}

@media (max-width: 900px) {
    .gqv2 .gqv2-ntile.big { grid-row: span 2;
    }
}

/* ---- NEAR/BEYOND variant B (near): spotlight + side rail ---- */
    /* .gqv2-nb / .gqv2-nb-main removed with Close to Home Option B.
       The -list / -item / -body rules below stay — Option E's rail uses them. */
    .gqv2 .gqv2-nb-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
}

.gqv2 .gqv2-nb-item {
        flex: 1;
        display: flex;
        gap: 16px;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: var(--gq-shadow-sm);
        color: var(--gq-navy);
        transition: transform .22s ease, box-shadow .22s ease;
}

.gqv2 .gqv2-nb-item:hover {
        transform: translateY(-3px);
        box-shadow: var(--gq-shadow);
        color: var(--gq-navy);
}

/* Fixed WIDTH (never the intrinsic file size) with the image filling the card
       height — so it can't inflate the row. At the ~134px card height this reads
       as roughly 3:2, without the earlier circular height:100%/aspect-ratio bug
       that ballooned every card to the full 280px image. */
    .gqv2 .gqv2-nb-item img {
        width: 200px;
        min-height: 100%;
        object-fit: cover;
        flex-shrink: 0;
}

.gqv2 .gqv2-nb-body {
        padding: 14px 16px 14px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
}

.gqv2 .gqv2-nb-body h3 {
        font-family: var(--gq-head-font);
        font-size: 17px;
        font-weight: 600;
        margin: 0 0 3px;
}

.gqv2 .gqv2-nb-body p {
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--gq-mist);
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

/* ---- Close to Home — Option E: 2x2 image tiles (left) + rail (right) ----
       Same 1.35 / 1 split as Option B; the right column reuses the exact
       .gqv2-nb-list / .gqv2-nb-item styling, so it stays "as is". Only the
       left changes from one spotlight to a 2x2 mosaic of four tiles. */
    .gqv2 .gqv2-ne {
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        gap: 20px;
}

.gqv2 .gqv2-ne-tiles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 16px;
}

.gqv2 .gqv2-ne-tile {
        position: relative;
        display: block;
        border-radius: 16px;
        overflow: hidden;
        background: #0a2038;
        box-shadow: var(--gq-shadow-sm);
        min-height: 205px;
}

.gqv2 .gqv2-ne-tile img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
}

.gqv2 .gqv2-ne-tile:hover img { transform: scale(1.06);
}

.gqv2 .gqv2-ne-tile .gqv2-near-info { padding: 16px;
}

.gqv2 .gqv2-ne-tile .gqv2-near-info h3 {
        font-size: 18px;
        line-height: 1.2;
        margin: 3px 0 0;
}

/* every card that hosts an overlay toggle needs to be a positioning context */
    .gqv2 .gqv2-ntile,
.gqv2 .gqv2-nb-item,
.gqv2 .gqv2-ne-tile,
.gqv2 .gqv2-wtd-card,
.gqv2 .gqv2-wtd-media,
.gqv2 .gqv2-sp,
.gqv2 .gqv2-sp-img { position: relative;
}

@keyframes gqv2-chip-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .gqv2 .gqv2-ne { grid-template-columns: 1fr;
    }

    .gqv2 .gqv2-ne-tile { min-height: 150px;
    }
}

.gqv2 .gqv2-sp {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--gq-line);
        border-radius: var(--gq-radius);
        overflow: hidden;
        text-decoration: none;
        box-shadow: var(--gq-shadow-sm);
        transition: transform .2s ease, box-shadow .2s ease;
}

.gqv2 .gqv2-sp:hover,
.gqv2 .gqv2-sp:focus-visible {
        transform: translateY(-4px);
        box-shadow: var(--gq-shadow);
}

.gqv2 .gqv2-sp-img {
        position: relative;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: var(--gq-navy-dark);
}

.gqv2 .gqv2-sp-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.gqv2 .gqv2-sp:hover .gqv2-sp-img img { transform: scale(1.05);
}

.gqv2 .gqv2-sp-cat {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
        padding: 5px 10px;
        border-radius: 999px;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .7px;
        text-transform: uppercase;
}

.gqv2 .gqv2-sp-body {
        padding: 14px 16px 16px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 1;
}

.gqv2 .gqv2-sp-body h3 {
        margin: 0;
        font-family: var(--gq-head-font);
        font-size: 17px;
        line-height: 1.3;
        color: var(--gq-navy);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.gqv2 .gqv2-sp-loc {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--gq-mist);
        display: inline-flex;
        align-items: center;
        gap: 6px;
}

.gqv2 .gqv2-sp-loc i { color: var(--gq-blue); font-size: 11px;
}

/* Every card here is a paying partner, so the disclosure belongs to the
       section, not to six repeated badges. */
    .gqv2 .gqv2-sp-note {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 700;
        color: var(--gq-mist);
        white-space: nowrap;
}

.gqv2 .gqv2-sp-note i { color: var(--gq-blue);
}

/* ---------- OPTION E — stay / play toggle ---------- */
    .gqv2 .gqv2-spe-tabs {
        position: relative;
        display: inline-flex;
        gap: 6px;
        background: var(--gq-cloud);
        border: 1px solid var(--gq-line);
        border-radius: 999px;
        padding: 6px;
        margin-bottom: 20px;
}

.gqv2 .gqv2-spe-pill {
        position: absolute;
        top: 6px;
        left: 0;
        height: calc(100% - 12px);
        border-radius: 999px;
        background: var(--gq-blue);
        box-shadow: 0 8px 18px -8px rgba(36, 116, 166, .55);
        transition: transform .38s cubic-bezier(.4, 0, .2, 1), width .38s cubic-bezier(.4, 0, .2, 1);
        pointer-events: none;
        z-index: 0;
}

.gqv2 .gqv2-spe-pill.no-anim { transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .gqv2 .gqv2-spe-pill { transition: none;
    }
}

.gqv2 .gqv2-spe-tab {
        position: relative;
        z-index: 1;
        border: 0;
        background: transparent;
        color: var(--gq-slate);
        font-family: var(--gq-font);
        font-weight: 800;
        font-size: 13.5px;
        padding: 10px 20px;
        border-radius: 999px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: color .18s ease;
}

.gqv2 .gqv2-spe-tab.is-active { color: #fff;
}

/* Four across, and shorter: the filter means the row is often 4 (stay) or
       2 (play), so 4 columns lands "stay" as exactly one clean row. */
    .gqv2 .gqv2-spe-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
}

.gqv2 .gqv2-spe-grid .gqv2-sp {
        transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .28s ease, box-shadow .2s ease;
}

.gqv2 .gqv2-spe-grid .gqv2-sp.is-out {
        opacity: 0;
        transform: scale(.94);
        pointer-events: none;
}

/* shorter tile: flatter photo + tighter body */
    .gqv2 .gqv2-spe-grid .gqv2-sp-img { aspect-ratio: 16 / 9;
}

.gqv2 .gqv2-spe-grid .gqv2-sp-body { padding: 10px 12px 12px; gap: 3px;
}

.gqv2 .gqv2-spe-grid .gqv2-sp-body h3 { font-size: 14.5px; line-height: 1.25;
}

.gqv2 .gqv2-spe-grid .gqv2-sp-loc { font-size: 11.5px;
}

.gqv2 .gqv2-spe-grid .gqv2-sp-cat {
        top: 8px;
        left: 8px;
        padding: 4px 8px;
        font-size: 9px;
}

/* The vibe rides on the photo opposite the category, so it costs no height.
       Solid fill + white label: the pill IS the surface, so the photo under it
       is irrelevant. Fills are pre-derived server-side to clear white text. */
    .gqv2 .gqv2-vibe-tag {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 8px;
        border-radius: 999px;
        background: var(--vfill, var(--gq-navy));
        color: var(--vink, #fff);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .5px;
        text-transform: uppercase;
        box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
}

.gqv2 .gqv2-vibe-tag i { font-size: 9px;
}

@media (max-width: 1200px) {
    .gqv2 .gqv2-spe-grid { grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1000px) {
    .gqv2 .gqv2-spe-grid { grid-template-columns: repeat(2, 1fr); gap: 12px;
    }
}

@media (max-width: 600px) {
    .gqv2 .gqv2-spe-grid { grid-template-columns: 1fr;
    }

    .gqv2 .gqv2-spe-tabs { display: flex; width: 100%;
    }

    .gqv2 .gqv2-spe-tab { flex: 1; justify-content: center; padding: 10px 8px; font-size: 12px;
    }
}

/* .gqv2-feat-head and its children moved to site.css — the story page uses the
   same section header. */

/* ==================== EXPLORE BY STATE ==================== */
    /* light background treatment (matches the search area): soft aurora + faint
       dots, with gently pulsing location "pings" as the animated accent. */
    .gqv2 [data-vgroup="states"] {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, #ffffff 0%, #f1f8fc 100%);
}

.gqv2 [data-vgroup="states"]::before {
        content: "";
        position: absolute; inset: -25%;
        background:
            radial-gradient(28% 40% at 22% 28%, rgba(36, 116, 166, .10), transparent 70%),
            radial-gradient(26% 38% at 80% 26%, rgba(0, 131, 143, .08), transparent 70%),
            radial-gradient(30% 42% at 66% 80%, rgba(255, 118, 0, .05), transparent 70%);
        animation: gqv2SearchAurora 26s ease-in-out infinite alternate;
        pointer-events: none; z-index: 0;
}

.gqv2 [data-vgroup="states"]::after {
        content: "";
        position: absolute; inset: 0;
        background-image: radial-gradient(circle, rgba(18, 59, 99, .06) 1px, transparent 1.6px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(ellipse 82% 78% at 50% 46%, #000 34%, transparent 100%);
        mask-image: radial-gradient(ellipse 82% 78% at 50% 46%, #000 34%, transparent 100%);
        pointer-events: none; z-index: 0;
}

.gqv2 .gqv2-states-anim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
}

.gqv2 [data-vgroup="states"] > .gqv2-wrap { position: relative; z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .gqv2 [data-vgroup="states"]::before { animation: none;
    }

    .gqv2 .gqv2-states-anim { display: none;
    }
}

/* Vibes section: plain sand background — the drifting icon layer, the
       hover-reactive colour wash and the dot texture were all removed. */
    .gqv2 [data-vgroup="vibes"] { position: relative;
}

.gqv2 [data-vgroup="vibes"] > .gqv2-wrap { position: relative; z-index: 1;
}

/* ==================== STATES B: postcard letter tiles ==================== */
    .gqv2 .gqv2-states-post {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
}

/* 175 gives 7 per row at desktop width — 150 fitted 8 and stranded a single
       postcard on the last row */
    .gqv2 .gqv2-states-post > * { flex: 0 1 175px;
}

/* --- narrower screens: same postcard, scaled down ---
       At the desktop basis two cards need 364px, so a 390px phone wrapped to ONE
       per row — 17 states became 17 rows. These steps keep the design and just
       shrink it: 4-5 across on a tablet, 3 across on a phone. */
    @media (max-width: 900px) {
    .gqv2 .gqv2-states-post { gap: 12px;
    }

    .gqv2 .gqv2-states-post > * { flex: 0 1 132px;
    }

    .gqv2 .gqv2-state-post { padding: 14px 12px 12px;
    }

    .gqv2 .gqv2-state-post-abbr { font-size: 32px; margin-bottom: 7px;
    }
}

@media (max-width: 640px) {
    .gqv2 .gqv2-states-post { gap: 10px;
    }

    .gqv2 .gqv2-states-post > * { flex: 0 1 92px;
    }

    .gqv2 .gqv2-state-post {
            padding: 10px 8px 9px;
            border-radius: 11px;
    }

    .gqv2 .gqv2-state-post-abbr { font-size: 24px; margin-bottom: 4px;
    }

    .gqv2 .gqv2-state-post b { font-size: 11.5px; line-height: 1.25;
    }
}

.gqv2 .gqv2-state-post {
        display: block;
        background: #fff;
        border: 1px solid var(--gq-line);
        border-radius: 14px;
        padding: 18px 16px 16px;
        color: var(--gq-navy);
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gqv2 .gqv2-state-post:hover {
        transform: translateY(-4px);
        border-color: var(--gq-gold);
        box-shadow: var(--gq-shadow-sm);
        color: var(--gq-navy);
}

.gqv2 .gqv2-state-post-abbr {
        font-family: var(--gq-head-font);
        font-size: 42px;
        font-weight: 800;
        line-height: 1;
        display: block;
        margin-bottom: 10px;
}

.gqv2 .gqv2-state-post:nth-child(4n+1) .gqv2-state-post-abbr { color: var(--gq-blue);
}

.gqv2 .gqv2-state-post:nth-child(4n+2) .gqv2-state-post-abbr { color: var(--gq-green);
}

.gqv2 .gqv2-state-post:nth-child(4n+3) .gqv2-state-post-abbr { color: var(--gq-gold);
}

.gqv2 .gqv2-state-post:nth-child(4n) .gqv2-state-post-abbr { color: var(--gq-navy);
}

.gqv2 .gqv2-state-post b {
        display: block;
        font-size: 13.5px;
        font-weight: 800;
        margin-bottom: 2px;
}

.gqv2 .gqv2-state-post small {
        display: block;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--gq-mist);
}

/* ==================== RESPONSIVE ==================== */
    @media (max-width: 1050px) {
    /* tablet: aside on top, carousel below */
        .gqv2 .gqv2-inspired {
            grid-template-columns: minmax(0, 1fr);
    }

    .gqv2 .gqv2-inspired-aside {
            grid-column: 1 / -1;
            text-align: center;
    }

    .gqv2 .gqv2-vibes-grid {
            grid-template-columns: 1fr;
    }

    .gqv2 .gqv2-vibes-aside {
            text-align: center;
    }

    .gqv2 .gqv2-vibes {
            grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 620px) {
    .gqv2 .gqv2-section {
            padding: 54px 0;
    }

    .gqv2 .gqv2-story-body {
            padding: 12px 9px;
    }

    .gqv2 .gqv2-story-body h3 {
            font-size: 13.5px;
    }

    .gqv2 .gqv2-vibes {
            grid-template-columns: repeat(2, 1fr);
    }

    .gqv2 .gqv2-slide-actions .gqv2-btn {
            flex: 1;
            justify-content: center;
    }
}