/* home-compact.css — "15-inch desktop" density layer for NewspaperHome.
   Activated only when the root carries .bh-compact (the 1366-wide artboard).
   The whole sheet is gated inside @container home (min-width:761px) so it
   NEVER fires at mobile home widths — the mobile component is untouched.

   Strategy (per the 15" brief):
     1. Density pass — section vertical padding ~64-96px → ~36-44px.
     2. Trade height for width — steps + a few headers go two-column.
     3. Tame display type — giant 48-62px headlines → ~30-40px so a
        whole section idea lands inside one ~720px laptop fold.
   No scroll-snap (soft flow), and the desktop sticky bar is dropped in JSX. */

@container home (min-width: 761px) {

  /* ============================================================
     HERO  — target: hero + trust strip ≈ first screen
     ============================================================ */
  .bh-compact .bh-hero            { padding: 40px 40px 40px; }
  .bh-compact .bh-hero-inner      { gap: 48px; }
  .bh-compact .bh-hero-title      { font-size: 40px; line-height: 1.08; }
  .bh-compact .bh-hero-sub        { font-size: 16px; margin-top: 12px !important; line-height: 1.45; }
  .bh-compact .bh-hero-promises   { margin-top: 16px !important; gap: 8px 24px; }
  .bh-compact .bh-hero-ctas       { margin-top: 20px !important; }
  .bh-compact .bh-hero .bd-chip   { margin-bottom: 12px !important; }

  /* ============================================================
     TRUST STRIP
     ============================================================ */
  .bh-compact .bh-trust-inner     { padding: 14px 40px; }
  .bh-compact .bh-trust-item-num  { font-size: 22px; }

  /* ============================================================
     STEPS — two columns: heading | the 3-step rail (was stacked)
     ============================================================ */
  .bh-compact .bh-steps           { padding: 40px 40px; }
  .bh-compact .bh-steps-inner     {
    display: grid; grid-template-columns: 0.85fr 1.6fr;
    gap: 48px; align-items: center;
  }
  /* the centered header block becomes the left column, left-aligned */
  .bh-compact .bh-steps-inner > div:first-child {
    text-align: left !important; margin-bottom: 0 !important;
  }
  .bh-compact .bh-steps-h2        { font-size: 28px; margin-top: 8px !important; }
  .bh-compact .bh-steps-rail      { top: 28px; left: 14%; right: 14%; }
  .bh-compact .bh-step-circle     { width: 56px; height: 56px; font-size: 24px; }
  .bh-compact .bh-step-card       { padding: 0 14px; }
  .bh-compact .bh-step-title      { font-size: 17px; margin-top: 14px; }

  /* ============================================================
     AD TYPES
     ============================================================ */
  .bh-compact .bh-types           { padding: 40px 40px; }
  .bh-compact .bh-types-inner > div:first-child { margin-bottom: 18px !important; }
  .bh-compact .bh-types-h2        { font-size: 26px; }

  /* ============================================================
     SUPPLEMENTS (section uses inline 64px 0 padding → need !important)
     ============================================================ */
  .bh-compact .bh-supps           { padding-top: 40px !important; padding-bottom: 40px !important; }
  .bh-compact .bh-supps-h2        { font-size: 26px; }
  .bh-compact .bh-supps-headrow   { margin-bottom: 16px; }

  /* ============================================================
     CATEGORIES
     ============================================================ */
  .bh-compact .bh-cats            { padding: 40px 40px; }
  .bh-compact .bh-cats-headrow    { margin-bottom: 16px; }
  .bh-compact .bh-cats-h2         { font-size: 26px; }

  /* ============================================================
     CITIES BAND
     ============================================================ */
  .bh-compact .bh-cities          { padding: 34px 40px; }
  .bh-compact .bh-cities-h2       { font-size: 22px; }
  .bh-compact .bh-cities-grid     { margin-top: 16px; }

  /* ============================================================
     VIDEO TESTIMONIALS (editorial)
     ============================================================ */
  .bh-compact .bh-vte             { padding: 42px 40px; }
  .bh-compact .bh-vte-headrow     { margin-bottom: 22px; }
  .bh-compact .bh-vte-h2          { font-size: 24px; }
  .bh-compact .bh-vte-feat        { gap: 40px; padding-bottom: 26px; }
  .bh-compact .bh-vte-feat-quote  { font-size: 25px; }
  .bh-compact .bh-vte-feat-dropmark { font-size: 64px; }
  .bh-compact .bh-vte-rest        { margin-top: 24px; }

  /* ============================================================
     WHY ADVERTISE — magazine feature
     ============================================================ */
  .bh-compact .seo-feat-section-pad { padding: 46px 40px 50px; }
  .bh-compact .seo-feat-header-bar  { padding-bottom: 14px; margin-bottom: 24px; }
  .bh-compact .seo-feat-spread      { gap: 48px; }
  .bh-compact .seo-feat-h2          { font-size: 40px; }
  .bh-compact .seo-feat-dek         { font-size: 18px; }
  .bh-compact .seo-feat-dropcap     { font-size: 64px; }
  .bh-compact .seo-feat-body        { font-size: 16px; line-height: 1.6; }
  .bh-compact .seo-feat-pullquote   { font-size: 24px; }
  .bh-compact .seo-feat-subhead     { font-size: 21px; }
  .bh-compact .seo-feat-stat        { font-size: 26px; }
  .bh-compact .seo-feat-sidebar     { padding: 22px 20px 20px; top: 16px; }

  /* ============================================================
     BOOKING JOURNEY  — biggest win: 3 phases stacked → 3 columns,
     each card restacked single-column with a tighter step list.
     ~2000px tall → ~780px.
     ============================================================ */
  .bh-compact .seo-journey-pad      { padding: 46px 40px 50px; }
  .bh-compact .seo-journey-pad > div { max-width: 1200px; }
  .bh-compact .seo-journey-pad > div > div:first-child { margin-bottom: 28px !important; }
  .bh-compact .seo-journey-head     { gap: 40px; }
  .bh-compact .seo-journey-h2       { font-size: 34px; }
  .bh-compact .seo-journey-dek      { font-size: 15px; }

  /* the phases container (the grid that holds the .seo-journey-card items) */
  .bh-compact .seo-journey-pad div:has(> .seo-journey-card) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    align-items: start;
  }
  .bh-compact .seo-journey-card     { padding: 22px 22px 18px; }
  .bh-compact .seo-journey-label    { font-size: 23px; }
  /* card head: side-by-side label|intro → stacked single column */
  .bh-compact .seo-journey-card-head { grid-template-columns: 1fr !important; gap: 12px; padding-bottom: 16px; }
  /* step rows: drop the centred node column, keep timestamp | content */
  .bh-compact .seo-journey-step      { grid-template-columns: 44px 1fr !important; gap: 12px; padding: 11px 0; }
  .bh-compact .seo-journey-step > div:nth-child(2) { display: none !important; }  /* node dot */
  .bh-compact .seo-journey-rail      { display: none; }
  .bh-compact .seo-journey-step-title { font-size: 15.5px; }
  .bh-compact .seo-journey-step-body  { font-size: 13px; line-height: 1.5; }
  .bh-compact .seo-journey-closing   { margin-top: 24px; }

  /* ============================================================
     FAQ — grouped
     ============================================================ */
  .bh-compact .seo-faq-pad          { padding: 46px 40px 52px; }
  .bh-compact .seo-faq-head         { gap: 48px; }
  .bh-compact .seo-faq-h2           { font-size: 34px; }
  .bh-compact .seo-faq-dek          { font-size: 16px; }
  .bh-compact .seo-faq-grid         { gap: 22px 48px; }

  /* ============================================================
     CTA BAND
     ============================================================ */
  .bh-compact .bh-cta               { padding: 40px 40px; }
  .bh-compact .bh-cta-h2            { font-size: 26px; line-height: 1.32; }
}

