/* ==========================================================================
   FIVE PILLARS — RESPONSIVE RULES
   Mobile-first overrides layered on top of the desktop-default component CSS.
   Breakpoints: 1440 / 1280 / 1024 / 820 / 768 / 430 / 390 / 375 / 320
   ========================================================================== */

/* ---------- Large desktop polish ---------- */
@media (min-width: 1441px) {
  :root { --container-max: 1320px; }
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1280px) {
  .footer-top { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-col.footer-cta-col { grid-column: 1 / -1; }
}

/* ---------- Tablet landscape ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: var(--space-lg); }
  /* Text before image once stacked, on every .split section (reverse or
     not) — readers get the heading/context first, photos second. */
  .split-media { order: 2; }
  .blog-featured { grid-template-columns: 1fr; }
  .contact-strip { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(4, 1fr); row-gap: var(--space-lg); }
  .timeline::before { display: none; }
  .step-list { grid-template-columns: repeat(2, 1fr); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 2 220px; }
  .footer-top { grid-template-columns: 1fr 1fr; }

  .testimonial-scroller-track .testimonial-card { flex-basis: calc((100% - var(--space-md)) / 2); }
  .testimonial-scroller { padding-inline: 48px; }
}

/* ---------- Tablet portrait / nav breakpoint ---------- */
@media (max-width: 900px) {
  :root { --header-h: 76px; }
  .main-nav { display: none; }
  /* The header bar's own "Book an Assessment" pill is redundant once the
     sticky .mobile-action-bar (with its own Book Assessment button) takes
     over at this width — drop just that one (not the full-width button
     inside the open .mobile-nav drawer) and keep the menu toggle. */
  .header-inner .header-cta .btn.btn-primary { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav { display: block; }
  .brand img { height: 56px; }

  .hero-slide-content { max-width: 90%; }

  .mobile-action-bar { display: block; }
  body { padding-bottom: 78px; }
  .back-to-top { bottom: 92px; }

  .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  /* .timeline.timeline-4 (2 classes) outranks a plain .timeline override
     (1 class) at any width, so it never actually collapsed on mobile —
     match its specificity here instead of just `.timeline`. The <=560px
     rule (below, later in the cascade) narrows this to 1 column on phones. */
  .timeline, .timeline.timeline-4 { grid-template-columns: repeat(2, 1fr); }

  .blog-article-hero-img { height: 220px; }
  .blog-article-figure-img { height: 190px; }
}

/* ---------- Small tablet ---------- */
@media (max-width: 768px) {
  :root { --space-2xl: 2.25rem; --space-xl: 1.75rem; }
  .section { padding-block: var(--space-2xl); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-lg); }
  .step-list { grid-template-columns: 1fr 1fr; }
  .bank-row { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .recognition-badge { flex-direction: column; text-align: center; }
  .recognition-badge .badge-photo { width: 110px; height: 110px; }
  .form-grid { grid-template-columns: 1fr; }
  .masonry { columns: 2 160px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }

  .section-soft::before, .section-soft-blue::before,
  .section-soft::after, .section-soft-blue::after,
  .site-footer::before { min-width: 140px; min-height: 140px; opacity: 0.06; }

  /* Full width, one card per view — no peek of the next card. */
  .testimonial-scroller-track .testimonial-card {
    flex-basis: 100%;
    padding: var(--space-sm);
  }
  .testimonial-scroller-track .testimonial-card .quote-mark { width: 32px; height: 32px; font-size: 1.15rem; margin-top: var(--space-xs); }
  .testimonial-scroller-track .testimonial-card p.quote { font-size: 0.95rem; margin-top: 0.35rem; }
  .testimonial-scroller { padding-inline: 40px; }
  .testimonial-scroller .carousel-arrow { width: 36px; height: 36px; }
  .testimonial-scroller .carousel-arrow svg { width: 16px; height: 16px; }

  /* The b1/b2/b3 banners shrink a lot at this width — the arrow circles
     start sitting on top of the headline text baked into the image.
     Swipe + the dots below already cover navigation, so just hide them. */
  .hero-carousel .carousel-controls { display: none; }

  /* At the desktop 2560/794 aspect ratio the banner becomes a ~120px-tall
     sliver on phones and the baked-in headline is unreadable. The
     b1/b2/b3-mobile.jpg sources (swapped in via <picture><source> in the
     HTML) are a tighter crop of just the text + logo, at this taller
     ratio, so the container needs to match that crop instead. */
  .hero-carousel { aspect-ratio: 2560 / 794; }
  .hero-slide > picture > img { object-fit: contain; object-position: center; }

  .brand-collab { display: none; }
  .top-bar-contact a span { display: none; }
}

/* ---------- Top bar: hide on small phones (mobile action bar covers call/contact) ---------- */
@media (max-width: 560px) {
  .top-bar { display: none; }
  /* 5 pillar cards in 2 columns leaves an orphan 5th card half-width,
     stranded alone with a big empty gap beside it — go single-column. */
  .grid-5 { grid-template-columns: 1fr; }
  /* Each timeline step carries a full paragraph, not just a label — 2
     columns at phone width wraps it into a tall, cramped sliver. Single
     column reads better left-aligned than with a ragged-edge centered
     paragraph, so the number badge moves to match (was margin-inline:auto
     centering it regardless of the parent's text-align). */
  .timeline, .timeline.timeline-4 { grid-template-columns: 1fr; row-gap: var(--space-lg); }
  .timeline-step { text-align: left; }
  .timeline-step .step-num { margin-inline: 0; }

  /* ---- Shorter section/card heights across the board on phones ---- */
  .section { padding-block: var(--space-xl); }
  .card-media { height: 165px; }
  .programme-card .card-media { height: 155px; }
  .story-card .card-media { height: 145px; }
  .blog-card .card-media { height: 155px; }
  .blog-featured .card-media { aspect-ratio: 16/10; }
  /* Team cards: photo on the left, text on the right in a single column —
     stacked 2-up cards at phone width squeezed the bio into a narrow,
     very tall strip, and the old height override stretched the circular
     photo into an oval. */
  .grid-4:has(> .team-card) { grid-template-columns: 1fr; gap: var(--space-sm); }
  .team-card {
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: var(--space-sm);
    align-items: start;
    text-align: left;
    padding: var(--space-sm);
  }
  .team-card .card-media { grid-row: 1 / span 3; width: 84px; height: 84px; margin: 0; }
  .team-card h3, .team-card > p { padding-inline: 0; }
  .team-card h3 { font-size: 1.05rem; margin: 0; }
  .team-card .role { justify-self: start; margin-top: 0.25rem; font-size: 0.74rem; padding: 0.2rem 0.65rem; }
  .team-card > p:not(.role) { margin-top: 0.4rem !important; font-size: 0.88rem; line-height: 1.5; }
  .blog-article-hero-img { height: 160px; }
  .blog-article-figure-img { height: 140px; }
  .video-card { aspect-ratio: 16/9; }
  .gallery-card { aspect-ratio: 4/3; }
  .page-hero h1 { font-size: 1.8rem; }
}

/* ---------- Large phones ---------- */
@media (max-width: 430px) {
  .hero-slide-content h1,
  .hero-slide-content .h1 { font-size: 2.1rem; }
  .hero-actions .btn { width: 100%; }
  .contact-strip-item { flex-direction: column; text-align: center; }
  .cta-banner .cta-actions .btn { width: 100%; }
  .step-list { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .masonry { columns: 2 130px; column-gap: var(--space-sm); }
  .mobile-action-bar .actions { grid-template-columns: 1fr 1fr 1.4fr; }

  .photo-collage img:nth-child(1) { height: 110px; }
  .photo-collage img:nth-child(2) { height: 160px; }
  .photo-collage img:nth-child(3) { height: 135px; }
  .photo-collage img:nth-child(4) { height: 110px; }

  .blog-article-hero-img { height: 170px; }
  .blog-article-figure-img { height: 150px; }
}

/* ---------- Standard phones ---------- */
@media (max-width: 390px) {
  .container { padding-inline: 1.1rem; }
  .form-card, .bank-card, .qr-card { padding: var(--space-md); border-radius: var(--radius-md); }
  .modal-box { padding: var(--space-md); border-radius: var(--radius-md); }
  .cta-banner { border-radius: var(--radius-lg); }
}

/* ---------- Small phones ---------- */
@media (max-width: 375px) {
  .section-head-row { flex-direction: column; align-items: flex-start; }
  /* pillar-card/icon-card already use --space-md at base size (no override needed);
     info-card keeps its smaller asymmetric base padding rather than growing here */
}

/* ---------- Very small phones ---------- */
@media (max-width: 320px) {
  h1, .h1 { font-size: 1.9rem; }
  .btn { padding: 0.85rem 1.35rem; font-size: 0.88rem; }
  .mobile-action-bar a, .mobile-action-bar button { font-size: 0.64rem; }
}