/* ==========================================================================
   EDU POINT — RESPONSIVE
   Breakpoints: 1280 (laptop) / 1024 (tablet-l) / 768 (tablet-p) / 480 (mobile)
   ========================================================================== */

/* ---------- 1280px — Laptop ---------- */
@media (max-width: 1280px) {
  .infra-grid { grid-template-rows: repeat(2, 190px); }
  .hero-visual { height: 480px; }
  .learning-float-cards { display: none; }
}

/* ---------- 1024px — Tablet Landscape ---------- */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .hamburger { display: flex; }

  .hero .container,
  .editorial-split,
  .course-feature,
  .timeline-item,
  .benefits-layout,
  .career-panel,
  .course-hero .container,
  .contact-layout,
  .overview-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Grid items default to min-width:auto, which can refuse to shrink below
     their content's intrinsic width and silently overflow the viewport on
     narrow screens even though the track above says 1fr. Force them to
     actually respect the column width. */
  .hero .container > *,
  .editorial-split > *,
  .course-feature > *,
  .timeline-item > *,
  .benefits-layout > *,
  .career-panel > *,
  .course-hero .container > *,
  .contact-layout > *,
  .overview-grid > *,
  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > * {
    min-width: 0;
  }

  .hero .container { text-align: left; gap: var(--space-lg); }
  .hero-visual { height: 420px; order: -1; }

  .editorial-split { gap: var(--space-lg); }
  .editorial-split.reverse { direction: ltr; }
  .editorial-split .collage { order: -1; }

  .course-feature.reverse .course-feature-media,
  .course-feature.reverse .course-feature-copy { order: initial; }
  .course-feature-media { order: -1; height: 360px; }

  .timeline-item.reverse .timeline-media,
  .timeline-item.reverse .timeline-copy { order: initial; }
  .timeline-media { order: -1; }

  .stats-strip .container { gap: var(--space-xs); }
  .infra-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 200px); }
  .infra-item--wide { grid-column: span 1; }

  .career-panel { padding: var(--space-xl); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }

  .mega-menu-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .masonry-grid { column-count: 2; }

  .course-card-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-strip-row { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-testimonial { grid-template-columns: 1fr; }
  .featured-testimonial-media { height: 320px; }
  .mv-split { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-connector { display: none; }
  .course-hero-media { order: -1; }
}

/* ---------- 768px — Tablet Portrait ---------- */
@media (max-width: 768px) {
  /* Header: logo + hamburger only. The inline "Apply Now" button is dropped
     here (it duplicates the large CTA already inside the mobile menu) so the
     header never runs out of room on narrow phones. */
  .logo-link img { height: 40px; }
  .header-actions { gap: var(--space-sm); }
  .header-actions .btn { display: none; }
  .header-actions .header-msu-logo { display: none; }
  .header-msu-logo-mobile { display: flex; align-items: center; }
  .header-msu-logo-mobile img { height: 32px; width: auto; display: block; border-radius: 8px; }
  .site-header { padding-block: 1rem; }
  .site-header.is-scrolled, .site-header.is-dark.is-scrolled { padding-block: 0.7rem; }

  .section { padding-block: var(--space-lg); }
  .section-lg { padding-block: var(--space-lg); }
  .section-tight { padding-block: var(--space-md); }

  .hero { padding-top: 6.5rem; min-height: auto; padding-bottom: var(--space-xl); }
  .hero-heading { font-size: var(--fs-display-lg); }
  .hero-actions { flex-direction: column; align-items: stretch; margin-bottom: var(--space-lg); }
  .hero-actions .btn { width: 100%; }
  .hero-stats { gap: var(--space-md); }
  .hero-visual { height: 320px; }
  .hero-scroll-cue { display: none; }
  .floating-card { display: none; }

  .section-head { margin-bottom: var(--space-lg); }
  .section-head-row { flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-lg); }

  .collage { height: 340px; gap: var(--space-xs); }
  .floating-stat-card { max-width: 220px; padding: var(--space-md); bottom: -6%; left: -4%; }
  .editorial-copy .btn { margin-top: var(--space-md); }

  .mv-card, .contact-form-card, .contact-info-card { padding: var(--space-lg); }
  .process-step { padding: var(--space-md); }

  .course-cta-banner, .admissions-cta { flex-direction: column; text-align: center; padding: var(--space-xl); }
  .course-cta-banner { flex-direction: column; align-items: center; text-align: center; padding: var(--space-lg); }
  .course-cta-banner .btn { margin-top: var(--space-md); }
  .admissions-cta { padding: var(--space-lg); }
  .career-panel { padding: var(--space-lg); }
  .career-panel-head { max-width: none; margin-inline: auto; }
  .career-role-list { grid-template-columns: repeat(2, 1fr); }

  .learning-exp { min-height: 380px; }
  .learning-exp-content { padding: var(--space-lg); }

  .infra-grid { grid-template-columns: 1fr; grid-template-rows: repeat(6, 200px); gap: var(--space-sm); }
  .infra-item--wide, .infra-item--tall { grid-column: span 1; grid-row: span 1; }

  .stats-strip .container { padding-block: var(--space-lg); }
  .benefits-layout { gap: var(--space-md); }
  .benefits-layout .section-head { text-align: center; margin-inline: auto; }
  .benefit-row { padding-block: var(--space-md); gap: var(--space-md); }

  .footer-top { grid-template-columns: 1fr; gap: var(--space-xl); padding-bottom: var(--space-xl); }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-sm); }
  .footer-recognition { gap: var(--space-md); padding-block: var(--space-md); }
  .site-footer { padding-top: var(--space-xl); }

  .masonry-grid { column-count: 2; }

  .page-hero { padding-top: 7rem; padding-bottom: var(--space-xl); }
  .course-hero { padding-top: 6.5rem; padding-bottom: var(--space-lg); }
  .course-hero .container { gap: var(--space-lg); }
  .admission-form-card { padding: var(--space-md); }
  .admission-form-card .form-control { padding: 0.65rem 0.9rem; font-size: 0.88rem; }
  .admission-form-card .form-label { font-size: 0.72rem; }
  .admission-form-card textarea.form-control { min-height: 54px; }

  /* .fee-table has no wrapper in the markup, so make the table itself the
     scroll container: it stays block-level (enabling overflow-x) while its
     row/cell descendants keep their table display, preserving the layout. */
  .fee-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fee-table th, .fee-table td { white-space: nowrap; }
}