/* ════════════════════════════════════════════════════════════
   TIGHT layer — .bh-tight is applied ON TOP of .bh-compact.
   Goal: ~1.5 sections visible per 15" screen, so each section
   peeks into the next. Concentrated on the TOP FOUR sections
   (hero · trust · steps · ad types) — the ones flagged critical.
   The main height there was the 3:4 hero newspaper image and the
   uncapped sample images in the ad-type cards; both get capped.
   ════════════════════════════════════════════════════════════ */
@container home (min-width: 761px) {

  /* ---- HERO : ~750px → ~510px ---- */
  .bh-tight .bh-hero            { padding: 28px 40px 30px; }
  .bh-tight .bh-hero-inner      { gap: 40px; align-items: center; }
  .bh-tight .bh-hero .bd-chip   { margin-bottom: 8px !important; }
  .bh-tight .bh-hero-title      { font-size: 34px; line-height: 1.12; }
  /* the TOI wordmark is locked large inline — bring it down to match 34px */
  .bh-tight .bh-hero-title .toi-name { font-size: 36px !important; }
  .bh-tight .bh-hero-sub        { font-size: 14.5px; margin-top: 10px !important; }
  .bh-tight .bh-hero-promises   { margin-top: 12px !important; gap: 6px 20px; font-size: 13px; }
  .bh-tight .bh-hero-ctas       { margin-top: 16px !important; }
  /* shrink the stacked-newspaper hero image (3:4 → much shorter) */
  .bh-tight .bh-hero-image > div { max-width: 330px !important; }

  /* ---- TRUST STRIP ---- */
  .bh-tight .bh-trust-inner     { padding: 12px 40px; }
  .bh-tight .bh-trust-item-num  { font-size: 20px; }

  /* ---- STEPS : removed entirely in ultra-compact ---- */
  .bh-tight .bh-steps           { display: none; }

  /* ---- AD TYPES : cap the sample images, tighten card bodies ---- */
  .bh-tight .bh-types           { padding: 28px 40px; }
  .bh-tight .bh-types-inner > div:first-child { margin-bottom: 14px !important; }
  .bh-tight .bh-types-h2        { font-size: 24px; }
  /* image wrapper is the card's first child → cap its height + crop the img */
  .bh-tight .bh-types-grid .bd-card > div:first-child   { height: 150px; }
  .bh-tight .bh-types-grid .bd-card > div:first-child img {
    height: 100% !important; object-fit: cover; object-position: top center;
  }
  /* body is the second child → trim its padding */
  .bh-tight .bh-types-grid .bd-card > div:nth-child(2)  { padding: 16px !important; }

  /* ---- carry a little tightening into the next couple sections ---- */
  .bh-tight .bh-supps           { padding-top: 30px !important; padding-bottom: 30px !important; }
  .bh-tight .bh-cities          { padding: 28px 40px; }

  /* ---- CATEGORIES ("Start from your ad category") : smaller units ---- */
  .bh-tight .bh-cats            { padding: 30px 40px; }
  .bh-tight .bh-cats-grid       { gap: 10px; }
  .bh-tight .bh-cats-grid .bd-card { padding: 14px !important; }
  /* shrink the category icon tile */
  .bh-tight .bh-cats-grid .bd-card > div:nth-child(1) > div:first-child {
    width: 34px !important; height: 34px !important; border-radius: 8px !important;
  }
  /* tighten the vertical rhythm + type inside each card */
  .bh-tight .bh-cats-grid .bd-card > div:nth-child(2) { font-size: 15px !important; margin-top: 11px !important; }
  .bh-tight .bh-cats-grid .bd-card > div:nth-child(4) { margin-top: 9px !important; }
  .bh-tight .bh-cats-grid .bd-card > div:nth-child(4) span:last-child { font-size: 19px !important; }
  .bh-tight .bh-cats-grid .bd-card > div:nth-child(5) { margin-top: 9px !important; padding-top: 8px !important; }
}

