/* ============================================================
   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 control.
   Was a pill toggle with a single, permanently-selected "Advertise" option — a
   control with nothing to switch to, because these pages had no ads to read. Now
   that they do, it is a plain two-option <select> matching the city picker beside
   it, so the row reads as one form instead of a button next to a dropdown. */
.pub-intent-box     { margin-top: 24px; padding: 20px; border-radius: 16px;
                      background: var(--paper-2); border: 1px solid var(--rule); }

/* NOTE ON THE CTA: it must carry `bd-btn--solid`, not just `bd-btn`.
   layout.blade.php strips the background off ANY anchor .bd-btn under the
   theme-bold / theme-editorial themes unless it opts out with --solid or
   --outline, so "Start booking" was white text on a transparent background —
   invisible against the white hero. --solid is the intended escape hatch; do not
   re-fight this with a specificity override here, it will lose to the `!important`
   in that inline block anyway. */
.pub-intent-go span { color: inherit; display: inline-flex; align-items: center; }

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

/* ── Published-ad clippings ────────────────────────────────────────────────
   The ads themselves, styled as newspaper cuttings: a ruled column of serif
   text with a date stamp, rather than marketing cards. These pages exist to be
   READ, so the ad text is the largest thing in the block.

   A one-column measure (not the old two-column grid) because classified copy is
   dense, unpunctuated and often long — two narrow columns of it were unreadable
   and forced a 220-char truncation that cut ads mid-sentence. */
.pub-clips          { list-style: none; margin: 0; padding: 0;
                      border-top: 1px solid var(--rule); }
.pub-clip           { position: relative; padding: 18px 0 20px 0;
                      border-bottom: 1px solid var(--rule); }
.pub-clip-meta      { display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
                      font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
                      text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.pub-clip-date      { color: var(--accent); font-weight: 700; }
.pub-clip-sep       { opacity: 0.45; }
.pub-clip-tag       { font-weight: 600; }
/* The source paper on a borrowed ad. Deliberately not muted into invisibility —
   it is a disclosure, not decoration. */
.pub-clip-src       { font-weight: 700; color: var(--ink-2);
                      background: rgba(211,16,39,0.07); border-radius: 4px; padding: 2px 6px; }
.pub-clip-ref       { margin-left: auto; opacity: 0.6; }
.pub-clip-text      { font-size: 15px; line-height: 1.62; color: var(--ink-2);
                      max-width: 62ch; white-space: pre-line; }
.pub-clip-copy      { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
                      padding: 7px 13px; border-radius: 999px; cursor: pointer;
                      font-size: 12px; font-weight: 700; color: var(--ink-2);
                      background: white; border: 1px solid var(--rule); }
.pub-clip-copy:hover { border-color: var(--accent); color: var(--accent); }
.pub-clip-copy span { display: inline-flex; align-items: center; gap: 6px; }
.pub-clips-more     { font-size: 13px; color: var(--muted); margin-top: 16px; }

/* ── Facet rails (sub-category + year) ─────────────────────────────────────
   Horizontal scrolling chip rows. Every chip carries its real ad count, so a
   visitor can see there is something behind it before clicking — the previous
   chips were unfiltered category names that mostly opened empty pages. */
.pub-rail           { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pub-rail--years    { margin-bottom: 22px; padding-bottom: 18px;
                      border-bottom: 1px solid var(--rule); }
.pub-rail-chip      { display: inline-flex; align-items: center; gap: 6px;
                      padding: 7px 12px; border-radius: 999px; text-decoration: none;
                      font-size: 12.5px; font-weight: 600; color: var(--ink-2);
                      background: white; border: 1px solid var(--rule); white-space: nowrap; }
.pub-rail-chip:hover { border-color: var(--accent); color: var(--accent); }
.pub-rail-chip.on   { background: var(--accent); border-color: var(--accent); color: white; }
.pub-rail-n         { font-family: var(--font-mono); font-size: 10px; opacity: 0.65; }
.pub-rail-chip.on .pub-rail-n { opacity: 0.8; }
/* The only <button> in the rail. A later sheet resets button border/background/font,
   and at equal specificity that reset won — the toggle rendered as bare text. Scoped
   one level deeper so the chip styling sticks. */
.pub-rail button.pub-rail-more {
                      cursor: pointer; font-weight: 700; color: var(--accent);
                      font-size: 12.5px; padding: 7px 12px; border-radius: 999px;
                      background: white; border: 1px dashed var(--rule); }
.pub-rail button.pub-rail-more:hover { border-color: var(--accent); }

@media (max-width: 760px) {
  /* Rails scroll sideways on a phone instead of consuming half the screen as
     wrapped rows — a category can have 37 sub-chips and 16 years.
     min-width:0 on the grid child is what makes overflow-x actually scroll: a grid
     item defaults to min-width:auto, so the rail stretched its own track to the full
     1,939px of chips instead of clipping and scrolling. */
  .pub-arch-grid > * { min-width: 0; }
  .pub-rail         { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
                      max-width: 100%;
                      margin-left: -16px; margin-right: -16px;
                      padding-left: 16px; padding-right: 16px; }
  .pub-rail::-webkit-scrollbar { display: none; }
  .pub-rail--years  { padding-bottom: 16px; }
  .pub-clip-text    { font-size: 14.5px; }
}

/* 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: both selects, then CTA, each full-width */
  .pub-intent-row    { flex-wrap: wrap !important; gap: 12px !important; }
  .pub-intent-city   { flex: 1 1 100% !important; }
  .pub-intent-cta    { flex: 1 1 100% !important; justify-content: center; }
  .pub-intent-box    { margin-top: 18px; padding: 16px; border-radius: 14px; }
  /* 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; }
}