/* responsive-pages.css — container-query rules for Category, City and
   Rate Card landing pages. Each page root carries .bh-home (same container
   as the homepage) so the existing @container home rules cascade through. */

/* Hide x-cloak elements before Alpine.js initialises */
[x-cloak] { display: none !important; }

/* ============================================================
   SHARED — breadcrumb + chrome
   ============================================================ */
.bh-breadcrumb-inner { max-width: 1280px; margin: 0 auto; padding: 14px 40px; }

@container home (max-width: 760px) {
  .bh-breadcrumb-inner { padding: 10px 16px; font-size: 12px; }
}

/* ============================================================
   CATEGORY LANDING — Hero (350 image + 1fr text), city grid (4-col),
   sample ads (3-col), SEO body, FAQ
   ============================================================ */
.cl-hero          { padding: 40px 40px 56px; }
.cl-hero-inner    { max-width: 1200px; margin: 0 auto; }
.cl-hero-grid     {
  max-width: 1080px;
  display: grid; grid-template-columns: 350px 1fr;
  gap: 56px; align-items: center;
}
.cl-hero-image    { order: 1; }
.cl-hero-text     { order: 2; }
.cl-hero-title    { font-size: 48px; line-height: 1.08; }
.cl-hero-stats    { display: flex; gap: 22px; margin-top: 22px; }
.cl-hero-buttons  { display: flex; gap: 10px; margin-top: 28px; }

/* Display-pullout hero: text wide-LEFT, sample card narrow-RIGHT (design 08).
   The shared .cl-hero puts the image left at 350px; flip for .da-hero. */
.da-hero .cl-hero-grid   { grid-template-columns: 1fr 420px; max-width: 1180px; align-items: start; }
.da-hero .cl-hero-text   { order: 1; }
.da-hero .da-sample      { order: 2; }
/* Heading uses the shared .cl-hero-title size (48px desktop / 29px mobile) so the
   display-ad hero matches the classified hero — no smaller override. */
/* Mobile-only hero blocks — hidden on desktop, enabled in the mobile media query. */
.da-hero-meta,
.da-hero-mobile-book     { display: none; }

.cl-section       { padding: 56px 40px; }
.cl-section-inner { max-width: 1200px; margin: 0 auto; }
/* Show-all button is mobile-only (the desktop grid shows every category). The mobile
   container query flips it to display:flex. */
.cl-cats-showall  { display: none; }
.cl-cities-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cl-cities-headrow{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }
.cl-samples-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }

.cl-seo-section   { padding: 56px 40px; }
.cl-seo-inner     { max-width: 900px; margin: 0 auto; }
.cl-faq-section   { padding: 48px 40px 64px; }
.cl-faq-inner     { max-width: 900px; margin: 0 auto; }

