/* ============================================================
   PAGINE — hero editoriale, testate, contatti
   ============================================================ */

/* ============================================================
   HERO A TUTTO VETRO
   Il titolo sta SULLA foto, non sotto. Su un telefono una foto
   gigante con la scritta appiccicata sotto sono due blocchi morti
   che si mangiano due schermate: qui l'hero e' una schermata sola,
   e il tasto per prenotare e' sopra la piega.
   ============================================================ */
.hero {
  position: relative;
  display: grid; align-items: end;
  /* --alto-schermo: altezza fissata in px da app.js al caricamento e
     ricalcolata solo se cambia la LARGHEZZA. Con le sole unita' vh/svh
     alcuni browser (app Google, Instagram, Samsung) allungano l'hero
     mentre si scorre, quando la barra dell'indirizzo sparisce: la foto
     "si ingrandisce" sotto il dito. Segnalato da Christian il 25/09. */
  min-height: calc(var(--alto-schermo, 100svh) - 72px);
  overflow: hidden;
  isolation: isolate;
}
/* fallback per i browser senza svh: 100vh e' comunque meglio del nulla */
@supports not (height: 100svh) { .hero { min-height: calc(var(--alto-schermo, 100vh) - 72px); } }

.hero__sfondo { position: absolute; inset: 0; z-index: 0; }
.hero__sfondo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 26%;
}
/* Velo: la foto e' chiara in alto, il testo sta in basso.
   Denso sotto, quasi trasparente sopra, cosi' la foto si vede. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      hsl(336 14% 5% / .58) 0%,
      hsl(336 14% 5% / .12) 26%,
      hsl(336 14% 5% / .58) 62%,
      hsl(336 14% 5% / .94) 100%);
  pointer-events: none;
}

.hero__testo {
  position: relative; z-index: 2;
  display: grid; gap: var(--space-4);
  padding-block: var(--space-9) calc(var(--space-11) + env(safe-area-inset-bottom));
  max-width: 640px;
}
.hero__testo h1 { max-width: 13ch; text-wrap: balance; }
.hero h1 {
  font-size: var(--text-display);
  line-height: 1.02; letter-spacing: -0.028em;
  text-shadow: 0 2px 24px hsl(336 14% 4% / .5);
}
.hero .eyebrow { color: hsl(327 100% 76%); }
.hero__sub {
  font-size: var(--text-lg); line-height: 1.55;
  color: hsl(20 20% 92%); max-width: 34ch; margin: 0;
  text-shadow: 0 1px 14px hsl(336 14% 4% / .55);
}
.hero .actions { margin-top: var(--space-2); }
.hero .stato-oggi { justify-self: start; margin-top: var(--space-1); }

/* La freccia in fondo: dice che sotto c'e' altro, senza scriverlo */
.hero__giu {
  position: absolute; z-index: 3;
  left: 50%; bottom: var(--space-5); translate: -50% 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid hsl(0 0% 100% / .3);
}
.hero__giu span {
  width: 8px; height: 8px;
  border-right: 1.5px solid hsl(0 0% 100% / .8);
  border-bottom: 1.5px solid hsl(0 0% 100% / .8);
  rotate: 45deg; translate: 0 -1px;
  animation: scendi 1.9s var(--ease) infinite;
}
@keyframes scendi {
  0%, 100% { transform: translateY(-2px); opacity: .55; }
  50%      { transform: translateY(2px);  opacity: 1; }
}
.hero__giu:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }

@media (max-width: 599px) {
  .hero .actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: var(--space-3); }
  .hero .actions .btn { width: 100%; }
  .hero__testo { padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
  .hero { min-height: calc(var(--alto-schermo, 100svh) * .88 - 72px); }
  .hero__testo { padding-block: var(--space-11) var(--space-12); }
  .hero__sfondo img { object-position: center 22%; }
}
@media (prefers-reduced-motion: reduce) { .hero__giu span { animation: none; } }

/* ============================================================
   TESTATA DELLE PAGINE INTERNE
   ============================================================ */
.page-head { padding-block: var(--space-8) var(--section-y); }
.page-head__inner { display: grid; gap: var(--space-3); max-width: 24ch; }
.page-head__inner h1 { max-width: none; }
.page-head .lead { max-width: 52ch; margin-top: var(--space-2); }
@media (min-width: 900px) {
  .page-head__inner { max-width: 20ch; }
  .page-head--largo .page-head__inner { max-width: 26ch; }
}

