/* =============================================================
   Chaitus Media — responsive.css
   Mobile-first polish: small-screen typography, header logo
   sizing, gallery + film grid breakpoints, footer collapse.
============================================================= */

/* ---------- Tablet (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  .cm-header__cta { gap: 0.6rem; }
}

/* ---------- Mobile (≤ 880px) ---------- */
@media (max-width: 880px) {
  .cm-header__inner {
    grid-template-columns: auto 1fr auto;
  }
  .cm-nav,
  .cm-header__cta {
    display: none;
  }
  .cm-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* The mobile menu is always rendered (display:flex). It's hidden
     via opacity + pointer-events. JS toggles a class to fade it in.
     The [hidden] override is kept for users with JS disabled — they
     never see it because the toggle button doesn't function without JS. */
  .cm-mobile-menu,
  .cm-mobile-menu[hidden] { display: flex; }

  .cm-section-heading--center { text-align: left; margin-inline: 0; }
  .cm-section-heading--center .cm-prose { margin-inline: 0; text-align: left; }

  /* Brand mark scales down — the desktop wordmark is too tall on phones. */
  .cm-brand__logo { height: 28px; max-width: 150px; }
  .cm-brand--footer .cm-brand__logo { height: 36px; max-width: 180px; }

  /* Header padding tightens on mobile. */
  .cm-header { padding-block: 0.9rem; }
  .cm-header.is-scrolled { padding-block: 0.6rem; }

  /* Section spacing — generous whitespace eats too much screen on mobile. */
  .cm-section { padding-block: clamp(3rem, 9vw, 5rem); }
  .cm-section--statement { padding-block: clamp(3.5rem, 10vw, 6rem); }
}

/* ---------- Small phones (≤ 600px) ---------- */
@media (max-width: 600px) {
  :root {
    --cm-gutter: 1.1rem;
  }

  /* Display type — 7rem headlines look unbalanced on a 360px screen. */
  .cm-display    { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  .cm-display--md{ font-size: clamp(1.8rem, 7vw, 2.2rem); }
  .cm-display--xl{ font-size: clamp(2.4rem, 10vw, 3.2rem); }

  /* Hero — type is enormous by default; rein it in for phone. */
  .cm-hero__headline { font-size: clamp(3rem, 14vw, 5rem); }
  .cm-hero__sub      { font-size: clamp(0.95rem, 4vw, 1.2rem); }
  .cm-hero__eyebrow  { letter-spacing: 0.35em; font-size: 0.65rem; }
  .cm-hero__overlay  { padding: 5rem 1.25rem 5rem; }

  /* Section heading prose is quieter on phone. */
  .cm-prose         { font-size: var(--cm-text-base); }
  .cm-prose--lead   { font-size: var(--cm-text-lg); }

  /* Stats — 2 cols on phone, smaller numbers. */
  .cm-stats__item  { padding: 1rem 0.5rem; gap: 0.3rem; }
  .cm-stats__value { font-size: clamp(2rem, 9vw, 2.6rem); }
  .cm-stats__label { font-size: 0.62rem; letter-spacing: 0.1em; }

  /* Footer display headline. */
  .cm-footer__display { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .cm-footer__lockup  { gap: 1.4rem; }
  .cm-footer__cta     { padding: 0.85rem 1.4rem; font-size: 0.75rem; }

  /* Testimonials — tighter quote line height + size. */
  .cm-testimonials__quote p { font-size: clamp(1.1rem, 5vw, 1.4rem); line-height: 1.45; }
  .cm-testimonials__btn     { width: 40px; height: 40px; }

  /* Films — fully stacked, larger touch targets. */
  .cm-films__title  { font-size: clamp(1rem, 4.5vw, 1.2rem); }
  .cm-films__cat    { font-size: 0.65rem; letter-spacing: 0.1em; }
  .cm-films__play   { width: 60px; height: 60px; }

  /* Our Clicks — stack neatly. */
  .cm-clicks      { gap: 0.5rem; grid-auto-rows: 200px; }
  .cm-clicks__cta { margin-top: 2rem; }

  /* Buttons — full-width on phone for thumb-reach. */
  .cm-cta__actions .cm-btn,
  .cm-clicks__cta .cm-btn,
  .cm-films__cta .cm-btn {
    width: 100%;
    justify-content: center;
  }

  /* Newsletter form — stack subscribe under input. */
  .cm-footer__newsletter-row { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .cm-footer__newsletter-row input {
    border-bottom: 1px solid rgba(250, 248, 245, 0.3);
    padding: 0.6rem 0;
  }
  .cm-footer__newsletter-row { border-bottom: 0; }
  .cm-footer__newsletter-btn {
    background: rgba(250, 248, 245, 0.08);
    border: 1px solid rgba(250, 248, 245, 0.3);
    padding: 0.7rem;
    text-align: center;
  }

  /* Page hero on subpages — reduce top padding (header already covers part). */
  .cm-page-hero { padding-top: 6rem; }

  /* Mobile menu — bigger tap targets, breathing room. */
  .cm-mobile-menu { padding: 5rem 1.5rem 2rem; }
  .cm-mobile-menu__list a { font-size: clamp(1.8rem, 8vw, 2.4rem); }
}

/* ---------- Print ---------- */
@media print {
  .cm-header,
  .cm-footer,
  .cm-mobile-menu,
  .cm-hero,
  .cm-films__play,
  .cm-testimonials__controls,
  .cm-clicks__cta {
    display: none !important;
  }
  body { color: #000; background: #fff; }
  .cm-display, .cm-display--xl, .cm-display--md { color: #000 !important; }
}

/* ---------- Print-style accessible focus ring fallback ---------- */
:focus-visible {
  outline: 2px solid var(--cm-accent);
  outline-offset: 3px;
}