/* ────────────────────────────────────────────────────────────
   Responsive layer · loaded LAST so it wins over page CSS.

   ONE breakpoint scale, shared by every stylesheet in this project:
     ≤ 400px    small phone       (extra tightening)
     ≤ 700px    phone             (1 column, compact)
     701–1024   tablet portrait   (2 columns)
     1025–1180  tablet landscape  (3 columns)
     ≤ 1080px   nav → burger      (set in styles.css, unchanged)
   Reuse these breakpoints for layout; the slideshow uses the requested 1048px tablet cutoff.

   Ported from SchoolWebV2 mobile.css, with site-specific adjustments:
     · The image-only slideshow uses 3:1 above 1048px, 2:1 at 701–1048px, and 4:3 on phones.
     · `.nav-right` joins the nav-hiding rule — it is a wrapper this
       site has and the design does not. styles.css already hides it
       at ≤1080; repeating it here keeps the rule self-explanatory.
     · The `.fee-*` rules are inert here: /tuition renders
       `.tuition-page`, not the design's fee-table markup. Kept so
       this file stays byte-comparable with the design for future syncs.
   ──────────────────────────────────────────────────────────── */

/* ── 0. Overflow guard · applies at ALL widths ─────────────────
   The page must never scroll sideways. `clip` (not `hidden`) so
   position:sticky on the nav keeps working. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

img, svg, video, iframe, canvas, table { max-width: 100%; }

/* Long Thai strings and URLs are the usual blowout source */
h1, h2, h3, h4, h5, p, li, td, th, dd, dt, figcaption, blockquote,
.hero-title, .section-title, .cta-title, .cd-h1,
.page-hero h1, .art-top h1, .cc-name, .port-t, .hl-t, .faq-q-text {
  overflow-wrap: break-word;
}

/* Grid / flex children default to min-content width, which is what
   actually forces the page wide. Floor them all at 0. */
.mag-item a > *, .cal-item > *, .award-row > *, .contact-row > *,
.vcard-card > *, .policy-block li > *, .faq-q > *, .philo-row > *,
.sum-row > *, .policy-contact dl > div > *, .hero-trust-line > *,
.partner-card > *, .meta-card > *, .step-card > *,
.leader-card > *, .staff-card > *, .fld > *, .choice > * { min-width: 0; }

/* [SITE] Slideshow tablet frame (701 – 1048px). */
@media (min-width: 701px) and (max-width: 1048px) {
  .hero.hero-slideshow,
  .about-story .about-opening { --hss-aspect-ratio: 2 / 1; }
}

/* ── Tablet landscape (1025 – 1180px) ─────────────────────── */
@media (min-width: 1025px) and (max-width: 1180px) {
  .container, .container-narrow { padding-left: 32px; padding-right: 32px; }
  .section { padding: 88px 0; }
}

/* ── Tablet portrait (701 – 1024px) ───────────────────────── */
@media (min-width: 701px) and (max-width: 1024px) {
  .container,
  .container-narrow { padding-left: 32px !important; padding-right: 32px !important; }

  .hero .container,
  .page-hero .container { padding-left: 40px !important; padding-right: 40px !important; }

  .hero-inner { grid-template-columns: 1fr 0.8fr !important; gap: 40px !important; }
  .hero-title { font-size: clamp(36px, 5vw, 52px) !important; }
  .cd-h1 { font-size: clamp(36px, 5vw, 52px) !important; }
  .hero-sub { font-size: 17px !important; }
  .hero-crest { max-width: 360px !important; }

  /* 5 stats: 3-across left an orphan row of 2 — keep it even */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .highlights-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #highlights .highlights-grid > *:first-child { grid-column: 1 / -1 !important; }
  .leader-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .footer-grid > .footer-brand { grid-column: 1 / -1 !important; }

  .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .about-copy { max-width: 100% !important; }

  .apply-grid { grid-template-columns: 1.5fr 1fr !important; }
  .contact-grid { grid-template-columns: 1fr 1.2fr !important; }
  .faq-grid { grid-template-columns: 0.9fr 1.3fr !important; gap: 48px !important; }

  .section { padding: 80px 0 !important; }
  .section-title { font-size: clamp(30px, 4vw, 40px) !important; }

  /* Cinematic timeline: full-bleed cards were sized off 100vw */
  .cine-tl-card { padding: 0 40px !important; grid-template-columns: 1fr !important; gap: 32px !important; }
  .cine-tl-header { padding: 0 40px !important; }
}

