/* ==========================================================================
   Breakpoints
   Type steps on the live site's ladder (1700 / 1500 / 1100 / 900 / 640 /
   400); layout steps where this design needs them. Every media query lives
   here.
   ========================================================================== */
/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* CTA band type, on the same ladder landing.css gives its own band so the two
   never diverge. Largest first. */
@media (max-width:1700px){
  .cta__title{ font-size:3.75rem; line-height:4rem; }      /* 60 / 64 */
}
@media (max-width:1500px){
  .cta__title{ font-size:3rem; line-height:3.25rem; }      /* 48 / 52 */
  .cta__text-body,
  .cta__action .btn,
  .cta__action p{ font-size:1.125rem; }                    /* 18 */
}
@media (max-width:1100px){
  .cta{ padding-top:48px; min-height:0; }
  /* Once the two columns become one, the band reads as a single centred
     block rather than text ragged against a left edge it no longer shares. */
  .cta .container{ grid-template-columns:1fr; row-gap:34px; text-align:center; }
  .cta__title{ font-size:2.125rem; line-height:2.375rem; } /* 34 / 38 */
  .cta__title,
  .cta__text-body,
  .cta__action p{ margin-left:auto; margin-right:auto; }
}
@media (max-width:900px){
  .cta__action .btn,
  .cta__action p{ font-size:1.0625rem; line-height:1.5rem; }
}
@media (max-width:640px){
  .cta__actions{ grid-template-columns:1fr; row-gap:24px; }
  .cta__title{ font-size:1.75rem; line-height:2rem; }      /* 28 / 32 */
}
@media (max-width:400px){
  .cta__title{ font-size:1.5rem; line-height:1.75rem; }    /* 24 / 28 */
}

/* Page gutters, stepping down on the same breakpoints the landing page uses,
   so the two stay on the same edge at every width. Largest first. */
@media (max-width:1700px){
  :root{ --page-l:64px; --page-r:64px; }
}
@media (max-width:1100px){
  :root{ --page-l:32px; --page-r:32px; }
}
@media (max-width:640px){
  :root{ --page-l:20px; --page-r:20px; }
}

/* Type scale. These are the steps online.uottawa.ca uses — same widths, same
   sizes — so every page reads at the Figma size on a full-width desktop and
   then steps together with the Online programs page. rem does not follow the
   viewport, so each step restates the tokens; everything using them follows.
   Largest first. */
@media (max-width:1700px){
  :root{ --fs-h2:2.25rem; }                 /* 36px */
}
@media (max-width:1500px){
  :root{
    --fs-h2:2rem;             /* 32px */
    --fs-h3:1.1875rem;        /* 19px */
    --fs-body:1.1875rem;      /* 19px */
    --fs-body-sm:1rem;        /* 16px */
    --fs-stat:3.5rem;         /* 56px */
    --fs-stat-label:1.25rem;  /* 20px */
    --fs-day-title:1.625rem;  /* 26px */
  }
  .btn--pill{ font-size:1.125rem; }         /* 18px */
}
@media (max-width:1100px){
  :root{
    --fs-h2:1.75rem;          /* 28px */
    --fs-body:1.0625rem;      /* 17px */
    --fs-nav:1.0625rem;       /* 17px */
  }
  .btn--sm,
  .btn--hero{ font-size:0.9375rem; }        /* 15px */
}
@media (max-width:900px){
  :root{
    --fs-h2:1.5rem;           /* 24px */
    --fs-h3:1.125rem;         /* 18px */
    --fs-body:1rem;           /* 16px */
    --fs-body-sm:0.9375rem;   /* 15px */
    --fs-stat:3rem;           /* 48px */
    --fs-stat-label:1.125rem; /* 18px */
    --fs-day-title:1.375rem;  /* 22px */
  }
  .btn--program,
  .btn--pill{ font-size:1rem; }             /* 16px */
  .btn--read{ font-size:0.9375rem; }        /* 15px */
}
@media (max-width:640px){
  :root{
    --fs-body:0.9375rem;      /* 15px */
    --fs-nav:0.9375rem;       /* 15px */
    --fs-stat:2.5rem;         /* 40px */
  }
  .btn--read{ font-size:0.875rem; }         /* 14px */
}
@media (max-width:400px){
  :root{ --fs-stat:2.125rem; }              /* 34px */
}

