/* =========================================================
   Edoma Iyawot Academy — responsive.css
   Breakpoints: 1200 / 992 / 768 / 560
   ========================================================= */

/* ---------- <= 1200px ---------- */
@media (max-width: 1200px) {
  .masonry { grid-template-columns: repeat(3, 1fr); }
  .gal { columns: 3; }
  .f-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .f-news { grid-column: 1 / -1; }
}

/* ---------- <= 992px (tablet) ---------- */
@media (max-width: 992px) {
  :root { --header-h: 74px; }

  /* Mobile navigation */
  .burger { display: flex; }
  .header-cta .btn { display: none; }

  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px);
    background: var(--navy);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    box-shadow: -20px 0 60px rgba(0,0,0,.4);
  }
  .nav.open { transform: none; }
  .nav > li { border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav a.nav-link { padding: 1.05rem .3rem; font-size: 1rem; justify-content: space-between; }

  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; box-shadow: none; border: 0;
    max-height: 0; overflow: hidden; padding: 0;
    transition: max-height .4s var(--ease);
  }
  .has-drop.expanded .dropdown { max-height: 320px; padding-bottom: .6rem; }
  .has-drop.expanded .caret { transform: rotate(-135deg) translateY(-2px); }
  .dropdown a { color: rgba(255,255,255,.75); padding: .7rem .3rem .7rem 1.2rem; }
  .dropdown a:hover { background: transparent; color: var(--gold); padding-left: 1.6rem; }

  .nav-cta { margin-top: 1.6rem; border-bottom: 0 !important; }
  .nav-cta .btn { display: inline-flex !important; width: 100%; }

  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(4,12,32,.6);
    backdrop-filter: blur(3px); z-index: 850;
    opacity: 0; visibility: hidden; transition: all .35s ease;
  }
  .nav-backdrop.on { opacity: 1; visibility: visible; }

  /* Layout collapse */
  .split { grid-template-columns: 1fr; }
  .split-media { order: -1; }
  .float-card { right: 12px; bottom: -18px; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 175px; }
  .gal { columns: 2; }
  .feature-post { grid-template-columns: 1fr; }
  .feature-post img { min-height: 260px; }
  .f-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem; }

  .hero { min-height: 92svh; }
  .hero-scroll { display: none; }
  .page-hero { padding: calc(var(--header-h) + 4.5rem) 0 4rem; }
}

/* ---------- <= 768px (mobile) ---------- */
@media (max-width: 768px) {
  body { font-size: .97rem; }
  .container { width: min(100% - 2rem, var(--container)); }
  .section { padding: 4rem 0; }
  .section-head { margin-bottom: 2.4rem; }

  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .masonry { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .tile.wide { grid-column: span 2; }
  .tile.tall { grid-row: span 1; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero p { font-size: 1rem; }

  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }

  .float-card { position: static; margin-top: -30px; margin-inline: auto; max-width: 100%; z-index: 3; position: relative; }

  .timeline { padding-left: 2.1rem; }
  .tl-item::before { left: -2.1rem; width: 16px; height: 16px; }

  .event { flex-direction: row; align-items: flex-start; }
  .emergency { flex-direction: column; align-items: flex-start; text-align: left; }
  .emergency .btn { width: 100%; }

  .toolbar { flex-direction: column; align-items: stretch; }
  .search { max-width: none; }
  .filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
  .filters button { flex: none; }

  .f-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .f-bottom { flex-direction: column; text-align: center; }
  .map-wrap iframe { height: 320px; }

  .lb-prev { left: .6rem; }
  .lb-next { right: .6rem; }
  .lb-btn { width: 42px; height: 42px; }

  .to-top { bottom: 86px; right: 16px; width: 42px; height: 42px; }
  .wa-float { right: 16px; bottom: 20px; width: 52px; height: 52px; }
}

/* ---------- <= 560px (small mobile) ---------- */
@media (max-width: 560px) {
  .masonry { grid-template-columns: 1fr; grid-auto-rows: 190px; }
  .tile.wide { grid-column: span 1; }
  .gal { columns: 1; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding: 1.2rem; }

  .brand-tag { font-size: .5rem; letter-spacing: .12em; }
  .brand-name { font-size: .92rem; }
  .brand-logo { width: 42px; height: 42px; }

  .step { flex-direction: column; gap: 1rem; }
  .fee-table { display: block; overflow-x: auto; white-space: nowrap; }
  .tperson { flex-direction: column; text-align: center; gap: .6rem; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .to-top, .wa-float, .hero-dots, #preloader { display: none !important; }
  body { color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}