/* ════════════════════════════════════════════════════════════
   OTHER DESKTOP PAGES — ultra-compact (Category · City · Rate card)
   These page roots carry `bh-compact bh-tight`, so all the shared
   seo-editorial / video-testimonial / supplements rules above
   already apply. Below are the page-specific chrome rules
   (.cl-* category · .ct-* city · .rc-* rate card) + the shared
   ad-type picker. Desktop only — mobile is never these widths.
   ════════════════════════════════════════════════════════════ */
@container home (min-width: 761px) {

  /* ---- SHARED · ad-type picker cards (Category / City / Rate card) ---- */
  /* two big cards with a print-sample image + meta; cap the sample, trim pad */
  .bh-tight button:has(> div > img) { padding: 14px !important; gap: 16px !important; }
  .bh-tight button:has(> div > img) > div:first-child { min-height: 118px !important; }

  /* ══════════ 02 · CATEGORY LANDING (.cl-*) ══════════ */
  .bh-tight .cl-hero          { padding: 28px 40px 32px; }
  .bh-tight .cl-hero-grid     { grid-template-columns: 270px 1fr; gap: 44px; align-items: center; }
  .bh-tight .cl-hero-text     { min-width: 0; }
  .bh-tight .cl-hero-image    { max-width: 270px; margin: 0 auto; }
  .bh-tight .cl-hero-title    { font-size: 34px; line-height: 1.1; }
  .bh-tight .cl-hero-title .toi-name { font-size: 36px !important; }
  .bh-tight .cl-hero-text > p { font-size: 14.5px !important; margin-top: 12px !important; line-height: 1.5 !important; }
  .bh-tight .cl-hero-stats    { margin-top: 16px !important; }
  .bh-tight .cl-hero-stats [style*="font-size: 38px"],
  .bh-tight .cl-hero-stats div[style*="38px"] { font-size: 30px !important; }
  .bh-tight .cl-hero-buttons  { margin-top: 18px !important; }
  .bh-tight .cl-section       { padding: 34px 40px; }
  /* "asHero" framing inside MatrimonialAdTypeRates: trim its tall header */
  .bh-tight .cl-section .cl-hero-title { font-size: 30px; }
  .bh-tight .cl-samples-grid  { margin-top: 18px; }
  .bh-tight .cl-samples-grid .bd-card { padding: 16px !important; }

  /* ══════════ 03 · CITY LANDING (.ct-*) ══════════ */
  .bh-tight .ct-hero          { padding: 28px 40px 32px; }
  .bh-tight .ct-hero-grid     { grid-template-columns: 270px 1fr; gap: 44px; align-items: center; }
  .bh-tight .ct-hero-text     { min-width: 0; }
  .bh-tight .ct-hero-image    { max-width: 270px; margin: 0 auto; }
  .bh-tight .ct-hero-title    { font-size: 34px; line-height: 1.1; }
  .bh-tight .ct-hero-title .toi-name { font-size: 36px !important; }
  .bh-tight .ct-hero-text > p { font-size: 14.5px !important; margin-top: 12px !important; line-height: 1.5 !important; }
  .bh-tight .ct-hero-stats    { margin-top: 16px !important; gap: 18px; }
  .bh-tight .ct-hero-stats div[style*="font-size: 28px"] { font-size: 24px !important; }
  .bh-tight .ct-hero-buttons  { margin-top: 18px !important; }
  .bh-tight .ct-deadlines     { padding: 12px 40px; }
  .bh-tight .ct-section       { padding: 34px 40px; }
  /* comparison table — trim row height */
  .bh-tight .ct-compare-wrap td,
  .bh-tight .ct-compare-wrap th { padding-top: 10px !important; padding-bottom: 10px !important; }

  /* ══════════ 04 · RATE CARD (.rc-*) ══════════ */
  .bh-tight .rc-hero          { padding: 28px 40px 24px; }
  .bh-tight .rc-hero-title    { font-size: 32px; line-height: 1.06; }
  .bh-tight .rc-hero-title .toi-name { font-size: 34px !important; }
  .bh-tight .rc-hero-inner > div:first-child p { font-size: 14.5px !important; margin-top: 10px !important; }
  .bh-tight .rc-hero-meta     { gap: 16px; }
  .bh-tight .rc-hero-meta div[style*="font-size: 22px"],
  .bh-tight .rc-hero-meta [style*="22px"] { font-size: 19px !important; }
  /* the ad-type picker section uses an inline 32px 40px 28px padding */
  .bh-tight section[style*="padding: 32px 40px 28px"] { padding: 26px 40px 22px !important; }
  .bh-tight .rc-table         { padding: 18px 40px 36px; }
  /* rate table — trim row height (14 rows × a few px adds up) */
  .bh-tight .rc-table-wrap td,
  .bh-tight .rc-table-wrap th { padding-top: 9px !important; padding-bottom: 9px !important; }
  .bh-tight .rc-notes-grid    { margin-top: 18px; }
  .bh-tight .rc-notes-grid > div { padding: 13px !important; }
  .bh-tight .rc-cta-section   { padding: 30px 40px; }
}

