/* ============================================================
   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-book-grid      { grid-template-columns: 1fr 360px; gap: 32px; }
  .bh-tight .cl-section         { padding: 40px 28px; }
  .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; }

/* ── Hero price line (desktop) ─────────────────────────────────────────────
   Replaced the red price panel that used to occupy the hero's right column.
   One line under the intent box, so the figure survives above the fold. */
.pub-hero-price       { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                        margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.pub-hero-price-fig   { font-size: 14px; color: var(--ink-2); }
.pub-hero-price-fig strong { font-family: var(--font-display); font-weight: 800; font-size: 20px;
                        color: var(--ink); letter-spacing: -0.01em; }
.pub-hero-price-link  { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
                        font-weight: 700; color: var(--accent); text-decoration: none; }
.pub-hero-price-link:hover { text-decoration: underline; }

/* ── Tear-sheet: this paper's own ads, set as newsprint ────────────────────
   The hero's right column. Palette matches the memorial card on
   /rates/obituary (category-emotional) so the two pages read as one house.
   Serif + justified + a hairline rule between entries is what makes it scan
   as a classified column rather than a quote block. */
.pub-tearsheet        { margin: 0; }
.pub-tearsheet-cap    { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
                        text-transform: uppercase; color: var(--muted); text-align: center;
                        display: block; margin-bottom: 12px; }

/* Hub search card, now in the LEFT column. Capped so its selects sit under the
   dek rather than running the full 1fr width, where a two-word city name floated
   in the middle of a 900px control. */
.pub-hero-search      { max-width: 620px; }

/* The printed page, with the clipping laid over its lower half. padding-bottom
   reserves the space the clipping is pulled down into, so the figure's own box
   still contains it and the value-props row below is never overlapped. */
.pub-tearsheet-stack  { position: relative; padding-bottom: 76px; }
/* Cropped, not letterboxed. These scans are portrait broadsheets (298x468 for
   Anandabazar, 290x369 for Ajit) — at the column's full width an uncropped one
   runs ~580px tall against a ~364px left column, leaving the hero lopsided.
   Anchored to the top so the masthead, the part that identifies the paper,
   always survives the crop. */
.pub-tearsheet-page   { display: block; width: 100%; height: 356px; object-fit: cover;
                        object-position: top center; border-radius: 4px;
                        border: 1px solid #ddd0b6; box-shadow: 0 10px 30px rgba(0,0,0,0.14);
                        background: #fbf7ef; }
/* Inset both sides. It used to hang off the right edge for effect, which pushed
   the document wider than the viewport on narrow desktops. */
.pub-tearsheet-clip   { position: absolute; left: 14px; right: 6px; bottom: 0;
                        background: #fffdf8; border: 1px solid #c9b88e; border-radius: 3px;
                        box-shadow: 0 12px 28px rgba(0,0,0,0.22); padding: 11px 13px 12px;
                        transform: rotate(-1.1deg); }
.pub-tearsheet-clip-head { display: flex; align-items: baseline; justify-content: space-between;
                        gap: 8px; padding-bottom: 6px; margin-bottom: 7px;
                        border-bottom: 1.5px solid #2a2620; }
.pub-tearsheet-masthead { font-family: "Playfair Display", Georgia, serif; font-weight: 800;
                        font-size: 14px; line-height: 1.1; color: #2a2620; letter-spacing: -0.015em;
                        min-width: 0; overflow-wrap: anywhere; }
.pub-tearsheet-colhead { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em;
                        text-transform: uppercase; color: #9a8a63; white-space: nowrap; flex-shrink: 0; }
.pub-tearsheet-date   { display: block; font-family: var(--font-mono); font-size: 9px;
                        letter-spacing: 0.08em; color: #9a8a63; margin-bottom: 4px; }
/* No hyphens: auto. These archives carry Gurmukhi (Ajit), Bengali (Anandabazar),
   Devanagari and Malayalam alongside English, and auto-hyphenation is tuned per
   language — with the document lang set to English it mis-breaks everything else.
   The trailing generic `serif` is what actually renders those scripts; Newsreader
   and Georgia have no glyphs for them. overflow-wrap guards the narrow column
   against a long unbroken string. */
.pub-tearsheet-clip p { font-family: "Newsreader", Georgia, "Times New Roman", serif;
                        font-size: 12px; line-height: 1.5; color: #2a2620; text-align: justify;
                        overflow-wrap: anywhere; margin: 0; }
.pub-tearsheet-foot   { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
                        color: var(--muted); text-align: center; margin-top: 11px; }

/* "Book your own" band — copy + instant-rate card, below the ad list. Same
   proportions as .pub-arch-grid so the copy column lines up with the archive
   above it. */
.pub-book-grid      { display: grid; grid-template-columns: 1fr 400px; gap: 44px; align-items: start; }
.pub-book-grid > *  { min-width: 0; }
.pub-rates-link             { transition: border-color .15s ease, background .15s ease; }
.pub-rates-link:hover       { border-color: rgba(211,16,39,0.45); background: rgba(211,16,39,0.03); }

/* .cl-section / .cl-section-inner — the deadline strip and trust band are SHARED
   with /rates/{category}, whose archetype views load responsive-pages.css where
   these two base rules live. This page family does not load that file, so without
   them both partials render full-bleed with no padding. Kept byte-identical to
   responsive-pages.css:45-46 (and :170 for the mobile step-down) so the two cannot
   drift; if that file's values change, change them here too. */
.cl-section         { padding: 56px 40px; }
.cl-section-inner   { max-width: 1200px; margin: 0 auto; }

/* 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-book-grid     { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cl-section        { padding: 36px 20px; }

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