/* JLI Website responsive hardening pass - 320px to large desktop */
html, body, #app { width:100%; max-width:100%; min-width:0; }
html { overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
img, svg, video, canvas, picture { max-width:100%; height:auto; }
iframe { max-width:100%; }
.page-main, .page-main > *, main, section, article, aside, header, footer, nav, form, fieldset { min-width:0; }
.container { max-width:100%; }
input, select, textarea, button { max-width:100%; min-width:0; }
textarea { resize:vertical; }
pre, code { max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; }
a, p, span, strong, small, h1, h2, h3, h4, h5, h6, td, th, label { overflow-wrap:anywhere; }

/* Never let a data table push the entire viewport. */
:where(.fee-table-wrap,.course-table-wrap,.table-wrap,.table-responsive,.ma-body) { max-width:100%; }
:where(.fee-table-wrap,.course-table-wrap,.table-wrap,.table-responsive) {
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
:where(.fee-table,.course-table,.schedule-table,.ma-edu) { max-width:none; }

/* Flexible media/cards. */
:where(.card,.premium-card,.hero-card,.info-card,.feature-card,.program-card,.service-card,.asm-card,.ma-card,.mg-member-card) { min-width:0; }
:where(.grid,.row,[class*="-grid"],[class*=" grid-"]) > * { min-width:0; }

/* Header/nav safety. */
.brand, .brand-copy, .brand-title, .topbar-left, .topbar-right, .main-nav, .main-nav > *, .nav-group, .nav-group-btn { min-width:0; }
.brand img { max-width:100%; }

/* Long buttons/labels should wrap instead of overflow. */
:where(.btn,.jli-btn,.primary-btn,.secondary-btn,.action-btn,.hero-btn,.table-btn,.mg-btn,.footer-journey-btn) {
  max-width:100%;
  white-space:normal;
  text-align:center;
}

@media (max-width: 1180px) {
  .container { width:min(100% - 32px, 1180px) !important; }
  .page-main :where(h1) { line-height:1.12; }
  .footer-grid { gap:18px !important; }
}

@media (max-width: 991px) {
  .container { width:min(100% - 28px, 960px) !important; }

  /* Keep the desktop bar from forcing horizontal width. */
  .topbar-inner { gap:10px !important; }
  .topbar-left, .topbar-right { min-width:0; }

  .page-main :where([style*="grid-template-columns"]) { min-width:0; }
  .page-main :where(.hero-actions,.page-actions,.form-actions,.toolbar-actions,.footer-journey-actions) { flex-wrap:wrap; }

  /* Footer becomes a balanced 2-column tablet grid. */
  .premium-footer .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .premium-footer .footer-about-col { grid-column:1/-1; }
  .premium-footer .footer-journey-inner { align-items:flex-start !important; gap:20px !important; }
}

@media (max-width: 767px) {
  .container { width:min(100% - 22px, 720px) !important; }
  .page-main { width:100%; overflow-x:hidden; }
  .page-main :where(section) { max-width:100%; }

  /* Typography scales safely on phones. */
  .page-main :where(h1) { font-size:clamp(1.75rem,8vw,2.65rem) !important; }
  .page-main :where(h2) { font-size:clamp(1.3rem,5.8vw,2rem); }
  .page-main :where(h3) { font-size:clamp(1.05rem,4.7vw,1.45rem); }

  /* Forms: always single-column when screen is narrow. */
  .page-main :where(.form-grid,.fields-grid,.field-grid,.input-grid,.grid-2,.grid-3,.grid-4,.ma-info-grid) {
    grid-template-columns:1fr !important;
  }
  .page-main :where(.span-2,.span-3,.wide,.full) { grid-column:auto !important; }
  .page-main :where(input,select,textarea,button) { font-size:16px; }

  /* Common action bars stack cleanly. */
  .page-main :where(.hero-actions,.page-actions,.form-actions,.toolbar-actions,.submit-panel,.button-row,.action-row) {
    width:100%;
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .page-main :where(.hero-actions,.page-actions,.form-actions,.toolbar-actions,.submit-panel,.button-row,.action-row) > :where(a,button) {
    width:100%;
    justify-content:center;
  }

  /* Table sections stay usable without causing page overflow. */
  :where(.fee-table-wrap,.course-table-wrap,.table-wrap) {
    margin-inline:0;
    border-radius:16px !important;
  }
  :where(.fee-table,.course-table,.schedule-table) { font-size:.86rem; }
  :where(.fee-table,.course-table,.schedule-table) th,
  :where(.fee-table,.course-table,.schedule-table) td { padding:.78rem .8rem !important; }

  /* Full admission education table. */
  .ma-body:has(.ma-edu) { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ma-edu { min-width:720px; }

  /* Assessment / admission compactness. */
  .asm-page-wrap { width:min(100% - 16px,1540px) !important; }
  .asm-banner-metrics { width:100%; }
  .asm-metric { min-width:0 !important; flex:1 1 120px; }
  .summary-side { min-width:0; }

  /* Management responsive safety. */
  .mg-page .container { width:min(100% - 22px,1210px) !important; }
  .mg-member-card { min-width:0; }
  .mg-member-photo { max-width:min(150px,46vw); max-height:min(150px,46vw); }

  /* Footer phone layout. */
  .premium-footer .footer-grid { grid-template-columns:1fr !important; }
  .premium-footer .footer-about-col { grid-column:auto; }
  .premium-footer .footer-journey-inner { flex-direction:column !important; }
  .premium-footer .footer-journey-actions { width:100%; display:grid !important; grid-template-columns:1fr 1fr; }
  .premium-footer .footer-journey-btn { width:100%; justify-content:center; }
  .premium-footer .footer-bottom-inner { flex-direction:column !important; align-items:flex-start !important; gap:8px !important; }
  .premium-footer .footer-bottom-right { white-space:normal !important; }
}

@media (max-width: 540px) {
  .container { width:min(100% - 18px, 520px) !important; }

  /* Tighten cards and sections rather than shrinking content. */
  .page-main :where(.premium-card,.hero-card,.info-card,.feature-card,.service-card,.program-card,.ma-card,.asm-card) {
    border-radius:16px !important;
  }
  .page-main :where(.modal,.dialog,.assessment-success-modal,.logout-confirm-card) {
    width:min(100% - 20px, 460px) !important;
    max-width:calc(100vw - 20px) !important;
  }

  .asm-banner { padding:12px !important; }
  .asm-banner-metrics { display:grid !important; grid-template-columns:1fr 1fr; }
  .asm-metric, .asm-metric-wide { width:100%; min-width:0 !important; }

  .mg-hero h1 { font-size:clamp(2rem,11vw,2.72rem) !important; }
  .mg-leader-photo { height:260px !important; }
  .mg-state-card button { margin-left:0 !important; width:100%; }

  .premium-footer .footer-journey-actions { grid-template-columns:1fr; }
  .premium-footer .footer-card { padding:16px !important; }
}

@media (max-width: 380px) {
  .container { width:calc(100% - 14px) !important; }
  .page-main :where(h1) { font-size:1.78rem !important; }
  .page-main :where(button,a.btn,.jli-btn,.primary-btn,.secondary-btn) { min-height:42px; }
  .asm-banner-metrics { grid-template-columns:1fr; }
  .asm-stepbar { padding-inline:4px !important; }
  .mg-member-photo { width:118px !important; height:118px !important; }
}

@media (min-width: 1600px) {
  .container { width:min(100% - 64px,1680px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Last-mile phone hardening against legacy fixed-width page blocks. */
@media (max-width: 767px) {
  .page-main :where(div,section,article,aside,form,fieldset,header,nav) {
    min-width:0 !important;
    max-width:100% !important;
  }
  .page-main :where(input,select,textarea,button,a) { min-width:0 !important; }
  .page-main :where(img,svg,video,iframe) { max-width:100% !important; }

  .ssw-panel { padding:24px 16px 28px !important; border-radius:20px !important; }
  .visa-tab-row { gap:10px !important; }
  .visa-tab { min-width:0 !important; flex:1 1 150px; }
  .title-line { width:min(210px,70vw) !important; }
}

@media (max-width: 420px) {
  .ssw-hero { min-height:500px !important; }
  .ssw-hero-content { padding-inline:14px !important; }
  .visa-tab { flex-basis:100%; width:100%; }
}