/* ==========================================================================
   DESKTOP CONTENT (>= 900px)
   Widen main content, reduce section gaps, keep sidebar (196px).
   Mobile (< 900px) is untouched.
   ========================================================================== */

@media (min-width: 900px) {
  /* ---- 1. Widen main article containers ---- */
  .content-article {
    max-width: 1040px !important;
    padding: 48px 32px 64px !important;
  }

  /* ---- 2. Tighten header/body gaps ---- */
  .content-article .content-header {
    margin-bottom: 32px !important;
    padding-bottom: 24px !important;
  }
  .content-lede { margin-bottom: 24px !important; }

  /* ---- 3. Apply CTA panel ---- */
  .content-apply .apply-inner {
    max-width: 820px !important;
  }
  .content-apply {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* ---- 4. Programme + Apply hero — text left, small door image right.
     Same pattern as Meet Dr Michael Yates (portrait right, text left).
     All content left-aligned at a consistent x-position. ---- */
  .door-hero,
  .door-callout {
    display: grid !important;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) !important;
    gap: clamp(2rem, 5vw, 3.5rem) !important;
    align-items: start !important;
    min-height: auto !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: clamp(3rem, 5vw, 4.5rem) 2rem clamp(2rem, 4vw, 3.5rem) !important;
    background: var(--hub-paper, #F5F0E7) !important;
  }

  /* Apply page has more content in the copy column — tighten paddings so everything fits above the fold */
  .door-callout {
    padding: 2rem 2rem 1.5rem !important;
  }
  .door-callout .apply-steps-list {
    margin: 1.25rem 0 0 !important;
    gap: 0.85rem !important;
  }
  .door-callout .apply-step-num {
    width: 1.9rem !important;
    height: 1.9rem !important;
    font-size: 0.9rem !important;
  }
  .door-callout .apply-step-heading {
    font-size: 0.98rem !important;
    margin-bottom: 0.2rem !important;
  }
  .door-callout .apply-step-text {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
  }
  .door-callout .apply-step-text strong { color: #17365D; font-weight: 600; }
  .door-callout .door-callout-headline {
    margin-bottom: 0.85rem !important;
  }
  .door-callout .door-callout-sub {
    margin-top: 0 !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
  .door-callout .apply-cta {
    margin-top: 1.4rem !important;
  }

  .door-hero-copy,
  .door-callout-copy {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    background: transparent !important;
  }

  .door-hero-headline {
    font-size: clamp(1.9rem, 3.2vw, 2.9rem) !important;
    line-height: 1.15 !important;
  }
  .door-callout-headline {
    font-size: clamp(1.75rem, 3vw, 2.7rem) !important;
    line-height: 1.15 !important;
  }

  .door-hero-sub,
  .door-callout-sub {
    max-width: 100% !important;
  }

  .door-hero-cta {
    align-self: flex-start !important;
    margin-top: 2rem !important;
  }

  /* Small door image on the right — portrait crop showing sunlight through the door */
  .door-hero-image {
    display: block !important;
    width: 100% !important;
    max-width: 260px !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    min-height: 0 !important;
    background-image: url('../images/tttas_door_side.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 14px rgba(23, 54, 93, 0.10) !important;
    margin-left: auto !important;
    margin-top: 0.5rem !important;
  }

  /* Apply page door image — fill full height of the copy column beside it */
  .door-callout-image {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 100% !important;
    min-height: 480px !important;
    background-image: url('../images/tttas_door_side.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 14px rgba(23, 54, 93, 0.10) !important;
    margin-left: auto !important;
    align-self: stretch !important;
  }

  /* ---- 6. Atoms sections (Programme phases, CTAs, etc) — tighten vertical padding ---- */
  .atoms-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Keep atoms containers at their built-in 1080px so left edges align across
     narrow and wide sections. Text inside already caps at 780px via atoms.css. */

  /* ---- 7. Hub / FAQ / How-it-works accordions — widen ---- */
  .hub-container,
  .hub-inner,
  .hub-shell-inner,
  .hub-body,
  .hub-lede,
  .faq-container,
  .faq-list,
  .faqs-container,
  .steps-container,
  .steps-list,
  .how-it-works-container {
    max-width: 1040px !important;
  }
  /* Reduce huge vertical padding on hub sections */
  .hub-shell { padding: 3.5rem 0 2.5rem !important; }
  .hub-body { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* ---- 8. Meet Dr Michael Yates page — pull portrait up ---- */
  .about-yates-portrait,
  .about-hero {
    padding-top: 32px !important;
  }

  /* ---- 9. Understanding hero images (full-bleed, keep aspect) ---- */
  .hub-hero-image,
  .content-hero-image {
    max-height: 380px !important;
  }
}

/* Taller viewports — allow a touch more width */
@media (min-width: 1400px) {
  .content-article { max-width: 1120px !important; }
  .atoms-container,
  .hub-container,
  .hub-inner,
  .faq-container,
  .steps-container { max-width: 1120px !important; }
}

/* ==========================================================================
   ALIGNMENT SWEEP — content pages must have a single consistent left edge
   from top to bottom. Kill any centred hero blocks; make all sections
   left-aligned against the same column.
   ========================================================================== */
@media (min-width: 900px) {
  /* Override the body.content-page rule that centres eyebrow/h2/lede */
  body.content-page .atoms-container--narrow .atoms-eyebrow,
  body.content-page .atoms-container--narrow .atoms-h2,
  body.content-page .atoms-container--narrow .atoms-lede {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Kill any inline text-align: center on hero blocks */
  .atoms-container[style*="text-align: center"],
  .atoms-container--narrow[style*="text-align: center"] {
    text-align: left !important;
  }
  /* Kill the "text-align: center" wrapper divs above card grids */
  .atoms-section > .atoms-container > div[style*="text-align: center"] {
    text-align: left !important;
  }
  /* atoms.css sets a few blocks text-align:center via classes — undo for content pages */
  .atoms-h2,
  .atoms-eyebrow,
  .atoms-lede {
    text-align: left !important;
  }
  /* Kill inline auto margins on lede/h2 (some pages use style="margin: 0 auto") */
  .atoms-section:not(.cta-block) .atoms-lede,
  .atoms-section:not(.cta-block) .atoms-h2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* But keep intentional CTA blocks centred */
  .cta-block .atoms-h2,
  .cta-block .atoms-eyebrow,
  .cta-block .atoms-lede,
  .atoms-cta .atoms-h2,
  .atoms-cta .atoms-eyebrow,
  .atoms-cta .atoms-lede {
    text-align: center !important;
  }
}