/* ---------------------------------------------------------------------------
   The public listing landing page — /destination/76/akron-summit-cvb and the
   three other types.

   Loaded by that page alone, after site.css, so every token it uses
   (--gq-navy, --gq-line, --gq-shadow, --gq-font …) is already defined and
   nothing here redeclares one. Scoped .gqv2 to match, except the four overlays
   — lightbox, guide reader, video modal — which are appended to <body> and sit
   outside the page wrapper.

   Two halves, in this order:

     SHARED COMPONENTS  the photo tile and its lightbox, the video facade and
                        its player, the Facebook page plugin, the map frame, the
                        rating and the social row. Nothing here decides where
                        anything goes; the page places them.

                        NOT the travel guide reader. The design candidate carried
                        one and this file briefly did too; the site already has a
                        single one in shared/guide-reader.css, which the guide
                        directory, search, the homepage and the partner editor
                        all load. The page links to it and styles nothing.
     PAGE LAYOUT        the mosaic, the title bar, the section rail, the two
                        column body, the vibe cards and the closing guide band.

   Grown out of the design-C candidate that won the listing page review — the
   demo's shared listing-design-base.css for the first half, its own <style>
   block for the second. The four vibe treatments it carried behind a switcher
   are down to the one that was chosen (cards), and the demo chrome, the
   nearby-card and the lead-panel controls it never used are gone.
   --------------------------------------------------------------------------- */


/* ==========================================================================
   SHARED COMPONENTS
   ========================================================================== */


/* A section's eyebrow — small, upper, terracotta. Every candidate labels its
   bands with one, they just place them differently. */
.gqv2 .gq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: var(--gq-gold);
    margin: 0 0 10px;
}

.gqv2 .gq-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.gqv2 .gq-eyebrow.is-centred { justify-content: center; }

/* ==================== PHOTO GALLERY ====================
   The grid itself is candidate-specific; the tile treatment and the "+N" badge
   are not. */

.gqv2 .gq-shot {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: var(--gq-cloud);
    cursor: zoom-in;
}

.gqv2 .gq-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

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

/* ---- lightbox ---- */
.gq-lb {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: none;
    background: rgba(8, 20, 34, .95);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.gq-lb.is-open { display: flex; flex-direction: column; }

.gq-lb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    color: rgba(255, 255, 255, .82);
    font: 600 13px/1 'Poppins', system-ui, sans-serif;
}

.gq-lb-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px 12px;
    min-height: 0;
}

.gq-lb-stage img {
    max-width: min(1180px, 94vw);
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.gq-lb-cap {
    text-align: center;
    color: rgba(255, 255, 255, .7);
    font: 500 13px/1.5 'Poppins', system-ui, sans-serif;
    padding: 0 20px 14px;
}

.gq-lb-film {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 20px 20px;
    scrollbar-width: thin;
}

.gq-lb-film button {
    flex: 0 0 84px;
    height: 58px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    opacity: .5;
    transition: opacity .18s ease, border-color .18s ease;
}

.gq-lb-film button.is-on,
.gq-lb-film button:hover { opacity: 1; border-color: var(--gq-gold, #D96C47); }

.gq-lb-film img { width: 100%; height: 100%; object-fit: cover; }

.gq-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background .18s ease;
}

.gq-lb-nav:hover { background: rgba(255, 255, 255, .26); }
.gq-lb-prev { left: 22px; }
.gq-lb-next { right: 22px; }

.gq-lb-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.gq-lb-close:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 720px) {
    .gq-lb-nav { display: none; }
    .gq-lb-film { padding-bottom: 14px; }
}

/* ==================== VIDEO ====================
   A facade, not an embed: the thumbnail comes from YouTube's static host and
   the player is only inserted on click, so a listing with three videos costs
   no third-party script until someone asks for one. */

.gqv2 .gq-vid {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    aspect-ratio: 16 / 9;
}

.gqv2 .gq-vid img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s ease, transform .6s ease; }
.gqv2 .gq-vid:hover img { opacity: 1; transform: scale(1.05); }

.gqv2 .gq-vid-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--gq-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding-left: 4px;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7);
    transition: transform .22s ease, background .22s ease;
}

.gqv2 .gq-vid:hover .gq-vid-play { transform: translate(-50%, -50%) scale(1.1); background: #fff; }

.gqv2 .gq-vid-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 16px 14px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
}

