/* ===========================================================================
   Hotel — studio BULB dentro un hotel (template-hotel.php, prefisso ho-).
   Lo stile è quello delle landing v2 (pages/fitness-lover.css): stessi token,
   bottoni a pillola rossi, titoli in maiuscolo, fasce di colore alternate. Le
   regole comuni (token, testata, bottoni, tipografia) sono copiate da lì: se
   cambiano sulla fitness lover, vanno riportate qui a mano (riporta-landing-pt.py
   non tocca questo file).
   Fasce: rosso Functional (in alto), nero (lo studio), indaco (foto), grigio
   chiaro (come prenotare), poi il footer rosso di sv-base.css.
   Testata: niente menu né burger; marchio, etichetta, selettore IT / EN (plugin
   BULB Lingue) e bottone, anche da telefono.
   =========================================================================== */

:root {
  --bg: #170144;
  --bg-alt: #1D1A1F;
  --bg-deep: #1D1A1F;
  --surface: #1D1A1F;
  --border: rgba(255,255,255,.14);
  --border-soft: rgba(255,255,255,.08);
  --accent: var(--bulb-red);
  --accent-dark: var(--bulb-lime);
  --accent-hot: #fff;
  --accent-soft: rgba(220,0,52,.30);
  --accent-tint: rgba(220,0,52,.14);
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 24px;
  --container: 1200px;
  --gutter: 28px;
}
body { line-height: 1.5; }
a:hover { color: var(--bulb-lime); text-decoration: none; }

