/* ============================================================
   FLOW — Responsive Overrides
   Breakpoints (per project playbook):
   • Desktop  ≥ 1440px (design base, content max 1420px)
   • Laptop   ≤ 1280px
   • Tablet   ≤ 768px
   • Mobile   ≤ 480px (390px target)
   ============================================================ */

/* ---------- Laptop / smaller desktop ---------- */
@media (max-width: 1280px) {
  :root {
    --fs-h1:   3.5rem;   /* 56 */
    --fs-h2:   2.25rem;  /* 36 */
    --fs-stat: 3.25rem;  /* 52 */
  }

  .hero__tagline { font-size: 2.375rem; }
  .banner-event__text { font-size: 1.875rem; }
  .webinar-cta__copy h2 { font-size: 1.625rem; }

  /* Results highlight — clamp left padding on smaller viewports */
  .results-highlight__data {
    padding-left: var(--content-pad);
  }
  .sci-hero__copy {
    padding-left: var(--content-pad);
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hero__visual {
    min-height: unset;
    max-height: 340px;
    order: -1;
  }
  .hero__product-placeholder {
    max-width: 300px;
    max-height: 300px;
  }
  .hero__product-img {
    max-height: 300px;
    width: auto;
  }

  /* Results highlight — stack vertically */
  .results-highlight__inner {
    grid-template-columns: 1fr;
    height: auto;
  }
  .results-highlight__data {
    padding: var(--space-7) var(--content-pad);
  }
  .results-highlight__award {
    position: relative;
    height: 300px;
  }

  .benefit-cards { grid-template-columns: 1fr 1fr; }

  .research-section__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .research-cards { grid-template-columns: 1fr; }
  .research-card {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .research-card:last-child { border-bottom: 0; }

  .webinar-cta__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .webinar-cta__card { justify-self: start; max-width: 100%; }

  .mission-section__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .mission-section__inner p { font-size: 1.25rem; }

  /* Image grid → restructure */
  .grid-quote {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .grid-quote__cell--main  { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 3; }
  .grid-quote__cell--quote { grid-column: 1 / -1; grid-row: 2; }
  .grid-quote__cell--two   { grid-column: 1; grid-row: 3; aspect-ratio: 1; }
  .grid-quote__cell--three { grid-column: 2; grid-row: 3; aspect-ratio: 1; }
  .grid-quote__cell--four  { display: none; }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .site-footer__brand { grid-column: 1 / -1; }}

/* ---------- Tablet portrait & below ---------- */
@media (max-width: 768px) {
  :root {
    --fs-h1:   2.75rem;  /* 44 */
    --fs-h2:   1.875rem; /* 30 */
    --fs-h3:   1.25rem;
    --fs-stat: 2.75rem;
    --content-pad: var(--content-pad-mobile);
  }

  .section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .section--lg { padding-top: var(--space-9); padding-bottom: var(--space-9); }

  /* --- mobile nav --- */
  .nav-toggle { display: flex; }

  .nav-primary {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-cream);
    padding: var(--space-3) 0 var(--space-5);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 6px 20px rgba(60, 74, 100, 0.06);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t-base), opacity var(--t-base), visibility var(--t-base);
  }

  .nav-primary.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-primary a {
    padding: var(--space-3) var(--content-pad-mobile);
    border-bottom: 1px solid var(--color-border);
  }

  .nav-primary .btn {
    margin: var(--space-3) var(--content-pad-mobile) 0;
    justify-content: center;
  }

  .site-header__inner > .btn { display: none; } /* CTA folds into mobile menu */

  .hero { padding: var(--space-6) 0 var(--space-7); }
  .hero__title { font-size: var(--fs-h1); }
  .hero__tagline { font-size: 1.75rem; }
  .hero__text { font-size: var(--fs-body); }

  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }

  .video-section { padding: var(--space-5) 0; }
  .video-block__play-icon { width: 56px; height: 56px; }
  .video-block__play-icon svg { width: 16px; height: 16px; }

  .banner-event__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .banner-event__text { font-size: 1.375rem; }

  .benefit-cards { grid-template-columns: 1fr; gap: var(--space-4); }

  .research-section__head { gap: var(--space-3); }
  .research-section__head h2 { font-size: var(--fs-h2); }

  .research-card { padding: var(--space-5) 0; }

  .webinar-cta__details { grid-template-columns: 1fr; gap: var(--space-3); }
  .webinar-cta__date { font-size: 1.5rem; }
  .webinar-cta__copy h2 { font-size: 1.375rem; }

  /* Grid quote blockquote scales down gracefully */
  .grid-quote__cell--main  { aspect-ratio: 1 / 1; }
  .grid-quote__quote-inner { padding: var(--space-5) var(--space-4); }
  .grid-quote__quote-inner blockquote { font-size: 1.625rem; }

  .site-footer { padding-top: var(--space-7); }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .site-footer__brand { grid-column: auto; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 480px) {
  .hero__title { font-size: 2.5rem; }
  .hero__tagline { font-size: 1.5rem; }
  .stat-figure { font-size: 2.5rem; }

  .hero__actions .btn { padding: 0.75rem 1.125rem; font-size: 0.875rem; }
  .btn { padding: 0.75rem 1.25rem; }

  .results-highlight { padding: 0; }
  .results-highlight__data { padding: var(--space-6) var(--content-pad-mobile); }
  .results-highlight__award { height: 220px; }

  .grid-quote { grid-template-columns: 1fr; }
  .grid-quote__cell--main  { grid-column: 1; grid-row: 1; }
  .grid-quote__cell--quote { grid-column: 1; grid-row: 2; }
  .grid-quote__cell--two   { grid-column: 1; grid-row: 3; }
  .grid-quote__cell--three { grid-column: 1; grid-row: 4; }
  .grid-quote__quote-inner blockquote { font-size: 1.125rem; }
}

/* ============================================================
   SCIENCE & RESEARCH PAGE — Responsive Overrides
   ============================================================ */

/* ---------- Laptop ---------- */
@media (max-width: 1280px) {
  .sci-hero__title { font-size: 2.25rem; }
  .sci-outcomes__fig { font-size: var(--fs-stat); }
  .sci-patient-quote__text { font-size: 1.5rem; }
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .sci-hero {
    padding: var(--space-8) 0;
    background-position: right center;
  }
  .sci-hero::before {
    background: linear-gradient(
      to right,
      rgba(251, 248, 243, 0.97) 0%,
      rgba(251, 248, 243, 0.88) 55%,
      rgba(251, 248, 243, 0.3) 100%
    );
  }
  .sci-hero__copy { max-width: 480px; }

  .sci-outcomes__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .sci-outcomes__stat { padding: 0; }
  .sci-outcomes__stat:last-child { padding: 0; }
  .sci-outcomes__stat--mid {
    padding: var(--space-6) 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--color-border-dark);
    border-bottom: 1px solid var(--color-border-dark);
  }

  .sci-data__columns { grid-template-columns: 1fr; gap: var(--space-6); }
  .sci-graphs { grid-template-columns: 1fr; gap: var(--space-6); }

  .sci-result-cards { grid-template-columns: 1fr 1fr; }

  .sci-conclusion__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .sci-case__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .sci-case__meta { position: static; }

  .sci-patient-quote__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ---------- Tablet portrait & below ---------- */
@media (max-width: 768px) {
  .sci-hero {
    padding: var(--space-7) 0;
    /* On mobile, fade the image more heavily so text is always readable */
    background-position: right top;
  }
  .sci-hero::before {
    background: rgba(251, 248, 243, 0.92);
  }
  .sci-hero__copy { max-width: 100%; }
  .sci-hero__title { font-size: var(--fs-h2); }

  .sci-outcomes { padding: var(--space-7) 0; }
  .sci-outcomes__desc { max-width: 100%; }

  .sci-result-cards { grid-template-columns: 1fr; }
  .sci-results__head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .sci-results__title { font-size: var(--fs-h2); }

  .sci-case__title { font-size: var(--fs-h2); }
  .sci-case__profile-row { grid-template-columns: 80px 1fr; gap: var(--space-3); }

  .sci-patient-quote__text { font-size: 1.25rem; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 480px) {
  .sci-outcomes__fig { font-size: 2.5rem; }
  .sci-case__profile-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .sci-case__trial { padding: var(--space-3) var(--space-4); }
}

/* ============================================================
   ABOUT PAGE — Responsive Overrides
   ============================================================ */

@media (max-width: 980px) {
  .about-who__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .about-team__cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  /* Mobile: WHO WE ARE — label stacks above body, full width */
  .about-who__inner {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .about-who__label {
    /* Move label above the body text on mobile */
    order: -1;
  }
  .about-who__body {
    width: 100%;
  }
  .about-team__cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   WEBINARS PAGE — Responsive Overrides
   ============================================================ */

@media (max-width: 980px) {
  .web-general__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .web-schedule__row {
    grid-template-columns: 1fr 100px 120px auto;
    gap: var(--space-4);
  }
  /* Hide duration on tablet */
  .web-schedule__duration { display: none; }
}

@media (max-width: 768px) {
  /* Mobile: Webinars label stacks above body, full width */
  .web-general__inner {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  /* Mobile schedule: compact single-column card layout */
  .web-schedule__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
  }
  .web-schedule__name { flex: 1 1 100%; font-weight: 600; }
  .web-schedule__date,
  .web-schedule__time,
  .web-schedule__duration {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--color-grey);
  }
  .web-schedule__date::after { content: ' ·'; }
  .web-schedule__time::after { content: ' ·'; }
  .web-schedule__action { margin-left: auto; }
  .web-form { max-width: 100%; }
}

/* ============================================================
   FOOTER — 4-col to 2-col on tablet, 1-col on mobile
   ============================================================ */

@media (max-width: 980px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}