/* Black Pearl Qatar Guide — shared, loaded by both new-to-qatar.html (public) and
   member-qatar-guide.html (member). One system for both: member-portal.css adds member
   chrome only (nav/footer/Suggest-a-Place modal), never a second visual language for the
   guide itself.
   Reuses design-system.css tokens (--hx-ink, --hx-paper, --hx-rule, --hx-muted, --hx-white, --sans, --body, --hx-editorial).
   Editorial city-guide direction: one category browsed at a time via a persistent left index,
   whitespace/rules/numbering carry hierarchy — no rounded cards, shadows or pill overload. */

/* ---------- Hero: asymmetric intro + two editorial mode destinations ---------- */
.qg-hero{padding:150px 0 0}
.qg-hero-grid{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--hx-gap);align-items:end;padding-bottom:40px}
.qg-hero-title{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em;line-height:.94;font-size:clamp(44px,6.4vw,84px);margin-top:14px}
.qg-hero-copy{max-width:32em;margin-top:18px;font-size:15.5px}
.qg-hero-modes{display:grid;grid-template-columns:1fr 1fr;column-gap:0;align-self:end}
.qg-mode{
  text-align:left;background:transparent;border:0;cursor:pointer;
  padding:0 24px 4px 0;display:flex;flex-direction:column;gap:8px;transition:opacity .25s ease;
}
.qg-mode + .qg-mode{padding-left:24px;padding-right:0;border-left:1px solid var(--hx-rule)}
.qg-mode .hx-label{transition:color .25s ease}
.qg-mode[aria-pressed="true"] .hx-label{color:var(--champagne-deep,#7A5A34)}
.qg-mode-title{font-family:var(--hx-editorial);font-style:italic;font-weight:400;font-size:clamp(16px,1.5vw,19px);line-height:1.4;color:var(--hx-ink)}
.qg-mode-count{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hx-muted)}
.qg-mode[aria-pressed="false"]{opacity:.48}
.qg-mode[aria-pressed="false"]:hover{opacity:.8}
@media (max-width:900px){
  .qg-hero{padding-top:128px}
  .qg-hero-grid{grid-template-columns:1fr;row-gap:30px;padding-bottom:32px}
  .qg-hero-modes{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .qg-hero{padding-top:112px}
  .qg-hero-modes{grid-template-columns:1fr;row-gap:20px}
  .qg-mode + .qg-mode{padding-left:0;border-left:0;padding-top:20px;border-top:1px solid var(--hx-rule)}
}

/* Black Pearl dark-treatment: .qg-hero on body.bp-dark-nav pages carries hx-field-black —
   these override the ivory-tuned mode-selector colours for that dark context only. */
.hx-field-black .qg-mode-title{color:var(--hx-white)}
.hx-field-black .qg-mode-count{color:rgba(250,250,247,.55)}
.hx-field-black .qg-mode[aria-pressed="true"] .hx-label{color:var(--champagne)}
.hx-field-black .qg-mode + .qg-mode{border-left-color:rgba(250,250,247,.18)}
@media (max-width:600px){.hx-field-black .qg-mode + .qg-mode{border-top-color:rgba(250,250,247,.18)}}

/* ---------- Utility bar: labelled editorial fields, quiet and rule-based ---------- */
.qg-utility-bar{padding:0}
.qg-utility-inner{display:flex;align-items:flex-end;gap:0;padding:22px 0}
.qg-utility-label{display:block;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--hx-muted);margin-bottom:9px}
.qg-utility-search{flex:1 1 260px;border-right:1px solid var(--hx-rule);padding-right:24px}
.qg-utility-search input{
  width:100%;border:0;background:transparent;padding:2px 0 5px;
  font-family:var(--body);font-size:15px;color:var(--hx-ink);
}
.qg-utility-search input::placeholder{color:var(--hx-muted)}
.qg-utility-search input:focus{outline:0}
.qg-utility-search input:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}
.qg-utility-field{flex:0 0 auto;border-right:1px solid var(--hx-rule);padding:0 24px}
.qg-utility-field select{
  border:0;background:transparent;padding:2px 20px 5px 0;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--hx-ink);
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--hx-muted) 50%),linear-gradient(135deg,var(--hx-muted) 50%,transparent 50%);
  background-position:calc(100% - 6px) 55%,calc(100% - 1px) 55%;background-size:5px 5px;background-repeat:no-repeat;
}
.qg-utility-field select:focus{outline:0}
.qg-utility-field select:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}
.qg-clear-all{
  flex:0 0 auto;align-self:flex-end;margin-left:24px;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hx-muted);
  border-bottom:1px solid transparent;padding:2px 0 5px;
}
.qg-clear-all:hover{color:var(--hx-ink);border-bottom-color:var(--hx-ink)}
@media (max-width:760px){
  .qg-utility-inner{flex-wrap:wrap;row-gap:18px;align-items:flex-start;padding:20px 0}
  .qg-utility-search{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--hx-rule);padding:0 0 16px}
  .qg-utility-field{border-right:0;padding:0 20px 0 0}
  .qg-clear-all{margin-left:0;align-self:flex-start}
}
@media (max-width:520px){
  .qg-utility-field:nth-of-type(2){display:none} /* category select hidden on narrow mobile — the horizontal category strip below is primary there */
}