/* --- Testata --------------------------------------------------------------- */
.site-header {
  background: rgba(29,26,31,.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* L'altezza è --nav-h: la usa anche lo spazio della testata fissa da telefono. */
html:root { --nav-h: 68px; }
.nav { height: var(--nav-h); gap: 18px; justify-content: flex-start; }
.nav-claim {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #B4B3B4;
}
.site-header .lingue { margin-left: auto; }
.nav-cta { margin-left: 4px; }

/* --- Bottoni: pillola rossa, al passaggio bianca col testo rosso ----------- */
.btn {
  gap: 8px; border-radius: 40px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: 0; text-transform: none; line-height: 1.2;
  padding: 16px 28px; transition: background .2s ease, color .2s ease;
}
.btn:hover { transform: none; }
.btn-primary { background: var(--bulb-red); color: #fff; }
.btn-primary:hover { background: #fff; color: var(--bulb-red); }
.btn-primary::after { content: none; }
.btn-lg { font-size: 17px; padding: 17px 32px; }
.btn-sm { font-size: 14px; padding: 11px 20px; }

/* --- Tipografia di pagina --------------------------------------------------- */
.eyebrow { font-size: 13px; letter-spacing: .24em; color: var(--bulb-lime); }
.eyebrow::before, .eyebrow::after { color: inherit; font-weight: inherit; }
.eyebrow::before { margin-right: .5em; }
.eyebrow::after { margin-left: .25em; }
h1 { text-transform: uppercase; letter-spacing: -.03em; line-height: .95; }
/* Nel titolo principale la parte in evidenza è sottolineata in lime. */
h1 .serif {
  color: #fff;
  text-decoration: underline; text-decoration-color: var(--bulb-lime);
  text-decoration-thickness: .09em; text-underline-offset: .12em;
}
.band-glow::after, .band-griglia::after { content: none; }

.ho-h2 {
  font-weight: 900; letter-spacing: -.03em; line-height: 1; text-transform: uppercase;
  font-size: clamp(34px, 5vw, 60px); margin: 16px 0 0; max-width: 18ch; text-wrap: balance;
}
.ho-h2 .serif { color: var(--bulb-lime); }
.ho-lead { color: #D6D6D6; max-width: 54ch; font-size: 18px; margin-top: 22px; text-wrap: pretty; }

/* --- In alto: il rosso Functional della v2, testo e foto ------------------- */
.ho-hero {
  padding: 88px 0 96px;
  background:
    radial-gradient(55% 70% at 18% 22%, #170144 0%, rgba(23,1,68,0) 65%),
    radial-gradient(45% 60% at 88% 80%, #2B0B63 0%, rgba(43,11,99,0) 65%),
    radial-gradient(60% 70% at 70% 8%, #FF0A47 0%, rgba(255,10,71,0) 60%),
    #DC0034;
}
.ho-hero .eyebrow { color: #fff; }
.ho-hero-corpo { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.ho-hero-testo { flex: 1 1 460px; }
.ho-hero-testo h1 { font-size: clamp(40px, 5.6vw, 76px); margin: 22px 0 0; text-wrap: balance; }
.ho-hero-lead { font-size: clamp(17px, 1.9vw, 21px); color: #fff; max-width: 40ch; margin: 28px 0 0; text-wrap: pretty; }
/* La nota è una pastiglia, come quelle del layout. */
.ho-hero-nota {
  display: inline-block; margin-top: 26px; padding: 9px 14px; border-radius: 40px;
  background: #1D1A1F; color: var(--bulb-lime);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
}
.ho-hero-cta { margin-top: 28px; }
/* Sul rosso il bottone è bianco, come i riquadri rossi della fitness lover. */
.ho-hero .btn-primary { background: #fff; color: var(--bulb-red); }
.ho-hero .btn-primary:hover { background: #1D1A1F; color: #fff; }
.ho-hero-foto {
  flex: 1 1 420px; margin: 0; border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(23,1,68,.45);
}
.ho-hero-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Lo studio: tre tasselli sul nero --------------------------------------- */
.ho-studio { background: #1D1A1F; padding: 96px 0; }
.ho-schede {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px;
  margin-top: 48px; background: rgba(255,255,255,.1); border-radius: 24px; overflow: hidden;
}
.ho-scheda { background: #1D1A1F; padding: 32px 26px; display: flex; flex-direction: column; gap: 12px; }
.ho-scheda-k {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bulb-lime); margin-bottom: 22px;
}
.ho-scheda h3 { font-weight: 800; font-size: 22px; letter-spacing: -.01em; line-height: 1.2; }
.ho-scheda p { color: #D6D6D6; font-size: 16px; }

/* --- Le foto: la prima larga, la seconda alta ------------------------------- */
.ho-foto { background: #170144; padding: 96px 0; }
.ho-galleria {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px;
  grid-auto-flow: dense; gap: 14px; margin-top: 44px;
}
.ho-galleria-voce { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: #1D1A1F; }
.ho-galleria-voce:first-child { grid-column: span 2; }
.ho-galleria-voce:nth-child(2) { grid-row: span 2; }
.ho-galleria-voce img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ho-galleria-voce figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px;
  background: linear-gradient(180deg, transparent, rgba(29,26,31,.85));
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff;
}

/* --- Come prenotare: la fascia grigio chiaro -------------------------------- */
.ho-prenota {
  --ink: #1D1A1F; --ink-soft: #4A474D; --ink-mute: #4A474D;
  background: #D6D6D6; color: #1D1A1F; padding: 96px 0;
}
.ho-prenota .eyebrow { color: var(--bulb-red-deep); }
.ho-prenota .ho-h2 .serif { color: var(--bulb-red-deep); }
.ho-prenota .ho-lead { color: #1D1A1F; }
.ho-prenota-corpo { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.ho-prenota-testo { flex: 1 1 520px; }
.ho-passi { display: grid; gap: 12px; margin-top: 36px; counter-reset: none; }
.ho-passo {
  background: #fff; border-radius: 18px; padding: 22px 24px;
  display: flex; gap: 20px; align-items: flex-start;
}
.ho-passo-n {
  font-family: var(--font-mono); color: var(--bulb-red-deep); font-size: 30px; font-weight: 500;
  line-height: 1; letter-spacing: 0; min-width: 2ch; font-feature-settings: "zero";
}
.ho-passo h3 { font-weight: 800; font-size: 19px; letter-spacing: -.01em; line-height: 1.25; color: #1D1A1F; }
.ho-passo p { color: #4A474D; font-size: 16px; margin-top: 4px; }
.ho-prenota-foto { flex: 1 1 360px; max-width: 480px; margin: 0 auto; border-radius: 24px; overflow: hidden; }
.ho-prenota-foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* --- Footer: quello rosso di sv-base, senza i menu delle due landing ------- */
.foot-menu { display: none; }

/* --- Tablet ----------------------------------------------------------------- */
@media (max-width: 960px) {
  /* Niente menu e niente burger: restano marchio, lingua e bottone. */
  .site-header#main-nav .nav-cta { display: flex !important; }
  /* Due colonne: una scheda rimasta sola prende tutta la riga, invece di
     lasciare accanto una cella vuota del colore delle righe. */
  .ho-schede { grid-template-columns: repeat(2, 1fr); }
  .ho-scheda:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ho-galleria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
  .ho-prenota-foto { max-width: none; }
  .ho-prenota-foto img { aspect-ratio: 3 / 2; }
}

/* --- Telefono: un margine solo da 16px, anche dentro i riquadri ------------ */
@media (max-width: 640px) {
  .site-header .nav-claim { display: none; }
  .ho-hero { padding: 56px 0 64px; }
  .ho-hero-corpo, .ho-prenota-corpo { gap: 36px; }
  .ho-hero-testo, .ho-hero-foto, .ho-prenota-testo, .ho-prenota-foto { flex-basis: 100%; }
  .ho-studio, .ho-foto, .ho-prenota { padding: 72px 0; }
  .ho-schede { grid-template-columns: 1fr; }
  .ho-scheda, .ho-passo { padding-left: 16px; padding-right: 16px; }
  .ho-passo { gap: 14px; }
  .ho-galleria { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ho-galleria-voce:first-child { grid-column: auto; }
  .ho-galleria-voce:nth-child(2) { grid-row: auto; }
  .ho-galleria-voce img { height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 420px) {
  /* Sui telefoni più stretti il bottone in testata non ci sta accanto alla
     lingua: resta quello dell'hero, subito sotto. */
  .site-header#main-nav .nav-cta { display: none !important; }
}