/* ============================================================
   responsive.css — mobile-first layout adjustments. The mobile
   motion (shorter pin, softer depth) is handled in JS; this file
   only sizes the layout for small screens + coarse pointers.
   ============================================================ */

/* Mobile: stack the portrait above the copy so the text never sits over the
   face. The image stays fully visible (uncropped): its height is bounded by
   BOTH the viewport height and — via 110vw ≈ 88vw ÷ the source aspect (0.802)
   the engine sets on .sr-frame — the viewport width. The copy sits below on
   the plain black backdrop, centered. */
@media (max-width: 900px) {
  .sr-viewport {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.4rem, 1.4vh, 1rem);
    padding-block: clamp(0.4rem, 1.4vh, 1.25rem);
  }
  .sr-frame {
    height: min(56vh, 110vw);
    width: auto;
    max-width: 88vw;
    margin: 0;
    flex: 0 0 auto;
  }
  .sr-content {
    position: static;
    inset: auto;
    margin: 0;
    width: min(460px, 92vw);
    text-align: center;
  }
  /* Copy is on black now — no scrim, and no title/desc overlap. */
  .sr-content::before { display: none; }
  /* Option 1 — compact text, larger image. */
  .sr-kicker { font-size: 11px; margin-bottom: 0.45rem; }
  .sr-title { font-size: clamp(1.5rem, 6.4vw, 1.7rem); margin-bottom: 0.5rem; }
  .sr-desc { font-size: 13px; line-height: 1.7; margin-inline: auto; margin-bottom: 0.95rem; }
}

@media (max-width: 767px) {
  .sr-frame::before,
  .sr-frame::after {
    width: 30px;
    height: 30px;
  }
  .sr-badge {
    font-size: 11px;
    padding: 5px 11px;
    top: 0.9rem;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .sr-frame { height: 92svh; }
  .sr-desc { display: none; }
}

@media (hover: none) {
  .sr-cta:hover { transform: none; }
}

@media (min-width: 1600px) {
  .sr-frame { height: min(82vh, 860px); }
}