.gq-vmodal {
    position: fixed;
    inset: 0;
    z-index: 11500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 20, 34, .95);
}

.gq-vmodal.is-open { display: flex; }

.gq-vmodal-inner {
    width: min(1080px, 100%);
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    position: relative;
}

.gq-vmodal-inner iframe { width: 100%; height: 100%; border: 0; }

.gq-vmodal-close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
}

/* ==================== FACEBOOK FEED ====================
   Bought by plan_destinations.widget_fb. The post list scrolls inside a capped
   height rather than growing the page: a feed is a side channel, and letting it
   set the length of a sidebar would put the listing's own content below three
   holiday snaps. Facebook's own Page Plugin behaves the same way. */

.gqv2 .gq-fb {
    border: 1.5px solid var(--gq-line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.gqv2 .gq-fb-top {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--gq-line);
    background: linear-gradient(135deg, #1877F2 0%, #0d5fc4 100%);
    color: #fff;
}

.gqv2 .gq-fb-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 15px;
}

.gqv2 .gq-fb-who { min-width: 0; flex: 1; }
.gqv2 .gq-fb-who b { display: block; font-size: 13.5px; line-height: 1.25; }

.gqv2 .gq-fb-who small {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gqv2 .gq-fb-follow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    transition: background .18s ease;
}

.gqv2 .gq-fb-follow:hover { background: rgba(255, 255, 255, .32); }

/* Facebook's plugin renders at a fixed pixel width and centres itself, so the
   frame is the thing that flexes and the iframe sits in the middle of it. */
.gqv2 .gq-fb-frame {
    display: flex;
    justify-content: center;
    background: #fff;
    overflow: hidden;
}

.gqv2 .gq-fb-frame iframe {
    width: 100%;
    max-width: 500px;
    border: 0;
    display: block;
}

/* ==================== MAP ====================
   OpenStreetMap rather than Google: the Places key is billable and server-side
   only, and an embedded Google map on every listing view would spend it. The
   live page can swap the src without touching the frame. */

.gqv2 .gq-map {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid var(--gq-line);
    background: var(--gq-cloud);
}

.gqv2 .gq-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.9); }

.gqv2 .gq-map-card {
    position: absolute;
    left: 14px;
    bottom: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--gq-shadow-sm);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.gqv2 .gq-map-card i {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--gq-blue-tint);
    color: var(--gq-blue);
}

.gqv2 .gq-map-card strong { display: block; font-size: 14px; color: var(--gq-navy); }
.gqv2 .gq-map-card span { font-size: 12.5px; color: var(--gq-mist); }

/* ==================== MISC ==================== */

/* Google's rating, stated as Google's — the number is not ours and the page
   should not imply it is. */
