/* ═══════════════════════════════════════════════════
   KnowledgePitch — responsive.css
   Fixes ALL inline grid layouts and per-page mobile
   issues across every page of the site.
   Loaded after main.css + nav-programs.css
═══════════════════════════════════════════════════ */

/* ── Map embed placeholder ── */
.map-embed {
  height: 160px !important;
}
@media (max-width: 768px) {
  .map-embed { height: 90px !important; }
}

/* ── Page hero (inner pages) ── */
.page-hero { padding: 5rem 0 4rem; }
@media (max-width: 768px) {
  .page-hero { padding: 3.5rem 0 2.5rem !important; }
  .page-hero h1 { font-size: clamp(1.7rem, 6vw, 2.4rem) !important; }
  .page-hero p { font-size: 0.95rem !important; }
  .trust-signals { gap: 0.75rem !important; flex-wrap: wrap; justify-content: center; }
}

/* ════════════════════════════════
   ABOUT PAGE GRIDS
════════════════════════════════ */
/* 5-col stats → 3-col → 2-col */
.about-stats-grid,
[class*="about"] [style*="repeat(5,1fr)"],
[style*="repeat(5,1fr)"] {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
}
@media (max-width: 900px) {
  [style*="repeat(5,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 600px) {
  [style*="repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 4-col grids → 2-col → 1-col */
[style*="repeat(4,1fr)"] {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 900px) {
  [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  [style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* 3-col grids → 2-col → 1-col */
[style*="repeat(3,1fr)"],
[style*="1fr 1fr 1fr"] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 900px) {
  [style*="repeat(3,1fr)"],
  [style*="1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 540px) {
  [style*="repeat(3,1fr)"],
  [style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* 2-col grids → 1-col */
[style*="repeat(2,1fr)"],
[style*="1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 600px) {
  [style*="repeat(2,1fr)"],
  [style*="1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
  }
}

/* Programs eco grid (index.html inline style) */
.programs-eco-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 900px) {
  .programs-eco-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .programs-eco-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════
   PRICING PAGE
════════════════════════════════ */
/* auto-fit minmax grids — force 1 col on small screens */
.pricing-tier-grid,
.pricing-explainer-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
}
.module-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important;
}
.range-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
}
.lab-type-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
}
@media (max-width: 540px) {
  .pricing-tier-grid,
  .module-grid,
  .range-grid,
  .lab-type-grid,
  .pricing-explainer-grid { grid-template-columns: 1fr !important; }

  /* Pricing cards: fix badge clipping */
  .tier-card { margin-top: 1rem; }
  .tier-badge { font-size: 0.65rem; padding: 0.2rem 0.6rem; }

  /* Program header wrap */
  .program-header { flex-wrap: wrap; gap: 0.75rem; }
  .program-badge { font-size: 0.72rem; }
}

/* ════════════════════════════════
   BLOG PAGE
════════════════════════════════ */
.blog-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 968px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .featured-post { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════
   CONTACT PAGE
════════════════════════════════ */
.contact-grid {
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════
   CURRICULUM PAGE
════════════════════════════════ */
.cb-body {
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 768px) {
  .cb-body { grid-template-columns: 1fr !important; }
  .cb-header { flex-direction: column; gap: 1rem; padding: 1.5rem !important; }
  .cb-body { padding: 1.5rem !important; }
}

/* ════════════════════════════════
   OFFLINE ROBOTICS PAGE
════════════════════════════════ */
.module-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 600px) {
  .module-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════
   LOCATIONS PAGE — inline 4-col grid
════════════════════════════════ */
@media (max-width: 768px) {
  .lab-hero-card { grid-template-columns: 1fr !important; }
  .lab-hero-img { min-height: 220px !important; }
}
@media (max-width: 480px) {
  .lab-hero-img { min-height: 180px !important; }
}

/* ════════════════════════════════
   GLOBAL: prevent any grid from
   overflowing on mobile
════════════════════════════════ */
@media (max-width: 768px) {
  /* Any inline-styled grid gets capped to screen width */
  [style*="display:grid"],
  [style*="display: grid"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Ensure no section causes horizontal scroll */
  section, .section, .container {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Tighten section vertical padding */
  .section { padding: 3rem 0 !important; }
  .program-pricing-section { margin: 1.5rem 0 !important; }

  /* Price cards: prevent scale overflow */
  .price-card { padding: 1.5rem !important; }
  .price-card.featured { transform: none !important; }

  /* Location map embed */
  .map-embed { height: 80px !important; }

  /* Teacher training / advanced program inline grids */
  .about-mission-grid,
  .timeline-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .section { padding: 2.5rem 0 !important; }
  .container { padding: 0 0.875rem !important; }

  /* Trust signals wrap */
  .trust-signals { flex-direction: column; align-items: center; gap: 0.6rem !important; }

  /* Breadcrumb */
  .breadcrumb { font-size: 0.78rem; flex-wrap: wrap; justify-content: center; }

  /* Page hero tighter */
  .page-hero { padding: 2.75rem 0 2rem !important; }

  /* Program header vertical stack */
  .program-header { align-items: flex-start !important; }
  .program-icon { width: 40px !important; height: 40px !important; font-size: 1rem !important; }
}

/* ════════════════════════════════
   PRICING PAGE: force single col
   on phones — overrides minmax()
════════════════════════════════ */
@media (max-width: 600px) {
  .pricing-tier-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  /* Badge that sits above the card */
  .tier-badge {
    top: -10px;
    font-size: 0.62rem;
    padding: 0.18rem 0.5rem;
  }
  /* Tighten card padding on small phones */
  .tier-card { padding: 1.25rem !important; }
  .tier-price { font-size: 1.75rem !important; }

  /* Module grid single col */
  .module-grid { grid-template-columns: 1fr !important; }
  .range-grid { grid-template-columns: 1fr !important; }
  .lab-type-grid { grid-template-columns: 1fr !important; }
  .pricing-explainer-grid { grid-template-columns: 1fr !important; }

  /* Program section header wraps */
  .program-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  /* Makerspitch section */
  .makerspitch-section { padding: 1.5rem !important; }
}

/* ════════════════════════════════
   NAV: prevent Contact overlapping
   phone number at medium widths
════════════════════════════════ */
@media (max-width: 1280px) {
  .nav-phone { display: none !important; }
}

/* ════════════════════════════════
   INDEX PAGE — Mobile fixes
   (for grids defined in inline
   <style> or with class selectors
   not caught by attribute selectors)
════════════════════════════════ */

/* Locations note grid (2-col inline in locations section) */
.loc-note-grid {
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 600px) {
  .loc-note-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Hero form card - don't let it overflow on mobile */
@media (max-width: 768px) {
  .hero-form-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }
  .hero-badge, .hero-btns, .hero-stats, .hero-pills, .hero-sub {
    justify-content: center;
  }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn { width: 100%; justify-content: center; }
}

/* Trust bar — always wrap on mobile */
@media (max-width: 768px) {
  .trust-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .trust-divider { display: none; }
  .trust-item { padding: 0.3rem 0; }
}

/* Brands section */
@media (max-width: 640px) {
  .brands-inner { grid-template-columns: 1fr !important; }
  .brand-block:first-child { border-right: none !important; border-bottom: 2px solid var(--gray-200); }
  .brand-block { padding: 1.5rem 1.25rem; }
}

/* MakersPitch callout CTA buttons */
@media (max-width: 540px) {
  .mp-callout-cta { flex-direction: column; }
  .mp-callout-cta .btn { width: 100%; justify-content: center; }
  .mp-callout { padding: 3rem 0; }
}

/* MakersPitch prog card - reset span on mobile */
@media (max-width: 540px) {
  .prog-card.mp-card { grid-column: span 1 !important; }
}

/* Location card actions wrap on small phones */
@media (max-width: 400px) {
  .loc-actions { flex-direction: column; }
  .loc-actions .btn { width: 100%; justify-content: center; }
}

/* Nav CTA button — prevent overflow on tiny screens */
@media (max-width: 380px) {
  .nav-cta .btn-accent {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.6rem !important;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Gallery grid */
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
  .gallery-item, .gallery-item:nth-child(1) { height: 200px !important; grid-column: span 1 !important; grid-row: span 1 !important; }
}

/* Final CTA buttons */
@media (max-width: 540px) {
  .final-cta-btns { flex-direction: column; align-items: center; }
  .final-cta-btns .btn { width: 100%; max-width: 340px; justify-content: center; }
}