/* =====================================================
   Responsive – Amorismo (Home + Shared)
   =====================================================
   Breakpoints (real device boundaries):
     ≤1200px  Tablet landscape / small desktop
     ≤1024px  Statement grid collapse
     ≤768px   Tablet portrait — major layout shifts
     ≤480px   Phone portrait
     ≤360px   Small phones (iPhone SE, Galaxy S mini)
   Special:
     landscape + max-height:500px  — phone sideways
     hover:none                    — touch devices
   ===================================================== */

/* ── ≤ 1200px — Large tablet / small desktop ───────── */
@media (max-width: 1200px) {
  .am-statement__grid {
    grid-template-columns: minmax(420px, 1.1fr) minmax(320px, 0.9fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
  .am-bio { gap: var(--am-sp-6); }
}

/* ── ≤ 1024px — Statement → single column ──────────── */
@media (max-width: 1024px) {
  .am-statement__grid { grid-template-columns: 1fr; gap: var(--am-sp-6); align-items: start; }
  .am-statement__headline h2 { max-width: 12em; }
  .am-statement__body { max-width: 720px; padding-top: 0; }
  .am-statement__quotes { gap: clamp(1rem, 2.5vw, 2rem); }
}

/* ── ≤ 768px — Tablet portrait ─────────────────────── */
@media (max-width: 768px) {
  :root { --am-nav-h: 108px; }

  /* Nav */
  .am-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: var(--am-sp-2);
    height: auto;
    min-height: var(--am-nav-h);
    align-content: center;
    padding: var(--am-sp-2) var(--am-sp-4);
  }
  .am-nav__menu {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    max-width: calc(100vw - 5.5rem);
    overflow-x: auto;
  }
  .am-nav__links {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    max-width: 100%;
    transform: none;
  }
  .am-nav__mail {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .am-nav__link { min-width: 64px; padding: var(--am-sp-2); font-size: 0.7rem; }
  .am-nav__menu-link { font-size: 0.65rem; }

  /* Landing Hero */
  .am-landing-hero { padding-left: var(--am-sp-5); padding-right: var(--am-sp-5); }
  .am-landing-hero__logo { width: clamp(160px, 24vw, 200px); }
  .am-landing-hero__content { max-width: 420px; }

  /* Statement */
  .am-statement { padding: clamp(3rem, 8vw, 5rem) var(--am-sp-4); }
  .am-statement__grid { gap: var(--am-sp-5); }
  .am-statement__body { padding-top: 0; }
  .am-statement__quotes { grid-template-columns: 1fr; gap: var(--am-sp-5); }
  .am-statement__quote--featured p { font-size: clamp(1.1rem, 4vw, 1.4rem); }

  /* Bios */
  .am-bio { grid-template-columns: 1fr; gap: var(--am-sp-5); }
  .am-bio--reverse { direction: ltr; }
  .am-bio__photo-wrap { max-width: 360px; margin: 0 auto; }
  .am-bio__body { text-align: center; align-items: center; }
  .am-bio__text { font-size: 1rem; line-height: 1.75; }

  /* Contact */
  .am-contact { padding: var(--am-sp-6) var(--am-sp-4); }
  .am-contact__form { flex-direction: column; align-items: stretch; }
  .am-contact__input { min-width: 0; }

  /* Footer */
  .am-footer__grid { padding: var(--am-sp-5) var(--am-sp-3); }
  .am-footer__bottom { padding: 0 var(--am-sp-3) var(--am-sp-3); }
  .am-error { padding: var(--am-sp-6) var(--am-sp-3); }

  /* Typography scaling */
  main h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
  main h3 { font-size: clamp(0.85rem, 3vw, 1rem); }
  main p  { font-size: clamp(0.95rem, 2.5vw, 1.125rem); }

  /* Volume pages (shared) */
  .am-page-title { padding: var(--am-sp-6) var(--am-sp-4) var(--am-sp-3); }
  .am-page-title h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
  .am-page-title__logo { max-width: 200px; }
  .am-hero { padding: var(--am-sp-4); }
  .am-hero__grid { grid-template-columns: 1fr; gap: var(--am-sp-6); padding: 0; }
  .am-hero__image { max-width: 90vw; }
  .am-hero__body { text-align: center; padding: 0 var(--am-sp-2); }
  .am-hero__copy { font-size: 1rem; line-height: 1.6; }
  .am-section-label { text-align: center; margin-bottom: var(--am-sp-6); }
  .am-person-grid--cols-4 { grid-template-columns: repeat(2, 1fr); gap: var(--am-sp-3); }
  .am-container { padding: var(--am-sp-4); }
  .am-gallery { padding: var(--am-sp-6) var(--am-sp-4); }
  .am-gallery__main { margin-bottom: var(--am-sp-5); }
  .am-gallery__thumbs { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
  .am-synopsis { padding: var(--am-sp-6) var(--am-sp-4); }
  .am-cast { padding: var(--am-sp-6) var(--am-sp-4); }
  .am-reviews { padding: var(--am-sp-6) var(--am-sp-4); }
  .am-review { padding: var(--am-sp-4); }
}

/* ── ≤ 480px — Phone portrait ──────────────────────── */
@media (max-width: 480px) {
  /* Nav */
  .am-nav {
    grid-template-columns: 1fr;
    padding: var(--am-sp-2) var(--am-sp-3);
    gap: var(--am-sp-2);
  }
  .am-nav__menu {
    grid-column: 1;
    justify-self: center;
    max-width: calc(100vw - 5.5rem);
  }
  .am-nav__mail {
    position: absolute;
    top: var(--am-sp-2);
    right: var(--am-sp-3);
  }
  .am-nav__links { max-width: calc(100vw - 3rem); }
  .am-nav__link { min-width: 54px; padding: var(--am-sp-2) var(--am-sp-1); font-size: 0.6875rem; }
  .am-nav__menu-link { padding: var(--am-sp-2) 0.65rem; }

  /* Landing Hero — centered, simplified triptych */
  .am-landing-hero {
    min-height: 100svh;
    padding-left: var(--am-sp-4);
    padding-right: var(--am-sp-4);
    align-items: center;
    justify-content: center;
    padding-bottom: clamp(var(--am-sp-6), 12vh, 6rem);
  }
  .am-landing-hero__content { align-items: center; text-align: center; max-width: 100%; }
  .am-landing-hero__logo { width: clamp(130px, 35vw, 170px); }
  .am-landing-hero__form { align-self: center; width: 100%; max-width: 320px; }

  /* Triptych: center Vol I, fade side photos */
  .am-landing-hero__photo--vol1 {
    left: 0; width: 100%; opacity: 0.5;
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  }
  .am-landing-hero__photo--vol2,
  .am-landing-hero__photo--vol3 { opacity: 0; }

  /* Statement */
  .am-statement { padding: clamp(2.5rem, 6vw, 4rem) var(--am-sp-3); }
  .am-statement__headline h2 { font-size: clamp(1.75rem, 7vw, 2.5rem); text-align: center; max-width: none; }
  .am-statement__body { text-align: center; }
  .am-statement__body p:first-child { font-size: 1rem; }
  .am-statement__body p { font-size: 0.9rem; }
  .am-statement__quotes { padding-top: var(--am-sp-5); gap: var(--am-sp-4); }
  .am-statement__quote { padding: var(--am-sp-2) 0; }
  .am-statement__quote p { font-size: clamp(0.9375rem, 4.2vw, 1.15rem); }
  .am-statement__quote cite { font-size: 0.625rem; }

  /* Bios */
  .am-bios { padding: var(--am-sp-6) var(--am-sp-3); gap: var(--am-sp-6); }
  .am-bios__heading { text-align: center; max-width: none; }
  .am-bio__photo-wrap { max-width: 260px; }
  .am-bio__name { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .am-bio__text { font-size: 0.95rem; line-height: 1.7; }

  /* Contact & CTA */
  .am-contact { padding: var(--am-sp-5) var(--am-sp-3); }
  .am-cta { padding: var(--am-sp-3) var(--am-sp-4); font-size: 0.9rem; }

  /* Footer */
  .am-footer__grid { gap: var(--am-sp-3); padding: var(--am-sp-4) var(--am-sp-2); }
  .am-footer__logo { width: 118px; }
  .am-footer__bottom { padding: var(--am-sp-3) var(--am-sp-2); }
  .am-error__buttons { flex-direction: column; width: 100%; }
  .am-error__buttons .am-cta { width: 100%; text-align: center; }

  /* Volume pages */
  .am-page-title { padding: var(--am-sp-5) var(--am-sp-3) var(--am-sp-3); }
  .am-page-title h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .am-hero { padding: var(--am-sp-3); }
  .am-person-grid--cols-4 { gap: var(--am-sp-2); }
  .am-person__photo-wrap { margin-bottom: var(--am-sp-2); }
  .am-container { padding: var(--am-sp-3); }
  .am-gallery { padding: var(--am-sp-5) var(--am-sp-3); }
  .am-gallery__main { margin-bottom: var(--am-sp-4); }
  .am-gallery__frame { border-radius: var(--am-radius-sm); }
  .am-gallery__thumbs { grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: var(--am-sp-2); }
  .am-gallery__thumb { border-radius: var(--am-radius-sm); }
}

/* ── ≤ 360px — Small phones ────────────────────────── */
@media (max-width: 360px) {
  .am-nav__links { max-width: calc(100vw - 5.5rem); }
  .am-nav__link { min-width: 44px; font-size: 0.625rem; letter-spacing: 0.02em; }
  .am-nav__menu-link { padding: var(--am-sp-2) 0.5rem; font-size: 0.6rem; letter-spacing: 0.04em; }
  .am-nav__mail { width: 36px; min-width: 36px; min-height: 36px; }
  .am-landing-hero__logo { width: clamp(110px, 32vw, 140px); }
  .am-landing-hero__form { margin-top: var(--am-sp-4); }
  .am-statement { padding: var(--am-sp-5) var(--am-sp-2); }
  .am-statement__headline h2 { font-size: clamp(1.5rem, 7.5vw, 2rem); }
  .am-bios { padding: var(--am-sp-5) var(--am-sp-2); }
  .am-bio__photo-wrap { max-width: 220px; }
  .am-bio__text { font-size: 0.875rem; }
  .am-contact { padding: var(--am-sp-4) var(--am-sp-2); }
  .am-footer__grid { padding: var(--am-sp-3) var(--am-sp-2); }
  .am-footer__bottom { padding: var(--am-sp-2); font-size: 0.625rem; }
}

/* ── Landscape — short viewport phones ─────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .am-landing-hero {
    height: auto; min-height: 100svh;
    padding: var(--am-sp-5); align-items: center;
  }
  .am-landing-hero__content {
    flex-direction: row; align-items: center;
    gap: var(--am-sp-5); max-width: 90vw;
  }
  .am-landing-hero__logo { width: clamp(80px, 18vh, 130px); }
  .am-landing-hero__form { margin-top: var(--am-sp-3); }
  .am-landing-hero__photo--vol1 { width: 50%; left: 0; }
  .am-landing-hero__photo--vol3 { width: 50%; right: 0; }
  .am-landing-hero__photo--vol2 { opacity: 0.25; }
  .am-bio { grid-template-columns: 1fr 1fr; gap: var(--am-sp-4); }
  .am-bio--reverse { direction: rtl; }
  .am-bio__photo-wrap { max-width: none; margin: 0; }
  .am-bio__body { text-align: left; align-items: flex-start; }
}

/* ── Tall narrow phones (≥ 9:19 aspect) ────────────── */
@media (max-width: 480px) and (min-aspect-ratio: 9/19) {
  .am-landing-hero { padding-bottom: clamp(var(--am-sp-5), 8vh, 4rem); }
}

/* ── Touch devices — disable hover transforms ─────── */
@media (hover: none) {
  .am-cta:hover {
    transform: none;
    box-shadow: var(--am-shadow-cta);
    background-color: var(--am-home-accent);
    color: var(--am-on-accent);
  }

  .am-cta--outline:hover {
    background: transparent;
    box-shadow: none;
    color: var(--am-home-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .am-error__emoji { animation: none; }
}