/* ============================================================
   responsive.css
   --------------------------------------------------------------
   Page-level breakpoint refinements. Component-scoped media
   queries stay in styles.css next to their component.
============================================================ */

/* ============================================================
   GLOBAL — prevent horizontal overflow on every viewport
============================================================ */
html {
  overflow-x: hidden;
}

/* ---------- Partnership page ---------- */
@media (max-width: 720px) {
  .partnership-banner {
    border-radius: var(--radius);
    margin: 0 1rem;
  }
  .partnership-banner__caption {
    font-size: 0.75rem;
    padding: 0 1.25rem;
    bottom: 1rem;
  }
  .partnership-intro { margin-top: 2.5rem; padding: 0 0.25rem; }
  .partnership-pillars { margin-top: 2rem; }
  .partnership-form-wrap {
    margin-top: 2.5rem;
    padding: 1.5rem 1.25rem;
    border-radius: var(--radius);
  }
}

/* ---------- Legal pages ---------- */
@media (max-width: 720px) {
  .legal-page { padding: 2.5rem 0 4rem; }
  .legal-page .legal-header { margin-bottom: 2rem; }
  .legal-page section { margin-bottom: 1.75rem; }
  .legal-page h2 { font-size: 1.15rem; }
  .legal-page h3 { font-size: 0.98rem; }
  .legal-page p,
  .legal-page ul li { font-size: 0.9rem; }
}

/* ---------- Page hero (sub-pages) ---------- */
@media (max-width: 720px) {
  .page-hero { padding: 7rem 0 2.5rem; }
}

/* ---------- Region modal ---------- */
@media (max-width: 480px) {
  .region-modal__panel {
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius);
  }
  .region-modal__title { font-size: 1.2rem; }
  .region-modal__sub { font-size: 0.86rem; }
  .region-modal__btn { padding: 0.85rem 1rem; font-size: 0.9rem; }
}

/* ---------- Region banner ---------- */
@media (max-width: 540px) {
  .region-banner {
    bottom: 0.75rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.78rem;
    gap: 0.5rem;
    border-radius: var(--radius);
  }
  .region-banner__icon { width: 18px; height: 18px; font-size: 0.65rem; }
  .region-banner__change { font-size: 0.74rem; }
}

/* ============================================================
   TABLET — HERO & LAYOUT (600 px – 900 px)
   Covers iPads, large phones in landscape, small laptops.
============================================================ */
@media (max-width: 900px) and (min-width: 601px) {

  /* Hero: give some breathing room */
  .hero__inner { padding: 3rem 1.5rem 4.5rem; }

  /* Eyebrow: block-level with max-width so long text wraps cleanly on tablets */
  .hero__eyebrow {
    display: flex;
    width: fit-content;
    max-width: calc(100% - 3rem);
    margin-inline: auto;
    white-space: normal;
    line-height: 1.55;
    text-align: center;
    justify-content: center;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
  }

  /* Audience cards: already 1-col from styles.css; centre + cap width */
  .hero__audience {
    max-width: 540px;
    margin-inline: auto;
  }

  /* Section padding slightly tighter */
  .section { padding: 4.5rem 0; }

  /* Contact grid: stack on tablets */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 2rem 1.5rem; }

  /* CTA panels: less padding */
  .cta-panel { padding: 2rem 1.75rem; }

  /* Analytics chart header: wrap on narrow tablets */
  .chart-header { flex-wrap: wrap; gap: 0.5rem; }

  /* Footer: 2-col grid */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-grid > nav:nth-of-type(4) { grid-column: auto; }
}