.gqv2 .gq-rating { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.gqv2 .gq-rating b { font-size: 15px; color: var(--gq-navy); }
.gqv2 .gq-stars { color: #E8A33D; letter-spacing: 1px; font-size: 12.5px; }

.gqv2 .gq-social-row { display: flex; gap: 9px; flex-wrap: wrap; }

.gqv2 .gq-social-row a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1.5px solid var(--gq-line);
    color: var(--gq-navy);
    font-size: 15px;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.gqv2 .gq-social-row a:hover { background: var(--gq-navy); border-color: var(--gq-navy); color: #fff; transform: translateY(-2px); }

/* The demo carried its own prefers-reduced-motion blanket here. Dropped: site.css
   already has one over the same `.gqv2 *`, and a page stylesheet is the wrong
   place to make a site-wide promise — every other page would keep the animation
   this one turned off. */


/* ==========================================================================
   PAGE LAYOUT
   ========================================================================== */

/* ==================== MOSAIC ====================
   One big tile and four small. Under 760px it becomes a single
   swipeable strip rather than five squashed tiles.

   First thing on the page, so it carries the gap under the sticky
   header itself — flush against it the photos read as part of the
   chrome rather than as the listing. */
.gqv2 .gq-c-shots { padding-top: 22px; }

.gqv2 .gq-c-mosaic {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 8px;
    border-radius: 18px;
    overflow: hidden;
}

/* The tiles butt together inside the rounded frame, so they lose their
   own corners — the container owns the radius. */
.gqv2 .gq-c-mosaic .gq-shot { border-radius: 0; }
.gqv2 .gq-c-mosaic .gq-shot:first-child { grid-row: span 2; }

.gqv2 .gq-c-allshots {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .96);
    color: var(--gq-navy);
    font: 700 12.5px/1 var(--gq-font);
    cursor: pointer;
    box-shadow: var(--gq-shadow-sm);
    transition: transform .18s ease;
}

.gqv2 .gq-c-allshots:hover { transform: translateY(-2px); }

/* ---- fewer than five photographs ----
   The grid above is five cells, and the design candidate left a listing with
   fewer to simply fill fewer of them. On real data that is not sparse, it is
   broken: l_gallery is 1 on the bottom plan, so a Basic listing drew one tile
   two columns wide with a third of the row blank beside it.

   A modifier per count rather than :has() counting for us, because the view
   already knows the number and a stylesheet working it out at paint time is the
   long way round. Each shape is chosen to leave no hole: at four the lead tile
   stops spanning and they sit as a quad, which is better than a five-cell grid
   with one corner missing.

   The <760px block at the end of the file turns all of these into one swipeable
   strip, and comes after them so it wins. */
.gqv2 .gq-c-mosaic.is-1 { grid-template-columns: 1fr; grid-template-rows: 408px; }
.gqv2 .gq-c-mosaic.is-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 340px; }
.gqv2 .gq-c-mosaic.is-3 { grid-template-columns: 2fr 1fr; }
.gqv2 .gq-c-mosaic.is-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 204px 204px; }

.gqv2 .gq-c-mosaic.is-1 .gq-shot:first-child,
.gqv2 .gq-c-mosaic.is-2 .gq-shot:first-child,
.gqv2 .gq-c-mosaic.is-4 .gq-shot:first-child { grid-row: auto; }

/* ==================== TITLE BAR ====================
   Legacy's .utf_listing_titlebar: the guide cover and the listing's
   name side by side in one row. */
.gqv2 .gq-c-title { padding-top: 26px; padding-bottom: 22px; }

.gqv2 .gq-c-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gq-mist);
    margin-bottom: 16px;
}

.gqv2 .gq-c-crumb a { color: var(--gq-blue); }
.gqv2 .gq-c-crumb a:hover { text-decoration: underline; }
.gqv2 .gq-c-crumb i { font-size: 8px; opacity: .45; }

.gqv2 .gq-c-titlerow { display: flex; align-items: stretch; gap: 30px; }

/* ---- left: the guide ----
   aspect-ratio 3/4 is legacy's, not a guess — and it is close enough to
   the real book (0.7356 from Heyzine's measurement of the PDF) that the
   cover fills it without letterboxing. */
.gqv2 .gq-c-guidecard {
    position: relative;
    flex: 0 0 220px;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: var(--gq-navy) center/cover no-repeat;
    box-shadow: var(--gq-shadow);
    transition: transform .22s ease, box-shadow .22s ease;
}

.gqv2 .gq-c-guidecard:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -26px rgba(9, 26, 45, .6);
}

.gqv2 .gq-c-guidecard::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 26, 45, .02) 40%, rgba(9, 26, 45, .58));
}

/* Legacy's "VISITOR GUIDE" tag, in the design system's terracotta
   rather than its orange. */