/* ════════════════════════════════════════════════════════════
   BRANCH PAGES — ultra-compact (Classified · Display · Display rate)
   These roots carry `bh-compact bh-tight`. Their heroes reuse
   .clf-hero / .rc-hero, their tables reuse .rc-table, and the SEO
   trio + CTA reuse .seo-* / .rc-cta-section — all already handled
   above. Below are only the NEW page-specific sections.
   ════════════════════════════════════════════════════════════ */
@container home (min-width: 761px) {

  /* ══════════ 05 · CLASSIFIED LANDING ══════════ */
  /* hero — inline 56px 56px 0 padding + inline 52px h1 */
  .bh-tight .clf-hero-section { padding: 30px 40px 0 !important; }
  .bh-tight .clf-hero-section > div > h1 { font-size: 34px !important; }
  .bh-tight .clf-hero-section > div > h1 .toi-name { font-size: 36px !important; }
  /* trust badges row (inline margin-top:24) + step-1 header (inline margin-top:48) */
  .bh-tight .clf-hero-section [style*="margin-top: 24px"] { margin-top: 14px !important; }
  .bh-tight .clf-hero-section [style*="margin-top: 48px"] { margin-top: 22px !important; }
  /* ad-type picker grid (inline margin-top:24, padding-bottom:56) */
  .bh-tight .clf-adtype-grid  { margin-top: 16px !important; padding-bottom: 32px !important; }
  /* (card sample images capped by the shared button:has(>div>img) rule above) */

  /* categories — inline 48px 56px 64px padding */
  .bh-tight .clf-cats-section { padding: 32px 40px 40px !important; }
  .bh-tight .clf-cats-section [style*="margin-bottom: 32px"] { margin-bottom: 18px !important; }
  .bh-tight .clf-cats-section h2 { font-size: 26px !important; }
  /* 24 category cards (inline 24px 20px) → tighter pad + smaller icon tile */
  .bh-tight .clf-cats-grid .bd-card { padding: 16px 16px !important; }
  .bh-tight .clf-cats-grid .bd-card > div:first-child {
    width: 34px !important; height: 34px !important; margin-bottom: 10px !important;
  }
  .bh-tight .clf-cats-grid .bd-card > div:nth-child(3) { margin-top: 10px !important; padding-top: 10px !important; }

  /* ══════════ 06 · DISPLAY LANDING ══════════ */
  /* Compact hero — the blade uses .dsp-hero-* classes. Shrinks the 56px base title
     so "Book Display Ads in <Newspaper>" sits on one line and the hero stays tight,
     matching the reference design (newspaper name inline, not a giant second row). */
  .bh-tight .dsp-hero          { padding: 30px 40px 34px !important; }
  .bh-tight .dsp-hero-inner    { gap: 40px; align-items: center; }
  .bh-tight .dsp-hero-text     { min-width: 0; }
  .bh-tight .dsp-hero-title    { font-size: 34px !important; line-height: 1.08 !important; }
  .bh-tight .dsp-hero-title .toi-name { font-size: 34px !important; display: inline; }
  .bh-tight .dsp-hero-sub      { font-size: 15px !important; margin-top: 14px !important; }
  .bh-tight .dsp-hero-promises { margin-top: 18px !important; }
  .bh-tight .dsp-hero-buttons  { margin-top: 24px !important; }
  .bh-tight .dsp-hero-stats-card { padding: 22px !important; }
  .bh-tight .dsp-hero-stat-n   { font-size: 28px !important; }
  /* supplements — inline 64px 0 64px; cap newspaper image, trim row gaps */
  .bh-tight .dsp-supplements-section { padding: 34px 0 36px !important; }
  .bh-tight .dsp-supplements-section h2 { font-size: 28px !important; }
  .bh-tight .dsp-supplements-section [style*="margin: 48px auto 0"] { margin-top: 24px !important; }
  .bh-tight .dsp-supp-row-container { padding-bottom: 28px !important; margin-bottom: 28px !important; }
  /* Track must match the blade's pinned thumbnail width (280px). A narrower track
     (the old 220px) let the 280px card overflow into the detail column and pushed
     the whole row past the viewport → horizontal scroll + clipped headings. */
  .bh-tight .dsp-supp-row     { grid-template-columns: 280px 1fr !important; gap: 40px !important; align-items: start; }
  .bh-tight .dsp-supp-row > div:first-child img { object-fit: cover; object-position: top; }
  /* Let the detail column shrink instead of forcing the row wider than the viewport. */
  .bh-tight .dsp-supp-detail  { min-width: 0; }
  /* steps — inline section padding; rail + 5 cols kept */
  .bh-tight .dsp-steps-grid   { gap: 18px !important; }
  /* formats — inline 56px 56px */
  .bh-tight .dsp-formats-section { padding: 34px 40px !important; }
  .bh-tight .dsp-formats-section h2 { font-size: 26px !important; }

  /* ══════════ 07 · DISPLAY RATE CARD ══════════ */
  /* hero/table/CTA reuse .rc-* (already handled). New: supplement picker + calc */
  .bh-tight .drc-supplement-section { padding: 30px 40px 30px !important; }
  .bh-tight .drc-supplement-section h2 { font-size: 26px !important; }
  .bh-tight .drc-supplement-section [style*="margin-bottom: 28px"] { margin-bottom: 16px !important; }
  .bh-tight .drc-calc-inputs  { gap: 20px !important; margin-bottom: 26px !important; }
  .bh-tight .drc-calc-inputs > div { padding: 14px 22px !important; }
}

