/* =====================================================
   PHOENIX ACADEMY — RESPONSIVE STYLESHEET
   Breakpoints:
     xs  : 375px  (iPhone SE, small phones)
     sm  : 480px  (large phones)
     md  : 640px  (phablets)
     lg  : 768px  (tablets / iPad)
     xl  : 1024px (iPad Pro / laptop)
     2xl : 1280px (desktop)
   ===================================================== */

/* ── Base fluid foundation ── */
html { font-size: 16px; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }

/* ── Fluid wrap padding ── */
.wrap { padding-left: clamp(16px, 4vw, 24px); padding-right: clamp(16px, 4vw, 24px); }

/* =====================================================
   UTILITY RESPONSIVE GRID CLASSES
   Add these classes to any grid container in HTML.
   They override inline grid-template-columns with
   !important so media queries can collapse them.
   ===================================================== */

/* Hero two-column layout */
.grid-hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}

/* Contact / Demo asymmetric layout */
.grid-contact {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 60px !important;
  align-items: start !important;
}

/* Standard two-column */
.grid-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

/* Three-column */
.grid-3col {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Four-column */
.grid-4col {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Hero stats row (3 mini stats) */
.grid-stats-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* =====================================================
   ≤ 1280px — large desktop → regular desktop
   Tighten gaps slightly
   ===================================================== */
@media (max-width: 1280px) {
  .grid-hero   { gap: 48px !important; }
  .grid-contact { gap: 48px !important; }
  .grid-4col   { grid-template-columns: repeat(4, 1fr) !important; }
  .grid-3col   { grid-template-columns: repeat(3, 1fr) !important; }
}

/* =====================================================
   ≤ 1024px — iPad Pro / small laptop
   ===================================================== */
@media (max-width: 1024px) {
  /* Hero collapses to single column, right panel hidden handled by JS */
  .grid-hero   { grid-template-columns: 1fr !important; gap: 40px !important; }
  .grid-contact { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* 4-col → 2-col */
  .grid-4col   { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }

  /* 3-col → 2-col */
  .grid-3col   { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }

  /* hero h1 scale */
  .hero-h1     { font-size: clamp(2rem, 4vw, 3rem) !important; }

  /* section padding */
  section[style*="padding:90px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="padding:80px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding:70px"] { padding-top: 50px !important; padding-bottom: 50px !important; }
}

/* =====================================================
   ≤ 768px — tablets / iPad mini / large phones
   ===================================================== */
@media (max-width: 768px) {
  /* ── Navbar already handled in style.css ── */

  /* ── Hero ── */
  .grid-hero  { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero-h1    { font-size: clamp(1.8rem, 6vw, 2.6rem) !important; line-height: 1.15 !important; }
  .section-h2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }

  /* Hero section min-height */
  section.hero-bg { min-height: auto !important; padding-top: 100px !important; padding-bottom: 60px !important; }

  /* ── Grids ── */
  .grid-contact { grid-template-columns: 1fr !important; }
  .grid-2col    { grid-template-columns: 1fr !important; gap: 24px !important; }
  .grid-3col    { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .grid-4col    { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .grid-stats-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }

  /* ── Sections ── */
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .page-hero { min-height: auto !important; padding-top: 90px !important; padding-bottom: 40px !important; }

  /* ── Why Phoenix ── */
  .grid-why { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* ── Testimonial CTA grid ── */
  .grid-cta-2col { grid-template-columns: 1fr !important; gap: 24px !important; }

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

  /* ── Misc ── */
  .modal-box    { padding: 28px 20px !important; }
  .input-row    { grid-template-columns: 1fr !important; }

  /* ── Blob decor hidden on smaller screens ── */
  .blob         { display: none !important; }

  /* ── Section margin-bottom for headers ── */
  div[style*="text-align:center;margin-bottom:60px"] { margin-bottom: 36px !important; }
  div[style*="text-align:center;margin-bottom:50px"] { margin-bottom: 30px !important; }
}

/* =====================================================
   ≤ 640px — large phones (Android / iPhone 6–14 Plus)
   ===================================================== */
@media (max-width: 640px) {
  /* ── Hero stats ── */
  .grid-stats-3 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .hero-stats-border { border-right: none !important; border-bottom: 1px solid var(--border) !important; padding-bottom: 12px !important; margin-bottom: 4px !important; }

  /* ── Grids ── */
  .grid-3col  { grid-template-columns: 1fr !important; }
  .grid-2col  { grid-template-columns: 1fr !important; }

  /* ── Hero text & buttons ── */
  .hero-h1    { font-size: clamp(1.65rem, 7vw, 2rem) !important; }
  div[style*="display:flex;gap:14px"]  { flex-direction: column !important; align-items: flex-start !important; }

  /* ── Course cards ── */
  .course-card { padding: 20px !important; }

  /* ── Stat cards numbers ── */
  .stat-num   { font-size: 2rem !important; }

  /* ── Page hero headings ── */
  .page-hero h1 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }

  /* ── Process steps ── */
  .process-step { padding-left: 56px !important; }

  /* ── Timeline ── */
  .timeline-item { padding-left: 32px !important; }

  /* ── WhatsApp FAB + Back to top: stack safely ── */
  .whatsapp-fab { width: 50px !important; height: 50px !important; bottom: 20px !important; right: 16px !important; }
  .back-top     { bottom: 80px !important; right: 16px !important; width: 40px !important; height: 40px !important; }

  /* ── Footer bottom bar ── */
  div[style*="justify-content:space-between;align-items:center;flex-wrap:wrap"] {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }
}

/* =====================================================
   ≤ 480px — small phones (iPhone SE, Galaxy A02)
   ===================================================== */
@media (max-width: 480px) {
  /* Wrap has minimum breathing room */
  .wrap { padding-left: 14px !important; padding-right: 14px !important; }

  /* ── Nav ── */
  .nav-inner  { height: 60px !important; padding: 0 14px !important; }

  /* ── Hero ── */
  .hero-h1    { font-size: 1.55rem !important; }
  section.hero-bg { padding-top: 80px !important; padding-bottom: 48px !important; }

  /* ── 4-col → single ── */
  .grid-4col  { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* ── Stats 3 → 1 ── */
  .grid-stats-3 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* ── Buttons full-width on very small ── */
  .btn-primary, .btn-outline, .btn-cyan {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* But don't force nav CTA full-width */
  .nav-cta { width: auto !important; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-inner { padding: 40px 14px 24px !important; }

  /* ── Modal ── */
  .modal-box  { padding: 24px 16px !important; margin: 12px !important; border-radius: 18px !important; }

  /* ── Marquee pills ── */
  .company-pill { padding: 8px 14px !important; font-size: 0.65rem !important; }

  /* ── Section tag size ── */
  .section-tag { font-size: 0.6rem !important; padding: 5px 12px !important; }

  /* ── Course card ── */
  .course-card { padding: 18px 16px !important; border-radius: 16px !important; }

  /* ── FAQ ── */
  .faq-q { padding: 16px 18px !important; font-size: 0.68rem !important; }

  /* ── Contact info card padding ── */
  .card { padding: 20px 16px !important; }
}

/* =====================================================
   ≤ 375px — iPhone SE / very narrow
   ===================================================== */
@media (max-width: 375px) {
  .hero-h1    { font-size: 1.38rem !important; }
  .wrap       { padding-left: 12px !important; padding-right: 12px !important; }
  .btn-primary, .btn-outline, .btn-cyan { padding: 12px 18px !important; font-size: 0.72rem !important; }
  .stat-num   { font-size: 1.75rem !important; }
  .footer-grid { gap: 20px !important; }
  .grid-stats-3 { grid-template-columns: 1fr !important; }
}

/* =====================================================
   SPECIFIC PAGE OVERRIDES
   These target inline-styled elements that can't be
   overridden with generic class selectors.
   ===================================================== */

/* ── INDEX: Hero right dashboard card ── */
@media (max-width: 1024px) {
  /* The right floating card column */
  .grid-hero > div:last-child { display: none !important; }

  /* Hero stats row — keep as 3 cols on tablet */
  .grid-stats-3 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 640px) {
  /* Show hero dashboard card removed, adjust hero padding */
  section.hero-bg .wrap { padding-top: 32px !important; padding-bottom: 40px !important; }

  /* Hero CTA buttons – already column from above rule */

  /* Hero stats borders */
  div[data-count] + div { font-size: 0.55rem !important; }
}

/* ── INDEX: Featured courses grid ── */
#featured-courses {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
@media (max-width: 1024px) {
  #featured-courses { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  #featured-courses { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ── INDEX / COURSES: Course grid ── */
#courses-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
@media (max-width: 1024px) {
  #courses-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  #courses-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ── INDEX: Why Phoenix 2-col ── */
@media (max-width: 768px) {
  /* The Why Phoenix section grid */
  div[style*="gap:80px;align-items:center"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

/* ── INDEX: Stats row (4 cols) ── */
@media (max-width: 1024px) {
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ── INDEX: Testimonials 3-col ── */
@media (max-width: 1024px) {
  div[style*="grid-template-columns:repeat(3,1fr);gap:24px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  div[style*="grid-template-columns:repeat(3,1fr);gap:24px"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ── ABOUT: 4-col team/stats ── */
@media (max-width: 1024px) {
  div[style*="grid-template-columns:repeat(4,1fr);gap:24px"],
  div[style*="grid-template-columns:repeat(4,1fr);gap:20px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  div[style*="grid-template-columns:repeat(4,1fr);gap:24px"],
  div[style*="grid-template-columns:repeat(4,1fr);gap:20px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ── ABOUT: 2-col leadership cards ── */
@media (max-width: 768px) {
  div[style*="grid-template-columns:1fr 1fr;gap:24px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── CONTACT / DEMO: Asymmetric 2-col ── */
@media (max-width: 1024px) {
  div[style*="grid-template-columns:1.2fr 1fr;gap:60px"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ── CONTACT / DEMO: Time slots 2-col ── */
@media (max-width: 480px) {
  div[style*="grid-template-columns:1fr 1fr;gap:10px;margin-top:6px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── PLACEMENTS: 4-col stats ── */
@media (max-width: 1024px) {
  div[style*="grid-template-columns:repeat(4,1fr);gap:24px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── PLACEMENTS: 3-col companies ── */
@media (max-width: 1024px) {
  div[style*="grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  div[style*="grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── PLACEMENTS: Student cards 2-col ── */
@media (max-width: 768px) {
  div[style*="grid-template-columns:repeat(2,1fr);gap:24px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── TESTIMONIALS: CTA 2-col ── */
@media (max-width: 768px) {
  div[style*="grid-template-columns:1fr 1fr;gap:40px;align-items:center"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  div[style*="grid-template-columns:repeat(2,1fr);gap:20px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── DEMO: Stats bottom row ── */
@media (max-width: 1024px) {
  div[style*="grid-template-columns:repeat(4,1fr);gap:20px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  div[style*="grid-template-columns:repeat(4,1fr);gap:20px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* =====================================================
   TYPOGRAPHY — fluid font scaling
   ===================================================== */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.6rem, 5vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.4rem, 4.5vw, 2rem) !important; }
  h3 { font-size: clamp(1rem, 3.5vw, 1.3rem) !important; }

  /* Page hero headings */
  .page-hero h1[style*="font-size:2.8rem"] { font-size: clamp(1.8rem, 5.5vw, 2.4rem) !important; }
  .page-hero h1[style*="font-size:2.4rem"] { font-size: clamp(1.6rem, 5vw, 2rem) !important; }
  .page-hero h1[style*="font-size:2rem"]   { font-size: clamp(1.4rem, 4.5vw, 1.8rem) !important; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important; }
  h2 { font-size: clamp(1.25rem, 4.5vw, 1.6rem) !important; }

  /* Section sub-paragraph text */
  p[style*="font-size:0.72rem"] { font-size: 0.7rem !important; line-height: 1.85 !important; }
}

/* =====================================================
   SECTION PADDING — fluid
   ===================================================== */
@media (max-width: 768px) {
  section[style*="padding:90px 0"] { padding: 52px 0 !important; }
  section[style*="padding:80px 0"] { padding: 44px 0 !important; }
  section[style*="padding:70px 0"] { padding: 40px 0 !important; }
  section[style*="padding:60px 0"] { padding: 36px 0 !important; }
}

@media (max-width: 480px) {
  section[style*="padding:90px 0"] { padding: 40px 0 !important; }
  section[style*="padding:80px 0"] { padding: 36px 0 !important; }
  section[style*="padding:70px 0"] { padding: 32px 0 !important; }
  section[style*="padding:60px 0"] { padding: 28px 0 !important; }
}

/* =====================================================
   NAVIGATION — extra refinements
   ===================================================== */

/* Ensure hamburger menu links are full-width tap targets */
.mobile-menu a {
  padding: 13px 0 !important;
  min-height: 44px;
  display: flex !important;
  align-items: center !important;
}

/* iOS safe-area insets for notch */
@supports (padding: env(safe-area-inset-top)) {
  .navbar { padding-top: env(safe-area-inset-top); }
  .whatsapp-fab { bottom: calc(28px + env(safe-area-inset-bottom)); }
  .back-top     { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* =====================================================
   MODAL — full-screen on small phones
   ===================================================== */
@media (max-width: 480px) {
  .modal-overlay { padding: 10px !important; align-items: flex-end !important; }
  .modal-box {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =====================================================
   FORM — comfortable touch targets
   ===================================================== */
.form-input {
  min-height: 48px;
  font-size: 16px !important; /* prevents iOS zoom on focus */
}

select.form-input { font-size: 16px !important; }

/* =====================================================
   MISC COMPONENT FIXES
   ===================================================== */

/* Sticky course filter bar */
@media (max-width: 640px) {
  section[style*="position:sticky"] {
    top: 60px !important;
    padding: 12px 0 !important;
  }
  #filter-bar { gap: 6px !important; padding: 0 12px !important; }
  #filter-bar button { font-size: 0.58rem !important; padding: 7px 12px !important; }
}

/* Marquee — slower on mobile */
@media (max-width: 640px) {
  .marquee-track { animation-duration: 28s !important; gap: 20px !important; }
}

/* Company pills in marquee */
@media (max-width: 640px) {
  .company-pill { padding: 8px 14px !important; font-size: 0.6rem !important; gap: 5px !important; }
}

/* Process steps — remove left num on xs */
@media (max-width: 375px) {
  .process-step { padding-left: 0 !important; }
  .process-step::before { position: static !important; margin-bottom: 10px !important; display: inline-flex !important; }
}

/* Timeline — thinner on mobile */
@media (max-width: 480px) {
  .timeline-item { padding-left: 34px !important; padding-bottom: 28px !important; }
  .timeline-dot  { width: 18px !important; height: 18px !important; left: 0 !important; }
  .timeline-item::before { left: 8px !important; }
}

/* Section margin-bottom reductions */
@media (max-width: 768px) {
  [style*="margin-bottom:60px"] { margin-bottom: 36px !important; }
  [style*="margin-bottom:50px"] { margin-bottom: 28px !important; }
  [style*="margin-bottom:40px"] { margin-bottom: 24px !important; }
  [style*="margin-bottom:32px"] { margin-bottom: 20px !important; }
  [style*="margin-top:48px"]    { margin-top: 28px !important; }
}

/* Large gap between sections on about page */
@media (max-width: 768px) {
  div[style*="gap:80px"] { gap: 36px !important; }
  div[style*="gap:60px"] { gap: 28px !important; }
  div[style*="gap:40px"] { gap: 20px !important; }
}

/* =====================================================
   PRINT — clean single-column
   ===================================================== */
@media print {
  .navbar, .whatsapp-fab, .back-top, .hamburger, .mobile-menu { display: none !important; }
  body { font-size: 12pt; }
  .wrap { max-width: 100%; padding: 0; }
  section { padding: 24pt 0 !important; }
  .grid-hero, .grid-contact, .grid-2col, .grid-3col, .grid-4col,
  #featured-courses, #courses-grid {
    grid-template-columns: 1fr !important;
  }
}