.gqv2 .gq-c-guidetag {
    position: absolute;
    left: 12px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 7px;
    background: var(--gq-gold);
    color: #fff;
    font: 800 10px/1 var(--gq-font);
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.gqv2 .gq-c-guidepages {
    position: absolute;
    right: 12px;
    bottom: 14px;
    z-index: 2;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    opacity: .9;
    transition: opacity .25s ease;
}

/* Hovering the cover has to say what clicking it does. Without this the
   cover is a picture that happens to be clickable; with it, it is a
   button. */
.gqv2 .gq-c-guideread {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    transform: translate(-50%, -46%);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: var(--gq-navy);
    font: 800 12px/1 var(--gq-font);
    letter-spacing: .9px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}

.gqv2 .gq-c-guidecard:hover .gq-c-guideread,
.gqv2 .gq-c-guidecard:focus-visible .gq-c-guideread {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* The scrim deepens so the label reads against any cover art. */
.gqv2 .gq-c-guidecard:hover::after { background: linear-gradient(180deg, rgba(9, 26, 45, .45), rgba(9, 26, 45, .7)); }
.gqv2 .gq-c-guidecard:hover .gq-c-guidepages { opacity: 0; }

/* Touch has no hover, so the invitation is simply always visible. */
@media (hover: none) {
    .gqv2 .gq-c-guideread { opacity: 1; transform: translate(-50%, -50%); }
}

/* ==================== SECTION RAIL ====================
   Design B's tab rail, which jumps straight to a section. Sticks under
   the site header, which is itself sticky at 76px. */
.gqv2 .gq-c-rail {
    position: sticky;
    top: 76px;
    z-index: 80;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--gq-line);
    border-bottom: 1px solid var(--gq-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.gqv2 .gq-c-rail-inner {
    display: flex;
    gap: 28px;
    height: 54px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}

.gqv2 .gq-c-rail-inner::-webkit-scrollbar { display: none; }

.gqv2 .gq-c-rail a {
    flex: 0 0 auto;
    position: relative;
    height: 54px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--gq-slate);
    white-space: nowrap;
    transition: color .18s ease;
}

.gqv2 .gq-c-rail a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--gq-gold);
    transform: scaleX(0);
    transition: transform .22s ease;
}

.gqv2 .gq-c-rail a:hover,
.gqv2 .gq-c-rail a.is-on { color: var(--gq-navy); }
.gqv2 .gq-c-rail a.is-on::after { transform: scaleX(1); }

/* The guide gets a button at the end of the rail, so the offer is
   reachable from anywhere on the page without scrolling back. */
.gqv2 .gq-c-rail-cta { margin-left: auto; flex: 0 0 auto; padding-left: 20px; }

/* ---- right: name, address, buttons ---- */
.gqv2 .gq-c-titlemain { flex: 1 1 auto; min-width: 0; }

.gqv2 .gq-c-titlemain h1 {
    font-size: clamp(25px, 2.9vw, 34px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.022em;
    margin: 0 0 10px;
}

.gqv2 .gq-c-addr {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14.5px;
    color: var(--gq-slate);
    margin-bottom: 12px;
}

.gqv2 .gq-c-addr i { color: var(--gq-gold); margin-top: 3px; }
.gqv2 .gq-c-addr:hover { color: var(--gq-blue); }

.gqv2 .gq-c-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gq-slate);
    margin-bottom: 18px;
}

.gqv2 .gq-c-meta i { color: var(--gq-gold); margin-right: 6px; }
.gqv2 .gq-c-meta .gq-sep { color: var(--gq-line); }

/* Legacy's .listing_item_social — a row of outline buttons. */
.gqv2 .gq-c-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }

.gqv2 .gq-c-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 1.5px solid var(--gq-line);
    border-radius: 10px;
    background: #fff;
    font: 600 13.5px/1 var(--gq-font);
    color: var(--gq-charcoal);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.gqv2 .gq-c-btn i { color: var(--gq-blue); font-size: 13px; }
.gqv2 .gq-c-btn:hover { border-color: var(--gq-blue); background: var(--gq-blue-tint); }

/* The phone is the one that gets answered, so it is the solid one. */
.gqv2 .gq-c-btn.is-call {
    background: var(--gq-navy);
    border-color: var(--gq-navy);
    color: #fff;
    font-weight: 700;
}

.gqv2 .gq-c-btn.is-call i { color: rgba(255, 255, 255, .8); }
.gqv2 .gq-c-btn.is-call:hover { background: var(--gq-navy-dark); border-color: var(--gq-navy-dark); }

/* Legacy tints its events link blue to set it apart from Website. */
.gqv2 .gq-c-btn.is-events { color: var(--gq-blue); border-color: rgba(36, 116, 166, .35); }
.gqv2 .gq-c-btn.is-events i { color: var(--gq-blue); }

/* ---- the request toggle, in the button row ----
   web_request_toggle() emits one element with one set of classes wherever it is
   used, because the tray finds every copy of a listing's toggle by data-guideid
   and presses them together. So the row adapts to IT rather than the other way
   round: 41px to match a .gq-c-btn's height exactly, and a resting border so it
   does not read as a floating disc among four bordered pills — everywhere else
   it sits over a photograph, where the shadow alone is enough. */