.breadcrumb { margin-bottom: var(--space-5); font-size: var(--text-caption); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0;
                 display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2);
                              color: var(--c-text-muted); }
.breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb [aria-current="page"] { color: var(--c-text); }

/* ============================================================
   FASCIA FOTOGRAFICA CON VELO (CTA finale, blocco firma)
   ============================================================ */
.fascia-foto { position: relative; isolation: isolate; overflow: hidden; }
.fascia-foto__media { position: absolute; inset: 0; z-index: -2; }
.fascia-foto__media img { width: 100%; height: 100%; object-fit: cover;
                          object-position: center 35%; }
.fascia-foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, hsl(336 10% 7% / .80) 0%,
                            hsl(336 10% 7% / .68) 50%,
                            hsl(336 10% 7% / .86) 100%),
    hsl(336 10% 7% / .30);
}

.firma { position: relative; isolation: isolate; overflow: hidden; }
.firma__media { position: absolute; inset: 0; z-index: -2; }
.firma__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.firma::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, hsl(336 10% 7% / .74) 0%, hsl(336 10% 7% / .82) 100%),
              hsl(336 10% 7% / .30);
}
.firma__inner { display: grid; gap: var(--space-4); max-width: 22ch;
                justify-items: center; text-align: center; margin-inline: auto; }

/* ============================================================
   PAGINA COLORE — blocchi tecnica
   ============================================================ */
.tecnica + .tecnica { margin-top: var(--space-10); }
.tecnica__testo { display: grid; gap: var(--space-3); align-content: center; }
.tecnica__testo p { color: var(--c-text-muted); }
.tecnica--senza-foto .tecnica__testo { max-width: 62ch; }

/* ============================================================
   PAGINA CONTATTI
   Un solo filo verticale: cosa fare, quando, dove, poi scrivere.
   Niente due colonne che si contendono l'attenzione.
   ============================================================ */
.azioni-grandi {
  display: grid; gap: var(--space-3);
  margin-top: var(--space-6);
}
@media (min-width: 720px) {
  .azioni-grandi { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}

.azione {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-lg);
  text-decoration: none;
  border: 1.5px solid var(--c-border-strong);
  color: var(--c-text);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              transform var(--dur-press) var(--ease);
}
.azione:hover  { border-color: var(--c-accent); }
.azione:active { transform: scale(.985); }
.azione__icona {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid currentColor;
  color: var(--c-accent);
}
.azione__icona svg { width: 20px; height: 20px; }
.azione__testo { display: grid; gap: 2px; min-width: 0; }
.azione__testo b {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-h4); line-height: 1.2; letter-spacing: -0.01em;
  font-variation-settings: "opsz" 24;
}
.azione__testo span { font-size: var(--text-small); color: var(--c-text-muted); }

/* La chiamata e' l'azione principale: piena, non contornata. */
.azione--primaria {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
}
.azione--primaria:hover { background: var(--c-primary-hover);
                          border-color: var(--c-primary-hover);
                          box-shadow: var(--glow-primary); }
.azione--primaria .azione__icona { color: var(--c-on-primary); }
.azione--primaria .azione__testo span { color: color-mix(in srgb, var(--c-on-primary) 78%, transparent); }

/* Le sezioni della pagina contatti: una sotto l'altra, con filetto */
.blocco-contatto { padding-block: var(--section-y-tight); }
.blocco-contatto + .blocco-contatto { border-top: 1px solid var(--c-hairline); }
.blocco-contatto h2 { margin-bottom: var(--space-4); }

@media (min-width: 900px) {
  .blocco-contatto--due {
    display: grid;
    grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }
  .blocco-contatto--due > h2 { margin-bottom: 0; }
}

.mappa-placeholder {
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  display: grid; gap: var(--space-2); justify-items: start;
  align-content: center;
  min-height: 160px;
}

.contatti-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.contatti-lista a {
  color: var(--c-accent); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease),
              text-decoration-thickness var(--dur-fast) var(--ease);
}
.contatti-lista a:hover  { color: var(--c-accent-hover); text-decoration-thickness: 2px; }
.contatti-lista a:active { color: var(--c-primary-active); }