@container home (max-width: 760px) {
  .cl-hero          { padding: 22px 20px 28px; }
  /* Mobile hero order (matches the design): chip → title → subtitle → newspaper
     image → stats. `display:contents` flattens .cl-hero-text so its children become
     direct flex items of the grid, letting the image slot between subtitle and stats. */
  .cl-hero-grid     { display: flex; flex-direction: column; gap: 0; }
  .cl-hero-text     { display: contents; }
  .cl-hero-text > .bd-chip   { order: 1; }
  .cl-hero-title             { order: 2; font-size: 29px; line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: break-word; }
  .cl-hero-sub               { order: 3; }
  /* Trust badges → compact 2×2 grid on mobile (design). */
  .cl-hero-badges            { order: 4; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 12px !important; margin-top: 20px !important; }
  .cl-hero-badges > div      { font-size: 12.5px !important; }
  .cl-hero-image    { order: 5; max-width: 260px; margin: 18px auto 0; width: 100%; }
  .cl-hero-stats             { order: 6; }
  /* Hero stats stay side-by-side on mobile (matching the design), divider between them.
     Stat numbers shrunk so two fit on a narrow row. */
  .cl-hero-stats    { display: flex; flex-direction: row; align-items: flex-start; gap: 18px; margin-top: 18px; }
  .cl-hero-stats > div:nth-child(2) { padding-left: 18px !important; }
  .cl-hero-stats > div > div:last-child > div:first-child { font-size: 28px !important; }
  /* Hero CTA buttons are hidden on mobile — the pinned bottom booking bar covers booking. */
  .cl-hero-buttons  { display: none !important; }

  /* ===== Display-pullout hero (.da-hero) — mobile overrides =====
     Order on mobile (matches the design's 390px column): chip → title →
     subtitle → check-stats → sample card → buttons → meta panel. */
  /* Check-stat list hidden on mobile per the new design (desktop still shows it). */
  .da-hero .cl-hero-badges.da-checks { display: none !important; }
  .da-hero .da-sample                { order: 5; max-width: 100%; margin: 20px auto 0; }
  /* New mobile design: 2×2 meta grid (publishing day / deadline / min size / ad type)
     under the sample card, then a single Book button. The old two-button row is hidden. */
  .da-hero .da-hero-meta             { order: 6; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; width: 100%; }
  .da-hero .da-hero-meta-cell        { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; }
  .da-hero .da-hero-meta-label       { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .da-hero .da-hero-meta-value       { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); margin-top: 3px; }
  .da-hero .da-hero-mobile-book      { order: 7; display: flex !important; justify-content: center; margin-top: 18px; width: 100%; }
  /* Old desktop two-button row stays hidden on mobile — replaced by da-hero-mobile-book. */
  .da-hero .cl-hero-buttons          { display: none !important; }
  /* ===== Cost estimator — compact mobile design ===== */
  .da-estimator                      { padding: 18px !important; }
  /* Header: drop the eyebrow, left-align, short title + dek. */
  .da-est-head                       { text-align: left !important; margin-bottom: 16px !important; max-width: none !important; }
  .da-est-eyebrow                    { display: none; }
  .da-est-title                      { font-size: 20px !important; }
  .da-est-title-sn                   { display: none; }     /* "Estimate your cost" (no supplement name) */
  .da-est-dek                        { font-size: 12.5px !important; }
  /* Label swap: hide full, show short ("W (cm)" / "H (cm)" / "Area"). */
  .da-est-lbl-full                   { display: none; }
  .da-est-lbl-short                  { display: inline; }
  /* Inputs: tight inline row W × H = AREA. */
  .da-est-dims                       { gap: 10px !important; flex-wrap: nowrap !important; margin-bottom: 18px !important; }
  .da-est-input                      { min-width: 0 !important; flex: 1; padding: 10px 8px !important; }
  .da-est-input input                { width: 44px !important; font-size: 22px !important; }
  .da-est-x                          { flex-shrink: 0; }
  .da-est-area                       { padding-left: 0 !important; flex-shrink: 0; }
  .da-est-area > div:last-child      { font-size: 22px !important; }
  /* Cards: simpler — no pin, no zone, tighter padding. */
  .da-est-grid                       { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .da-est-grid a                     { padding: 12px !important; }
  .da-est-card-pin,
  .da-est-card-zone                  { display: none !important; }
  /* ===== Discount packages — compact mobile design ===== */
  /* Header: short "Discount packages" + one-line sub (hide desktop eyebrow/h2/dek). */
  #packages .da-pkg-eyebrow          { display: none; }
  #packages .da-pkg-h2               { display: none; }
  #packages .da-pkg-dek              { display: none; }
  #packages .da-pkg-head             { margin-bottom: 14px !important; }
  #packages .da-pkg-head-mobile      { display: block !important; }
  #packages .da-pkg-head-mobile-title{ font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.015em; color: var(--ink); }
  #packages .da-pkg-head-mobile-sub  { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
  /* Grid: 2-up → 1-up. */
  .da-pkg-grid                       { grid-template-columns: 1fr !important; gap: 10px !important; }
  /* Card: tighter, title smaller, plain editions text instead of chips, no Book button. */
  #packages .da-pkg-card             { padding: 13px 15px !important; gap: 6px !important; }
  #packages .da-pkg-card-top         { gap: 12px !important; }
  /* Title column must flex so the title wraps and leaves room for the rate. */
  #packages .da-pkg-card-top         { gap: 10px !important; }
  #packages .da-pkg-card-titlecol    { flex: 1 1 auto !important; min-width: 0 !important; }
  #packages .da-pkg-name             { font-size: 14px !important; overflow-wrap: anywhere !important; word-break: break-word !important; }
  /* Show abbreviated "TOI" name on mobile, hide the full one. */
  #packages .da-pkg-name-full        { display: none; }
  #packages .da-pkg-name-short       { display: inline; }
  #packages .da-pkg-editions-text    { display: block !important; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
  #packages .da-pkg-chips            { display: none !important; }
  #packages .da-pkg-book             { display: none !important; }

  /* ===== Ad innovations — compact mobile design (vertical cards) ===== */
  /* Header: short "Ad innovations" + one-line sub (hide desktop eyebrow/h2/dek). */
  #formats .da-innov-eyebrow         { display: none; }
  #formats .da-innov-h2              { display: none; }
  #formats .da-innov-dek             { display: none; }
  #formats .da-innov-head            { margin-bottom: 16px !important; }
  #formats .da-innov-head-mobile     { display: block !important; }
  #formats .da-innov-head-mobile-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.015em; color: var(--ink); }
  #formats .da-innov-head-mobile-sub   { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
  /* Grid: 3-up → 2-up. */
  #formats .da-innov-grid            { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  /* Card: vertical — icon on top, then name / size / body. */
  #formats .da-innov-card            { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 14px !important; }
  #formats .da-innov-icon            { width: 56px !important; height: 64px !important; }
  #formats .da-innov-name            { font-size: 14px !important; }
  #formats .da-innov-size            { font-size: 11px !important; }
  #formats .da-innov-body            { font-size: 12px !important; margin-top: 6px !important; }

  /* ===== Sticky footer — mobile only (FROM ₹ + Book button) ===== */
  .da-sticky-mobile        { display: flex !important; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--rule); box-shadow: 0 -6px 22px rgba(0,0,0,0.10); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .da-sticky-mobile-rate   { flex-shrink: 0; display: flex; flex-direction: column; line-height: 1; }
  .da-sticky-mobile-from   { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .da-sticky-mobile-price  { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); margin-top: 2px; }
  .da-sticky-mobile-btn    { flex: 1; justify-content: center; padding: 13px 14px; font-size: 14px; }

  .cl-section       { padding: 36px 20px; }
  /* Step-2 header on mobile (design): "Choose a category" 22px + "STEP 2 OF 3";
     long eyebrow + "Showing N…" count are hidden to keep it compact. */
  .cl-step2-head    { margin-bottom: 16px !important; align-items: baseline !important; }
  .cl-step2-eyebrow { display: none !important; }
  .cl-step2-h2      { font-size: 22px !important; margin-top: 0 !important; }
  .cl-step2-showing { font-size: 11px !important; font-weight: 700 !important; padding-bottom: 0 !important; }
  .cl-step2-showing span { display: block; }
  /* Category grid → two columns on mobile (design). */
  .cl-cats-grid     { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .cl-cats-grid > a { padding: 16px 14px !important; }
  /* Show-all behaviour: hide categories beyond the first 8 until expanded. */
  .cl-cat-extra            { display: none !important; }
  .cl-show-all .cl-cat-extra { display: flex !important; }
  /* Show-all button: real flex box on mobile (NOT display:contents, which would
     strip its white card / border). No !important so Alpine's x-show inline
     display:none can still hide it once expanded. */
  .cl-cats-showall         { display: flex; }
  .cl-cities-grid   { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cl-cities-headrow{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .cl-cities-headrow > div:last-child { width: 100%; overflow-x: auto; }
  .cl-samples-grid  { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }

  /* Step-1 header on mobile (design): compact single row — number + "Select ad type"
     (16px) on the left, "STEP 1 OF 3" (10px) on the right, no long subtitle. */
  .rc-step1-head    { margin-bottom: 14px !important; padding-bottom: 10px !important; gap: 8px !important; }
  .rc-step1-title   { font-size: 16px !important; }
  .rc-step1-sub     { display: none !important; }
  .rc-step1-of      { font-size: 10px !important; letter-spacing: 0.12em !important; }

  /* Ad-type picker on mobile (design): two cards side-by-side, sample image ON TOP,
     then tag → name → FROM ₹X → unit → Selected/Select + radio stacked beneath. */
  .rc-picker-grid   { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .rc-picker-card   { display: block !important; padding: 14px !important; border-radius: 14px !important; min-width: 0 !important; }
  .rc-picker-card .rc-picker-img    { display: block !important; width: 100% !important;
                                      margin-bottom: 12px !important; }       /* sample image on top */
  .rc-picker-card .rc-picker-body   { display: block !important; min-width: 0 !important; }

  .rc-picker-card .rc-picker-tag    { font-size: 9px !important; letter-spacing: 0.1em !important; }
  .rc-picker-card .rc-picker-name   { font-size: 15px !important; line-height: 1.15 !important; margin-top: 4px !important; }

  /* Name + price stack vertically (name on top, FROM beneath); no divider rule. */
  .rc-picker-card .rc-picker-titlerow { display: block !important; margin-top: 4px !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
  .rc-picker-card .rc-picker-from     { text-align: left !important; margin-top: 8px !important; }
  .rc-picker-card .rc-picker-from > div { justify-content: flex-start !important; gap: 4px !important; }
  .rc-picker-card .rc-picker-from > div:first-child > span:first-child { font-size: 9.5px !important; }  /* "FROM" */
  .rc-picker-card .rc-picker-from > div > span:last-child { font-size: 19px !important; }                /* "₹480" */
  .rc-picker-card .rc-picker-from > div:last-child { font-size: 11px !important; margin-top: 2px !important; }  /* "/ 5 lines" */
  .rc-picker-card .rc-picker-desc     { display: none !important; }          /* body copy hidden on mobile */
  .rc-picker-card .rc-picker-footer   { margin-top: 12px !important; padding-top: 0 !important; }
  .rc-picker-card .rc-picker-radio    { width: 18px !important; height: 18px !important; }
  .rc-picker-card .rc-picker-radio > span { inset: 3.5px !important; }

  .cl-seo-section   { padding: 36px 20px; }
  .cl-faq-section   { padding: 36px 20px; }
}

/* ============================================================
   CITY LANDING — Hero (1fr 1fr), deadlines bar, category rates (4-col),
   comparison table
   ============================================================ */
.ct-hero          { padding: 40px 40px 56px; }
.ct-hero-inner    { max-width: 1200px; margin: 0 auto; }
.ct-hero-grid     {
  max-width: 1080px;
  display: grid; grid-template-columns: 350px 1fr;
  gap: 56px; align-items: center;
}
.ct-hero-image    { order: 1; }
.ct-hero-text     { order: 2; }
.ct-hero-title    { font-size: 48px; line-height: 1.08; }
.ct-hero-stats    { display: flex; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.ct-hero-buttons  { display: flex; gap: 12px; margin-top: 28px; }

.ct-deadlines     { padding: 20px 40px; }
.ct-deadlines-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ct-deadlines-list  { display: flex; gap: 32px; font-size: 13px; }

.ct-section       { padding: 56px 40px; }
.ct-section-inner { max-width: 1200px; margin: 0 auto; }
.ct-cats-grid     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.ct-compare-wrap  { margin-top: 24px; background: white; border-radius: 16px; box-shadow: var(--shadow-sm); overflow-x: auto; }

@container home (max-width: 760px) {
  .ct-hero          { padding: 22px 20px 28px; }
  .ct-hero-grid     { grid-template-columns: 1fr; gap: 18px; }
  .ct-hero-text     { order: 1; }
  .ct-hero-title    { font-size: 26px; word-break: break-word; overflow-wrap: anywhere; }

  /* Image goes full-width below the text, in a wide 3:2 frame matching the
     city-mobile preview. Decorative card-shadow siblings are hidden — they
     only make sense on the desktop 350×466 portrait. */
  .ct-hero-image           { order: 2; max-width: none !important; margin: 0; width: 100%; min-width: 0; }
  .ct-hero-pic             { max-width: none !important; margin: 0 !important; }
  .ct-hero-pic-bg          { display: none !important; }
  .ct-hero-pic-frame       { aspect-ratio: 3 / 2 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important; }
  /* Move the "{CITY} EDITION" tag from bottom-left to top-left, like the preview. */
  .ct-hero-pic-tag         { top: 10px !important; left: 10px !important; bottom: auto !important; padding: 4px 9px !important; font-size: 9.5px !important; letter-spacing: 0.06em !important; }

  /* 4 stat cards reflow as a 2×2 grid so labels stay readable on a 390px screen. */
  .ct-hero-stats           { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 18px; min-width: 0; }
  .ct-hero-stats > div     { padding-right: 0 !important; border-right: 0 !important; min-width: 0; }

  .ct-hero-buttons         { flex-direction: column; gap: 8px; margin-top: 20px; }
  .ct-hero-buttons button,
  .ct-hero-buttons a       { width: 100%; justify-content: center; }

  .ct-deadlines     { padding: 14px 20px; }
  .ct-deadlines-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ct-deadlines-list  { flex-direction: column; gap: 6px; font-size: 12px; width: 100%; }

  .ct-section       { padding: 36px 20px; }
  .ct-cats-grid     { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .ct-compare-wrap table { min-width: 560px; font-size: 13px; }

  /* Supplements rail — keep horizontal scroll INSIDE the rail. The desktop
     56px side-padding on the inner flex row makes the rail overflow before
     scroll snap takes over; trim to 20px to match the section padding. */
  .bh-supps-headrow        { padding: 0 20px !important; }
  .bh-supps-rail > div     { padding: 0 20px !important; }
}

/* Global mobile overflow guard — kills any residual horizontal scroll the
   wide rails / oversized inline styles might leak. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .bh-home   { overflow-x: hidden; max-width: 100vw; }
}

/* ============================================================
   RATE CARD — Hero (text + meta-grid), filter bar, big table,
   notes grid, bottom CTA
   ============================================================ */
.rc-hero          { padding: 40px 40px 32px; }
.rc-hero-inner    { max-width: 1200px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; }
.rc-hero-meta     { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; flex-shrink: 0; }
.rc-hero-title    { font-size: 44px; line-height: 1.05; }

.rc-filter        { padding: 0 40px 0; }
.rc-filter-row    { max-width: 1200px; margin: 0 auto; display: flex; gap: 12px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.rc-filter-zones  { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-table-wrap    { max-width: 1200px; margin: 0 auto; background: white; border-radius: 16px; box-shadow: var(--shadow-sm); overflow-x: auto; }
.rc-table-wrap table { border-collapse: collapse; }
/* "City rates" card list — mobile-only (new design). Hidden on desktop. */
.da-rc-cards         { display: none; }
.da-rc-head-mobile   { display: none; }
/* Estimator: short labels are mobile-only (desktop shows the full labels). */
.da-est-lbl-short    { display: none; }
/* Discount packages: mobile-only header + plain editions text (desktop uses chips). */
.da-pkg-head-mobile   { display: none; }
.da-pkg-editions-text { display: none; }
/* Package name: full "Times Of India" on desktop, "TOI" only on mobile. */
.da-pkg-name-short    { display: none; }
/* Ad innovations: short header is mobile-only (desktop keeps the full header). */
.da-innov-head-mobile { display: none; }
/* Sticky footer (FROM ₹ + Book) is mobile-only — hidden on desktop. */
.da-sticky-mobile     { display: none; }

/* ===== Mobile sticky booking footer — iOS-hardened pin =====
   On iOS Safari, a plain `position:fixed; bottom:0` is anchored to the LAYOUT
   viewport, which is taller than the VISUAL viewport while the address bar shows.
   As you scroll and Safari resizes the bar, the footer drifts upward toward the
   header. Promoting the element to its own compositing layer (translateZ) pins it
   to the visual viewport so it stays locked to the bottom on iPhone the same way
   it does on Android/desktop. Applied via the shared .ms-sticky-fixed class so all
   five page stickies behave identically. */
.ms-sticky-fixed {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 35;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.rc-table         { padding: 24px 40px 56px; }
.rc-table-wrap    { max-width: 1200px; margin: 0 auto; background: white; border-radius: 16px; box-shadow: var(--shadow-sm); overflow-x: auto; }
.rc-notes-grid    { max-width: 1200px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Mobile city-rate cards (tariff/rate-card page) — desktop shows the table instead. */
.rc-mobile-cards  { display: none; }

.rc-cta-section   { padding: 40px 40px; }
.rc-cta-inner     { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.rc-cta-buttons   { display: flex; gap: 10px; }

@container home (max-width: 760px) {
  .rc-hero          { padding: 22px 20px 22px; }
  .rc-hero-inner    { flex-direction: column; align-items: stretch; gap: 22px; }
  .rc-hero-title    { font-size: 26px; }
  .rc-hero-meta     { gap: 14px; }

  .rc-filter        { padding: 0 20px 0; }
  .rc-filter-row    { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 0; }
  .rc-filter-row > div:first-child { flex: 1 1 auto; max-width: none; }
  .rc-filter-zones  { flex-wrap: wrap; }

  .rc-table         { padding: 14px 20px 36px; }

  /* Tariff/rate-card page: drop the search / zone / sort filter bar on mobile —
     the stacked card list below reads cleanly on its own (matches /rates/{cat}). */
  .rc-filter        { display: none !important; }

  /* Tariff/rate-card page: swap the cramped scrolling table for a clean stacked
     "city rate" card list — a professional mobile layout, no horizontal scroll. */
  .rc-table-wrap--full { display: none !important; }
  .rc-mobile-cards     { display: flex !important; flex-direction: column; gap: 10px; max-width: 1200px; margin: 0 auto; }
  .rc-mcard            { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 13px 15px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
  .rc-mcard:active     { background: var(--paper-2); }
  .rc-mcard-pin        { color: var(--accent); display: flex; flex-shrink: 0; }
  .rc-mcard-main       { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .rc-mcard-cityrow    { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .rc-mcard-city       { font-weight: 700; font-size: 15px; color: var(--ink); }
  .rc-mcard-pop        { font-size: 8.5px; font-weight: 800; color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 999px; letter-spacing: 0.06em; }
  .rc-mcard-sub        { font-size: 11.5px; color: var(--muted); }
  .rc-mcard-rate       { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
  .rc-mcard-price      { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--accent); letter-spacing: -0.01em; }
  .rc-mcard-unit       { font-size: 10px; color: var(--muted); font-weight: 600; }
  .rc-mcard-extra      { font-size: 10.5px; color: var(--ink-2); margin-top: 1px; }
  .rc-mcard-go         { width: 26px; height: 26px; border-radius: 999px; background: var(--paper-2); display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }
  .rc-mcard-empty      { padding: 28px; text-align: center; color: var(--muted); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; font-size: 14px; }

  /* New mobile design: swap the scrolling table for a stacked "City rates" card list. */
  #rates .rc-table-wrap { display: none !important; }
  #rates .da-rc-cards   { display: flex !important; flex-direction: column; gap: 10px; }
  #rates .da-rc-card    { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
  #rates .da-rc-card-pin  { color: var(--accent); display: flex; flex-shrink: 0; }
  #rates .da-rc-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  #rates .da-rc-card-city { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); line-height: 1.2; }
  #rates .da-rc-card-sub  { font-size: 12px; color: var(--muted); font-weight: 500; }
  #rates .da-rc-card-rate { text-align: right; flex-shrink: 0; line-height: 1.1; }
  #rates .da-rc-card-price{ font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--accent); }
  #rates .da-rc-card-unit { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
  #rates .da-rc-card-empty{ padding: 28px; text-align: center; color: var(--muted); }
  /* Header → "City rates" + edition count, then full-width segmented toggle (new design). */
  #rates .da-rc-head-mobile   { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 2px 0; }
  #rates .da-rc-head-mobile-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.015em; color: var(--ink); }
  #rates .da-rc-head-mobile-count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  #rates .da-rc-head-desktop  { display: none !important; }
  #rates .da-rc-head { flex-direction: column; align-items: stretch !important; gap: 12px; border-bottom: none !important; padding: 8px 0 4px !important; margin-bottom: 12px !important; }
  /* Full-width 2-segment pill — segments fill edge-to-edge (new design). */
  #rates .da-rc-toggle        { display: flex !important; width: 100%; padding: 4px; border-radius: 12px; gap: 0; }
  #rates .da-rc-toggle button { flex: 1 1 50%; text-align: center; padding: 11px 8px; border-radius: 9px; font-size: 14px; }
  .rc-notes-grid    { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }

  .rc-cta-section   { padding: 24px 20px; }
  .rc-cta-inner     { flex-direction: column; align-items: stretch; gap: 16px; }
  .rc-cta-inner h2  { font-size: 18px !important; }
  .rc-cta-buttons   { flex-direction: column; gap: 8px; }
  .rc-cta-buttons button { width: 100%; justify-content: center; }
}

/* ============================================================
   DISPLAY RATE CARD — supplement picker, colour toggle, rate table,
   cost calculator (drc-*). Reuses rc-hero / rc-table / rc-cta.
   ============================================================ */
/* Display-rate-card breakpoint helpers — unlike .bh-only-* (which use
   display:contents and break block layout), these preserve each element's box.
   Desktop: show .drc-d, hide .drc-m. Mobile (below): inverse. */
.drc-d            { } /* visible on desktop via the element's own display */
.drc-m            { display: none; }
.rc-hero-meta     { display: grid; }   /* desktop 4-box meta card */
.drc-zones        { display: flex; }   /* desktop zone filters */

.drc-supp-section { padding: 48px 40px; }
.drc-filter       { padding: 16px 40px; }
.drc-filter-inner { padding: 12px 0; }
.drc-table-section{ padding: 32px 40px 56px; }

/* Desktop default: show the supplement card grid + full table; hide the mobile
   chip scroller + mobile rate cards. (Toggled at the mobile breakpoint below.) */
.drc-supp-scroll, .drc-mobile-rates { display: none; }

@container home (max-width: 760px) {
  /* Swap desktop/mobile hero elements (these preserve block/grid layout). */
  .drc-d            { display: none !important; }
  .drc-m            { display: block; }
  .bd-chip.drc-m    { display: inline-flex; }       /* chip keeps its pill shape */
  .rc-hero-meta-m   { display: grid !important; }   /* 2-box meta */
  .drc-zones        { display: none !important; }   /* zone filters: desktop only */

  .drc-supp-section { padding: 16px 20px 8px; }
  .drc-supp-head    { margin-bottom: 12px !important; }
  /* Swap which layout shows: hide desktop grid + desktop table, show mobile bits. */
  .drc-supp-grid    { display: none !important; }
  .drc-desktop-table { display: none !important; }
  .drc-supp-scroll  { display: flex !important; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .drc-mobile-rates { display: grid !important; }

  .drc-filter       { padding: 8px 20px 16px; }
  .drc-filter-inner { padding: 0; }
  .drc-mode-btn     { flex: 1; justify-content: center; }
  .drc-filter-inner > div:first-child { width: 100%; }

  .drc-table-section{ padding: 8px 20px 32px; background: var(--paper-2) !important; border-top: 1px solid var(--rule); }
  .drc-table-head   { padding-bottom: 14px !important; margin-bottom: 16px !important; border-bottom-width: 1px !important; }
  .drc-table-h3     { font-size: 18px !important; }
  .drc-notes        { display: none !important; }   /* rate-notes grid: desktop only */

  /* Step 3 cost calculator: desktop only. */
  .drc-calc         { display: none !important; }
}

/* ============================================================
   DISCOUNT PACKAGES (shared) — 3-col → 1-col on mobile
   ============================================================ */
.dp-section       { padding: 64px 40px; }
.dp-section-inner { max-width: 1200px; margin: 0 auto; }
.dp-headrow       { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; }
.dp-h2            { font-size: 32px; }
.dp-grid          { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

@container home (max-width: 760px) {
  .dp-section     { padding: 36px 20px; }
  .dp-headrow     { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
  .dp-h2          { font-size: 22px; line-height: 1.2; }
  .dp-grid        { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   DISPLAY LANDING — hero (text + stats card), stacked supplement
   rows, 5-step process, ad-format showcase
   ============================================================ */
.dsp-hero             { padding: 48px 40px 56px; }
.dsp-hero-inner       { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: center; }
.dsp-hero-title       { font-size: 56px; }
.dsp-hero-promises    { display: flex; }
.dsp-supp-section     { padding: 64px 0; }
.dsp-supp-wrap        { max-width: 1280px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.dsp-supp-h2          { font-size: 36px; }
/* Keep a firm gap between the "Supplements & Sections" header block and the first
   supplement row so the heading + dek never crowd the "Main Newspaper" row below.
   The rows wrap carries margin-top + a top rule (inline in the blade) as the
   separator; this just guards the dek's own trailing space. */
.dsp-supp-dek         { margin-bottom: 8px; }
.dsp-formats-section  { padding: 56px 40px; }

@container home (max-width: 760px) {
  /* Hero — single column; stats card drops below the text. Title on its own
     line with the newspaper name wrapping under it (design: 32px). */
  .dsp-hero           { padding: 24px 20px; }
  .dsp-hero-inner     { grid-template-columns: 1fr; gap: 20px; }
  .dsp-hero-title     { font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: break-word; }
  .dsp-hero-title .toi-name { display: inline-block; margin-top: 4px; }
  .dsp-hero-sub       { font-size: 14.5px !important; margin-top: 12px !important; }
  .dsp-hero-buttons   { display: none !important; }          /* pinned bottom CTA covers booking on mobile */
  .dsp-hero-promises  { display: none !important; }          /* not in the mobile hero design */

  /* Stats → boxed 2×2 grid (design): drop the outer card chrome, put each stat
     in its own paper-2 bordered box, smaller numbers, no "Why advertise" footer. */
  .dsp-hero-stats-card { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; }
  .dsp-hero-stats-grid { gap: 10px !important; }
  .dsp-hero-stat       { padding: 14px 12px; background: var(--paper-2); border-radius: 12px; border: 1px solid var(--rule); }
  .dsp-hero-stat-n     { font-size: 22px !important; }
  .dsp-hero-stat span  { font-size: 9.5px !important; }

  /* Supplements (design mobile): small newspaper thumbnail floated left of the
     name + category + italic description; compact action bar full-width below. */
  .dsp-supp-section   { padding: 28px 0 32px; }
  .dsp-supp-wrap      { padding-left: 20px; padding-right: 20px; }
  .dsp-supp-wrap[style] { margin-top: 24px !important; }
  /* Mobile is a stacked list — drop the desktop header/rows separator rule. */
  .dsp-supp-rows      { border-top: 0 !important; padding-top: 0 !important; }
  .dsp-supp-row       { display: block !important; }
  .dsp-supp-row-container { padding-bottom: 24px !important; margin-bottom: 24px !important; border-bottom: 1px solid var(--rule-soft) !important; }

  /* Thumbnail — 84×105, floated left; details wrap beside it. */
  .dsp-supp-pic       { float: left; width: 84px !important; height: 105px !important; margin: 0 16px 0 0 !important; border-radius: 8px !important; }
  .dsp-supp-pic .bd-card { padding: 8px !important; border-radius: 2px !important; box-shadow: none !important; transform: none !important; }

  .dsp-supp-detail    { padding-top: 0 !important; }
  .dsp-supp-detail h3 { font-size: 19px !important; }
  .dsp-supp-detail > div:first-child { margin-bottom: 4px !important; gap: 8px !important; }
  /* "Publishing day:" row → compact category-style meta line. */
  .dsp-supp-meta      { font-size: 12px !important; margin-bottom: 8px !important; }
  .dsp-supp-desc      { font-size: 13px !important; line-height: 1.5 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 0 0 0 !important; max-width: none !important; }

  /* Formats chips hidden on mobile (not in the design). */
  .dsp-supp-formats   { display: none !important; }

  /* Action bar clears the float → full width, compact paper-2 row. */
  .dsp-supp-actions   { clear: both; gap: 10px !important; padding: 12px 14px !important; background: var(--paper-2) !important; border-radius: 14px !important; margin-top: 14px !important; box-shadow: none !important; flex-wrap: nowrap !important; }
  .dsp-supp-pick      { flex: 1; min-width: 0; }
  .dsp-supp-selwrap   { flex: 1; }
  .dsp-supp-actions select { min-width: 0 !important; width: 100% !important; padding: 8px 28px 8px 10px !important; font-size: 12px !important; border-radius: 8px !important; border-width: 1px !important; }
  /* Inline display:flex on the desktop button row beats .bh-only-desktop — force-hide. */
  .dsp-supp-btns      { display: none !important; }
  /* Mobile BOOK button — override .bh-only-mobile's display:contents so it renders. */
  .dsp-supp-book-m    { display: inline-flex !important; align-items: center; flex-shrink: 0; }

  /* 5-step process → single column, no rail. */
  .dsp-steps-grid     { grid-template-columns: 1fr !important; gap: 12px !important; }
  .dsp-steps-rail     { display: none !important; }

  /* Ad formats → 2-col; options → single column. */
  .dsp-formats-section { padding: 36px 20px; }
  .dsp-formats-grid   { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .dsp-options-grid   { grid-template-columns: 1fr !important; }
}

/* Desktop: hide the "show all" button (all rows visible); reveal extra rows. */
@container home (min-width: 761px) {
  .dsp-supp-showall   { display: none !important; }
  .dsp-supp-extra     { display: block !important; }
}