/* ── Phone (≤ 700px) ──────────────────────────────────────── */
@media (max-width: 700px) {

  /* 1. Gutters */
  .container,
  .container-narrow { padding-left: 20px; padding-right: 20px; }
  .hero .container,
  .page-hero .container { padding-left: 20px; padding-right: 20px; }

  /* 2. Media */
  img, picture, video { max-width: 100%; height: auto; display: block; }
  .hl-img img, .cc-photo img, .port-card img, .port-big img,
  .testi-avatar img, .leader-card img, .cd-related-img img,
  .cine-bg-img, .cine-tl-img img { width: 100%; height: 100%; object-fit: cover; }

  /* 3. Nav — [SITE] .nav-right added; it wraps the CTA on this site only */
  .nav { box-shadow: 0 4px 14px -8px rgba(11,26,19,0.1); }
  .nav-inner { height: 64px; gap: 12px; }
  .brand img { height: 38px; width: 38px; }
  .brand-text { max-width: calc(100% - 120px); min-width: 0; }
  .brand-th { font-size: 14px; }
  .brand-en { font-size: 10px; }
  .nav-links, .nav-cta, .nav-right { display: none !important; }
  .nav-burger {
    display: inline-flex !important;
    width: 44px; height: 44px; border-radius: 12px;
    align-items: center; justify-content: center;
    color: var(--ink-900); background: var(--green-50);
    border: 1px solid var(--green-200);
    cursor: pointer; z-index: 5; position: relative; pointer-events: auto;
  }
  .nav-burger:active { background: var(--green-100); }
  .mnav-scrim { z-index: 110 !important; }
  .mnav-drawer { z-index: 111 !important; }
  body.has-mobile-nav { overflow: hidden; }

  /* 4. Section rhythm — type toned down a step */
  .section { padding: 52px 0; }
  .section-sm { padding: 36px 0; }
  .section-title { font-size: clamp(24px, 6.4vw, 32px); }
  .section-sub { font-size: 15px; margin-top: 12px; }
  .section-head { margin-bottom: 28px; }

  /* 5. Tap targets ≥ 44px */
  .btn { padding: 13px 20px; font-size: 15px; min-height: 44px; }
  .btn-lg { padding: 15px 24px; font-size: 15px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { flex: 1 1 auto; min-width: 0; justify-content: center; }

  /* 6. Hero */
  .hero { padding: 60px 0 40px; min-height: auto; }
  .hero-inner { gap: 28px; grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(27px, 7.4vw, 36px); margin: 16px 0 14px; line-height: 1.15; }
  .cd-h1 { font-size: clamp(27px, 7.4vw, 36px) !important; margin: 16px 0 14px !important; line-height: 1.15 !important; }
  .hero-sub { font-size: 15px; margin: 0 0 22px; }
  .hero-trust { gap: 12px; margin-top: 22px; }
  .hero-trust-line strong { font-size: 16px; }
  .hero-eyebrow { padding: 6px 13px; font-size: 12px; }
  .hero-crest { max-width: 200px; }
  .crest-badge { font-size: 11px; padding: 5px 9px; }
  .crest-badge.b1 { top: 0; left: 0; }
  .crest-badge.b4 { bottom: -2%; right: 0; }
  .hero-scroll { display: none; }

  /* [SITE] Landscape frame on phones; images fill it with a proportional crop. */
  .hero.hero-slideshow,
  .about-story .about-opening { --hss-aspect-ratio: 4 / 3; }

  .hero-video-layout { padding: 60px 0 40px; }
  .hero-video-card { max-width: 100%; }

  /* 7. Stats — 5 items in 2 columns leaves an orphan on the last row;
     span it full width so the block reads as a grid, not a stray card. */
  .stats-bar { padding: 32px 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; margin-bottom: 28px; }
  .stats-grid > .stat-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-item { border-right: none; padding: 0; }
  .stat-v { font-size: 27px; }
  .stat-l { font-size: 12px; line-height: 1.4; margin-top: 5px; }
  .marquee { padding-top: 26px; }
  .marquee-item { font-size: 13px; }
  .marquee-track { gap: 32px; }

  /* 8. Courses */
  .course-grid { grid-template-columns: 1fr; gap: 14px; }
  .course-filters { gap: 6px; }
  .chip { padding: 8px 13px; font-size: 13px; }
  .cc-name { font-size: 16px; }
  .cc-photo { aspect-ratio: 16/9; }

  /* 9. About / philosophy */
  .about-grid { gap: 32px; }
  .about-stats { gap: 18px; margin: 24px 0; padding: 20px 0; }
  .about-stats strong { font-size: 26px; }
  .philo-row { padding: 18px; gap: 14px; }
  .philo-icon { width: 40px; height: 40px; }
  .philo-t { font-size: 15px; }
  .philo-d { font-size: 14px; }
  .philo-num { font-size: 26px; }

  /* 10. Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; gap: 16px; }
  .port-t { font-size: 15px; padding-right: 28px; }
  .port-meta { padding: 18px; }

  /* 11. Testimonials */
  .testi-card { padding: 24px 20px; }
  .testi-text { font-size: 15px; margin: 18px 0 22px; }
  .testi-avatar { width: 44px; height: 44px; font-size: 18px; }
  .testi-name { font-size: 15px; }
  .testi-dept { font-size: 13px; }

  /* 12. FAQ */
  .faq-grid { gap: 32px; }
  .faq-side { position: static; }
  .faq-q { padding: 18px; gap: 12px; grid-template-columns: auto 1fr auto; }
  .faq-q-text { font-size: 15px; }
  .faq-num { font-size: 12px; padding: 3px 8px; }
  .faq-a-inner { padding: 0 18px 18px 18px; font-size: 14px; }

  /* 13. CTA */
  .cta-banner { padding: 44px 20px; border-radius: 18px; }
  .cta-title { font-size: clamp(24px, 6.4vw, 32px); }
  .cta-sub { font-size: 15px; margin-bottom: 26px; }
  .cta-actions .btn { width: 100%; }

  /* 14. Highlights */
  .highlights-grid { grid-template-columns: 1fr; gap: 16px; }
  .hl-t { font-size: 15px; }
  .hl-body { padding: 20px; }

  /* 15. Footer */
  .footer { padding: 52px 0 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; font-size: 12px; padding-top: 20px; }
  .footer-brand p { max-width: 100%; }

  /* 16. Sticky FAB */
  .sticky-bubble { right: 14px; bottom: 14px; }
  /* The timed teaser overlaps course-page CTAs on short phone viewports.
     Keep the contact trigger available without covering page actions. */
  .bubble-teaser { display: none !important; }
  .fab-label { opacity: 1 !important; transform: translateX(0) !important; pointer-events: auto !important; }
  .bubble-fab.primary {
    width: min(240px, calc(100vw - 40px));
    max-width: none;
    justify-content: space-between;
    padding-left: 22px;
  }
  .bubble-fab.primary .fab-label strong { font-size: 13.5px; }
  .bubble-fab.primary .fab-label em { font-size: 12px; }

  /* 17. Subpage hero */
  .page-hero { padding: 76px 0 48px; }
  .page-hero h1 { font-size: clamp(25px, 7vw, 34px); }
  .page-hero p { font-size: 15px; margin-top: 14px; }
  .page-hero .crumbs { font-size: 12px; margin-bottom: 18px; }

  /* 18. Apply form */
  .apply-grid { grid-template-columns: 1fr; gap: 24px; }
  .steps { gap: 6px; margin-bottom: 24px; }
  .step { padding: 12px 14px; }
  .step .label { font-size: 12px; }
  .form-card { padding: 22px 18px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .form-actions { flex-direction: column-reverse; gap: 10px; }
  .form-actions .btn { width: 100%; }
  .apply-side { display: flex; flex-direction: column; gap: 14px; }

  /* 19. Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-row { padding: 18px; gap: 14px; grid-template-columns: 44px 1fr; }
  .contact-row .icon { width: 40px; height: 40px; }
  .contact-map, .contact-map iframe { min-height: 320px; }

  /* 20. News list */
  .news-filters { gap: 14px; margin-bottom: 26px; }
  .mag-lead-body { padding: 22px 18px; }
  .mag-item-tx { padding: 16px 18px; }
  .mag-item-tx h3 { font-size: 16px; }

  /* 21. Article */
  .art-top h1 { font-size: clamp(24px, 6.6vw, 32px); }
  .art-body p { font-size: 16px; line-height: 1.85; }
  .art-lead { font-size: 17px !important; padding-left: 14px; }
  .art-gallery { grid-template-columns: 1fr; }

  /* 22. Tuition: the fee table is the one place a sideways swipe is OK.
     [SITE] inert — /tuition renders .tuition-page, not this markup. */
  .fee-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fee-table { min-width: 100%; }
  .fee-table th { font-size: 11px; }
  .fee-table td { font-size: 14px; }
  .fee-total td { font-size: 16px; }
  .fee-head { padding: 18px; }
  .fee-head h3 { font-size: 17px; }

  /* 23. Policy */
  .policy-block { padding: 22px 18px; }
  .policy-block h2 { font-size: 16.5px; }
  .policy-block li { font-size: 14.5px; }

  /* 24. Admission wizard */
  .lay-a, .lay-c { grid-template-columns: 1fr; }
  .choices.c3, .choices.c2, .major-grid, .fgrid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .fld input, .fld select, .fld textarea { min-height: 44px; font-size: 16px; }

  /* 25. Tweaks panel must not squash the page */
  body[data-edit-mode-active] { padding-right: 0; }
}

/* ── Small phone (≤ 400px) ────────────────────────────────── */
@media (max-width: 400px) {
  .container, .container-narrow { padding-left: 15px; padding-right: 15px; }
  .hero .container, .page-hero .container { padding-left: 15px; padding-right: 15px; }
  .hero-title, .cd-h1 { font-size: clamp(24px, 7.6vw, 30px); }
  .section-title, .cta-title { font-size: clamp(22px, 7vw, 27px); }
  .nav-inner { height: 60px; }
  .brand img { height: 34px; width: 34px; }
  .brand-th { font-size: 14px; }
  .brand-en { display: none; }
  .stats-grid { gap: 14px 10px; }
  .stat-v { font-size: 24px; }
  .stat-l { font-size: 11.5px; }
  .mag-item a { grid-template-columns: 100px 1fr; }
  .mag-item-tx { padding: 14px 15px; }
  .cal-item { grid-template-columns: 56px 1fr; }
  .award-row { grid-template-columns: 42px 1fr; padding: 15px; }
  .contact-row { grid-template-columns: 40px 1fr; padding: 15px; gap: 12px; }
}

/* ── Cinematic pages on phone ─────────────────────────────── */
@media (max-width: 700px) {
  .cine-main .nav-inner { background: rgba(0,0,0,0.6); }
  .cine-main .nav-burger { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: white; }
  .cine-main .nav .brand-th { color: white; }
  .cine-main .nav .brand-en { color: rgba(255,255,255,0.6); }
  .cine-tl-card { padding: 0 20px; grid-template-columns: 1fr; gap: 24px; }
  .cine-tl-header { padding: 0 20px; }
  .cine-vision-list li { white-space: normal; }
}