/* ==========================================================================
   responsive.css — cinematic-scrolltelling-skill
   Mobile-first adjustments + accessibility fallbacks.
   Breakpoints must match src/utils/responsiveManager.js (767 / 1023).
   ========================================================================== */

/* ---- Tablet ≤ 1023px ---- */
@media (max-width: 1023px) {
  .csk-split-layout {
    grid-template-columns: 1fr;
  }

  .csk-reveal__feature {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    max-width: none;
    margin-top: 1rem;
  }
  .csk-reveal__stage {
    display: flex;
    flex-direction: column;
  }
}

/* ---- Mobile ≤ 767px ---- */
@media (max-width: 767px) {
  :root {
    --space-section: clamp(3.5rem, 10vh, 6rem);
  }

  /* Sticky CTA bar exists only on mobile */
  .csk-sticky-cta {
    display: block;
  }

  /* Pinned story becomes a single column; media on top */
  .csk-pinned-story {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.6rem;
  }
  .csk-pinned-story__media {
    aspect-ratio: 16 / 10;
  }

  /* Cards: smaller stack offset, tighter padding */
  .csk-card {
    min-height: 70vh;
    border-radius: 16px;
  }

  /* Portal captions shouldn't fight tiny screens */
  .csk-portal__caption h2 {
    font-size: var(--text-h3);
  }

  /* Feature callouts stack under media (set in tablet, reinforced here) */
  .csk-reveal__feature {
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.4rem 0;
  }
}

/* ---- Short landscape phones: pins need real height ---- */
@media (max-height: 480px) and (orientation: landscape) {
  .csk-hero__content,
  .csk-sequence__content {
    justify-content: flex-end;
    padding-bottom: 3rem;
  }
}

/* ---- Reduced motion: calm everything CSS controls ----
   html.csk-motion-forced (puesto por el proyecto ANTES del primer paint)
   excluye la página cuando el sitio fuerza la experiencia cinematográfica
   pese a la preferencia del SO — en sincronía con prefersReducedMotion(). */
@media (prefers-reduced-motion: reduce) {
  html:not(.csk-motion-forced) *,
  html:not(.csk-motion-forced) *::before,
  html:not(.csk-motion-forced) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html:not(.csk-motion-forced) .csk-scroll-hint::after {
    animation: none;
  }
  /* JS modules also check prefersReducedMotion() — this is defense in depth */
}

/* ---- Print: strip the theatrics ---- */
@media print {
  .csk-sticky-cta,
  [data-loader],
  .csk-scroll-hint {
    display: none !important;
  }
}