/* ════════════════════════════════════════════════════════════
   08 · DISPLAY PULLOUT (Times Ascent) — po-* sections.
   Hero/table/CTA reuse .rc-* (handled above). New: packages,
   innovations, why+tips, faq.
   ════════════════════════════════════════════════════════════ */
@container home (min-width: 761px) {
  .bh-tight .po-table        { padding-top: 30px !important; }
  .bh-tight .po-tablehead    { padding-bottom: 16px !important; margin-bottom: 18px !important; }
  .bh-tight .po-h2           { font-size: 25px !important; }
  .bh-tight .po-tablewrap    { max-height: 440px !important; }
  .bh-tight .po-calc         { margin-top: 34px !important; padding: 32px 40px !important; }
  .bh-tight .po-calc .po-h2  { font-size: 26px !important; }

  .bh-tight .po-packages     { padding: 34px 40px !important; }
  .bh-tight .po-headrow      { margin-bottom: 16px !important; }
  .bh-tight .po-pkg-grid     { gap: 10px !important; }
  .bh-tight .po-pkg-grid .bd-card { padding: 14px !important; }

  .bh-tight .po-innov        { padding: 34px 40px !important; }
  .bh-tight .po-innov-grid   { gap: 12px !important; }
  .bh-tight .po-innov-grid .bd-card { padding: 14px !important; gap: 14px !important; }

  .bh-tight .po-why          { padding: 36px 40px !important; }
  .bh-tight .po-why-inner    { gap: 40px !important; }

  .bh-tight .po-faq          { padding: 36px 40px !important; }
  .bh-tight .po-faq-inner    { gap: 40px !important; }
}