/* La Lupa: founder rounds 3-4 (01-02/10/2026), on top of the original styles.css.
   1) everything a little smaller  2) centred hero with the mosaic wolf as a faded backdrop
   3) mobile: the three arches as a triptych (no sideways scroll)
   4) desktop: the photos fill the three PAINTED arches exactly, at every screen width */

/* ---------- desktop: everything ~12-14% smaller, EXCEPT the arches + hero backdrop (they must stay aligned) ---------- */
@media (min-width: 901px) {
  .hero .hero-copy { zoom: 0.86; }
  .cucina-heading, .menu-section, .story, .booking, .site-footer { zoom: 0.88; }
}

/* ---------- hero: centred copy, wolf behind it ---------- */
.hero::after { display: none; }
.hero .hero-copy {
  right: 0;
  left: 0;
  width: min(820px, 72%);
  margin: 0 auto;
  text-align: center;
}
.hero-copy .eyebrow { justify-content: center; }
.hero-copy .eyebrow::after {
  width: 31px; height: 1px; flex: none; background: var(--terracotta); content: "";
}
.hero-actions { justify-content: center; margin-right: auto; margin-left: auto; }
.hero-location { justify-content: center; }
.hero-review-proof { margin-right: auto; margin-left: auto; justify-content: center; }
.hero .wolf-stage {
  z-index: 2;
  top: clamp(30px, 4vw, 70px);
  right: 0;
  left: 0;
  width: min(62vw, 860px);
  margin: 0 auto;
}
.hero .wolf-image { opacity: 0.13; filter: grayscale(0.35) saturate(0.9); }
/* the mosaic has a straight bottom edge: fade it out so no line shows between the arches */
.hero .wolf-image {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 93%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 93%);
}
.wolf-shimmer, .wolf-stage figcaption { display: none; }
.wolf-art { animation: none; }

/* <picture> only swaps the file (desktop = arch-shaped crop, mobile = portrait crop) */
.niche-shell--foto picture { display: contents; }

/* ---------- desktop: photos locked to the painted arches ----------
   The hero painting (1584x993) and the photos share ONE scale, --u = screen px per painting px.
   --u is width-driven (all three arches always fully visible), at least "cover", at most 1:1 below 1584 px.
   Arch openings measured on the painting: see tools/fit_arches.py. */