/* Laptops — drop the reason cards to two columns */
@media (max-width:1200px){
  .reasons-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* The header's own breakpoint. Logo, four menu items, two buttons and the
   language switch stop fitting inside the page gutters at about 1210px,
   before the tablet layout below takes over, so the header collapses on its
   own width rather than the page's. */
@media (max-width:1250px){
  .nav,
  .header-actions,
  .header-lang{ display:none; }
  .nav-toggle{ display:flex; margin-left:auto; }

  /* Collapsed, the panel carries the menu, then the buttons, then the
     language switch under them. */
  .site-header.is-open .nav,
  .site-header.is-open .header-actions,
  .site-header.is-open .header-lang{
    display:flex;
    flex-basis:100%;
  }
  .site-header.is-open .nav{ order:2; margin-left:0; padding-top:16px; }
  .site-header.is-open .nav ul{ flex-direction:column; gap:14px; }
  .site-header.is-open .header-actions{ order:3; padding-top:16px; }
  .site-header.is-open .header-lang{ order:4; margin-left:0; padding:14px 0 16px; }
  .site-header .container{ flex-wrap:wrap; }
}

/* Tablets */
@media (max-width:1024px){
  /* A 1920x772 strip is too thin on a tablet — give the photo more height
     and reduce how far the card hangs over it. */
  /* On a tablet the card uses the full column, so drop the indent and caps. */
  .page-hero__card{ width:100%; max-width:none; margin-left:0; }
  .page-hero__text{ width:100%; }
  .page-hero__bg{ aspect-ratio:16 / 9; }
  .page-hero .container,
  .page-hero--inner .container{ margin-top:-14vw; }

  .beyond-grid{ grid-template-columns:repeat(2, 1fr); }

  .day-row,
  .day-row--reverse{ grid-template-columns:1fr; }
  .day-row--reverse .day-card{ order:0; }
  .day-row--reverse .day-media{ order:0; }
  .day-media img{ aspect-ratio:16 / 9; }

  /* Stacked: card, then photo, then the button last */
  /* Stacked: photo, then the copy under it, then the button last. */
  .day-col{ display:contents; }
  .day-row .day-media{ order:1; }
  .day-row .day-card { order:2; }
  .day-row .day__cta { order:3; justify-self:start; margin-top:clamp(20px, 3vw, 34px); }

}

/* Large phones */
@media (max-width:768px){
  .cta__action .btn,
  .cta__action p{ font-size:1rem; }

  .audience-grid{ grid-template-columns:1fr; }
  .reasons-grid{ grid-template-columns:1fr; }
  .beyond-grid{ grid-template-columns:1fr; }
  .articles-grid{ grid-template-columns:1fr; }
  .cta__actions{ grid-template-columns:1fr; }

  .page-hero__bg{ aspect-ratio:3 / 2; }
  .page-hero__bg img{ object-position:center 30%; }
  .page-hero .container,
  .page-hero--inner .container{ margin-top:-16vw; }

  .faq-item__q span:last-child{ white-space:normal; }
}

/* Small tablets / big phones — stats stop fitting three across here */
@media (max-width:640px){
  .stats-row{ grid-template-columns:1fr; gap:28px; }
}

/* Small phones */
@media (max-width:480px){
  .page-hero__actions .btn,
  .program-card .btn,
  .day .btn,
  .next .btn{ width:100%; }

  .faq-item__q{ padding:14px 16px; }
  .faq-item__a{ padding-left:32px; }
}

/* ---------- Student experience ---------- */
@media (max-width:1500px){
  .facts li{ font-size:1.5rem; }    /* 24px */
}

@media (max-width:1200px){
  .facts li{ font-size:1.25rem; }   /* 20px */
  .facts{ grid-template-columns:repeat(3, 1fr); row-gap:clamp(20px,2vw,28px); }
  /* From here down every item carries a rule, the ones that start a row
     included, so no column reads as a list without one. */
  .facts li,
  .facts li:first-child,
  .facts li:nth-child(4){
    border-left:1px solid var(--black);
    padding-left:clamp(14px, 1.2vw, 23px);
  }
  .outcomes-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:1024px){
  .reasons-icon-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:768px){
  .facts{ grid-template-columns:repeat(2, 1fr); }
  .reasons-icon-grid{ grid-template-columns:1fr; }
  .support-grid{ grid-template-columns:1fr; }
}

@media (max-width:480px){
  .facts{ grid-template-columns:1fr; gap:18px; }
  .outcomes-grid{ grid-template-columns:1fr; }
  .matters .btn,
  .reasons .btn{ width:100%; }
}

/* ---------- News & events ---------- */
@media (max-width:1024px){
  .articles-grid--3{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:768px){
  .articles-grid--3{ grid-template-columns:1fr; }
}

/* ---------- Contact ---------- */
@media (max-width:1500px){
  /* The form card narrows with the column, so its type steps down too. */
  .enquiry__title{ font-size:1.5rem; }      /* 24px */
  .enquiry__submit{ font-size:1rem; }       /* 16px */
}

@media (max-width:1024px){
  .enquiry__title{ font-size:1.375rem; }    /* 22px */
  /* Stacked, the gap between the two blocks is a gap between sections, not
     the gap between columns it started as — 32px ran them together. */
  .contact-row{ grid-template-columns:1fr; gap:var(--space-section); }
  /* The column is full width here, so drop the Figma width caps — keeping
     them would squeeze the copy into a narrow strip. */
  .contact-row .section-title,
  .contact-points p,
  .contact-lead{ max-width:none; }
}

@media (max-width:560px){
  .enquiry__grid{ grid-template-columns:1fr; }
  .contact-links{ gap:20px; }

}