/* ---------- Browse layout: sidebar + content ----------
   .qg-utility-bar and .qg-browse are bare <section> elements; without their own padding
   here they fall through to style.css's global `section{padding:150px 0}` (built for the
   public homepage's full-bleed modules), producing a large, unintended gap on this page.
   Both are explicitly zeroed below so .qg-browse-grid's own padding-top is the only
   top-rhythm in effect — same fix now applies to both the public and member Guide. */
.qg-browse{padding:0 0 88px}
.qg-browse-grid{display:grid;grid-template-columns:3fr 9fr;column-gap:var(--hx-gap);align-items:start;padding-top:var(--module-md)}
.qg-sidebar{position:sticky;top:132px}
.qg-sidebar-label{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hx-muted);margin-bottom:16px}
.qg-cat-index{list-style:none;margin:0 0 44px;padding:0}
.qg-cat-item{margin:0}
.qg-cat-link{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--hx-muted);
  padding:12px 0 12px 16px;border-left:2px solid transparent;transition:border-color .2s,color .2s,background .2s;
}
.qg-cat-link:hover{color:var(--hx-ink)}
.qg-cat-link .qg-cat-count{font-family:var(--sans);font-size:11px;font-weight:500;color:var(--hx-muted)}
.qg-cat-link.is-active{color:var(--hx-ink);border-left-color:var(--champagne-deep,#7A5A34);background:rgba(122,90,52,.05)}
.qg-cat-link.is-active .qg-cat-count{color:var(--hx-ink)}

/* Africa & Diaspora — a distinct editorial callout, not a card */
.qg-sidebar-callout{border-top:1px solid var(--hx-rule);padding-top:24px}
.qg-sidebar-callout .qg-sidebar-label{color:var(--burgundy,#5C1A2B)}
.qg-sidebar-callout p{font-family:var(--hx-editorial);font-style:italic;font-weight:400;font-size:15px;line-height:1.5;color:var(--hx-ink);margin:0 0 14px}
.qg-sidebar-callout .hx-link{color:var(--forest,#243C35);border-bottom-color:rgba(36,60,53,.4)}
.qg-sidebar-callout .hx-link:hover{border-color:var(--forest,#243C35)}
.qg-sidebar-callout[hidden]{display:none}

@media (max-width:900px){
  .qg-browse-grid{grid-template-columns:1fr;row-gap:0}
  .qg-browse-grid>*{min-width:0} /* grid items default to min-width:auto, so the horizontally-
    scrolling .qg-cat-index strip (white-space:nowrap chips) would otherwise force .qg-sidebar
    to its min-content width and blow the whole page out past the viewport instead of
    scrolling internally */
  .qg-sidebar{position:static;padding-bottom:0}
  .qg-cat-index{
    display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin-bottom:24px;padding-bottom:4px;
  }
  .qg-cat-link{
    flex:0 0 auto;white-space:nowrap;border-left:0;border-bottom:2px solid transparent;
    padding:8px 4px;gap:6px;font-size:12.5px;
  }
  .qg-cat-link.is-active{background:none;border-left:0;border-bottom-color:var(--champagne-deep,#7A5A34)}
  .qg-sidebar-callout{border-top:0;border-bottom:1px solid var(--hx-rule);padding:0 0 24px;margin-bottom:24px}
}

/* ---------- Category intro (content column) — the "moment" per category ----------
   One consistent treatment reused across all six categories (forest field, champagne
   oversized number) rather than a different colour per category — deliberately a single
   system, not six, and the page's one deliberate colour-field moment. Search Results uses
   the plain (non-moment) variant to stay visually distinct from category browsing. The
   moment panel sits with no gap beneath it so it reads as directly integrated with the
   index list, not a separate block floating above it. */
.qg-category-intro{margin:0 0 28px;position:relative}
.qg-category-intro.qg-category-moment{
  background:var(--forest,#243C35);color:var(--hx-white);padding:30px 32px 26px;overflow:hidden;margin-bottom:0;
}
.qg-category-eyebrow{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hx-muted);margin-bottom:6px}
.qg-category-moment .qg-category-eyebrow{color:rgba(250,250,247,.6)}
.qg-category-heading{font-family:var(--hx-editorial);font-weight:400;font-style:italic;line-height:1.12;font-size:clamp(24px,2.6vw,32px);color:var(--hx-ink);margin:0 0 6px}
.qg-category-moment .qg-category-heading{color:var(--hx-white)}
.qg-category-intro-copy{font-family:var(--body);font-size:14px;color:var(--hx-muted);max-width:38em;margin:0 0 10px}
.qg-category-count{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hx-muted);margin-bottom:0}
.qg-category-moment .qg-category-count{color:rgba(250,250,247,.55)}
.qg-category-num{
  position:absolute;top:24px;right:32px;font-family:var(--sans);font-weight:700;
  font-size:clamp(36px,4.6vw,56px);line-height:1;color:var(--champagne);opacity:.9;pointer-events:none;
}
@media (max-width:600px){.qg-category-num{display:none}}

/* ---------- Entry index ----------
   Number / title + category-subcategory / one-line summary / Best For, with a quieter
   right-hand utility column (location, an optional labelled "Good to Know" note, link).
   The note is sans-serif and short (clamped to a few lines) rather than a long italic
   aside, and the whole block is omitted per-entry when a listing has no useful note. */
.qg-index{border-top:1px solid var(--hx-rule)}
.qg-entry{
  display:grid;grid-template-columns:36px 1fr 210px;column-gap:28px;
  padding:26px 0;border-bottom:1px solid var(--hx-rule);align-items:start;
}
.qg-entry-num{font-family:var(--sans);font-size:11px;color:var(--hx-muted);padding-top:3px}
.qg-entry-title{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-0.005em;font-size:15.5px;margin:0 0 5px}
.qg-entry-sub{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hx-muted);margin:0 0 9px}
.qg-entry-summary{font-family:var(--body);font-size:14.5px;line-height:1.6;color:var(--hx-ink);max-width:42em;margin:0 0 8px}
.qg-entry-bestfor{font-family:var(--body);font-size:12.5px;color:var(--hx-muted);margin:0}
.qg-entry-bestfor b{font-weight:600;color:var(--hx-ink)}
.qg-entry-diaspora{display:block;margin-top:8px;font-family:var(--sans);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--burgundy,#5C1A2B)}
.qg-entry-category-tag{display:block;margin-top:8px;font-family:var(--sans);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--hx-muted)}
.qg-entry-meta{display:flex;flex-direction:column;gap:14px;text-align:right}
.qg-entry-location{font-family:var(--sans);font-size:11.5px;letter-spacing:.02em;color:var(--hx-muted)}
.qg-entry-tip-block{display:flex;flex-direction:column;gap:4px}
.qg-entry-tip-label{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--champagne-deep,#7A5A34)}
.qg-entry-tip{
  font-family:var(--sans);font-style:normal;font-size:12px;line-height:1.5;color:var(--hx-muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.qg-entry-link{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--hx-ink)}
.qg-entry-link:hover{color:var(--champagne-deep,#7A5A34)}
.qg-entry-bp-pick{display:inline-block;margin-bottom:7px;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--hx-ink);border:1px solid var(--hx-ink);padding:2px 7px}

@media (max-width:760px){
  .qg-entry{grid-template-columns:24px 1fr;column-gap:14px;row-gap:10px;padding:22px 0}
  .qg-entry-meta{grid-column:1/-1;flex-direction:column;align-items:flex-start;text-align:left;gap:10px;padding-left:38px}
  .qg-entry-tip{-webkit-line-clamp:4}
}

/* ---------- Search results (cross-category) ---------- */
.qg-index .qg-entry-category-tag{display:none}
.qg-index.qg-index-mixed .qg-entry-category-tag{display:block}

/* ---------- Africa & Diaspora signal ----------
   Burgundy is the recurring diaspora-lens colour: on the mode selector's own label when
   active, and on the sidebar's active-category rule while browsing in that mode. Nothing
   else changes — the directory rows underneath stay ivory/black as instructed. */
.qg-mode[data-mode-btn="diaspora"][aria-pressed="true"] .hx-label{color:var(--burgundy,#5C1A2B)}
[data-guide-mode="diaspora"] .qg-cat-link.is-active{border-left-color:var(--burgundy,#5C1A2B);background:rgba(92,26,43,.05)}
@media (max-width:900px){
  [data-guide-mode="diaspora"] .qg-cat-link.is-active{border-bottom-color:var(--burgundy,#5C1A2B)}
}

/* ---------- Category-switch transition ----------
   A short, deliberate fade + small vertical move when switching categories or toggling
   mode — replaces the previous instant content swap. Respects prefers-reduced-motion. */
.qg-content{transition:opacity .18s ease,transform .18s ease}
.qg-content.qg-content-out{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){
  .qg-content{transition:none}
  .qg-content.qg-content-out{opacity:1;transform:none}
}

/* ---------- Neighbourhoods (compact profile) ---------- */
.qg-neighbourhood{
  display:grid;grid-template-columns:36px 1fr;column-gap:28px;
  padding:28px 0;border-bottom:1px solid var(--hx-rule);
}
.qg-neighbourhood-name{font-family:var(--hx-editorial);font-weight:400;font-size:clamp(18px,1.8vw,22px);margin:0 0 6px}
.qg-neighbourhood-tags{font-family:var(--sans);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--hx-muted);margin:0 0 10px}
.qg-neighbourhood-overview{font-family:var(--body);font-size:14px;line-height:1.6;color:var(--hx-ink);max-width:48em;margin:0 0 18px}
.qg-neighbourhood-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;row-gap:14px}
.qg-neighbourhood-grid .hx-label{margin-bottom:5px;font-size:10px}
.qg-neighbourhood-grid p{font-family:var(--body);font-size:12.5px;line-height:1.5;color:var(--hx-muted);margin:0}
@media (max-width:760px){
  .qg-neighbourhood{grid-template-columns:1fr}
  .qg-neighbourhood-grid{grid-template-columns:1fr;row-gap:12px}
}

/* ---------- Featured (dormant by default) ---------- */
.qg-featured{padding-top:0}

/* ---------- Empty state ---------- */
.qg-empty{padding:56px 0;text-align:center;font-family:var(--body);color:var(--hx-muted)}

/* ---------- Closing CTA — a deliberate editorial close, page-scoped so it stays
   independent of the shared .hx-module-sm rhythm used elsewhere on the site. ---------- */
.qg-closing{padding:64px 0 80px;border-top:1px solid var(--hx-rule)}
@media (max-width:900px){.qg-closing{padding:48px 0 64px}}

/* ====================================================================
   EXPLORE QATAR v2 — new-to-qatar.html (public) ONLY.
   Everything below is additive: new class names, never a redefinition of
   an existing .qg-* rule, so member-qatar-guide.html (which never gains
   these classes in its markup) renders byte-for-byte as before. Reuses
   the same rule-based, no-card, no-pill language as the rest of the
   Guide — square corners, thin hairline dividers, restrained type.
   ==================================================================== */

/* ---------- Contextual sub-nav (Eat & Drink tabs / What's On day+type) ---------- */
.eq-context-bar[hidden]{display:none}
.eq-subnav{display:flex;flex-wrap:wrap;gap:8px 22px;padding-bottom:14px;margin-bottom:28px;border-bottom:1px solid var(--hx-rule)}
.eq-subnav + .eq-subnav{margin-top:-14px}
.eq-subnav-btn{
  background:none;border:0;cursor:pointer;padding:6px 0;white-space:nowrap;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--hx-muted);
  border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.eq-subnav-btn:hover{color:var(--hx-ink)}
.eq-subnav-btn.is-active{color:var(--hx-ink);border-bottom-color:var(--champagne-deep,#7A5A34)}
.eq-subnav-btn:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}
.eq-subnav-btn--small{font-size:11px}
.eq-day-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
@media(max-width:760px){.eq-subnav{gap:6px 18px}}

/* ---------- By Mood chips — square, not pills; a thin border and a filled
   active state, matching the site's existing chip-option treatment. ---------- */
.eq-mood-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.eq-mood-chip{
  background:none;border:1px solid var(--hx-rule);border-radius:0;cursor:pointer;
  padding:8px 14px;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--hx-muted);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.eq-mood-chip:hover{border-color:var(--hx-ink);color:var(--hx-ink)}
.eq-mood-chip.is-active{background:var(--hx-ink);border-color:var(--hx-ink);color:var(--hx-white)}
.eq-mood-chip:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}

/* ---------- By Destination — expandable rows, not a wall of hotel cards ---------- */
.eq-destination-list{border-top:1px solid var(--hx-rule)}
.eq-destination-row{border-bottom:1px solid var(--hx-rule)}
.eq-destination-toggle{
  width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  background:none;border:0;cursor:pointer;padding:20px 0;text-align:left;
}
.eq-destination-toggle:focus-visible{outline:2px solid var(--champagne);outline-offset:-2px}
.eq-destination-name{font-family:var(--hx-editorial);font-weight:400;font-size:clamp(18px,1.8vw,21px);color:var(--hx-ink)}
.eq-destination-meta{font-family:var(--sans);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--hx-muted);white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:12px}
.eq-destination-meta::after{content:"+";font-family:var(--sans);font-size:16px;color:var(--hx-muted)}
.eq-destination-row.is-open .eq-destination-meta::after{content:"\2013"}
.eq-destination-panel{padding-bottom:12px}
@media(max-width:600px){.eq-destination-name{display:block}.eq-destination-toggle{flex-wrap:wrap}}

/* ---------- Venue / offer entries — extend .qg-entry, never replace it ---------- */
.eq-venue-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:7px}
.eq-michelin-badge{display:inline-block;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--champagne-deep,#7A5A34);border:1px solid rgba(122,90,52,.35);padding:2px 7px}
.eq-offer-type-tag{display:block;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--champagne-deep,#7A5A34);margin-bottom:6px}
.eq-last-checked{font-family:var(--sans);font-size:10.5px;color:var(--hx-muted)}

/* ---------- Freshness notice — restrained, not a warning banner ---------- */
.eq-freshness-notice{max-width:var(--hx-max);margin:0 auto;padding:0 var(--hx-margin) 40px;font-family:var(--sans);font-size:11.5px;color:var(--hx-muted);text-align:center}
@media(max-width:900px){.eq-freshness-notice{padding:0 24px 32px}}

/* ====================================================================
   EXPLORE QATAR v3 — EDITORIAL REFINEMENT (new-to-qatar.html ONLY)
   Every rule below is scoped under [data-explore-app] (the root <main>
   hook unique to new-to-qatar.html — member-qatar-guide.html's root is
   [data-guide-app]). This lets the shared rules above stay completely
   untouched for the member portal while this page gets a substantially
   refined presentation: restrained hero type, no italics, one photograph
   used editorially, simplified category headers, consolidated Michelin/
   Black Pearl Pick treatment, and category-specific accent colour used
   selectively rather than full colour blocks.
   ==================================================================== */

/* ---------- Hero: single editorial photograph + dark translucent panel.
   Title brought down to the site's restrained hx-display scale (was
   clamp(44px,6.4vw,84px) — oversized enough that "DOHA" alone filled a
   line); no more italic mode-title; Africa & Diaspora reads as its own
   lens via a burgundy label + rule, not a second identical mode. ---------- */
[data-explore-app] .qg-hero{position:relative;padding:0;overflow:hidden}
[data-explore-app] .qg-hero-media{position:absolute;inset:0;z-index:0}
[data-explore-app] .qg-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
/* Lighter scrim than the first pass — the photograph should read clearly, with the dark
   layer and panel doing just enough work to keep the type accessible. */
[data-explore-app] .qg-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.32) 0%,rgba(17,17,17,.46) 55%,rgba(17,17,17,.62) 100%)}
[data-explore-app] .qg-hero-panel{position:relative;z-index:1;padding:158px 0 44px;background:rgba(17,17,17,.22);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* Africa & Diaspora no longer has a hero panel — the intro column is now the hero's
   only content, and the grid collapses to one column so the photograph shows through
   the space the second panel used to occupy. */
[data-explore-app] .qg-hero-grid{padding-bottom:0;grid-template-columns:1fr}
[data-explore-app] .qg-hero-intro-col{max-width:34em}
[data-explore-app] .qg-hero-title{font-size:clamp(32px,4.4vw,58px);line-height:1.05;letter-spacing:-0.015em;margin-top:16px;text-shadow:0 2px 18px rgba(0,0,0,.4)}
[data-explore-app] .qg-hero-copy{margin-top:20px;max-width:30em;text-shadow:0 1px 12px rgba(0,0,0,.5)}
[data-explore-app] .qg-hero-intro-col .hx-label{text-shadow:0 1px 10px rgba(0,0,0,.5)}
@media (max-width:900px){
  [data-explore-app] .qg-hero-panel{padding:132px 0 36px}
}
@media (max-width:600px){
  [data-explore-app] .qg-hero-panel{padding:116px 0 32px}
}

/* ---------- Africa & Diaspora — now lives only as a restrained item beneath the
   category list: same label/count rhythm as the categories above it, set apart by a
   top rule and its burgundy accent, doubling as the toggle back to the full guide. ---------- */
[data-explore-app] .eq-diaspora-navitem{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;
  background:none;border:0;border-top:1px solid var(--hx-rule);cursor:pointer;text-align:left;
  padding:16px 0 14px;margin-top:8px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--burgundy,#5C1A2B);
  transition:color .2s ease;
}
[data-explore-app] .eq-diaspora-navitem .hx-label{color:inherit;font-size:14.5px;letter-spacing:normal;text-transform:none;font-weight:600}
[data-explore-app] .eq-diaspora-navitem:hover{color:var(--hx-ink)}
[data-explore-app] .eq-diaspora-navitem .qg-mode-count{color:inherit;opacity:.7}
[data-explore-app] .eq-diaspora-navitem[aria-pressed="true"]{color:var(--champagne-deep,#7A5A34)}
@media (max-width:900px){
  [data-explore-app] .eq-diaspora-navitem{border-top:0;margin-top:0;padding:10px 0}
}

/* ---------- Utility bar: more room to breathe, quieter dividers, a
   focus/hover underline instead of a static full-height rule. ---------- */
[data-explore-app] .qg-utility-inner{padding:28px 0}
[data-explore-app] .qg-utility-search{padding-right:32px;border-right:0}
[data-explore-app] .qg-utility-search input{font-size:16px;border-bottom:1px solid transparent;padding:3px 0 8px;transition:border-color .2s ease}
[data-explore-app] .qg-utility-search input:focus-visible{outline:0;border-bottom-color:var(--champagne-deep,#7A5A34)}
[data-explore-app] .qg-utility-field{border-right:0;padding:0 32px;position:relative}
[data-explore-app] .qg-utility-field::before{content:"";position:absolute;left:0;top:2px;bottom:8px;width:1px;background:var(--hx-rule)}
[data-explore-app] .qg-utility-field select{border-bottom:1px solid transparent;padding:3px 20px 8px 0;font-size:13px;transition:border-color .2s ease}
[data-explore-app] .qg-utility-field select:focus-visible{outline:0;border-bottom-color:var(--champagne-deep,#7A5A34)}
[data-explore-app] .qg-clear-all{margin-left:32px;padding:3px 0 8px}
@media (max-width:760px){
  [data-explore-app] .qg-utility-field{padding:0 22px 0 0}
  [data-explore-app] .qg-utility-field::before{display:none}
}
/* The Best For field's content (longest tag option) can push the row past 768px before
   the shared 760px wrap rule kicks in — wrap slightly earlier on this page only so the
   utility bar never overflows at the in-between widths. */
@media (max-width:820px) and (min-width:761px){
  [data-explore-app] .qg-utility-inner{flex-wrap:wrap;row-gap:16px;align-items:flex-start}
  [data-explore-app] .qg-utility-search{flex:1 1 100%;padding:0 0 14px;border-bottom:1px solid var(--hx-rule)}
  [data-explore-app] .qg-utility-field{padding:0 22px 0 0}
  [data-explore-app] .qg-utility-field::before{display:none}
  [data-explore-app] .qg-clear-all{margin-left:0}
}

/* ---------- Category nav: editorial section list, not a filter sidebar.
   Active state drops the beige highlight box — just weight + a champagne
   rule — and the diaspora lens gets its own burgundy rule instead. ---------- */
[data-explore-app] .qg-cat-link{padding:14px 0 14px 18px;font-size:14.5px}
[data-explore-app] .qg-cat-link .qg-cat-count{font-variant-numeric:tabular-nums}
[data-explore-app] .qg-cat-link.is-active{background:none;font-weight:700}
[data-explore-app][data-eq-mode="diaspora"] .qg-cat-link.is-active{border-left-color:var(--burgundy,#5C1A2B)}
@media (max-width:900px){
  [data-explore-app][data-eq-mode="diaspora"] .qg-cat-link.is-active{border-left:0;border-bottom-color:var(--burgundy,#5C1A2B)}
}

/* Africa & Diaspora sidebar nav — the large promotional callout is gone (it repeated
   the hero lens and cost too much vertical space); one restrained text link with a
   burgundy accent remains as the entry point, matching the plain category links above it
   rather than reading as a second card. */
[data-explore-app] .eq-diaspora-nav{border-top:1px solid var(--hx-rule);padding-top:14px}
[data-explore-app] .eq-diaspora-nav-link{
  display:inline-block;font-family:var(--sans);font-size:14.5px;font-weight:600;
  color:var(--burgundy,#5C1A2B);border-bottom:0;
}
[data-explore-app] .eq-diaspora-nav-link:hover{color:var(--hx-ink)}
@media (max-width:900px){
  [data-explore-app] .eq-diaspora-nav{border-top:0;padding-top:0}
}

/* ---------- Category header: one restrained line, not a full-bleed
   colour block with a giant decorative number. Eyebrow carries a thin
   category-specific accent rule instead (forest / Eat & Drink, burgundy /
   What's On, champagne elsewhere) — colour used as a signal, not a field. ---------- */
[data-explore-app] .qg-category-intro.qg-category-moment{
  background:none;color:var(--hx-ink);padding:0 0 22px;margin-bottom:28px;
  border-bottom:1px solid var(--hx-rule);
}
[data-explore-app] .qg-category-eyebrow{
  position:relative;padding-left:16px;color:var(--hx-muted);margin-bottom:10px;
}
[data-explore-app] .qg-category-moment .qg-category-eyebrow{color:var(--hx-muted)}
[data-explore-app] .qg-category-eyebrow::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;background:var(--champagne-deep,#7A5A34)}
[data-explore-app] .qg-category-heading{
  font-style:normal;font-weight:400;color:var(--hx-ink);font-size:clamp(22px,2.4vw,30px);
}
[data-explore-app] .qg-category-moment .qg-category-heading{color:var(--hx-ink)}
[data-explore-app] .qg-category-count{color:var(--hx-muted)}
[data-explore-app] .qg-category-moment .qg-category-count{color:var(--hx-muted)}
[data-explore-app] .qg-category-num{display:none}
/* Category-specific accent: Eat & Drink -> forest, What's On -> burgundy,
   Diaspora mode -> burgundy; everything else keeps the default champagne rule. */
[data-explore-app][data-eq-category="eat-drink"] .qg-category-eyebrow::before{background:var(--forest,#243C35)}
[data-explore-app][data-eq-category="whats-on"] .qg-category-eyebrow::before{background:var(--burgundy,#5C1A2B)}
[data-explore-app][data-eq-mode="diaspora"] .qg-category-eyebrow::before{background:var(--burgundy,#5C1A2B)}
[data-explore-app][data-eq-category="whats-on"] .eq-subnav-btn.is-active{border-bottom-color:var(--burgundy,#5C1A2B)}
[data-explore-app][data-eq-category="whats-on"] .eq-offer-type-tag{color:var(--burgundy,#5C1A2B)}

/* One clear divider into the result list, not two: the category header already carries
   its own border-bottom, so the shared .qg-index top rule (redundant right underneath it)
   is dropped on this page only. */
[data-explore-app] .qg-index{border-top:0}

/* ---------- Entry index: fewer competing labels, one consolidated
   Michelin line, "Black Pearl Pick" as a restrained champagne mark
   rather than a bordered black box. ---------- */
[data-explore-app] .qg-entry-bp-pick{
  color:var(--champagne-deep,#7A5A34);border-color:rgba(122,90,52,.4);font-weight:600;
}
[data-explore-app] .eq-michelin-badge{border:0;padding:0;font-weight:600}
[data-explore-app] .eq-venue-badges{align-items:center;gap:10px}
[data-explore-app] .eq-venue-badges .eq-michelin-badge + .qg-entry-bp-pick,
[data-explore-app] .eq-venue-badges .qg-entry-bp-pick{margin-bottom:0}

/* ---------- What's On rows: day/time/price now sit directly under the venue line
   (in the main column) instead of a right-hand meta column the eye had to travel to.
   Verification is real, kept, but visually quiet — reassurance, not a warning. ---------- */
[data-explore-app] .eq-offer-entry{grid-template-columns:36px 1fr}
[data-explore-app] .eq-offer-entry .qg-entry-meta{display:none}
[data-explore-app] .eq-offer-practical{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--hx-ink);margin:0 0 8px}
[data-explore-app] .eq-offer-foot{display:flex;align-items:baseline;gap:16px;margin-top:10px}
[data-explore-app] .eq-offer-foot .eq-last-checked{font-size:10.5px;color:var(--hx-muted)}
[data-explore-app] .eq-offer-foot .qg-entry-link{font-size:11px}
@media (max-width:760px){
  [data-explore-app] .eq-offer-entry{grid-template-columns:24px 1fr}
}

/* ---------- Search results heading stays plain (no accent bar) since it
   isn't a category, just a query — but still carries its own single divider,
   since .qg-index's top rule was dropped above (one rule, not a doubled-up pair). ---------- */
[data-explore-app] .qg-category-intro:not(.qg-category-moment) .qg-category-eyebrow::before{display:none}
[data-explore-app] .qg-category-intro:not(.qg-category-moment) .qg-category-eyebrow{padding-left:0}
[data-explore-app] .qg-category-intro:not(.qg-category-moment){border-bottom:1px solid var(--hx-rule);padding-bottom:20px}