/* --oe-col: this page's content column; the shared top bar row (common/header.php) takes the same width. */
:root{--oe-col:988px}
/* ============================================================================
   SEO HUB BRANDING — shared page-header ("hero") band + app-promo block for the
   Google-landing hub pages (city / cuisine / "Top N in" best-of / review videos).
   These pages are otherwise text-first SEO listings; this file gives them the
   Outside Eats brand treatment (navy #101530 ground, gold #ECAF18 accent,
   Playfair Display headings) without touching the crawlable body content.
   Loaded per page via oe_head(['styles' => [... '/css/seo-hub.css']]).
   ============================================================================ */

/* --- Branded page header band --------------------------------------------- */
.oe-hub-hero {
  /* Same box as the content wraps below (max-width + gutter, see "Uniform
     container width"): the band is a card the width of the page column, not
     a full-bleed stripe. Owner 2026-09-28: every hero constrains to its content. */
  box-sizing: content-box;
  max-width: 940px;
  margin: 22px auto 0;
  padding: 0 clamp(16px, 4vw, 24px);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 85% -30%, rgba(236,175,24,.16), transparent 60%),
    linear-gradient(155deg, #101530 0%, #0d2b52 100%);
  border-bottom: 3px solid #ecaf18;
}
@media (max-width: 988px) { .oe-hub-hero { margin-top: 0; border-radius: 0; } }
.oe-hub-hero-inner {
  max-width: none;
  margin: 0;
  padding: clamp(22px, 4.5vw, 44px) 0 clamp(24px, 4.5vw, 40px);
}
.oe-hub-crumb {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  margin: 0 0 14px;
}
.oe-hub-crumb a { color: rgba(255,255,255,0.72); text-decoration: none; }
.oe-hub-crumb a:hover { color: #ecaf18; text-decoration: underline; }
.oe-hub-hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.oe-hub-hero h1 a { color: inherit; text-decoration: none; }
.oe-hub-hero h1 a:hover { color: #ecaf18; }
.oe-hub-hero h1 .g { color: #ecaf18; }
.oe-hub-lead {
  font-family: 'Source Sans 3', sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.08rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  margin: 12px 0 0;
  max-width: 720px;
}
.oe-hub-sub {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.62);
  margin: 10px 0 0;
}
.oe-hub-sub a { color: #ecaf18; text-decoration: none; }
.oe-hub-sub a:hover { text-decoration: underline; }
/* Back-link ("← Restaurant Guide") reused from the review pages, recoloured for
   the navy band. */
.oe-hub-hero .review-guide-link { color: rgba(255,255,255,0.72); margin: 0 0 12px; }
.oe-hub-hero .review-guide-link:hover,
.oe-hub-hero .review-guide-link:focus-visible { color: #ecaf18; }

/* --- App-promo band (styling for common/app-promo.php) --------------------- */
/* The partial also ships a guarded fallback copy of this block so it renders
   correctly on any page that forgets the stylesheet; identical values. */
.oe-app-promo { padding: clamp(28px, 5vw, 52px) 16px; }
.oe-app-promo-inner {
  max-width: 940px;
  margin: 0 auto;
  background:
    radial-gradient(120% 120% at 88% 0, #1a2b50, #101530 62%);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 44px);
  color: #fff;
  box-shadow: 0 18px 44px rgba(12,18,32,.16);
}
.oe-app-promo-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 10px;
}
.oe-app-promo-title .g { color: #ecaf18; }
.oe-app-promo-sub {
  font-family: 'Source Sans 3', sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  line-height: 1.6;
  color: #c2cdda;
  margin: 0 0 18px;
  max-width: 620px;
}
.oe-app-promo-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.oe-app-promo-badges a { display: block; }
.oe-app-promo-badges img { display: block; height: 46px; width: auto; }

/* --- Content area: soft page ground + white "card" containers --------------
   Lifts the hub listings off a flat white page so the branded header and
   footer frame a defined content area. The restaurant/cuisine/video lists and
   the "About" lead each sit in their own card. */
body { background: #f4f5f8; }
.oe-hub-card {
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 16px;
  padding: clamp(18px, 3vw, 30px);
  box-shadow: 0 8px 26px rgba(16,21,48,.05);
  margin: 0 0 22px;
}
.oe-hub-card:last-child { margin-bottom: 0; }

/* The About panel sits at the bottom of the hub, just above the app-promo band.
   Close the gap: don't stack the wrap's bottom padding with the band's top
   padding. Scoped to the hub main (.oe-city-wrap) so the promo on other pages
   (home, passport, profile) keeps its normal spacing. */
.oe-city-wrap { padding-bottom: 16px; }
/* General sibling (~), not adjacent (+): oe_app_promo() emits a one-time <style>
   between </main> and the band, so the band is not main's immediate sibling. */
.oe-city-wrap ~ .oe-app-promo { padding-top: 6px; }

/* "About <place>" panel, at the bottom of the hub above the app promo. */
.oe-hub-about h2 { font-family: 'DM Sans', sans-serif; font-size: 20px; margin: 0 0 12px; color: #101530; }
.oe-hub-about p { font-size: 15px; line-height: 1.72; color: #4a4a4a; margin: 0 0 14px; }
.oe-hub-about p:last-child { margin-bottom: 0; }

/* Card resets for the lists that move inside a container: drop the top border
   / top margin the standalone versions carry so they sit flush in the card. */
.oe-hub-card .oe-city-list,
.oe-hub-card .oe-city-best-list { margin: 0; }
.oe-hub-card > .review-video-city-header:first-child { margin-top: 0; }
.oe-hub-listwrap > :first-child { margin-top: 0; }
.oe-hub-listwrap > :last-child { margin-bottom: 0; }

/* The review-video grid, when carded, keeps its grid but gains the card frame. */
.review-video-list.oe-hub-card { display: grid; }
/* Watch page: compact band (no back link, tight padding, no bottom rule) so the
   player right under it is the first thing on screen. The stage carries the
   navy ground on, so band + player read as one hero. */
.oe-hub-hero--watch { background: transparent; border-bottom: 0; }
.oe-hub-hero--watch .oe-hub-hero-inner { padding-top: clamp(14px, 2.6vw, 24px); padding-bottom: clamp(12px, 2.4vw, 20px); }
.oe-hub-hero--watch h1 { font-size: clamp(1.45rem, 3.4vw, 2.1rem); }
.oe-hub-hero--watch .oe-hub-sub { margin-top: 6px; }

/* Best-of ("Top N") editorial intro, carded at the top of the page. */
.oe-best-intro.oe-hub-card { max-width: none; }
.oe-best-intro.oe-hub-card p:last-child { margin-bottom: 0; }

/* Compact the app-promo on phones — at full size it dwarfs the rest of the
   page. Smaller title, tighter padding, shorter store badges. (Mirror any
   change in the fallback <style> in common/app-promo.php.) */
@media (max-width: 600px) {
  .oe-app-promo { padding-top: 20px; padding-bottom: 20px; }
  .oe-app-promo-inner { padding: 20px 18px; border-radius: 14px; }
  .oe-app-promo-title { font-size: 1.15rem; margin-bottom: 7px; }
  .oe-app-promo-sub { font-size: 0.9rem; line-height: 1.5; margin-bottom: 14px; }
  .oe-app-promo-badges { gap: 10px; }
  .oe-app-promo-badges img { height: 38px; }
}

/* ── Uniform container width ────────────────────────────────────────────────
   Every content wrap AND the app-promo band share ONE max-width and side
   gutter, so the white cards and the navy download band line up down the page
   at the same left/right edges. The header band (.oe-hub-hero) takes the same
   box too (its rule sits at the top of this file). */
.oe-city-wrap,
.review-videos-page,
.review-video-detail-page {
  max-width: 940px;
  padding-left: clamp(16px, 4vw, 24px);
  padding-right: clamp(16px, 4vw, 24px);
}
.oe-app-promo {
  padding-left: clamp(16px, 4vw, 24px);
  padding-right: clamp(16px, 4vw, 24px);
}
.oe-app-promo-inner { box-sizing: border-box; max-width: 940px; }

/* The "Best by cuisine" cross-link block carries a standalone max-width:760
   from city.css; as a card it must fill the container like the others. */
.oe-city-best.oe-hub-card { max-width: none; }