/* ==========================================================================
   responsive-fix.css  ·  Professional responsive layer (loaded LAST)
   --------------------------------------------------------------------------
   Goal: make every page fully responsive WITHOUT changing the desktop design.
   Breakpoints:
     Mobile   320 – 767
     Tablet   768 – 991
     Laptop   992 – 1199
     Desktop  1200+
   Overrides use !important only where they must beat in-body <style> blocks
   or inline style="" attributes that hard-code pixel sizes.
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL ANTI-OVERFLOW + MEDIA SAFETY
   ========================================================================== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Any media element must never exceed its container */
img, svg, video, iframe, canvas, embed, object {
  max-width: 100%;
}
img { height: auto; }

/* Wide custom full-bleed sections must stay inside the viewport */
section, header, footer, .container {
  max-width: 100%;
}

/* Keep words from forcing horizontal scroll on tiny screens */
h1, h2, h3, h4, p, a, span, li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==========================================================================
   2. NAVBAR / BRAND — keep desktop look, shrink gracefully on small screens
   ========================================================================== */
/* Allow the brand to shrink so the hamburger never gets pushed off-screen */
.nav-inner { gap: 12px; }
.brand { min-width: 0; }
.brand .name { white-space: nowrap; }

@media (max-width: 991px) {
  /* Scale the (inline-sized) logo + name down on tablet/mobile */
  .brand img { height: 70px !important; width: auto !important; }
  .brand .name { font-size: 18px !important; }
}

@media (max-width: 767px) {
  .brand img { height: 56px !important; width: auto !important; }
  .brand .name { font-size: 16px !important; }
  /* the hamburger had a large inline right margin — pull it back in */
  .hamburger { margin-right: 0 !important; }
}

@media (max-width: 380px) {
  .brand img { height: 48px !important; }
  .brand .name { font-size: 14px !important; }
}

/* ==========================================================================
   3. HERO SLIDER (index) — responsive heights for every tier
   ========================================================================== */
@media (max-width: 1199px) {
  .plane-slider-section-fw .slide img { height: 480px !important; }
}
@media (max-width: 991px) {
  .plane-slider-section-fw .slide img { height: 400px !important; }
}
@media (max-width: 767px) {
  .plane-slider-section-fw .slide img { height: 300px !important; }
  .plane-slider-section-fw .prev-btn,
  .plane-slider-section-fw .next-btn {
    width: 42px !important; height: 42px !important; font-size: 18px !important; padding: 10px !important;
  }
}
@media (max-width: 479px) {
  .plane-slider-section-fw .slide img { height: 215px !important; }
  .plane-slider-section-fw .prev-btn,
  .plane-slider-section-fw .next-btn {
    width: 36px !important; height: 36px !important; font-size: 15px !important;
  }
}

/* ==========================================================================
   4. ALL IMAGES INSIDE SPLIT / FRAMED BLOCKS — fluid, aspect-correct
   Removes hard-coded width:700px / height:400px etc. at <= laptop.
   ========================================================================== */
@media (max-width: 1199px) {
  .framed-img,
  .framed-img img,
  .split-media img,
  .prose img,
  .role-media img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* On desktop too: never let an inline fixed width overflow its column */
.framed-img img,
.split-media img {
  max-width: 100%;
}

/* ==========================================================================
   5. SPLIT SECTIONS — side-by-side desktop, stacked tablet & mobile
   (style.css stacks at <=1024; align to the 991 tablet boundary and tidy)
   ========================================================================== */
@media (max-width: 991px) {
  .split,
  .split--reverse {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .split--reverse .split-media { order: 0 !important; }
  /* media first, copy second reads better when stacked */
  .split-media { order: -1; }
  .framed-img { max-width: 560px; margin-inline: auto; }
  /* neutralise inline fixed heights on the framing wrapper */
  .framed-img[style*="height"] { height: auto !important; }
}

@media (max-width: 767px) {
  .framed-img { max-width: 100%; }
  .wm-num { font-size: 3.4rem; }
  .stats { gap: 24px; }
}

/* ==========================================================================
   6. GALLERY  (gallery.php / events.php  #gallery-section)
   Desktop 3 cols · Tablet 2 cols · Mobile 1 col · equal height · cover
   ========================================================================== */
#gallery-section .gallery-grid {
  grid-template-columns: repeat(3, 1fr);
}
/* kill the hard-coded width:400px that broke the grid + caused overflow */
#gallery-section .gallery-item {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
}
#gallery-section .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  #gallery-section .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 575px) {
  #gallery-section .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Home-page photo preview (.card-grid > .gallery-item with inline height) */
