/* ==============================================================
   AiDegreeOnline — mobile refinements
   Loaded after shell.css on every page.
   Targets ≤720px (phones) with some intermediate fixes at ≤1024.
   ============================================================== */

/* ======================================================
   ≤1024px — tablet / small laptop: tighten side padding
   ====================================================== */
@media (max-width: 1024px){
  .page{ padding: 0 24px 80px; }
  .nav{ padding: 14px 24px; }
}

/* ======================================================
   ≤720px — phone: the big reflow
   ====================================================== */
@media (max-width: 720px){

  /* ---- Nav ---- */
  .nav{ padding: 12px 16px; }
  .nav-logo .wordmark{ font-size: 15px; }
  .nav-logo .mark{ width: 24px; height: 24px; }
  .btn-pill{ padding: 8px 12px; font-size: 12px; }

  /* ---- Page container ---- */
  .page{ padding: 0 16px 64px; }

  /* ---- Crumb ---- */
  .crumb-row{ padding: 20px 0 0; font-size: 12px; flex-wrap: wrap; }

  /* ---- Eyebrow / page title / lead ---- */
  .eyebrow{ margin-top: 20px; font-size: 11px; padding: 5px 10px; }
  h1.page-title{
    font-size: clamp(44px, 13vw, 64px);
    margin-top: 16px;
    letter-spacing: -0.025em;
  }
  .lead{ font-size: 16px; margin-top: 16px; }

  /* ---- Stat ribbon: keep 2-col but smaller type & padding ---- */
  .ribbon{ margin-top: 28px; border-radius: 12px; }
  .ribbon .stat{ padding: 16px 14px; }
  .ribbon .stat .big{ font-size: 28px; }
  .ribbon .stat .lbl{ font-size: 12px; margin-top: 6px; line-height: 1.35; }

  /* ---- Section headers ---- */
  .sec-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 40px 0 16px;
  }
  .sec-head h2{ font-size: 24px; }

  /* ---- Controls: let items stack, scroll seg buttons if needed ---- */
  .controls{ gap: 10px; }
  .search{ flex: 1 1 100%; min-width: 0; }
  .search input{ padding: 12px 14px 12px 40px; font-size: 14px; }
  /* Make segmented button groups horizontally scrollable on mobile */
  .controls .seg{
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .controls .seg::-webkit-scrollbar{ display: none; }
  .seg button{ padding: 8px 12px; font-size: 12px; }

  /* ---- Program row (already reflowed at 860; tighten at 720) ---- */
  .prog-row{ grid-template-columns: 40px 1fr 32px; gap: 12px; padding: 16px 14px; }
  .prog-rank{ font-size: 22px; }
  .prog-main .p-name{ font-size: 17px; line-height: 1.2; }
  .prog-main .p-school{ font-size: 12px; }
  .prog-arrow{ width: 32px; height: 32px; }

  /* ---- Top pick ---- */
  .top-pick{ padding: 22px; gap: 24px; border-radius: 16px; }
  .top-pick h2{ font-size: 28px; }
  .top-pick::before{ font-size: 180px; top: -26px; right: -8px; }
  .top-pick .tp-blurb{ font-size: 14.5px; }
  .top-pick .tp-cta{ padding: 10px 16px; font-size: 13px; }
  .top-pick .tp-stats{ grid-template-columns: 1fr 1fr; }
  .top-pick .tp-stat{ padding: 12px 14px; }
  .top-pick .tp-stat .val{ font-size: 20px; }

  /* ---- CTA card ---- */
  .cta-card{ padding: 24px; gap: 20px; margin-top: 48px; border-radius: 16px; }
  .cta-card h3{ font-size: 26px; }
  .cta-card p{ font-size: 14px; }
  .cta-card .cta-btn{ padding: 12px 18px; font-size: 14px; }

  /* ---- Footer ---- */
  footer.site{ padding: 40px 16px 24px; }
  footer.site .fcols{ grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  footer.site h5{ font-size: 12px; }
  footer.site ul li{ font-size: 13px; }
  footer.site .legal{ flex-direction: column; gap: 6px; text-align: left; margin-top: 28px; }
  footer.site .desc{ font-size: 13px; }
}

/* ======================================================
   ≤480px — very narrow phones: halve footer to 1 col
   ====================================================== */
@media (max-width: 480px){
  footer.site .fcols{ grid-template-columns: 1fr; }
  h1.page-title{ font-size: clamp(38px, 12vw, 52px); }
}

/* ======================================================
   Page-specific: Program detail (program.html)
   ====================================================== */
@media (max-width: 900px){
  .prog-body{ grid-template-columns: 1fr !important; }
  .rail{ display: none; }  /* Sidebar CTA; main form in #request-form still accessible */
  .prog-header{ grid-template-columns: 1fr !important; gap: 16px !important; }
  .prog-header .emblem{ width: 56px !important; height: 56px !important; font-size: 18px !important; }
  .prog-header .actions{ flex-direction: row; gap: 10px; }
  .prog-header .cta-primary,
  .prog-header .cta-secondary{ flex: 1; padding: 12px 16px !important; font-size: 14px !important; }
}
@media (max-width: 720px){
  .prog-crumb{ font-size: 12px !important; padding-top: 20px !important; flex-wrap: wrap; }
  .prog-header h1{ font-size: 28px !important; line-height: 1.15 !important; }
  .prog-header .school-row{ font-size: 13px !important; flex-wrap: wrap; }
  .rank-pill{ font-size: 11px !important; padding: 4px 10px !important; }

  /* Facts strip — make it horizontally scrollable instead of reflowing.
     Note: !important is needed because program.html's own <style> sets
     overflow: hidden via shorthand, which would otherwise win source-order. */
  .facts-strip{
    grid-template-columns: repeat(6, minmax(130px, 1fr)) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 20px -16px 0 !important;
    padding: 0 16px !important;
    gap: 12px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .facts-strip::-webkit-scrollbar{ display: none; }
  .facts-strip .fact{
    padding: 14px 14px !important;
    border-radius: 12px !important;
    min-width: 130px;
  }
  .facts-strip .fact .val{ font-size: 18px !important; }
  .facts-strip .fact .lbl{ font-size: 11px !important; }
  .facts-strip .fact .sub{ font-size: 10.5px !important; }

  /* Anchor nav — horizontal scroll */
  .anchor-nav{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px !important;
    margin: 20px -16px !important;
    padding: 0 16px !important;
    flex-wrap: nowrap !important;
  }
  .anchor-nav::-webkit-scrollbar{ display: none; }
  .anchor-nav a{
    flex: 0 0 auto;
    font-size: 13px !important;
    padding: 10px 14px !important;
    white-space: nowrap;
  }

  /* Section blocks (content) */
  section.seg > h2{ font-size: 24px !important; }
  section.seg .lede{ font-size: 15px !important; }
  .seg-eye{ font-size: 10px !important; }

  /* Pros/cons grid */
  .pc-grid{ grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Related program cards */
  .related{ grid-template-columns: 1fr !important; }

  /* Faculty list */
  .fac-grid{ grid-template-columns: 1fr !important; }

  /* Cost breakdown */
  .cost-grid{ grid-template-columns: 1fr !important; }
  .cost-row{ flex-direction: column; align-items: flex-start !important; gap: 4px !important; }

  /* Curriculum */
  .curr-row{ grid-template-columns: 1fr !important; }

  /* Admissions */
  .adm-grid{ grid-template-columns: 1fr !important; }

  /* Outcomes */
  .out-grid{ grid-template-columns: 1fr !important; }

  /* Pitch card */
  .pitch-card{ font-size: 15px !important; padding: 18px !important; }
}

/* ======================================================
   Page-specific: State detail (state.html)
   ====================================================== */
@media (max-width: 900px){
  .s-hero{ grid-template-columns: 1fr !important; gap: 24px !important; }
  .s-map-wrap{ order: 2; max-width: 360px; margin: 0 auto; }
}
@media (max-width: 720px){
  .s-crumb{ font-size: 12px !important; padding-top: 20px !important; flex-wrap: wrap; }
  .s-hero h1{ font-size: 40px !important; line-height: 1.05 !important; }
  .s-hero .lede{ font-size: 15px !important; }
  .stat-strip{
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }
  .stat-strip .s{ padding: 14px 14px !important; }
  .stat-strip .val{ font-size: 20px !important; }
  .stat-strip .lbl{ font-size: 11px !important; }
  .stat-strip .sub{ font-size: 10.5px !important; }

  .s-anchors{
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    flex-wrap: nowrap !important;
    margin: 0 -16px !important;
    padding: 0 16px !important;
  }
  .s-anchors::-webkit-scrollbar{ display: none; }
  .s-anchors a{ flex: 0 0 auto; font-size: 13px !important; white-space: nowrap; }

  /* Program list on state page */
  .p-filter-row{ flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  .seg-btns{
    max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .seg-btns::-webkit-scrollbar{ display: none; }
  .seg-btns button{ padding: 8px 12px !important; font-size: 12px !important; white-space: nowrap; }

  /* Residency callout */
  .res-callout{ grid-template-columns: 1fr !important; }

  /* Employment grid */
  .emp-grid{ grid-template-columns: 1fr !important; }
  .metro-row{ grid-template-columns: 1fr 90px 90px !important; gap: 8px !important; }

  /* Nearby states */
  .near-grid{ grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .near-card{ padding: 12px 10px !important; }
  .near-card .sc{ font-size: 15px !important; }
}

/* ======================================================
   Page-specific: By State (list) — map grid + filter
   ====================================================== */
@media (max-width: 720px){
  /* The by-state page uses its own typography; rely on inherited page-title rules */
  .bs-toolbar, .state-filter-row{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
}

/* ======================================================
   Page-specific: Index / home hero
   ====================================================== */
@media (max-width: 720px){
  .headline{ font-size: clamp(44px, 14vw, 80px) !important; margin: 0 !important; }
  .subtitle{ font-size: 16px !important; line-height: 1.5 !important; }
  /* Home page custom nav has inline links (nav-center) that don't fit on mobile — hide them.
     The logo + "Start" CTA (nav-cta) remain visible. */
  .nav-center{ display: none !important; }
}

/* ======================================================
   Page-specific: Find My Program wizard
   ====================================================== */
@media (max-width: 720px){
  .wiz-body{ padding: 24px 18px !important; }
  .wiz-head h1, .wiz-head .title{ font-size: 24px !important; }
  .q-title{ font-size: 20px !important; }
  .wiz-footer{ flex-direction: column-reverse !important; gap: 10px !important; }
  .wiz-footer button{ width: 100%; padding: 14px 18px !important; }
  .opt{ padding: 14px 16px !important; }
  .opt .t{ font-size: 15px !important; }
}

/* ======================================================
   Page-specific: Blog
   ====================================================== */
@media (max-width: 720px){
  .feat{ padding: 20px !important; gap: 16px !important; }
  .feat-art{ overflow: hidden !important; }
  .feat-art .big-glyph{ font-size: 180px !important; left: 20px !important; top: 20px !important; }
  .feat-body h2{ font-size: 26px !important; line-height: 1.15 !important; }
  .feat-body .dek{ font-size: 14.5px !important; }
  .feat-body .byline{ font-size: 12px !important; flex-wrap: wrap; }
  .cat-tabs{
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    flex-wrap: nowrap !important;
    margin: 0 -16px !important;
    padding: 0 16px !important;
  }
  .cat-tabs::-webkit-scrollbar{ display: none; }
  .cat-tabs button{ flex: 0 0 auto; white-space: nowrap; font-size: 12px !important; padding: 8px 12px !important; }
  .post h3{ font-size: 18px !important; }
}

/* ======================================================
   Page-specific: Stub pages (about, accessibility, etc.) — long single-word
   names like "AiDegreeOnline." can push h1 past viewport. Shrink + allow break.
   ====================================================== */
@media (max-width: 720px){
  .stub-page h1{
    font-size: clamp(34px, 10vw, 44px) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .stub-page h1 .alt{
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .stub-page h2{ font-size: 20px !important; }
}

/* ======================================================
   Tap-target minimums (44px iOS HIG)
   All buttons / interactive elements should be ≥44px tall on mobile.
   ====================================================== */
@media (max-width: 720px){
  .nav-item, .btn-pill, .seg button, .cta-primary, .cta-secondary,
  .cta-btn, .tp-cta, .faq-q, .anchor-nav a, .s-anchors a{
    min-height: 40px;  /* allow 40 for dense UIs; critical buttons hit 44+ via padding */
  }
}