/* =========================================================================
   responsive.css — loaded LAST on every page (see base.html).

   MOBILE RULES
   * "Normal" mobile view  = viewport <= 900px  -> mobile layout.
   * "Desktop site" mode on a phone (viewport ~980px+) -> full desktop layout.
     (so no layout breakpoint may sit between 900px and ~1000px)
   * Hero banners + footer keep the DESKTOP design on mobile; they are only
     scaled down proportionally.
   ========================================================================= */

/* ---- Hero banners: height follows the width, so the picture is never cropped
        differently on mobile than on desktop (banner ratio 1920 x 600). ---- */
.sp-hero, .bl-hero, .gl-hero, .vg-hero, .l-hero, .t-hero, .h-hero,
.pr-hero, .pp-hero, .hs-hero, .m-hero, .mm-hero, .wr-hero, .sg-hero {
  height: min(600px, 31.25vw) !important;
}
/* Home video banner: desktop shows 550px at a 1366px screen -> same proportion everywhere */
.hero-video { height: min(550px, 40.26vw) !important; }

/* Contact banner keeps its 1920:600 ratio on mobile too */
@media (max-width: 900px) {
  .contact-hero { aspect-ratio: 1920 / 600 !important; height: auto !important; }
}

/* ---- Footer: same desktop design on mobile, scaled down.
        --footer-base = design width in px (smaller number = bigger text on phones).
        base.html sets --footer-zoom = screen width / base.                      ---- */
@media (max-width: 900px) {
  :root { --footer-base: 760px; }
  .lh-footer { width: var(--footer-base); zoom: var(--footer-zoom, 0.5); }
  .lh-top { flex-direction: row; align-items: flex-start; }
  .lh-brand { margin-top: 110px; margin-bottom: 0; }
  .lh-panels { grid-template-columns: 1.3fr 1fr; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .lh-footer { zoom: var(--footer-zoom, 1); }
}

/* ---- Floating social icons: smaller on phones so they don't cover the text ---- */
@media (max-width: 700px) {
  .float-social a { transform-origin: left center; }
}

/* ---- Safety net: media never wider than the screen ---- */
img, video, iframe, svg { max-width: 100%; }
table { max-width: 100%; }

/* ---- Public site: never show the "banner goes here / save as ..." developer note.
        If a banner image file is missing, visitors just see the coloured banner. ---- */
.sp-hero-ph, .gl-hero-ph, .vg-hero-ph, .l-hero-ph, .t-hero-ph, .pr-hero-ph, .pp-hero-ph,
.hs-hero-ph, .m-hero-ph, .mm-hero-ph, .wr-hero-ph, .sg-hero-ph, .h-hero-ph,
.contact-hero-media span, .contact-hero-media small, .hero-media span, .hero-media small {
  display: none !important;
}


/* =========================================================================
   MOBILE (normal view, phones <= 700px) — home page + text alignment.
   Desktop and "Desktop site" mode are NOT touched by this block.
   ========================================================================= */
@media (max-width: 700px) {

  /* ---- Home video: show the WHOLE frame (16:9) — nothing cut at the sides ---- */
  .hero-video { height: 56.25vw !important; }
  .hero-video video { object-fit: cover; object-position: center center !important; }

  /* ---- Paragraphs: even lines (justified, words split with hyphens when needed) ---- */
  .welcome-para, .about-para, .jx {
    text-align: justify !important; text-justify: inter-word;
    hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
    text-wrap: pretty;
  }
  .welcome-para { font-size: 1.05rem !important; line-height: 1.7 !important; text-align-last: center; }
  main p { overflow-wrap: break-word; }

  /* ---- About Us: wider text area, tighter line spacing ---- */
  .about-para {
    padding: 24px 20px !important;
    border-radius: 22px 64px 22px 22px !important;
    font-size: 1.05rem !important; line-height: 1.6 !important;
    text-align-last: left;
  }
  .about-para .about-hl { letter-spacing: 0 !important; font-size: 1em !important; }
  .about-wrap { gap: 24px !important; }

  /* ---- School highlights (6 round-icon cards): shorter cards ---- */
  .school-hl-grid { gap: 18px 14px !important; }
  .school-hl-card { padding: 12px 8px 14px !important; gap: 8px !important; }
  .school-hl-img { max-width: 76px !important; padding: 9px !important; border-width: 3px !important; }
  .school-hl-card h3 { font-size: 0.95rem !important; line-height: 1.25 !important; }

  /* ---- Our Facilities / Student Life: one picture per row ---- */
  .facilities-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .facilities-center { grid-column: auto !important; grid-row: auto !important; margin-bottom: 6px !important; }
  .facility-card:nth-child(n) { grid-column: auto !important; grid-row: auto !important; }

  .life-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .life-card, .life-card.life-wide, .life-card.life-wide.life-center { grid-column: 1 / -1 !important; }

  /* ---- Testimonials: smaller boxes ---- */
  .testi-track { gap: 14px !important; max-width: none !important; }
  .testi-card { padding: 20px 18px 16px !important; border-radius: 20px !important; }
  .testi-mark { font-size: 2.3rem !important; top: 12px !important; right: 16px !important; }
  .testi-card .stars { font-size: 0.85rem !important; margin-bottom: 8px !important; }
  .testi-card .quote { font-size: 1rem !important; line-height: 1.55 !important; }
  .testi-who { margin-top: 14px !important; padding-top: 12px !important; }
  .testi-who b { font-size: 1.1rem !important; }

  /* ---- Photo gallery (home): one per row, the WHOLE photo (no cropping) ---- */
  .gallery-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .gallery-tile { aspect-ratio: auto !important; min-height: 140px; }
  .gallery-tile img {
    position: relative !important; inset: auto !important;
    width: 100% !important; height: auto !important; object-fit: contain !important; display: block;
  }
}

@media (max-width: 700px) {
  /* short centred intro lines: balanced, no lonely last word */
  .section-head p, .sp-intro p, .vg-sub, .gl-sub { text-wrap: balance; }
}

/* Awards page: grid columns must be allowed to shrink (a one-line heading made the page 7px too wide) */
@media (max-width: 900px) {
  .aw-feature, .aw-teachers, .aw-pair { grid-template-columns: minmax(0, 1fr) !important; }
}