/* ============================================================
   Published / sample classified ads — Hub (/classified-ads) and
   Category (/classified-ads/{cat}) pages. Colour + typography come
   from tokens.css (--accent / --ink / --font-display / bd-* etc.);
   only NEW layout classes live here. Mobile reflow mirrors the
   @container home (max-width: 760px) mechanism used site-wide.
   ============================================================ */

/* Centered 1280px container. 40px gutter aligns the body edge-to-edge with the
   shared microsite header (layout.blade.php utility strip + nav both use 40px). */
.pub-wrap            { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* Sample-ads page header — flat top nav (hover = accent). */
.pub-topnav-link:hover        { color: var(--accent) !important; }
.pub-topnav-link.is-active    { color: var(--accent) !important; }

/* Breadcrumb (matches design PubCrumb: flex, 13px, last crumb bold ink). */
.pub-crumb           { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
                       padding-top: 11px; padding-bottom: 11px; font-size: 13px; color: var(--muted); }
.pub-crumb-link      { color: var(--muted); text-decoration: none; font-weight: 500; transition: color .12s; }
.pub-crumb-link:hover{ color: var(--accent); }
.pub-crumb-sep       { color: var(--rule); }
.pub-crumb-cur       { color: var(--ink); font-weight: 700; }

/* Section vertical rhythm. These classes share their element with .pub-wrap, so they
   set ONLY top/bottom padding — the horizontal 40px gutter comes from .pub-wrap and
   must not be clobbered by a `padding` shorthand (that would outdent the body). */
.pub-sec            { padding-top: 48px; padding-bottom: 56px; }
.pub-sec--tight     { padding-top: 40px; padding-bottom: 44px; }

/* Section heading row (eyebrow + h2 left, note right). */
.pub-head           { display: flex; justify-content: space-between; align-items: flex-end;
                      gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.pub-head-eyebrow   { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em;
                      text-transform: uppercase; color: var(--accent); font-weight: 700; }
.pub-head h2        { font-family: var(--font-display); font-weight: 800; font-size: 32px;
                      line-height: 1.1; letter-spacing: -0.02em; margin: 9px 0 0; color: var(--ink); }
.pub-head h2 em     { font-style: normal; color: var(--accent); }
.pub-head-note      { font-size: 14px; color: var(--muted); max-width: 380px; padding-bottom: 4px; }

/* Hero: text + right card. */
.pub-hero-grid      { display: grid; grid-template-columns: 1fr 460px; gap: 48px; align-items: start;
                      padding-top: 46px; padding-bottom: 40px; }
.pub-hero-grid--cat { grid-template-columns: 1fr 420px; padding-top: 44px; padding-bottom: 38px; }
.pub-hero-h1        { font-family: var(--font-display); font-weight: 800; font-size: 50px;
                      line-height: 1.02; letter-spacing: -0.025em; color: var(--ink); max-width: 620px; }
/* Newspaper name on its own line — red Playfair serif (matches design TOIName). */
.pub-hero-np        { font-family: "Playfair Display", Georgia, serif; color: var(--accent);
                      font-weight: 800; letter-spacing: -0.01em; }
.pub-hero-grid--cat .pub-hero-h1 { font-size: 46px; line-height: 1.04; max-width: 560px; }
.pub-hero-tags      { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.pub-hero-tag       { display: flex; align-items: center; gap: 8px; font-size: 14px;
                      color: var(--muted); font-weight: 500; }
.pub-hero-tag i     { width: 18px; height: 18px; border-radius: 999px; background: rgba(0,163,122,0.12);
                      color: var(--good); display: grid; place-items: center; flex-shrink: 0; }

/* ── Compact desktop density (.bh-tight) ───────────────────────────────────
   The microsite body carries `bh-compact bh-tight`. Every other branch page
   tightens its hero under this flag; this page shipped without it, so it
   rendered at the full base scale (50px title, tall hero, big card). These
   rules bring the hub + category heroes to the compact reference density.
   Gated to the desktop container (≥761px) so mobile is untouched.            */
@container home (min-width: 761px) {
  .bh-tight .pub-hero-grid      { grid-template-columns: 1fr 400px; gap: 36px; padding-top: 26px; padding-bottom: 30px; }
  .bh-tight .pub-hero-grid--cat { grid-template-columns: 1fr 372px; padding-top: 24px; padding-bottom: 26px; }
  .bh-tight .pub-hero-h1        { font-size: 34px; line-height: 1.07; max-width: 480px; }
  .bh-tight .pub-hero-grid--cat .pub-hero-h1 { font-size: 31px; max-width: 460px; }
  .bh-tight .pub-hero-h1 + p    { font-size: 14.5px !important; margin-top: 13px !important; max-width: 480px !important; }
  .bh-tight .pub-hero-tags      { margin-top: 16px; gap: 8px 20px; }
  .bh-tight .pub-hero-tag       { font-size: 12.5px; }
  /* Search card — trim padding + heading so it matches the leaner hero. */
  .bh-tight .pub-hero-grid > .bd-card,
  .bh-tight .pub-hero-grid--cat > .bd-card { padding: 20px !important; }
  /* Section rhythm — pull the long SEO/archive stack tighter on desktop. */
  .bh-tight .pub-sec            { padding-top: 34px; padding-bottom: 40px; }
  .bh-tight .pub-sec--tight     { padding-top: 28px; padding-bottom: 30px; }
  .bh-tight .pub-head h2        { font-size: 26px; }
  /* Slim the sample-ads header row to match the compact reference. */
  .bh-tight .pub-topnav-link    { font-size: 13.5px; }
  /* Value-props strip: pull it up under the leaner hero and trim its own
     padding so the body density matches the compact header (no tall gap
     between the hero text and the value-props row). */
  .bh-tight .pub-hero-vp        { padding-bottom: 24px !important; }
  .bh-tight .pub-vp-cell        { padding: 14px 16px; }
}

/* Theme-matched <select>. */
.pub-select-lbl     { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
                      text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.pub-select-wrap    { position: relative; display: flex; align-items: center; }
.pub-select-wrap > .pub-select-ico { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.pub-select-wrap > .pub-select-chev { position: absolute; right: 14px; color: var(--muted); pointer-events: none; }
.pub-select         { width: 100%; appearance: none; -webkit-appearance: none;
                      padding: 14px 40px 14px 40px; border-radius: 12px; border: 1.5px solid var(--rule);
                      background: white; font: inherit; font-size: 15px; font-weight: 600;
                      color: var(--ink); cursor: pointer; }
.pub-select--noico  { padding-left: 16px; }

/* Value-props strip (4 reasons, hairline-separated). */
.pub-vp             { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
                      background: var(--rule); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.pub-vp-cell        { background: white; padding: 18px 20px; display: flex; gap: 13px; align-items: flex-start; }
.pub-vp-cell .ico   { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid;
                      place-items: center; background: rgba(211,16,39,0.07); color: var(--accent); }

/* Category grid (hub). */
.pub-cat-grid       { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pub-cat-card       { padding: 20px 18px; display: flex; flex-direction: column; cursor: pointer;
                      border: 1.5px solid transparent; text-decoration: none; }
.pub-cat-ico        { width: 40px; height: 40px; border-radius: 11px; background: rgba(211,16,39,0.06);
                      color: var(--accent); display: grid; place-items: center; }
.pub-cat-arrow      { width: 26px; height: 26px; border-radius: 999px; background: var(--paper-2);
                      color: var(--muted); display: grid; place-items: center; }

/* Archive list (timeframe rows). */
.pub-arch           { border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: white; }
.pub-arch-head      { display: flex; align-items: center; justify-content: space-between;
                      padding: 14px 20px; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.pub-arch-row       { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
                      padding: 13px 20px; border-top: 1px solid var(--rule-soft); background: white; }
.pub-arch-row--mtx  { grid-template-columns: 180px 1fr auto; }
.pub-arch-row--hot  { background: rgba(211,16,39,0.03); }
.pub-arch-row:first-of-type { border-top: none; }
.pub-arch-go        { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
                      font-weight: 700; color: var(--accent); cursor: pointer; white-space: nowrap; justify-self: end; }

/* Archive + sticky aside (hub & category). */
.pub-arch-grid      { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.pub-arch-grid--cat { grid-template-columns: 1fr 340px; }
.pub-aside-sticky   { position: sticky; top: 110px; }

/* Booking nudge card. */
.pub-nudge          { background: linear-gradient(180deg, #fdf3f0 0%, #ffffff 70%);
                      border: 1px solid rgba(211,16,39,0.18); border-radius: 14px; padding: 22px 22px 20px;
                      display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }

/* "I would like to" intent toggle. */
.pub-intent         { display: flex; gap: 6px; padding: 6px; background: white;
                      border-radius: 14px; border: 1px solid var(--rule); }
/* Both options render as solid pills inside the track; the active one fills accent. */
.pub-intent-btn     { flex: 1; display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 11px;
                      cursor: pointer; transition: all .12s; text-align: left; background: var(--paper-2);
                      border: 1.5px solid var(--rule); }
.pub-intent-btn.on  { background: var(--accent); border-color: var(--accent);
                      box-shadow: 0 4px 12px rgba(211,16,39,0.28); }
.pub-intent-btn.on span { color: white !important; }
.pub-intent-ico     { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid;
                      place-items: center; background: white; color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }
.pub-intent-btn.on .pub-intent-ico { background: rgba(255,255,255,0.18); color: white; box-shadow: none; }

/* Intent control row — toggle + city select on top, CTA on its own row below.
   (The category hero's left column is ~half width, so a single line would crowd.) */
.pub-intent-row     { display: flex; gap: 14px 16px; align-items: flex-end; flex-wrap: wrap; }
.pub-intent-city    { flex: 1; min-width: 180px; }
.pub-intent-cta     { flex: 0 0 auto; white-space: nowrap; }
/* Force the CTA onto its own line, left-aligned beneath the toggle. */
.pub-intent-row .pub-intent-cta { order: 3; flex-basis: 100%; max-width: max-content; }

/* Live filtered archive results (the /{sub}/{when} URLs). */
.pub-results        { border: 1.5px solid var(--rule); border-radius: 16px; padding: 20px;
                      background: var(--paper-2); margin-bottom: 22px; }
.pub-results-head   { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                      padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
.pub-results-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pub-results-card   { background: white; border: 1px solid var(--rule); border-radius: 13px; padding: 16px; }
@media (max-width: 760px) { .pub-results-grid { grid-template-columns: 1fr; } }

/* 3-step booking journey — compact horizontal rows. */
.pub-journey        { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 560px; }
.pub-step           { display: flex; align-items: center; gap: 14px; }

/* Why/how 2-up (category). */
.pub-why            { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Conversion band (big red). */
.pub-cta            { display: flex; align-items: center; justify-content: space-between;
                      gap: 28px; flex-wrap: wrap; padding-top: 44px; padding-bottom: 44px; }

/* SEO query chip cloud + related-links grid + prose. */
.pub-seo-card       { border: 1px solid var(--rule); border-radius: 16px; background: white; padding: 24px 26px; }
.pub-seo-chips      { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-seo-chip       { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
                      border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule);
                      font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.pub-links-grid     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pub-links-grid--2  { grid-template-columns: 1fr 1fr; }
.pub-links-col-h    { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 10px;
                      padding-bottom: 8px; border-bottom: 2px solid var(--rule); }
.pub-links-col a    { font-size: 13px; color: var(--ink-2); cursor: pointer; display: inline-flex;
                      align-items: center; gap: 6px; text-decoration: none; }
.pub-links-col a:hover { color: var(--accent); }
.pub-prose          { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
.pub-prose h3       { font-family: var(--font-display); font-weight: 700; font-size: 17px;
                      letter-spacing: -0.01em; color: var(--ink); }
.pub-prose p        { font-size: 14px; color: var(--ink-2); line-height: 1.62; margin-top: 8px; }

/* "Other papers" chips. */
.pub-papers         { display: flex; flex-wrap: wrap; gap: 10px; }

/* FAQ accordion. */
.pub-faq            { border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: white; }
.pub-faq-item       { border-top: 1px solid var(--rule-soft); }
.pub-faq-item:first-child { border-top: none; }
.pub-faq-q          { width: 100%; display: flex; align-items: center; justify-content: space-between;
                      gap: 16px; padding: 18px 22px; text-align: left; cursor: pointer; background: none; }
.pub-faq-q span     { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.pub-faq-a          { padding: 0 22px 20px; font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 760px; }

/* Mobile sticky CTA. */
.pub-msticky        { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px;
                      background: white; border-top: 1px solid var(--rule); display: none;
                      gap: 10px; align-items: center; box-shadow: 0 -4px 18px rgba(0,0,0,0.08); }

/* Default-hide the mobile-only blocks (shown in the container query below). */
.pub-only-mobile    { display: none; }

/* ============================================================
   Mobile reflow (≤760px). Keyed to BOTH the home container and the
   raw viewport so it applies regardless of container context.
   ============================================================ */
@container home (max-width: 760px) {
  .pub-wrap          { padding: 0 18px; }
  .pub-crumb         { font-size: 12px; padding-top: 10px; padding-bottom: 10px; }
  .pub-only-desktop  { display: none !important; }
  .pub-only-mobile   { display: block; }
  .pub-msticky       { display: flex; }
}
@media (max-width: 760px) {
  .pub-wrap          { padding: 0 18px; }
  .pub-crumb         { font-size: 12px; padding-top: 10px; padding-bottom: 10px; }
  .pub-only-desktop  { display: none !important; }
  .pub-only-mobile   { display: block; }
  .pub-msticky       { display: flex !important; }

  .pub-hero-grid, .pub-hero-grid--cat { grid-template-columns: 1fr !important; gap: 22px !important; padding-top: 22px !important; padding-bottom: 24px !important; }
  .pub-hero-h1       { font-size: 30px !important; line-height: 1.06 !important; }
  .pub-hero-grid--cat .pub-hero-h1 { font-size: 28px !important; }
  .pub-vp            { grid-template-columns: 1fr 1fr !important; }
  .pub-cat-grid      { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .pub-arch-grid, .pub-arch-grid--cat { grid-template-columns: 1fr !important; gap: 18px !important; }
  .pub-aside-sticky  { position: static !important; }
  .pub-journey       { grid-template-columns: 1fr !important; }
  .pub-why           { grid-template-columns: 1fr !important; }
  .pub-links-grid    { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .pub-prose         { grid-template-columns: 1fr !important; }
  .pub-arch-row--mtx { grid-template-columns: 1fr auto !important; }
  .pub-head h2       { font-size: 24px !important; }
  .pub-cta           { padding-top: 28px !important; padding-bottom: 28px !important; }
  /* intent control stacks: toggle, then city + CTA full-width */
  .pub-intent-row    { flex-wrap: wrap !important; gap: 12px !important; }
  .pub-intent        { width: 100% !important; }
  .pub-intent-btn    { flex: 1 !important; justify-content: center; }
  .pub-intent-city   { flex: 1 1 100% !important; }
  .pub-intent-cta    { flex: 1 1 100% !important; justify-content: center; }
  /* Footer flush with the sticky CTA. The sticky bar is position:fixed, so when
     the page is shorter than the viewport, body-white shows between footer and
     bar. Fix: make the footer's wrapper grey and stretch it to fill any leftover
     space down to the sticky bar, so the whole bottom region is one grey block.
     !important beats the footer's inline padding. */
  .pub-page          { padding-bottom: 0; }
  .pub-page ~ .bh-only-mobile { background: var(--paper-2); }
  #bh-mobile-footer  { padding-top: 18px !important; padding-bottom: 80px !important; margin-bottom: 0 !important; }
}
/* Tall-window safety: pin the grey mobile footer block to the bottom so no
   white body shows between it and the fixed sticky bar when content is short. */
@media (max-width: 760px) {
  body:has(.pub-page) { display: flex; flex-direction: column; min-height: 100vh; }
  body:has(.pub-page) .pub-page ~ .bh-only-mobile { margin-top: auto; }
}