/* ==========================================================================
   DESKTOP RESTORE v3 — sidebar left, everything on one screen at 1440x900.
   Hero + 3x3 polaroids filling the screen width + "Time To Talk About Sex." + CTA.
   ONLY affects viewports >= 900px. Mobile is untouched.
   ========================================================================== */

/* Global (all viewports) — hide the desktop-only sidebar; keep home-steps hidden as per July 10 lock */
.big-q .mline { display: block; }
.tt-sidebar { display: none; }
.home-steps { display: none !important; }

@media (min-width: 900px) {
  /* ------- 1. Hide top nav bar, show left sidebar ------- */
  /* Brand strip at top-left of main content (not the sidebar); hide burger */
  header.nav {
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 40px 0 40px !important;
    background: transparent;
    border-bottom: none !important;
    position: relative;
    z-index: 1;
  }
  header.nav .nav-hamb { display: none !important; }
  /* Brand small and compact */
  header.nav .nav-logo,
  header.nav > svg { height: 28px; }
  header.nav .nav-wordmark .l1 { font-size: 12.5px; }
  header.nav .nav-wordmark .l2 { font-size: 11.5px; }
  .home-steps { display: none !important; }
  /* Remove the lede subtitle line on desktop */
  .q-lede { display: none !important; }

  .tt-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 196px;
    padding: 14px 14px 14px 20px;
    background: var(--cream, #F5F0E7);
    border-right: 1px solid rgba(23, 54, 93, 0.06);
    overflow-y: auto;
    z-index: 50;
  }
  /* Hide scrollbar visually (still scrollable if it ever needs to be) */
  .tt-sidebar::-webkit-scrollbar { width: 0; background: transparent; }
  .tt-sidebar { scrollbar-width: none; }
  /* Brand moved to top-left of main content — hide it in the sidebar */
  .tt-sidebar-brand { display: none !important; }
  .tt-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
  }
  .tt-sidebar li.section-label { font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.11em; color: rgba(23, 54, 93, 0.85); margin: 14px 0 4px; padding-left: 2px; }
  .tt-sidebar li.section-label:first-child { margin-top: 0; }
  .tt-sidebar li.separator {
    height: 1px;
    background: rgba(23, 54, 93, 0.12);
    margin: 10px 4px 8px;
  }
  .tt-sidebar a { display: block; font-family: 'Source Sans 3', sans-serif; font-weight: 400; font-size: 12.5px; color: rgba(23, 54, 93, 0.78); text-decoration: none; padding: 1.5px 8px; border-radius: 4px; line-height: 1.3; transition: color 0.15s ease, background 0.15s ease; }
  .tt-sidebar a:hover { color: var(--ink, #17365D); background: rgba(23, 54, 93, 0.05); }
  .tt-sidebar a[aria-current="page"] { color: var(--ink, #17365D); background: rgba(23, 54, 93, 0.06); font-weight: 600; }

  /* ------- 2. Body content pushes right of sidebar ------- */
  body { padding-left: 196px; }

  /* ------- 3. Content column: wider, fills the screen ------- */
  .question-block,
  .polaroid-wrap,
  .after {
    max-width: 900px !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* ------- 4. Hero on desktop — raised, tight to polaroids ------- */
  .question-block {
    padding: 0 40px 24px !important; /* 11 Oct 2026: larger gap above polaroids (Option A) */
  }
  .big-q {
    font-size: 36px !important;
    line-height: 1.14 !important;
    letter-spacing: -0.015em;
    text-align: center;
  }
  .big-q br { display: none; }
  .big-q .mline { display: inline; }
  .q-lede {
    font-size: 14.5px !important;
    margin-top: 10px !important;
    text-align: center;
  }

  /* ------- 5. 3x3 polaroids fill the width; equal top/bottom space around grid ------- */
  .polaroid-wrap {
    padding: 0 20px 0 !important;
  }
  .grid-3x3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px 14px !important;
  }
  .polaroid {
    background: #fff;
    padding: 4px 4px 4px !important;
  }
  /* Fixed image height so 3 rows fit above the fold on 800px+ viewports */
  .polaroid .img-wrap {
    aspect-ratio: auto !important;
    height: 112px !important;
    overflow: hidden;
  }
  .polaroid .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Force captions to a single line so every polaroid card is the same height */
  .polaroid .caption {
    padding: 2px 0 0 !important;
    display: flex !important;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
  }
  .polaroid .pname { font-size: 14.5px; margin-top: 0 !important; white-space: nowrap; }
  .polaroid .psub { font-size: 10.5px; margin-top: 0; white-space: nowrap; }

  /* ------- 6. TTTAS heading LARGE below polaroids, more breathing room above ------- */
  .after {
    padding: 22px 40px 26px !important;
    display: grid !important;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
    column-gap: 32px;
    row-gap: 8px;
    justify-content: center;
    align-items: center;
  }
  .after-dash { display: none !important; }
  .after-places {
    grid-column: 1; grid-row: 4; justify-self: center;
    max-width: none !important; margin: 6px 0 0 !important;
    font-size: 16px !important; white-space: nowrap;
  }
  .after-places br.br-m { display: none; }
  .after-heading {
    font-size: 40px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em;
    margin: 0 !important;
    text-align: center !important;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }
  .after-subtitle {
    font-size: 17px !important;
    margin: 0 !important;
    letter-spacing: 0;
    text-align: center !important;
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: center;
  }
  .after-cta {
    margin: 0 !important;
    padding: 15px 34px !important;
    font-size: 15.5px !important;
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    justify-self: center;
    margin-top: 8px !important;
    white-space: nowrap;
  }
  .after-secondary-cta {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    white-space: nowrap;
  }
  .after-secondary-cta .arrow { font-size: 12px !important; }
}

/* Taller viewports — larger polaroids when we can afford the vertical space */
@media (min-width: 1400px) and (min-height: 1000px) {
  .question-block, .polaroid-wrap, .after {
    max-width: 1040px !important;
  }
  .polaroid .img-wrap { height: 170px !important; }
  .big-q { font-size: 40px !important; }
  .after-heading { font-size: 30px !important; }
}

/* Homepage funded-places line: wrap on narrower desktops (4 Oct 2026) */
@media (min-width: 900px) and (max-width: 1199px) {
  .after-places { white-space: normal !important; max-width: 640px !important; }
}

/* Images with width and height attributes keep their proportions (4 Oct 2026) */
:where(img[width][height]) { height: auto; }

/* Skip link: hidden until keyboard focus (4 Oct 2026) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; }
.skip-link:focus { left: 1rem; top: 1rem; padding: 0.6rem 1rem; background: #fff; color: #1a2b4a; border: 2px solid #1a2b4a; }

/* Closing banners: cream, not navy, on desktop (18 Oct 2026) */
@media (min-width: 900px) {
  main .cta-block--navy, main .hub-cta { background: transparent !important; max-width: 960px; margin: 8px auto 48px !important; padding: 2.2rem 0 0 !important; border-top: 1px solid rgba(23,54,93,.15) !important; }
  main .cta-block--navy .cta-block-eyebrow { color: #A84B2F !important; margin-bottom: .6rem !important; }
  main .cta-block--navy .cta-block-headline, main .hub-cta h2 { color: #17365D !important; margin-bottom: .9rem !important; max-width: none !important; }
  main .cta-block--navy .cta-block-headline em, main .hub-cta h2 em { color: #A84B2F !important; }
  main .cta-block--navy .cta-block-sub, main .hub-cta p { color: #3D5A80 !important; margin-bottom: 1.4rem !important; }
  main .cta-block--navy .cta-btn, main .hub-cta-btn { background: #17365D !important; color: #fff !important; border-color: #17365D !important; }
}

/* Meet Dr Michael Yates closing box: beige, text-column width, desktop (18 Oct 2026) */
@media (min-width: 900px) {
  main .cta-block--boxed .cta-block-headline { max-width: none !important; }
  main .cta-block--boxed { max-width: 960px; margin: 16px auto 56px !important; border-radius: 8px; padding: 2.4rem 3rem !important; border: 0 !important; }
}

/* Phone only: every Apply button centred (18 Oct 2026). Desktop and tablet unchanged. */
@media (max-width: 767px) {
  a.cta-btn[href*="apply"] { display: block !important; flex: 0 0 auto !important; align-self: center !important; width: fit-content !important; min-width: 0 !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center; }
  .door-hero-cta { align-self: center !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; }
  *:has(> a.cta-btn[href*="apply"]) { text-align: center !important; justify-content: center !important; }
}