.card-grid .gallery-item img {
  width: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .card-grid .gallery-item img { height: 220px !important; }
}

/* ==========================================================================
   7. CARD / INFO / FOLLOW GRIDS — consistent column counts per tier
   ========================================================================== */
@media (max-width: 991px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .follow-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .card-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .follow-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. TYPOGRAPHY — readable scale on small screens
   ========================================================================== */
@media (max-width: 991px) {
  .heading { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
  /* generic inline 42px headings used around the site */
  .main-heading[style],
  .section-title h2,
  .gallery-heading h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem) !important; }
}
@media (max-width: 767px) {
  body { line-height: 1.65; }
  .heading { font-size: clamp(1.55rem, 6.5vw, 2.1rem); }
  .eyebrow[style] { font-size: 26px !important; }   /* the 42px "Biography of" eyebrow */
  .prose p, .article p { font-size: .98rem; }
  .stat .num { font-size: 2rem; }
  .jtj-full-section .jtj-headline { font-size: 30px !important; }
}
@media (max-width: 380px) {
  .heading { font-size: 1.5rem; }
  .eyebrow[style] { font-size: 22px !important; }
}

/* ==========================================================================
   9. BUTTONS — touch-friendly, no overlap, wrap cleanly
   ========================================================================== */
@media (max-width: 767px) {
  .btn { padding: .85rem 1.5rem; font-size: .76rem; }
  .hero-actions,
  .cta-actions { flex-wrap: wrap; gap: .75rem; }
  .hero-actions .btn,
  .cta-actions .btn { flex: 1 1 auto; min-height: 46px; }
  /* comfortable tap target for nav + filter chips */
  .filter-btn { padding: .6rem 1.1rem; }
}

/* ==========================================================================
   10. CONTACT — stack form columns and the name/phone row on mobile
   ========================================================================== */
@media (max-width: 991px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 575px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   11. FOOTER — clean stacking and spacing
   ========================================================================== */
@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 575px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer { padding-top: 56px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
}

/* ==========================================================================
   12. ACHIEVEMENTS (about) + JOIN-THE-JOURNEY (index) custom sections
   ========================================================================== */
@media (max-width: 850px) {
  .achievements-section-wrapper .achievement-item { font-size: 17px; }
}
@media (max-width: 575px) {
  .achievements-section-wrapper { padding: 44px 16px; }
  .achievements-section-wrapper .achievement-item { font-size: 15.5px; }
  .achievements-section-wrapper h2 { font-size: 26px; }
}

/* ==========================================================================
   13. SPACING POLISH — fixed navbar clearance stays consistent on mobile
   ========================================================================== */
@media (max-width: 767px) {
  .section { padding: 64px 0; }
}

/* ==========================================================================
   14. LAPTOP TIER (992–1199) — keep split sections side-by-side
   (base responsive.css stacked them at <=1024; the requirement wants
    laptops to mirror the desktop two-column layout)
   ========================================================================== */
@media (min-width: 992px) {
  .split            { grid-template-columns: .85fr 1.15fr; }
  .split--reverse   { grid-template-columns: 1.15fr .85fr; }
  .split--reverse .split-media { order: 2; }
}