.gqv2 .gq-c-btns .gqv2-reqbtn {
    width: 41px;
    height: 41px;
    border: 1.5px solid var(--gq-line);
    box-shadow: none;
}

.gqv2 .gq-c-btns .gqv2-reqbtn:hover { transform: none; border-color: var(--gq-blue); background: var(--gq-blue-tint); }
.gqv2 .gq-c-btns .gqv2-reqbtn[aria-pressed="true"] { border-color: var(--gq-green); }

/* The tip hangs to the left by default, which on a card corner is the only
   direction with room. Here that is where the Website button is, so it drops
   below the row instead. */
.gqv2 .gq-c-btns .gqv2-reqbtn-tip {
    right: auto;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
}

/* Legacy shows a "Featured" chip. Ours is real — plan.featured. */
.gqv2 .gq-c-featured {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(217, 108, 71, .12);
    color: var(--gq-gold-dark);
    font: 800 10.5px/1 var(--gq-font);
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.gqv2 .gq-c-titlemain .gq-social-row { margin-top: 14px; }
.gqv2 .gq-c-titlemain .gq-social-row a { width: 38px; height: 38px; font-size: 14px; }

/* ==================== BODY: CONTENT + SIDEBAR ====================
   Legacy's shape: a wide content column with About, Features and
   Location stacked in it, and a narrow column beside it holding the
   Facebook feed.

   Two things deliberately NOT copied. Its sidebar is 261px against an
   807px main, too narrow to hold Facebook's plugin without the plugin
   overflowing it — this one is 340px, the width the plugin wants. And
   its sidebar is position:relative, so it scrolls away and leaves a
   long empty gutter beside the description; this one sticks. */
.gqv2 .gq-c-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    padding-top: 8px;
    padding-bottom: 70px;
    align-items: start;
}

.gqv2 .gq-c-sec {
    padding: 30px 0;
    border-top: 1px solid var(--gq-line);
    /* Header (76) + rail (54) + a little air, so a jumped-to heading
       lands below both sticky bars rather than under them. */
    scroll-margin-top: 146px;
}

.gqv2 .gq-c-sec:first-child { border-top: 0; padding-top: 8px; }

.gqv2 .gq-c-sec h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 6px;
}

.gqv2 .gq-c-sec > p.gq-c-lede {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--gq-mist);
}

/* ---- about, with a fold ----
   Legacy clamps its description to five lines and hides the rest behind
   "read more"; same idea, with the text still fully in the page for the
   crawler. Eight lines rather than five — five cuts this listing off
   mid-sentence in its first paragraph. */
.gqv2 .gq-c-about { font-size: 15.5px; line-height: 1.82; color: #3d4650; }
.gqv2 .gq-c-about p { margin: 0 0 16px; }
.gqv2 .gq-c-about strong { color: var(--gq-navy); }
.gqv2 .gq-c-about ul { margin: 0 0 16px; padding-left: 20px; }
.gqv2 .gq-c-about li { margin-bottom: 7px; }
.gqv2 .gq-c-about a { color: var(--gq-blue); font-weight: 600; text-decoration: underline; }

.gqv2 .gq-c-about-clip { position: relative; max-height: 268px; overflow: hidden; }

.gqv2 .gq-c-about-clip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 108px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 76%);
}

.gqv2 .gq-c-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 2px solid var(--gq-gold);
    background: none;
    font: 800 13.5px/1 var(--gq-font);
    color: var(--gq-navy);
    cursor: pointer;
}

/* ---- vibes ----
   A card each: picture, name, what the vibe is, and the partner's
   highlights where they wrote any.

   Two fallbacks make this work on real data, where most vibes are
   seeded from features and carry nothing of their own:

     text   the partner's blurb if written, otherwise the description
            App\Reference\Vibes holds for that vibe. A real sentence
            from the dataset, not an invented one.
     image  the partner's picture if uploaded, otherwise a gallery photo
            blurred hard with the vibe's colour over it and its icon on
            top. Blurred on purpose — an unblurred stand-in reads as a
            photograph OF that vibe, which would be a small lie. */
.gqv2 .gq-c-vibecards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 14px;
}

/* A wide, short card rather than a tall one with a banner. The picture
   earns a medallion, not a headline — a vibe is a label with a sentence
   attached, and giving it a 16/9 hero made four of them taller than the
   description they sit under. */