@media (min-width: 901px) {
  main { container-type: inline-size; }
  .hero,
  .dishes {
    --u: max(calc(100cqw / 1584), min(calc(100cqw / 1403), 1px));
    --bx: clamp(calc(100cqw - var(--u) * 1584), calc(50cqw - var(--u) * 831), 0px);
  }
  .hero {
    /* room the centred copy needs above the arches; on narrow desktops the painting starts a little lower */
    --copy-zone: clamp(390px, calc(236px + 14.4vw), 457px);
    --ext: max(0px, calc(var(--copy-zone) - var(--u) * 474));
    height: calc(var(--ext) + var(--u) * 993);
    min-height: 0;
    background: var(--paper);
  }
  .hero::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: url("assets/home-scene-4b-v4.webp") no-repeat;
    background-position: var(--bx) var(--ext);
    background-size: calc(var(--u) * 1584) auto;
    content: "";
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--ext), #000 calc(var(--ext) + min(var(--ext) * 1.6, 160px)));
    mask-image: linear-gradient(to bottom, transparent var(--ext), #000 calc(var(--ext) + min(var(--ext) * 1.6, 160px)));
  }

  /* the gallery starts exactly at the top of the arches and ends with the hero */
  .dishes { margin-top: calc(var(--u) * -519); }
  .niche-gallery {
    position: relative;
    display: block;
    height: calc(var(--u) * 519);
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }
  /* the painted olive branch + plant stay IN FRONT of the photos, as in the painting */
  .niche-gallery::after {
    position: absolute;
    z-index: 6;
    top: calc(var(--u) * -474);
    left: var(--bx);
    width: calc(var(--u) * 1584);
    height: calc(var(--u) * 993);
    background: url("assets/foto/piante-davanti.webp") 0 0 / 100% 100% no-repeat;
    content: "";
    pointer-events: none;
  }
  .dish-niche { position: absolute; top: 0; height: calc(var(--u) * 397); }
  .dish-niche:nth-child(1) { left: calc(var(--bx) + var(--u) * 147); width: calc(var(--u) * 420); }
  .dish-niche:nth-child(2) { left: calc(var(--bx) + var(--u) * 591); width: calc(var(--u) * 430); }
  .dish-niche:nth-child(3) { top: calc(var(--u) * 2); left: calc(var(--bx) + var(--u) * 1058); width: calc(var(--u) * 457); height: calc(var(--u) * 395); }

  .niche-shell.niche-shell--foto {
    --arch: 50% 50% 0 0 / 37.8% 37.8% 0 0;
    height: 100%;
    overflow: visible;
    border-radius: 0;
    background: none !important;
    box-shadow: none;
  }
  .dish-niche:nth-child(2) .niche-shell--foto { --arch: 50% 50% 0 0 / 38% 38% 0 0; }
  .dish-niche:nth-child(3) .niche-shell--foto { --arch: 50% 50% 0 0 / 40.5% 40.5% 0 0; }
  .niche-shell--foto::before { display: none; }
  .niche-shell--foto .niche-foto {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--arch);
    object-fit: cover;
    object-position: center;
  }
  /* soft shade inside the top/left edge of the niche: the light in the painting comes from the upper left */
  .niche-shell--foto::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: var(--arch);
    box-shadow:
      inset 0 calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * -12) rgba(74, 44, 24, 0.3),
      inset calc(var(--u) * 12) 0 calc(var(--u) * 18) calc(var(--u) * -12) rgba(74, 44, 24, 0.16);
    content: "";
    pointer-events: none;
  }

  /* the inscriptions move under each arch, on the stone ledge */
  .niche-shell--foto .niche-inscription,
  .dish-niche:nth-child(3) .niche-shell--foto .niche-inscription {
    top: calc(100% + var(--u) * 30);
    right: 0;
    left: 0;
    width: 100%;
    min-width: 0;
    justify-items: center;
    transform: none;
  }
  .niche-shell--foto .niche-inscription small { font-size: max(8px, calc(var(--u) * 10)); }
  .niche-shell--foto .niche-inscription strong { font-size: max(15px, calc(var(--u) * 23)); }
  .niche-shell--foto .niche-inscription::after { margin: calc(var(--u) * 9) auto 0; }
}

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  /* hero: centred, wolf as backdrop, a bit smaller */
  .hero {
    min-height: 0;
    padding: 118px var(--page-pad) 44px;
    background: var(--paper);
    overflow: hidden;
  }
  .hero .hero-copy { width: 100%; }
  .wordmark { font-size: clamp(62px, 19vw, 96px); }
  .hero-statement { font-size: clamp(36px, 10.5vw, 54px); }
  .hero-actions { justify-items: center; }
  .roman-cta, .menu-cta { margin-right: auto; margin-left: auto; }
  .hero .wolf-stage {
    position: absolute;
    top: 150px;
    right: -30%;
    left: -30%;
    width: auto;
    margin: 0;
  }
  .hero .wolf-image { opacity: 0.12; }

  /* the three arches side by side, captions underneath */
  .dishes { padding: 40px 0 70px; }
  .niche-gallery {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    height: auto;
    padding: 0 var(--page-pad);
    overflow: visible;
    scroll-snap-type: none;
  }
  .dish-niche { height: auto; scroll-snap-align: none; }
  .niche-shell.niche-shell--foto {
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none !important;
  }
  .niche-shell--foto::before { display: none; }
  .niche-shell--foto .niche-foto {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(73, 52, 37, 0.16);
    border-radius: 999px 999px 4px 4px;
    box-shadow: 0 14px 30px rgba(74, 47, 29, 0.12);
  }
  .niche-shell--foto .niche-inscription,
  .dish-niche:nth-child(3) .niche-shell--foto .niche-inscription {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 12px;
    transform: none;
  }
  .niche-shell--foto .niche-inscription small { font-size: 8.5px; letter-spacing: 0.16em; }
  .niche-shell--foto .niche-inscription strong { font-size: 15px; letter-spacing: 0.06em; }

  /* display type a little smaller everywhere */
  .cucina-heading h2 { font-size: clamp(44px, 13vw, 64px); }
  .menu-heading h2 { font-size: clamp(46px, 13vw, 66px); }
  .menu-item strong { font-size: 21px; }
  .story h2, .booking h2 { font-size: clamp(42px, 12vw, 60px); }
}