/* ============================================================
   ALPHA ZEBRA EVENTS — Complete Responsive Stylesheet
   Breakpoints:
     Tablet  : max-width 1024px
     Mobile  : max-width 768px
     Mobile-S: max-width 480px
   ============================================================ */

/* ============================================================
   SHARED UTILITIES (all screens)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ============================================================
   TABLET  (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {

  /* ── NAVBAR ── */
  .nav-links, .nav-cta { display: none !important; }
  .nav-hamburger { display: flex !important; }
  .nav-inner { padding: 0 24px; height: 68px; }

  /* ── HOMEPAGE HERO ── */
  .hz-inner { grid-template-columns: 1fr !important; gap: 0 !important; padding-bottom: 0; }
  .hz-right { display: none; }
  .hz-title { font-size: clamp(2.4rem, 6vw, 3.6rem); }
  .hz-stats-row { flex-wrap: wrap; gap: 0; padding: 16px 0; }
  .hz-stat { padding: 12px 20px; }

  /* ── ABOUT ── */
  .az-about-grid { grid-template-columns: 1fr !important; gap: 36px; }
  .az-about-right { display: none; }

  /* ── SERVICES 6-col → 3-col ── */
  .az-services-row { grid-template-columns: repeat(3, 1fr) !important; }
  .az-svc-item:nth-child(3) { border-right: none; }
  .az-svc-item:nth-child(4),
  .az-svc-item:nth-child(5),
  .az-svc-item:nth-child(6) { border-top: 1px solid #eee; }

  /* ── PORTFOLIO ── */
  .az-portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .az-portfolio-head { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* ── PASSION (Image 2 section) ── */
  .az-passion-inner { grid-template-columns: 1fr !important; }
  .az-passion-center { width: 100%; height: 240px; }
  .az-passion-left, .az-passion-right { padding: 44px 32px; }
  .az-passion-right { border-left: none; border-top: 1px solid rgba(212,175,55,0.08); }

  /* ── WHY SECTION ── */
  .az-why-head { grid-template-columns: 1fr !important; gap: 36px; }
  .az-why-cards { grid-template-columns: 1fr 1fr; }

  /* ── TESTIMONIALS ── */
  .az-testi-layout { grid-template-columns: 1fr !important; }
  .az-testi-img-wrap { display: none; }

  /* ── NEWSLETTER ── */
  .az-nl-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .az-nl-form input { width: 240px; }

  /* ── FOOTER ── */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px; }

  /* ── INNER PAGE HEROES ── */
  .spd-hero { grid-template-columns: 1fr !important; min-height: auto; padding-top: 68px; }
  .spd-hero-img-side { height: 45vw; min-height: 200px; }
  .spd-hero-info { padding: 36px 28px; }
  .spd-layout { grid-template-columns: 1fr !important; }
  .spd-sidebar { position: static; }
  .spd-stats { grid-template-columns: 1fr 1fr; }

  /* ── SCHOOL SERVICES ── */
  .ss-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ss-what-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ss-schools-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .ss-stat-row { gap: 0; }
  .ss-stat { padding: 0 18px; }

  /* ── EMCEE ── */
  .em-service-row,
  .em-row-reverse { grid-template-columns: 1fr !important; }
  .em-row-reverse .em-svc-img-wrap,
  .em-row-reverse .em-svc-content { order: unset !important; }
  .em-svc-img-wrap { min-height: 260px; }
  .em-svc-content { padding: 32px 28px; }
  .em-why-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .em-process-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── TEAM ACTIVITIES ── */
  .ta-grid, .ss-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── EVENTS / SIGNATURE GRID ── */
  .events-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── TESTIMONIALS (old) ── */
  .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── ABOUT (old dark section) ── */
  .about-grid { grid-template-columns: 1fr !important; gap: 48px; }

  /* ── CONTACT ── */
  .contact-grid { grid-template-columns: 1fr !important; }

  /* ── GRID UTILS ── */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── PORTFOLIO PAGE ── */
  .portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

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

  /* ── GLOBAL SPACING ── */
  .container { padding: 0 18px; }
  .section-pad { padding: 64px 0; }
  .section-pad-sm { padding: 44px 0; }

  /* ── NAVBAR ── */
  .nav-inner { height: 62px; padding: 0 18px; }
  .nav-logo-name { font-size: 1.1rem; }

  /* ── HOMEPAGE HERO ── */
  #hero { padding-top: 62px; }
  .hz-inner { padding: 40px 0 0; }
  .hz-eyebrow { font-size: 0.62rem; }
  .hz-title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hz-desc { font-size: 0.84rem; }
  .hz-btns { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hz-btns .btn-hz { width: 100%; justify-content: center; }

  /* ── STATS BAR ── */
  .hz-stats-row { justify-content: flex-start; padding: 16px 18px; gap: 0; flex-wrap: wrap; }
  .hz-stat { width: 50%; padding: 14px 16px; }
  .hz-stat-div { display: none; }
  .hz-stat-n { font-size: 1.3rem; }

  /* ── ABOUT ── */
  .az-about { padding: 56px 0; }
  .az-about-h2 { font-size: clamp(1.6rem, 5vw, 2rem); }

  /* ── SERVICES ── */
  .az-services { padding: 56px 0; }
  .az-services-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .az-services-h2 { font-size: clamp(1.5rem, 5vw, 1.9rem); }
  .az-services-row { grid-template-columns: repeat(2, 1fr) !important; }
  .az-svc-item:nth-child(3) { border-right: 1px solid #eee; }
  .az-svc-item:nth-child(2) { border-right: none; }
  .az-svc-item:nth-child(even) { border-right: none; }
  .az-svc-item { padding: 22px 16px; }
  .az-svc-icon { width: 44px; height: 44px; }

  /* ── PORTFOLIO ── */
  .az-portfolio { padding: 56px 0; }
  .az-portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .az-port-card { height: 180px; }
  .az-portfolio-h2 { font-size: clamp(1.5rem, 5vw, 1.9rem); }

  /* ── PASSION SECTION (Image 2) ── */
  .az-passion-left,
  .az-passion-right { padding: 36px 22px; }
  .az-passion-h2 { font-size: clamp(1.5rem, 5vw, 1.9rem); }
  .az-passion-center { height: 200px; }
  .az-passion-img { width: 88%; height: 100%; }

  /* ── WHY SECTION ── */
  .az-why { padding: 56px 0; }
  .az-why-h2 { font-size: clamp(1.5rem, 5vw, 1.9rem); }
  .az-why-cards { grid-template-columns: 1fr !important; gap: 12px; }

  /* ── TESTIMONIALS (new) ── */
  .az-testi { padding: 56px 0; }
  .az-testi-h2 { font-size: clamp(1.5rem, 5vw, 1.9rem); }
  .az-testi-cards { gap: 14px; }

  /* ── NEWSLETTER ── */
  .az-nl-form { flex-direction: column; border-radius: 6px; overflow: visible; box-shadow: none; }
  .az-nl-form input { width: 100%; border-radius: 4px; margin-bottom: 8px; }
  .az-nl-form button { border-radius: 4px; justify-content: center; }
  .az-nl-title { font-size: 1.1rem; }

  /* ── FOOTER ── */
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bottom-links { flex-wrap: wrap; gap: 14px; }
  #footer { padding: 56px 0 0; }

  /* ── PAGE HERO (inner) ── */
  .page-hero { padding: 100px 0 52px; }
  .page-hero-title { font-size: clamp(1.8rem, 6vw, 2.8rem); }

  /* ── SCHOOL SERVICES ── */
  .ss-hero { min-height: auto; padding-top: 62px; }
  .ss-hero-content { padding: 60px 0 30px; }
  .ss-hero-title { font-size: clamp(2rem, 7vw, 2.8rem); }
  .ss-hero-actions { flex-direction: column; gap: 10px; }
  .ss-hero-actions .btn { width: 100%; justify-content: center; }
  .ss-hero-statbar .ss-stat-row { flex-wrap: wrap; padding: 16px; }
  .ss-stat { width: 50%; padding: 10px 14px; }
  .ss-sd { display: none; }
  .ss-tabs-wrap { top: 62px; }
  .ss-grid { grid-template-columns: 1fr !important; }
  .ss-what-grid { grid-template-columns: 1fr 1fr !important; }
  .ss-schools-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── SCHOOL DETAIL (split hero) ── */
  .spd-hero { padding-top: 62px; grid-template-columns: 1fr !important; }
  .spd-hero-img-side { height: 52vw; min-height: 220px; }
  .spd-hero-info { padding: 28px 20px; }
  .spd-stats { grid-template-columns: 1fr; gap: 8px; }
  .spd-layout { grid-template-columns: 1fr !important; gap: 28px; }
  .spd-sidebar { position: static; }
  .spd-gallery { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── EMCEE ── */
  .em-hero { min-height: auto; padding: 100px 0 48px; }
  .em-hero-title { font-size: clamp(2rem, 7vw, 3rem); }
  .em-hero-badges { gap: 6px; }
  .em-type-badge { font-size: 0.6rem; padding: 5px 12px; }
  .em-why-grid { grid-template-columns: 1fr !important; }
  .em-service-row,
  .em-row-reverse { grid-template-columns: 1fr !important; }
  .em-svc-img-wrap { min-height: 200px; }
  .em-svc-content { padding: 24px 20px; }
  .em-process-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── TEAM ACTIVITIES ── */
  .ta-hero-content { padding: 80px 0 28px; }
  .ta-tabs-wrap { top: 62px; }
  .ta-grid { grid-template-columns: 1fr !important; }

  /* ── EVENTS / SIGNATURE ── */
  .events-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .events-header { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* ── TESTIMONIALS (old) ── */
  .testimonials-grid { grid-template-columns: 1fr !important; }
  .blog-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .blog-grid { grid-template-columns: 1fr !important; }

  /* ── STATS ROW ── */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── ABOUT (old dark) ── */
  #about-section { padding: 64px 0; }
  .about-grid { grid-template-columns: 1fr !important; gap: 36px; }
  .about-check-list { grid-template-columns: 1fr !important; }

  /* ── CONTACT ── */
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-info-card,
  .contact-form-wrap { padding: 32px 24px; }

  /* ── CTA ── */
  #cta-section { padding: 64px 0; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns .btn { width: 100%; justify-content: center; }

  /* ── FORMS ── */
  .form-row { grid-template-columns: 1fr !important; }
  .form-row-2 { grid-template-columns: 1fr !important; }
  .form-row-2[style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ── GRID UTILS ── */
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr !important; }

  /* ── PORTFOLIO PAGE ── */
  .portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .portfolio-filters { gap: 7px; }
  .filter-btn { padding: 7px 14px; font-size: 0.7rem; }
}

/* ============================================================
   MOBILE-SMALL  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

  /* ── NAVBAR ── */
  .nav-inner { padding: 0 14px; height: 58px; }
  .nav-logo-name { font-size: 1rem; }
  .nav-logo-tagline { display: none; }

  /* ── HERO ── */
  #hero { padding-top: 58px; }
  .hz-title { font-size: clamp(1.8rem, 9vw, 2.4rem); }
  .hz-stat { width: 100%; border-bottom: 1px solid #eee; }

  /* ── SERVICES → 1-col ── */
  .az-services-row { grid-template-columns: 1fr !important; }
  .az-svc-item { border-right: none !important; border-bottom: 1px solid #eee; }
  .az-svc-item:last-child { border-bottom: none; }

  /* ── PORTFOLIO ── */
  .az-portfolio-grid { grid-template-columns: 1fr !important; }
  .az-port-card { height: 220px; }

  /* ── WHY SECTION ── */
  .az-why-cards { grid-template-columns: 1fr !important; }

  /* ── PASSION ── */
  .az-passion-left, .az-passion-right { padding: 28px 18px; }

  /* ── TESTIMONIALS ── */
  .az-testi-card { padding: 18px 16px; }

  /* ── NEWSLETTER ── */
  .az-nl-left { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ── FOOTER ── */
  .footer-grid { gap: 24px !important; }

  /* ── SCHOOL SERVICES ── */
  .ss-what-grid { grid-template-columns: 1fr !important; }
  .ss-schools-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ss-stat { width: 100%; border-bottom: 1px solid rgba(212,175,55,0.08); }
  .ss-hero-content { padding: 50px 0 24px; }

  /* ── SCHOOL DETAIL ── */
  .spd-hero-img-side { height: 60vw; }
  .spd-gallery { grid-template-columns: 1fr !important; }

  /* ── EMCEE ── */
  .em-why-grid { grid-template-columns: 1fr !important; }
  .em-process-grid { grid-template-columns: 1fr !important; }
  .em-svc-content { padding: 20px 18px; }

  /* ── EVENTS ── */
  .events-grid { grid-template-columns: 1fr !important; }

  /* ── STATS ── */
  .stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── PORTFOLIO PAGE ── */
  .portfolio-grid { grid-template-columns: 1fr !important; }
  .portfolio-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }

  /* ── BLOG ── */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* ── BREADCRUMB ── */
  .breadcrumb { flex-wrap: wrap; justify-content: flex-start; font-size: 0.7rem; }

  /* ── PAGE HERO ── */
  .page-hero { padding: 84px 0 44px; }
  .page-hero-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }

  /* ── CTA ── */
  .cta-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }

  /* ── RELATED CARDS ── */
  div[style*="grid-template-columns:repeat(auto-fill,minmax(260px"] { grid-template-columns: 1fr !important; }
}

/* ============================================================
   ADMIN — MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {

  /* Sidebar hidden by default, shown via class */
  .admin-sidebar {
    position: fixed;
    left: -260px;
    top: 0; bottom: 0;
    width: 250px;
    z-index: 1100;
    transition: left 0.3s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .admin-sidebar.open { left: 0; }

  /* Sidebar overlay */
  .admin-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1090;
    backdrop-filter: blur(2px);
  }
  .admin-sidebar-overlay.show { display: block; }

  /* Main area full-width */
  .admin-main { margin-left: 0 !important; padding: 80px 16px 32px; }
  .admin-topbar { left: 0 !important; }

  /* Show hamburger in admin topbar */
  .admin-menu-toggle { display: flex !important; }
}

@media (max-width: 768px) {

  /* ── ADMIN TOPBAR ── */
  .admin-topbar { padding: 0 16px; height: 58px; }
  .admin-topbar h1,
  .admin-topbar .page-title { font-size: 1rem; }
  .admin-user-info { display: none; }

  /* ── ADMIN CARDS ── */
  .admin-card-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .admin-card-body { padding: 18px; }

  /* ── ADMIN TABLES — horizontal scroll ── */
  .admin-table-wrap,
  .admin-card > table,
  .admin-card > div > table { overflow-x: auto; display: block; -webkit-overflow-scrolling: touch; }
  .admin-table { min-width: 640px; }

  /* ── DASHBOARD STAT CARDS ── */
  .dash-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .dash-actions { grid-template-columns: 1fr !important; }

  /* ── ADMIN FORM ROWS ── */
  .form-row-2,
  .form-row { grid-template-columns: 1fr !important; }

  /* ── TBL ACTIONS ── */
  .tbl-actions { flex-wrap: wrap; gap: 5px; }
  .tbl-actions .btn-adm { flex: 1 1 auto; text-align: center; justify-content: center; }

  /* ── IMAGE PREVIEW ── */
  .img-preview-box { max-width: 140px; }

  /* ── GALLERY PREVIEW ── */
  .gal-preview-grid { gap: 6px; }
  .gal-thumb-wrap { width: 60px; height: 60px; }

  /* ── MAIN ── */
  .admin-main { padding: 72px 14px 28px; }
}

@media (max-width: 480px) {

  /* ── DASHBOARD STATS ── */
  .dash-stats { grid-template-columns: 1fr !important; }

  /* ── TABLE ── */
  .admin-table { min-width: 520px; }
  td.hide-sm, th.hide-sm { display: none; }

  /* ── ADMIN FORM ── */
  .admin-card-body { padding: 14px; }
  .form-group label { font-size: 0.67rem; }

  /* ── BUTTONS ── */
  .btn-adm { font-size: 0.67rem; padding: 7px 10px; }
}

/* ============================================================
   ADMIN SIDEBAR TOGGLE — JS hooks
   ============================================================ */
.admin-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white, #fff);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 6px;
  margin-right: 12px;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   MOBILE NAV IMPROVEMENTS
   ============================================================ */

/* Mobile menu full-screen overlay links */
.nav-mobile a {
  font-size: 1.6rem !important;
  padding: 8px 32px !important;
}

/* Prevent double-tap zoom on buttons/links */
a, button { touch-action: manipulation; }

/* Smooth momentum scrolling on iOS */
.ss-tabs-scroll,
.ta-tabs-scroll,
.em-hero-badges { -webkit-overflow-scrolling: touch; }

/* ============================================================
   TOUCH-FRIENDLY SIZING
   ============================================================ */
@media (max-width: 768px) {
  /* Ensure tap targets are at least 44px */
  .btn, .btn-hz, .btn-adm, .ss-tab, .ta-tab, .em-type-badge,
  .filter-btn, .nav-mobile a, .footer-social a {
    min-height: 44px;
  }
  .footer-social a { min-width: 44px; }
  .filter-btn { min-height: 40px; }

  /* Remove hover states on touch devices */
  .az-svc-item:hover { background: transparent; transform: none; }
  .az-svc-item:hover .az-svc-icon i { color: #111; }
  .az-svc-item:hover .az-svc-title,
  .az-svc-item:hover .az-svc-desc { color: inherit; }

  /* Card hover — disable transform on mobile */
  .ss-card:hover,
  .az-testi-card:hover,
  .az-pillar:hover,
  .spd-related-card:hover,
  .em-service-row:hover { transform: none; }

  /* Tables: show scroll hint */
  .admin-card { overflow: hidden; }
}

/* ============================================================
   PRINT (basic)
   ============================================================ */
@media print {
  #navbar, #footer, #scroll-top, .az-nl-strip,
  .admin-sidebar, .admin-topbar { display: none !important; }
  .admin-main { margin: 0 !important; padding: 0 !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .container { max-width: 100%; }
}