.gqv2 .gq-c-vibecard {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: 18px 20px 18px 18px;
    border: 1.5px solid var(--gq-line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* A hairline of the vibe's own colour down the left edge — enough to
   tell four cards apart at a glance without tinting the whole card. */
.gqv2 .gq-c-vibecard::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--vfill, var(--gq-navy));
    opacity: .85;
}

.gqv2 .gq-c-vibecard:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--gq-shadow);
}

/* ---- the medallion ---- */
.gqv2 .gq-c-medal {
    position: relative;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--vfill, var(--gq-navy));
    /* A soft halo in the vibe's colour, so the circle sits on the card
       rather than being punched out of it. */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 8px 20px -8px var(--vfill, #000);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.gqv2 .gq-c-vibecard:hover .gq-c-medal { transform: scale(1.06) rotate(-4deg); }

.gqv2 .gq-c-medal img { width: 100%; height: 100%; object-fit: cover; }

/* Blurred hard, then tinted: an unblurred stand-in would read as a
   photograph OF the vibe, which is a small lie about a picture the
   partner never supplied. Scaled up so the blur's soft edge falls
   outside the circle instead of showing as a pale rim. */
.gqv2 .gq-c-medal.is-blur img { filter: blur(9px) saturate(1.3); transform: scale(1.4); }

.gqv2 .gq-c-medal.is-blur::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vfill, var(--gq-navy));
    opacity: .58;
}

.gqv2 .gq-c-medal i {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    text-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}

/* With a real picture the icon shrinks to a corner badge, so the photo
   is the thing being looked at and the icon just names it. */
.gqv2 .gq-c-medal.has-pic i {
    inset: auto -2px -2px auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--vfill, var(--gq-navy));
    border: 2px solid #fff;
    font-size: 11px;
    text-shadow: none;
}

.gqv2 .gq-c-vibebody { flex: 1 1 auto; min-width: 0; }
.gqv2 .gq-c-vibebody h4 { margin: 2px 0 6px; font-size: 16.5px; color: var(--gq-navy); font-weight: 700; }
.gqv2 .gq-c-vibebody p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.65; color: var(--gq-mist); }

/* ---- highlights ----
   Each is {name, reason}: a named place and why it fits the vibe. Both
   are shown — the name alone is a list of nouns, and the reason is the
   part a partner actually wrote. The name leads in navy, the reason
   follows in the muted colour on its own line. */
.gqv2 .gq-c-vibebody ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 10px; }

.gqv2 .gq-c-vibebody li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    font-size: 13px;
    line-height: 1.55;
}

.gqv2 .gq-c-vibebody li > i { color: var(--vfill, var(--gq-green)); font-size: 11px; margin-top: 4px; }
.gqv2 .gq-c-vibebody li b { display: block; color: var(--gq-navy); font-weight: 700; }
.gqv2 .gq-c-vibebody li span { color: var(--gq-mist); }

.gqv2 .gq-c-vibemore {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gq-blue);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: gap .18s ease;
}

.gqv2 .gq-c-vibecard:hover .gq-c-vibemore { gap: 11px; }
.gqv2 .gq-c-vibemore i { font-size: 10px; }

/* ---- features as tags ----
   Legacy calls them listing-tags and renders them as pills, one per
   feature. Kept: they are facets, and a pill reads as pressable. */
.gqv2 .gq-c-tags { display: flex; flex-wrap: wrap; gap: 9px; }

