/* ============================================================
   Cascade Medical Research Institute — Responsive styles
   ------------------------------------------------------------
   All media queries for the homepage, header and footer live
   here. Base (desktop-first) styles stay in style.css; this
   file only narrows them down per device class. Loaded after
   style.css, so equal-specificity overrides win by order.

   Breakpoints:
     Desktop  1025px and above  — base styles, no overrides
     Laptop    769px – 1024px   — @media (max-width: 1024px)
     Tablet    481px – 768px    — @media (max-width: 768px)
     Mobile      0px – 480px    — @media (max-width: 480px)

   Queries are max-width and cascade downward: laptop rules also
   apply to tablet and mobile unless a narrower tier overrides.
   ============================================================ */

/* ── Motion preferences (applies at every width) ──────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .cc-spec-card .cc-spec-desc {
    transform: none;
  }
}

/* ── Laptop — 769px to 1024px ─────────────────────────────── */
@media (max-width: 1024px) {
  /* Header: desktop links no longer fit — switch to the hamburger.
     (The .cc-mobile-panel itself is styled in style.css and is only
     present in the DOM while open.) */
  .cc-desktop-nav {
    display: none;
  }

  .cc-mobile-toggle {
    display: inline-flex;
  }

  /* Homepage: two-column splits stack; team grids tighten to 3-up */
  .cc-about-grid,
  .cc-research-grid,
  .cc-contact-grid,
  .cc-news-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .cc-doctor-grid,
  .cc-team-coords {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Tablet — 481px to 768px ──────────────────────────────── */
@media (max-width: 768px) {
  /* Header */
  .cc-nav {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Homepage: sections lose the wide gutters; grids go single-column */
  .cc-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .cc-spec-grid,
  .cc-doctor-grid,
  .cc-team-coords {
    grid-template-columns: 1fr;
  }

  /* Newsletter: input and button stack */
  .cc-news-row {
    flex-direction: column;
  }

  /* Footer: brand, quick links and contact stack */
  .cc-footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ── Mobile — up to 480px ─────────────────────────────────── */
@media (max-width: 480px) {
  /* Header: the wordmark scales fluidly so logo + hamburger stay inside
     the viewport all the way down to 320px-wide screens */
  .cc-nav {
    gap: 12px;
  }

  .cc-brand {
    gap: 14px;
  }

  .cc-brand svg {
    width: 40px;
    height: auto;
  }

  .cc-brand-name {
    font-size: clamp(20px, 6vw, 24px);
  }

  .cc-brand-tag {
    font-size: clamp(7.5px, 2.4vw, 10px);
    letter-spacing: 0.16em;
  }

  /* Long pill CTAs wrap instead of forcing cards/grids wider than the
     screen (cc-btn-cta/-sm set white-space: nowrap + min-width:
     max-content on desktop) */
  .cc-btn-cta,
  .cc-btn-sm {
    white-space: normal;
    min-width: 0;
  }

  /* Hero headlines scale with the viewport below 480px so the longest
     words ("Advancements", "Investigators") never clip; at exactly 480px
     these resolve to the same sizes as the desktop clamps */
  .cc-hero-title {
    font-size: clamp(34px, 12vw, 52px);
  }

  .cc-page-hero-title {
    font-size: clamp(32px, 11.5vw, 40px);
  }

  /* Homepage: tighter hero gutters and contact rows on phones */
  .cc-hero-inner {
    padding: 0 20px;
  }

  .cc-dl-row {
    grid-template-columns: 90px 1fr;
  }

  /* Footer: match the section gutters */
  .cc-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── Our Investigators page ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cc-profile-swap {
    animation: none;
  }
}

@media (max-width: 1024px) {
  /* Profile dashboard stacks; portrait keeps a sensible width */
  .cc-profile-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cc-profile-card {
    max-width: 360px;
  }
}

@media (max-width: 768px) {
  .cc-inv-dashboard {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── Our Coordinators page ────────────────────────────────── */
@media (max-width: 1024px) {
  /* Profile blocks stack; portrait first, sensible width */
  .cc-coord-block,
  .cc-coord-block--flip {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cc-coord-block--flip .cc-profile-card {
    order: 1;
  }

  .cc-coord-block--flip .cc-profile-info {
    order: 2;
  }

  .cc-coord-block .cc-profile-card {
    max-width: 380px;
  }

  .cc-coord-stack {
    gap: 80px;
  }
}

@media (max-width: 768px) {
  .cc-coord-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── Our Ophthalmic Studies page ──────────────────────────── */
/* Sponsor logos grow a touch on larger screens */
@media (min-width: 769px) {
  .cc-sponsor-logo {
    height: 3rem;
  }
}

@media (max-width: 1024px) {
  /* Study cards single-column once the two-up gets cramped; minmax(0,…)
     stops intrinsic card content from blowing the column past the
     viewport on narrow phones */
  .cc-study-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .cc-studies-dashboard {
    padding-left: 20px;
    padding-right: 20px;
  }

  .cc-study-card {
    padding: 28px;
  }

  .cc-closed-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  /* Card header stacks; sponsor logo aligns left under the name */
  .cc-study-head {
    grid-template-columns: 1fr;
  }

  .cc-logo-wrap {
    justify-self: start;
    justify-content: flex-start;
  }

  /* CTAs go full width */
  .cc-participate-wrap a {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .cc-closed-cta {
    width: 100%;
  }

  .cc-closed-cta a {
    width: 100%;
  }
}

/* ── Recent Publications page ─────────────────────────────── */
@media (max-width: 1024px) {
  /* Featured band and card grid go single-column */
  .cc-featured-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cc-pub-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .cc-featured-section,
  .cc-pubs-index {
    padding-left: 20px;
    padding-right: 20px;
  }

  .cc-pub-card {
    padding: 28px;
  }
}