/* ============================================================
   PHONE SCREEN — GLOBAL RESPONSIVE FIXES (≤ 600px)
   Addresses overflow, cramped padding, and layout issues on
   narrow phone viewports (375 px – 600 px).
============================================================ */
@media (max-width: 600px) {

  /* ---- Container ---- */
  .container { width: min(1200px, 100% - 2rem); }

  /* ---- Navigation ---- */
  .nav { padding: 0 1rem; }

  /* ---- Hero ---- */
  .hero__inner { padding: 2rem 0.75rem 3rem; }

  /* Eyebrow pill: switch to block-level flex so max-width + centering work correctly.
     The pill width shrinks to fit content up to max-width, then text wraps inside it. */
  .hero__eyebrow {
    display: flex;
    width: fit-content;
    max-width: calc(100% - 1.5rem);
    margin-inline: auto;
    white-space: normal;
    line-height: 1.55;
    text-align: center;
    justify-content: center;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1.5rem;
  }

  /* Headline + sub copy: scale with viewport; break-word ensures the italic
     <em> gradient text never overflows on very narrow phones */
  .hero__headline {
    font-size: clamp(1.75rem, 7.2vw, 3.2rem);
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .hero__punch {
    font-size: clamp(1rem, 4.2vw, 1.3rem);
    overflow-wrap: break-word;
  }
  .hero__sub {
    font-size: clamp(0.88rem, 3.8vw, 1rem);
    overflow-wrap: break-word;
  }

  /* CTA row: stack buttons, make them full-width */
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .hero__ctas .btn {
    justify-content: center;
    text-align: center;
    white-space: normal;
    width: 100%;
  }
  .hero__cta-microcopy { font-size: 0.75rem; }

  /* Audience cards: cap width, centre */
  .hero__audience {
    max-width: 100%;
    margin-top: 2.5rem;
  }
  .hero__aud-card {
    padding: 1rem 1rem;
    gap: 12px;
  }
  .hero__aud-icon { width: 44px; height: 44px; flex-shrink: 0; }

  /* ---- Section padding ---- */
  .section { padding: 3rem 0; }

  /* ---- Contact / Demo form ---- */
  .contact-form { padding: 1.25rem 1rem; }
  .form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .form-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  .form-note { max-width: 100%; }

  /* Demo bridge */
  .demo-bridge { padding: 1rem; margin-bottom: 1.75rem; }
  .demo-bridge__items { gap: 0.85rem; }
  .demo-bridge__item > div { min-width: 0; overflow-wrap: break-word; }
  .demo-bridge__h, .demo-bridge__b { overflow-wrap: break-word; word-break: break-word; }

  /* ---- CTA / Partnership panels ---- */
  .cta-panel { padding: 1.5rem 1.25rem; }
  .contact-aside .cta-panel { padding: 1.5rem 1.25rem; }

  /* Contact direct */
  .contact-direct { padding: 1.25rem; }
  .contact-direct__list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  /* ---- Trust strip ---- */
  .form-trust-strip { gap: 0.6rem 1rem; }

  /* ---- Analytics ---- */
  .metric-row { grid-template-columns: 1fr 1fr; }
  .metric-card { padding: 1.25rem 1rem; }
  .metric-card__value { font-size: 1.8rem; }

  /* ---- For Colleges / Students split visual ---- */
  .split__visual { min-height: 220px; padding: 1.25rem; }
  .mini-dash-name { width: 80px; font-size: 0.78rem; }
  .mini-dash-row { gap: 0.6rem; }

  /* ---- Why-now / transformation ---- */
  .why-now-card { padding: 1.25rem; }
  .moat-assertion { padding: 1rem; font-size: 0.88rem; }

  /* ---- Case mini ---- */
  .case-mini { padding: 1.25rem; }

  /* ---- Onboard steps ---- */
  .onboard-step { padding: 1.5rem 1.25rem 1.25rem; }

  /* ---- Analytics section ---- */
  .analytics-chart { padding: 1.25rem; }
  .risk-panel { padding: 1.25rem; }
  .risk-donut-wrap { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .chart-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  /* ---- Footer ---- */
  footer { padding: 2.5rem 0 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.35rem; text-align: center; }
}

/* ---- Steps / How It Works ---- */
@media (min-width: 681px) {
  .steps > .step::after { content: none; display: none; }
}

/* ---- Trust / Marquee strip ---- */
@media (max-width: 900px) {
  .trust__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .trust__label {
    white-space: normal;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }
  .trust__marquee-wrap { width: 100%; align-self: stretch; }
}

/* ============================================================
   SMALL PHONE (≤ 480px) — additional tightening
============================================================ */
@media (max-width: 480px) {

  /* Nav: tighter */
  .nav__cta .btn-primary {
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  /* Hero: tightest layout */
  .hero__inner { padding: 1.75rem 0.5rem 3rem; }
  .hero__eyebrow {
    display: flex;
    width: fit-content;
    max-width: calc(100% - 1rem);
    margin-inline: auto;
    font-size: 0.64rem;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.75rem;
    margin-bottom: 1.25rem;
  }
  .hero__headline {
    font-size: clamp(1.75rem, 7.5vw, 2.8rem);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Metric cards: single column */
  .metric-row { grid-template-columns: 1fr; }
}

/* ---- Very small phones (≤ 360px) ---- */
@media (max-width: 360px) {
  .container { width: min(1200px, 100% - 1.5rem); }
  .nav { padding: 0 0.75rem; }
  .nav__cta .btn-primary { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
  .contact-form { padding: 1rem 0.85rem; }
  .hero__headline { font-size: clamp(1.6rem, 7.5vw, 2.4rem); }
  .display-2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .hero__eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.65rem;
  }
}