/* ---------- 480px — Mobile ---------- */
@media (max-width: 480px) {
  :root { --container-pad: 1.25rem; --fs-lead: 0.8125rem; }
  body { font-size: 0.8125rem; }

  .floating-contact { right: var(--space-md); bottom: var(--space-md); gap: var(--space-xs); }
  .floating-btn { width: 46px; height: 46px; font-size: 1.2rem; }

  .section { padding-block: var(--space-md); }
  .section-lg { padding-block: var(--space-md); }
  .section-head { margin-bottom: var(--space-md); }
  .editorial-split { gap: var(--space-md); }
  .cert-strip-row { grid-template-columns: 1fr; gap: var(--space-sm); }
  .partner-modal-box { padding: var(--space-lg); }
  .partner-modal-title { font-size: 1.4rem; padding-right: var(--space-xl); }
  .msu-highlight-card { padding: var(--space-lg); }
  .msu-highlight-head h2 { font-size: 1.3rem; }
  .msu-body ul { columns: 1; }
  .msu-body p, .msu-body li { font-size: 0.75rem; }
  .cert-strip-item img { height: 160px; }
  .cert-strip-item span:not(.cert-zoom-icon) { font-size: 0.7rem; padding: var(--space-3xs) var(--space-2xs); }

  .hero { padding-top: 5.75rem; padding-bottom: var(--space-lg); }
  .hero .container { gap: var(--space-md); }
  .hero-copy .eyebrow { margin-bottom: 15px; }
  .hero-heading { font-size: clamp(2.1rem, 9vw, 2.6rem); margin-bottom: 15px; }
  .hero-lead { margin-bottom: 15px; }
  .hero-copy .hero-actions { margin-bottom: 15px; }
  .hero-stats { gap: var(--space-sm); }
  .hero-stat:not(:first-child) { padding-left: var(--space-sm); }
  .hero-stat .stat-label { font-size: 0.6rem; letter-spacing: 0; }
  .hero-visual { height: 240px; }

  .collage { height: 260px; gap: var(--space-2xs); }
  .floating-stat-card { display: none; }

  .learning-exp { min-height: 300px; }
  .learning-exp img { display: none; }

  .stats-strip .container { gap: var(--space-3xs); padding-block: var(--space-md); }
  .stat-block .stat-caption { font-size: 0.62rem; letter-spacing: 0; }
  .career-role-list { grid-template-columns: 1fr; }
  .masonry-grid { column-count: 1; }
  .gallery-filters { gap: var(--space-2xs); }

  .admission-form-card { padding: 1.25rem; }
  .admission-form-card::before { height: 3px; }
  .admission-form-card .form-control { padding: 0.6rem 0.8rem; font-size: 0.85rem; }
  .admission-form-card .form-label { font-size: 0.7rem; margin-bottom: 0.2rem; }
  .admission-form-card textarea.form-control { min-height: 48px; }
  .admission-form-card form { gap: var(--space-2xs); }
  .testimonial-card { flex-basis: 88vw; }

  .timeline-number { font-size: 3.4rem; }
  .error-code { font-size: 5rem; }

  .footer-newsletter form { flex-direction: column; }
  .footer-newsletter button { width: 100%; height: 46px; }

  .course-card-grid, .team-grid, .process-steps, .testimonial-grid { grid-template-columns: 1fr; }
  .featured-testimonial { grid-template-columns: 1fr; padding: var(--space-lg); }
  .featured-testimonial-media { height: 260px; }
  .fee-table { font-size: var(--fs-small); }
  .fee-table th, .fee-table td { padding: var(--space-sm) var(--space-md); }

  .page-hero { padding-top: 6.5rem; }
  .course-hero { padding-top: 6.5rem; padding-bottom: var(--space-md); }
  .course-hero-highlights { grid-template-columns: 1fr; gap: var(--space-sm); }
  .course-hero-media { height: 200px; margin-top: var(--space-md); }
}