/* ==========================================================================
   Sa Terra Ibiza — responsive overrides
   Breakpoints: 1200 (laptop) · 960 (tablet) · 720 (large phone) · 420 (small)
   ========================================================================== */

@media (max-width: 1200px) {
  .agenda__row { grid-template-columns: 120px minmax(0, 1fr) 180px 90px 40px; gap: 20px; }
  .suppliers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  :root { --header-h: 72px; }

  .nav__list { display: none; }
  .menu-toggle { display: block; }
  .brand img { width: 62px; }

  .section-head .specimen-no { grid-column: 1 / -1; margin-bottom: 20px; padding-top: 0; }
  .section-head h2 { grid-column: 1 / -1; }
  .section-head .section-head__aside { grid-column: 1 / span 10; }
  .section-head .section-head__link { grid-column: 1 / -1; justify-self: start; margin-top: 24px; }

  .hero { min-height: auto; }
  .hero__title { grid-column: 1 / -1; }
  .hero__media { grid-column: 3 / -1; grid-row: auto; margin-top: 48px; }
  .hero__media .frame { min-height: 0; aspect-ratio: 4 / 5; height: auto; }
  .hero__foot { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; }
  .hero__index { display: none; }

  .manifesto__text, .manifesto__sign { grid-column: 1 / -1; }

  .agenda__row { grid-template-columns: 96px minmax(0, 1fr) 40px; row-gap: 6px; }
  .agenda__place { grid-column: 2; grid-row: 2; }
  .agenda__price { grid-column: 2; grid-row: 3; }
  .agenda__go { grid-column: 3; grid-row: 1 / span 3; }
  .hover-preview { display: none; }

  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .way:nth-child(even) { margin-top: 64px; }
  .way:nth-child(3) { margin-top: -64px; }
  .way:nth-child(4) { margin-top: 0; }

  .feature__media, .feature--rev .feature__media { grid-column: 1 / span 10; order: 0; }
  .feature__body, .feature--rev .feature__body { grid-column: 1 / -1; margin-top: clamp(80px, 14vw, 120px); }
  .feature__media .frame--b { right: -12%; }
  .feature--rev .feature__media .frame--b { left: auto; right: -12%; }

  .ingredients__list { grid-column: 1 / -1; order: 2; }
  .ingredients__stage { grid-column: 1 / -1; position: relative; top: 0; display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: end; margin-bottom: 32px; }
  .ingredients__stage p { margin: 0; min-height: 0; }
  .ingredients__stage .frame { outline-width: 8px; margin: 8px; }
  .ingredients__item .who { display: none; }
  .ingredients__item { grid-template-columns: 36px 1fr; }

  .workshops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wcard:nth-child(3n+2) { margin-top: 0; }
  .wcard:nth-child(even) { margin-top: 64px; }

  .page-hero .specimen-no { grid-column: 1 / -1; margin-bottom: 24px; padding-top: 0; }
  .page-hero h1, .breadcrumbs { grid-column: 1 / -1; }
  .page-hero .lead { grid-column: 1 / span 10; }

  .detail-hero__text { grid-column: 1 / -1; }
  .detail-hero__media { grid-column: 3 / -1; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .detail-body__main, .detail-body__aside { grid-column: 1 / -1; }
  .detail-body__aside { position: relative; top: 0; margin-top: 72px; }

  .newsletter h2, .newsletter form { grid-column: 1 / -1; }
  .newsletter form { margin-top: 32px; }

  .footer__col, .footer__col:first-child, .footer__col:nth-child(n) { grid-column: span 6; margin-bottom: 40px; }

  .ribbon { grid-template-columns: 1fr; }
  .grid > .req-intro, .grid > .req-form, .grid > .use-intro, .grid > .accordion { grid-column: 1 / -1 !important; }
  .grid > .req-form, .grid > .accordion { margin-top: 48px; }
  .req-intro .frame { display: none; }
  .ribbon > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 720px) {
  :root { --fs-body: 1rem; }

  .hero__media { grid-column: 1 / -1; }
  .hero__tag { left: 12px; bottom: 12px; }
  .hero__actions .btn { flex: 1 1 auto; }

  .agenda__row { grid-template-columns: 74px minmax(0, 1fr) 36px; gap: 4px 16px; padding: 22px 0; }
  .agenda__row:hover { padding-left: 0; }
  .agenda__date { font-size: 1.25rem; }
  .agenda__go { width: 36px; height: 36px; }

  .ways { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .way__meta { flex-direction: column; gap: 4px; }
  .way p { display: none; }

  .workshops { grid-template-columns: 1fr; }
  .wcard:nth-child(even) { margin-top: 0; }
  .wcard__tag { display: none; }


  .suppliers { grid-template-columns: 1fr 1fr; }
  .supplier { padding: 20px 16px; min-height: 150px; }
  .supplier strong { font-size: 1.2rem; }

  .facts { grid-template-columns: 1fr 1fr; }
  .facts div, .facts div + div { padding: 18px 12px 18px 0; }
  .facts div:nth-child(even) { padding-left: 14px; }
  .facts dd { font-size: 1.15rem; }

  .detail-hero__media { grid-column: 1 / -1; margin-top: 24px; }
  .gallery-strip { grid-template-columns: 1fr 1fr; }

  .field-row { grid-template-columns: 1fr; }
  .newsletter .inline { flex-direction: column; align-items: stretch; }

  .contact-list a, .contact-list div { grid-template-columns: 1fr; gap: 4px; }
  .contact-list .arrow { display: none; }

  .footer__col, .footer__col:first-child, .footer__col:nth-child(n) { grid-column: 1 / -1; }

  .dialog__actions { grid-template-columns: 1fr; }
  .ingredients__stage { grid-template-columns: 120px 1fr; }
  .feature__media .frame--b { width: 50%; right: -4%; bottom: -18%; }
  .feature--rev .feature__media .frame--b { right: -4%; }
  .feature__media, .feature--rev .feature__media { grid-column: 1 / span 11; }
  .specimen.hide-sm { display: none; }
}

@media (max-width: 420px) {
  .suppliers { grid-template-columns: 1fr; }
  .hero__actions { width: 100%; }
}

/* fine pointer only: hover affordances that rely on a mouse */
@media (hover: none) {
  .wcard__tag { display: none; }
  .agenda__row:hover { padding-left: 0; }
  .agenda__row:hover::before { transform: scaleY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Iteration 2 ---------- */
@media (max-width: 960px) {
  .book-bar {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
    justify-content: space-between; align-items: center; gap: 16px;
    background: rgba(244, 239, 230, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 8px 8px 8px 20px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px rgba(42, 37, 32, .5);
    transition: transform .5s var(--ease-out), opacity .3s;
  }
  .book-bar strong { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; }
  .book-bar span { font-size: 13px; color: var(--ink-soft); }
  .book-bar .btn { min-height: 44px; }
  .book-bar.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .plate__foot { grid-template-columns: 1fr 1fr; }
  .plate__foot .plate__title { grid-column: 1 / -1; }
  .plate__legend { columns: 2; }
}
@media (max-width: 720px) {
  .specimen.keep-sm { --w: 74px !important; left: auto !important; right: 14px !important; top: calc(var(--header-h) + 18px) !important; bottom: auto !important; }
  .hero .specimen.keep-sm { --w: 92px !important; top: calc(var(--header-h) + 6px) !important; }
  .page-hero .specimen.keep-sm { --w: 54px !important; top: calc(var(--header-h) + 2px) !important; }
  .page-hero { padding-top: calc(var(--header-h) + 72px); }
  .plate { padding: 28px 12px 24px; }
  .plate__sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 6px; justify-items: center; }
  .plate__item { height: clamp(92px, 26vw, 130px); }
  .plate__item img { max-width: 100%; object-fit: contain; }
  .plate__item:nth-child(n) { margin-bottom: 0; }
  .plate__legend { columns: 1; font-size: 13.5px; }
  .plate__foot { grid-template-columns: 1fr; gap: 20px; }
  .wcard--cta__inner { aspect-ratio: auto; min-height: 260px; }
  .catalog-bar { flex-wrap: wrap; }
  .suppliers { grid-template-columns: 1fr 1fr; }
  .detail-hero ~ .site-footer, body[data-page="detalle"] .site-footer { padding-bottom: 90px; }
}
@media (max-width: 420px) {
  .suppliers { grid-template-columns: 1fr; }
}

@media (max-width: 960px) { .signature { grid-column: 1 / -1; } }
@media (max-width: 720px) { .plate__item:nth-child(2), .plate__item:nth-child(7) { margin-bottom: 0; } }

@media (max-width: 480px) {
  .agenda__row { grid-template-columns: minmax(0, 1fr) 36px; }
  .agenda__date { grid-column: 1; grid-row: 1; font-size: .95rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
  .agenda__date small { margin-top: 0; }
  .agenda__title { grid-column: 1; grid-row: 2; }
  .agenda__place { grid-column: 1; grid-row: 3; }
  .agenda__price { grid-column: 1; grid-row: 4; }
  .agenda__go { grid-column: 2; grid-row: 1 / span 4; }
}

/* hero film */
@media (max-width: 960px) {
  .hero__title, .hero__foot { grid-column: 1 / -1; }
  .hero__foot { margin-top: 28px; padding-bottom: 0; }
  .hero__film { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  .hero__film { aspect-ratio: 4 / 5; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); width: auto; }
  .film-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .film-toggle { padding: 0; width: 44px; justify-content: center; }
}

/* full-screen video hero — small screens use the dedicated vertical cut */
@media (max-width: 720px) {
  .hero.hero--full { background-image: url("../assets/images/hero-video-poster-vertical.webp"); }
  .hero--full .display { font-size: clamp(3.4rem, 15vw, 5rem); }
  .hero__content { padding-bottom: 92px; }
  .hero--full .hero__foot { max-width: none; }
  .hero--full .hero__actions .btn { width: 100%; }
  .hero__plate { display: none; }
  .hero--full .film-toggle { bottom: 22px; right: 16px; }
  .hero__cue { display: none; }
  .hero__bg::after {
    background:
      linear-gradient(to bottom, rgba(28, 23, 19, .55) 0, rgba(28, 23, 19, 0) 140px),
      linear-gradient(to top, rgba(28, 23, 19, var(--scrim-m1, .88)) 0, rgba(28, 23, 19, var(--scrim-m2, .7)) 52%, rgba(28, 23, 19, .2) 74%, rgba(28, 23, 19, 0) 86%);
  }
}
@media (max-width: 960px) { .nav .lang { display: none; } }
@media (max-width: 720px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-item:nth-child(even) { margin-top: 0; }
  .shop-item__buy .btn { flex: 1; }
}
@media (max-width: 960px) { .grid > .steps { grid-column: 1 / -1 !important; margin-top: 40px; } }

/* Mobile hero: the film sits in a 4:5 frame at the top (≈45% of the shot visible instead
   of ≈30% → much less "zoom") and melts into the dark ground that carries the type. */
@media (max-width: 720px) {
  .hero.hero--full { background: #1c1713; }
  .hero__bg { inset: 0 0 auto 0; aspect-ratio: 4 / 5; background: #1c1713 url("../assets/images/hero-video-poster-vertical.webp") center / cover no-repeat; }
  .hero__bg video { inset: 0; top: 0; left: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; transform: none; object-fit: cover; }
  .hero__bg::after {
    background: linear-gradient(to bottom, rgba(28, 23, 19, .55) 0, rgba(28, 23, 19, 0) 120px, rgba(28, 23, 19, 0) 42%, rgba(28, 23, 19, .78) 78%, #1c1713 100%);
  }
}
@media (max-width: 720px) {
  /* type always starts where the film has already melted into the dark ground */
  .hero__content { padding-top: calc(125vw * .74); }
}