.gqv2 .gq-c-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--gq-cloud);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gq-charcoal);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.gqv2 .gq-c-tag i { color: var(--gq-blue); font-size: 13px; transition: color .18s ease; }
.gqv2 .gq-c-tag:hover { background: var(--gq-navy); color: #fff; transform: translateY(-2px); }
.gqv2 .gq-c-tag:hover i { color: rgba(255, 255, 255, .85); }

/* ---- videos ---- */
.gqv2 .gq-c-vids { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

/* ---- sidebar ---- */
.gqv2 .gq-c-aside { position: sticky; top: 100px; display: grid; gap: 18px; }

/* ==================== GUIDE BAND (bottom) ====================
   The guide a second time, at the end of the page.

   Not a duplicate for its own sake: the cover in the title bar is a
   small thumbnail someone scrolls straight past on the way to the
   description, and by the time they have read to the bottom they have
   decided whether they care. This is the one that asks properly — big
   cover, what it is, and both ways to get it.

   On phones it is the ONLY one: the title-bar cover is hidden below
   760px, so the guide is offered once, where the reading ends, instead
   of eating the top of a small screen before the name is even visible. */
.gqv2 .gq-c-guideband {
    background: var(--gq-sand);
    border-top: 1px solid rgba(18, 59, 99, .08);
    scroll-margin-top: 130px;
}

.gqv2 .gq-c-gb-inner {
    display: flex;
    align-items: center;
    gap: 52px;
    padding-top: 64px;
    padding-bottom: 68px;
}

.gqv2 .gq-c-gb-cover {
    position: relative;
    flex: 0 0 230px;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 0;
    border-radius: 4px 14px 14px 4px;
    overflow: hidden;
    cursor: pointer;
    background: var(--gq-navy) center/cover no-repeat;
    box-shadow: 0 34px 66px -26px rgba(9, 26, 45, .62);
    transform: perspective(1200px) rotateY(-9deg);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}

/* The spine: what stops it reading as a flat rectangle. */
.gqv2 .gq-c-gb-cover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 13px;
    z-index: 2;
    background: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
}

.gqv2 .gq-c-gb-cover:hover {
    transform: perspective(1200px) rotateY(-3deg) translateY(-6px);
    box-shadow: 0 44px 78px -28px rgba(9, 26, 45, .7);
}

.gqv2 .gq-c-gb-text { flex: 1 1 auto; min-width: 0; }

.gqv2 .gq-c-gb-text h2 {
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.022em;
    margin: 0 0 12px;
}

.gqv2 .gq-c-gb-text > p {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.72;
    color: var(--gq-mist);
    max-width: 56ch;
}

.gqv2 .gq-c-gb-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0 0 26px;
    padding: 0 0 22px;
    border-bottom: 1px solid rgba(18, 59, 99, .12);
}

.gqv2 .gq-c-gb-facts b { display: block; font-size: 21px; font-weight: 700; color: var(--gq-navy); line-height: 1.1; }

.gqv2 .gq-c-gb-facts span {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gq-mist);
}

.gqv2 .gq-c-gb-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.gqv2 .gq-c-gb-pdf {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gq-navy);
    border-bottom: 2px solid var(--gq-gold);
    padding-bottom: 3px;
}

.gqv2 .gq-c-gb-pdf:hover { color: var(--gq-blue); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1080px) {
    .gqv2 .gq-c-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
    .gqv2 .gq-c-guidecard { flex-basis: 186px; }
    .gqv2 .gq-c-titlerow { gap: 24px; }
}

@media (max-width: 920px) {
    .gqv2 .gq-c-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .gqv2 .gq-c-aside { position: static; margin-top: 30px; }
}

@media (max-width: 760px) {
    .gqv2 .gq-c-mosaic {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        grid-template-rows: 230px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        border-radius: 14px;
    }

    .gqv2 .gq-c-mosaic .gq-shot { grid-row: auto !important; scroll-snap-align: start; border-radius: 12px; }
    .gqv2 .gq-c-allshots { position: static; margin-top: 10px; width: 100%; justify-content: center; }

    /* The title-bar cover is hidden on a phone — the band at the bottom
       is the guide's proper offer, and two of them on a small screen
       means the name is pushed below the fold to make room for a
       thumbnail. */
    .gqv2 .gq-c-guidecard { display: none; }
    .gqv2 .gq-c-titlerow { flex-direction: column; gap: 20px; }
    .gqv2 .gq-c-btn.is-call { flex: 1 1 100%; justify-content: center; }

    /* Stacked, and centred — it is the last thing on the page and the
       only place the guide is offered here. */
    .gqv2 .gq-c-gb-inner {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding-top: 48px;
        padding-bottom: 52px;
    }

    .gqv2 .gq-c-gb-cover { flex: 0 0 auto; width: 190px; transform: none; }
    .gqv2 .gq-c-gb-cover:hover { transform: translateY(-4px); }
    .gqv2 .gq-c-gb-text > p { margin-left: auto; margin-right: auto; }
    .gqv2 .gq-c-gb-facts { justify-content: center; }
    .gqv2 .gq-c-gb-btns { justify-content: center; }
}
