/* ---------------------------------------------------------------------------
   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 lightbox and
   the video modal, which are appended to <body> and sit outside the page
   wrapper. The guide reader and the vibe reader are shared components with
   stylesheets of their own.

   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 all gone: "How it feels" draws the search page's tile now, from the one
   shared component. The demo chrome, the nearby-card and the lead-panel
   controls it never used are gone too.
   --------------------------------------------------------------------------- */


/* ==========================================================================
   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;
    height: 560px;
    background: #fff;
    overflow: hidden;
}

/* Fixed at the width the plugin was asked to lay out — the feed's own
   scrollbar lives on its right edge, and a fluid width would clip it.
   The negative margin crops Facebook's own header away (the view asks
   for that much extra height); the bar above is the panel's one header.
   listing.js reads the crop from this margin — keep the two together. */
.gqv2 .gq-fb-frame iframe {
    width: 337px;
    margin-top: -76px;
    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;
    /* Rows in fr under a fixed frame ratio, not pixel heights: the frame
       scales with the wrap, so tiles keep their shape at any width. Each
       count's frame ratio below is derived so its tiles land on 3:2 — the
       shape the photographs are cut to — and cover then crops nothing. */
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 3 / 1;
    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, two full
   tiles sit side by side and the last two stack in a narrower third column.

   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: 1fr; aspect-ratio: 3 / 2; max-width: 780px; margin-inline: auto; }
.gqv2 .gq-c-mosaic.is-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.gqv2 .gq-c-mosaic.is-4 { grid-template-columns: 2fr 2fr 1fr; aspect-ratio: 19 / 5; }

/* One photograph is shown whole: centred in the 3:2 frame, letterboxed on
   the cloud ground when its own shape differs, never cropped. */
.gqv2 .gq-c-mosaic.is-1 .gq-shot img { object-fit: contain; }

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

.gqv2 .gq-c-mosaic.is-4 .gq-shot:nth-child(-n+2) { grid-row: span 2; }

/* ==================== 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); }

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

/* ---- far right: the map, in what was dead air ----
   A preview, not a control: the iframe takes no pointer, so the whole
   panel is a link down to the pannable map in Finding your way. Its
   height is the row's, which the guide cover sets; the min-height is
   for a listing without a guide, where the title alone sets it. */
.gqv2 .gq-c-titlemap {
    position: relative;
    display: block;
    flex: 0 0 320px;
    min-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--gq-shadow);
    transition: transform .22s ease, box-shadow .22s ease;
}

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

.gqv2 .gq-c-titlemap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.gqv2 .gq-c-titlemap-tag {
    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-navy);
    color: #fff;
    font: 800 10px/1 var(--gq-font);
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.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%);
}

.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 ----
   Not here. "How it feels" draws the same tile the search Quickview
   does — web_vibe_tile(), styled by shared/vibe-reader.css, opening the
   shared reader — so the medallion cards this file used to carry, and
   the panel that briefly replaced their link, are both gone. The band
   lays them out as a .gq-vt-bento, the first vibe leading at twice the
   size; search puts the same tiles in a .gq-vt-row. */


/* ---- 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 ---- */
/* Three slots exactly, however many videos there are: one video sits in a
   third of the row rather than swelling to fill it. */
.gqv2 .gq-c-vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ---- sidebar ---- */
/* Pinned below the header AND the section rail — at 100px it slid under
   the rail and the feed's header line was chopped off. The feed itself is
   sized to the screen by sizeFacebook() in listing.js, so the pinned
   panel always ends above the viewport bottom. */
.gqv2 .gq-c-aside { position: sticky; top: 146px; 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; }
    /* Not enough row left for a readable map; the full one is below anyway. */
    .gqv2 .gq-c-titlemap { display: none; }

    /* The sidebar is 300px here but the plugin was laid out for 337 —
       scaled down whole (297/337) rather than clipped. */
    .gqv2 .gq-fb-frame { height: 494px; }
    .gqv2 .gq-fb-frame iframe { transform: scale(.881); transform-origin: 50% 0; }
}

@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;
        aspect-ratio: auto;
        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; }

    /* Three slots need a desktop's width; stacked here. */
    .gqv2 .gq-c-vids { grid-template-columns: 1fr; }

    /* 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; }
}
