/* ═══════════════════════════════════════════════════════════════════
   MOBILE FIXES  —  mobile-fixes.css
   ───────────────────────────────────────────────────────────────────
   Load this AFTER header.css and footer.css on every page:

     <link rel="stylesheet" href="../css/mobile-fixes.css">   (pages/)
     <link rel="stylesheet" href="css/mobile-fixes.css">      (index.html)

   Purpose: eliminates horizontal overflow on small screens and
   fixes layouts that did not collapse correctly on mobile.
   Desktop appearance is unaffected — everything here is scoped
   inside media queries except the global overflow guard.
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. GLOBAL OVERFLOW GUARD ─────────────────────────────────────
   Stops the page from ever scrolling sideways. This is what causes
   the "header narrower than content" misalignment on mobile.
─────────────────────────────────────────────────────────────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevent any image or iframe from exceeding its container */
img, iframe, video, svg {
  max-width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════
 TABLET AND BELOW  (≤ 1024px)
 ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ─── Homepage: Authority section ───────────────────────────────
     Cognia / Ministry cards were sitting side-by-side and squeezing
     the text into narrow columns. Force them to stack.
  ─────────────────────────────────────────────────────────────── */
  .authority-container {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 40px !important;
      text-align: center;
  }
  .auth-card {
      flex-direction: column !important;
      align-items: center !important;
      text-align: center;
  }
  .auth-divider { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
 MOBILE  (≤ 768px)
 ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── Global padding reduction ──────────────────────────────────
     10% side padding on a 390px screen leaves very little room.
     Reduce to 6% across all major sections.
  ─────────────────────────────────────────────────────────────── */
  .page-intro,
  .page-header,
  .languages-section,
  .enrichment-section,
  .academic-tabs,
  .ecosystem-section,
  .curriculum-section,
  .bento-section,
  .cta-dynamic,
  .tour-cta,
  .partnership-highlight,
  .identity-section,
  .values-bg,
  .news-layout,
  .news-intro,
  .admissions-container,
  .gallery-grid-container {
      padding-left: 6% !important;
      padding-right: 6% !important;
  }


  /* ─── Heading size caps ─────────────────────────────────────────
     Several headings use fixed rem sizes that overflow narrow
     screens. Cap them with clamp().
  ─────────────────────────────────────────────────────────────── */
  h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  h2 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
  h3 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }

  /* Word-break protection for long unbroken words */
  h1, h2, h3, h4, p {
      overflow-wrap: break-word;
      word-wrap: break-word;
  }


  /* ─── ACADEMICS: Grade-level tab buttons ────────────────────────
     Three buttons in a no-wrap flex row overflowed the screen.
     Stack them vertically so all three are reachable.
  ─────────────────────────────────────────────────────────────── */
  .tab-triggers {
      flex-direction: column !important;
      gap: 1px !important;
      background: #ddd;
  }
  .tab-btn {
      width: 100% !important;
      padding: 16px !important;
      font-size: 0.78rem !important;
      letter-spacing: 1px !important;
  }

  /* Stage photos: shorter on mobile */
  .stage-photo { height: 240px !important; }


  /* ─── GALLERY: Category filter buttons ──────────────────────────
     Four pill buttons at 140px min-width overflowed.
     Allow them to wrap onto multiple rows.
  ─────────────────────────────────────────────────────────────── */
  .filter-controls,
  .filter-container {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 10px !important;
      padding-left: 4%;
      padding-right: 4%;
  }
  .filter-btn-new {
      min-width: 0 !important;
      flex: 0 1 auto !important;
      padding: 0 18px !important;
      height: 40px !important;
      font-size: 0.68rem !important;
  }


  /* ─── ADMISSIONS: Hero slideshow ────────────────────────────────
     .slideshow-container was width:120% which pushed the page
     sideways. Constrain it to 100% and re-centre.
  ─────────────────────────────────────────────────────────────── */
  .hero-slideshow {
      height: 48vh !important;
      margin-top: 90px !important;
  }
  .slideshow-container {
      width: 100% !important;
      height: 100% !important;
      left: 0 !important;
      transform: none !important;
  }

  /* Title overlay: was a fixed 420px wide — wider than the screen */
  .hero-text-overlay {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      bottom: auto !important;
      transform: translate(-50%, -50%) !important;
      width: 86% !important;
      max-width: 340px !important;
      padding: 24px 20px !important;
      box-sizing: border-box !important;
  }
  .hero-text-overlay h1 {
      font-size: 1.9rem !important;
      margin-bottom: 8px !important;
  }
  .hero-text-overlay p {
      font-size: 0.65rem !important;
      letter-spacing: 2px !important;
  }


  /* ─── ADMISSIONS: Timeline ──────────────────────────────────────
     Reduce left padding so the text has room.
  ─────────────────────────────────────────────────────────────── */
  .timeline { padding-left: 34px !important; }
  .timeline-marker {
      left: -45px !important;
      width: 16px !important;
      height: 16px !important;
  }
  .timeline-step { margin-bottom: 60px !important; }
  .step-content h3 { font-size: 1.7rem !important; }
  .step-content p { font-size: 1rem !important; }

  /* Enquiry form box */
  .sticky-form-box { padding: 36px 24px !important; }


  /* ─── HOMEPAGE: Hero ────────────────────────────────────────────
     The decorative circle behind the student image was 120% wide
     and offset -10%, causing overflow.
  ─────────────────────────────────────────────────────────────── */
  .hero-image-side::before {
      width: 70% !important;
      height: 70% !important;
      right: 0 !important;
      bottom: 5% !important;
  }
  .home-hero-split { padding-top: 110px !important; }
  .hero-text-side { padding: 30px 6% 40px !important; }
  .hero-text-side h1 { font-size: clamp(2.2rem, 10vw, 3.2rem) !important; }
  .hero-image-side { height: 380px !important; }

  /* CTA buttons: stack full-width */
  .hero-btns {
      flex-direction: column !important;
      gap: 12px !important;
      width: 100%;
  }
  .btn-primary-green,
  .btn-secondary-outline {
      text-align: center;
      padding: 15px 20px !important;
      font-size: 0.78rem !important;
  }


  /* ─── HOMEPAGE: Stats bar ───────────────────────────────────────
     Four columns is far too tight — go to 2×2.
  ─────────────────────────────────────────────────────────────── */
  .stats-overlay,
  .stats-strip,
  .stats-container {
      grid-template-columns: 1fr 1fr !important;
      width: 92% !important;
      margin-top: -30px !important;
  }
  .stat-box, .stat-card {
      padding: 26px 12px !important;
      border-right: none !important;
  }
  .stat-box h2, .stat-card h2 { font-size: 1.7rem !important; }
  .stat-box p,  .stat-card p  { font-size: 0.58rem !important; letter-spacing: 1px !important; }


  /* ─── ACADEMICS: Hero ───────────────────────────────────────────  */
  .academic-hero { margin-top: 90px !important; }
  .hero-info { padding: 50px 6% !important; }
  .hero-info h1 { font-size: 2.2rem !important; }
  .hero-visual { height: 240px !important; }


  /* ─── ACADEMICS: Curriculum & approach cards ────────────────────  */
  .curriculum-section {
      grid-template-columns: 1fr !important;
      gap: 40px !important;
      padding-top: 60px !important;
      padding-bottom: 60px !important;
  }
  .approach-grid { grid-template-columns: 1fr !important; }
  .approach-card { padding: 24px !important; }
  .standard-pill { font-size: 0.68rem !important; padding: 8px 16px !important; }


  /* ─── ACADEMICS: Language & enrichment cards ────────────────────  */
  .lang-grid { grid-template-columns: 1fr !important; }
  .lang-card,
  .lang-card:nth-child(4),
  .lang-card:nth-child(5) { grid-column: auto !important; }

  .enrich-grid { grid-template-columns: 1fr !important; }


  /* ─── ACADEMICS: Partnership card ───────────────────────────────  */
  .partnership-glass { padding: 32px 20px !important; }
  .partner-content-grid {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
  }
  .highlight-p { font-size: 1.05rem !important; }
  .partner-text p, .partner-arabic p { font-size: 0.95rem !important; }
  .future-tag { font-size: 0.6rem !important; letter-spacing: 2px !important; }


  /* ─── ACADEMICS / HOMEPAGE: Ecosystem cards ─────────────────────  */
  .eco-grid { grid-template-columns: 1fr !important; }
  .eco-card {
      flex-direction: column !important;
      align-items: flex-start !important;
      padding: 24px !important;
      gap: 16px !important;
  }


  /* ─── FACILITIES: Zig-zag sections ──────────────────────────────
     Collapse to single column with the image always on top.
  ─────────────────────────────────────────────────────────────── */
  .showcase-wrapper { flex-direction: column !important; }
  .video-pane {
      width: 100% !important;
      position: relative !important;
      top: auto !important;
      min-height: 0 !important;
  }
  .video-wrapper { min-height: 220px !important; }
  .content-pane { width: 100% !important; }

  .facility-section,
  .facility-section.reverse {
      grid-template-columns: 1fr !important;
      opacity: 1 !important;
      transform: none !important;
  }
  /* Image always first when stacked */
  .facility-section.reverse .facility-img-cell  { order: -1 !important; }
  .facility-section.reverse .facility-text-cell { order: 1 !important; }

  .facility-img-cell { height: 220px !important; }
  .facility-img-cell.two-photos {
      height: 220px !important;
      grid-template-rows: 1fr !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 3px !important;
  }
  .facility-text-cell { padding: 32px 6% !important; }
  .f-number { font-size: 2.6rem !important; }
  .facility-tag { font-size: 0.62rem !important; padding: 5px 12px !important; }

  /* Exterior strip */
  .exterior-strip { height: 30vh !important; }
  .exterior-overlay h2 { font-size: 1.4rem !important; padding: 0 6%; }
  .exterior-overlay p  { font-size: 0.65rem !important; letter-spacing: 2px !important; }

  /* Infrastructure card */
  .infra-card { padding: 28px 22px !important; }
  .infra-highlights span { font-size: 0.6rem !important; padding: 6px 12px !important; }


  /* ─── STUDENT LIFE ──────────────────────────────────────────────  */
  .experience-strip {
      flex-direction: column !important;
      height: auto !important;
      padding: 12px !important;
      gap: 12px !important;
  }
  .panel { height: 300px !important; flex: none !important; }
  /* On touch devices hover doesn't exist — show text by default */
  .panel p  { opacity: 1 !important; }
  .panel h3 { transform: none !important; font-size: 1.8rem !important; }
  .panel-overlay { padding: 28px 24px !important; }
  .panel img { filter: grayscale(0%) brightness(0.75) !important; }

  .bento-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .bento-item,
  .bento-item.large { grid-column: auto !important; }
  .bento-img-wrap,
  .bento-item.large .bento-img-wrap { height: 200px !important; }
  .bento-text { padding: 26px 24px !important; }


  /* ─── NEWS ──────────────────────────────────────────────────────  */
  .news-layout {
      grid-template-columns: 1fr !important;
      gap: 40px !important;
  }
  .events-board {
      position: static !important;
      padding: 32px 24px !important;
      border-radius: 20px !important;
  }
  .news-item {
      grid-template-columns: 60px 1fr !important;
      gap: 18px !important;
      padding: 36px 0 !important;
  }
  .news-date strong { font-size: 1.5rem !important; }
  .news-item h3 { font-size: 1.5rem !important; }
  .winner-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; gap: 8px !important; }


  /* ─── GALLERY ───────────────────────────────────────────────────  */
  .gallery-grid-container { grid-template-columns: 1fr !important; gap: 18px !important; }
  .gallery-hero { padding: 130px 6% 60px !important; }
  .gallery-title-pro { font-size: 1.1rem !important; }
  .gallery-content { padding: 30px 18px 18px !important; }

  /* Lightbox controls */
  .close-lb, .close-lightbox { font-size: 2.4rem !important; top: 14px !important; right: 18px !important; }
  .lb-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  #lbTitle { font-size: 1.3rem !important; }
  .prev-lightbox, .next-lightbox { padding: 14px !important; font-size: 22px !important; }


  /* ─── CONTACT ───────────────────────────────────────────────────  */
  .contact-grid-wrapper {
      grid-template-columns: 1fr !important;
      gap: 40px !important;
      margin-top: 30px !important;
      padding: 0 6% !important;
  }
  .contact-info-sidebar { padding: 36px 24px !important; border-radius: 20px !important; }
  .form-wrapper-luxury { padding: 32px 24px !important; border-radius: 20px !important; }
  .input-row-split { grid-template-columns: 1fr !important; gap: 0 !important; }
  .contact-hero { padding: 130px 6% 60px !important; }


  /* ─── ABOUT ─────────────────────────────────────────────────────  */
  .about-hero { height: 60vh !important; padding-top: 90px !important; }
  .identity-section { grid-template-columns: 1fr !important; gap: 20px !important; }
  .identity-box { padding: 20px 0 !important; }
  .identity-grid { grid-template-columns: 1fr !important; }
  .values-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .beliefs-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .beliefs-strip { padding: 50px 6% !important; }


  /* ─── FOOTER ────────────────────────────────────────────────────  */
  .footer-container {
      grid-template-columns: 1fr !important;
      gap: 34px !important;
      text-align: center;
      width: 88% !important;
  }
  .footer-brand { align-items: center; }
  .social-links { justify-content: center !important; flex-wrap: wrap; }


  /* ─── CTA sections ──────────────────────────────────────────────  */
  .btn-tour, .btn-dynamic {
      padding: 16px 30px !important;
      font-size: 0.7rem !important;
      letter-spacing: 2px !important;
      display: block;
      width: fit-content;
      margin: 0 auto;
  }
  .tour-cta, .cta-dynamic { padding-top: 70px !important; padding-bottom: 70px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
 SMALL MOBILE  (≤ 400px)
 ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {

  /* Stats: single column on very narrow screens */
  .stats-overlay,
  .stats-strip,
  .stats-container { grid-template-columns: 1fr !important; }

  /* Facility two-photo pairs: stack them */
  .facility-img-cell.two-photos {
      grid-template-columns: 1fr !important;
      grid-template-rows: 1fr 1fr !important;
      height: 300px !important;
  }

  /* News date column narrower still */
  .news-item { grid-template-columns: 48px 1fr !important; gap: 14px !important; }

  /* Filter pills tighter */
  .filter-btn-new { padding: 0 14px !important; font-size: 0.62rem !important; }
}