/* Hero */
.pl-hero { min-height: 100svh; display: flex; align-items: center; position: relative; }
/* L'header della home è trasparente sopra l'hero (#16) ma resta position:sticky,
   quindi occupa comunque spazio nel flusso e spingerebbe l'hero sotto la piega,
   nascondendo lo scroll-hint in fondo. Lo tiriamo su di un'altezza-header così
   l'hero riempie davvero il viewport. Il padding interno (>=96px) tiene il
   contenuto ben sotto la barra. --pl-header-h è una stima: qualche px di
   scarto non è percepibile (si sposta solo padding vuoto). */
.pl-home .pl-hero { margin-top: calc(-1 * var(--pl-header-h)); }
.pl-hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.pl-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--scrim-dark) 55%, transparent), color-mix(in srgb, var(--scrim-dark) 78%, transparent)); }
.pl-hero__inner { position: relative; z-index: 2; padding-block: var(--space-8); }
.pl-hero__mark { position: absolute; right: 4vw; top: 12vh; z-index: 1; font-family: var(--font-cjk); font-size: clamp(8rem, 24vw, 22rem); color: var(--gold); line-height: 1; pointer-events: none; opacity: 0.12; }
.pl-hero__title { font-size: var(--fs-hero); font-weight: 700; margin: 0 0 var(--space-4); }
.pl-hero__lead { font-size: var(--fs-lead); max-width: 40ch; color: var(--ink); }
.pl-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.pl-hero__scroll { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); font-size: var(--fs-eyebrow); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); }

/* Intro */
.pl-intro__inner { padding-block: var(--space-8); max-width: 760px; }
.pl-intro h2 { font-size: var(--fs-h2); }
.pl-intro p { font-size: var(--fs-lead); color: var(--ink-soft); }
.pl-intro .pl-rule { margin-top: var(--space-6); }

@media (max-width: 760px) {
  .pl-hero__mark { font-size: 30vw; right: -4vw; top: auto; bottom: 8vh; }
  .pl-hero__inner, .pl-intro__inner { padding-block: var(--space-7); }
  /* header più alto su mobile (hamburger 44px): compensa il pull dell'hero */
  .pl-home .pl-hero { margin-top: -5rem; }
}

/* Spotlight AYCE (capitolo scuro pinnato) */
.pl-spotlight { min-height: 100svh; display: flex; align-items: center; }
.pl-spotlight__bg { position: absolute; inset: -10% 0; z-index: 0; background: radial-gradient(120% 80% at 70% 20%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 60%); }
.pl-spotlight__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; padding-block: var(--space-8); }
.pl-spotlight h2 { font-size: var(--fs-h2); }
.pl-spotlight__prices { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: var(--space-3); }
.pl-spotlight__prices li { display: flex; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); }
.pl-spotlight__prices span:first-child { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--gold); }
.pl-spotlight__note { font-size: var(--fs-eyebrow); color: var(--ink-soft); }
@media (max-width: 760px) {
  /* padding-block ridotto qui (non nel blocco @media più in alto): la
     dichiarazione base di .pl-spotlight__inner sta più sotto e vincerebbe
     a parità di specificità. Il capitolo è pinnato, deve stare in 100svh. */
  .pl-spotlight__inner { grid-template-columns: 1fr; gap: var(--space-4); padding-block: var(--space-7); }
}

/* Teaser menù (3 porte) + galleria bento — capitoli chiari */
.pl-teaser .pl-container, .pl-bento .pl-container { padding-block: var(--space-8); }
.pl-teaser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
.pl-teaser__door { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.pl-teaser__img { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.pl-teaser__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.pl-teaser__door:hover .pl-teaser__img img { transform: scale(1.04); }
.pl-teaser__title { font-family: var(--font-display); font-size: var(--fs-h3); margin-top: var(--space-3); }
.pl-teaser__sub { color: var(--ink-soft); font-size: 0.9375rem; }

.pl-bento__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: var(--space-3); margin-top: var(--space-5); }
.pl-bento__item { margin: 0; overflow: hidden; border-radius: var(--radius); }
.pl-bento__item img { width: 100%; height: 100%; object-fit: cover; }
.pl-bento__item--0 { grid-column: span 2; grid-row: span 2; }
.pl-bento__item--3 { grid-row: span 2; }
.pl-bento__item--5 { grid-column: span 2; }
.pl-bento__more { margin-top: var(--space-4); }

@media (max-width: 760px) {
  .pl-teaser__grid { grid-template-columns: 1fr; }
  .pl-bento__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .pl-bento__item--0 { grid-column: span 2; }
  .pl-bento__item--3, .pl-bento__item--5 { grid-column: span 1; grid-row: span 1; }
}

/* Sezione info + mappa (ultimo capitolo home) */
.pl-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; padding-block: var(--space-8); }
.pl-info__addr { color: var(--ink-soft); line-height: 1.6; }
.pl-info__hours { display: flex; gap: var(--space-5); margin: var(--space-4) 0; }
.pl-info__hours dt { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-soft); }
.pl-info__hours dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); }
@media (max-width: 760px) { .pl-info__grid { grid-template-columns: 1fr; gap: var(--space-4); } }