/* ============================================
   RUBIK TEATRO — stile principale
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Barriecito&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --nero: #0d0e0c;
  --nero-2: #1a1916;
  --rosso: #b32a1a;
  --rosso-2: #8c2114;
  --crema: #fff0d7;
  --crema-2: #fff0d7;
  --giallo: #f1b538;
  --testo-chiaro: #fff0d7;
  --testo-scuro: #0d0e0c;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-script: 'Barriecito', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --max-width: 1180px;

  /* Le due texture da "carta vecchia" usate in tutto il sito.
     Definite una sola volta qui: per cambiare la grana di TUTTO
     il sito (grossezza, pattern) basta modificare queste due righe,
     invece di cercare e correggere ogni singola copia sparsa nel file. */
  --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-ampia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--crema);
  color: var(--testo-scuro);
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  /*background-image: var(--grain-fine);*/
  mix-blend-mode: multiply;
  z-index: 0;
}
body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image: var(--grain-ampia);
  mix-blend-mode: multiply;
  z-index: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- texture carta / grain ---
   Formula verificata: niente feColorMatrix (annullava l'effetto),
   turbolenza diretta in scala di grigi + secondo strato di macchie
   più ampie, con mix-blend-mode calibrato sopra/sotto in base al
   colore di fondo (screen schiarisce il nero, multiply scurisce il crema). */
.grain {
  position: relative;
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: var(--grain-fine);
  mix-blend-mode: screen;
  z-index: 0;
}

/* Tutte le sezioni, scure e chiare, portano di serie una grana
   da carta vecchia, come una vecchia locandina stampata, senza
   bisogno di aggiungere manualmente la classe .grain ogni volta. */
.section-nero,
.section-crema,
.page-header,
.site-header,
.cta-banner,
.card,
.ph {
  position: relative;
}

.ph-nero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--nero) 0%,
    rgba(13,14,12,0) 14%,
    rgba(13,14,12,0) 86%,
    var(--nero) 100%
  );
  z-index: 2;
}
.ph-nero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image: var(--grain-fine);
  mix-blend-mode: multiply;
  z-index: 2;
}

.ph-nero-side::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image: var(--grain-fine);
  mix-blend-mode: multiply;
  z-index: 2;
}
.ph-nero-side::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--nero) 0%,
    rgba(13,14,12,0) 14%,
    rgba(13,14,12,0) 86%,
    var(--nero) 100%
  );
  z-index: 2;
}

.section-nero::before,
.page-header::before,
.cta-banner::before,
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: var(--grain-fine);
  mix-blend-mode: screen;
  z-index: 0;
}
.section-nero::after,
.page-header::after,
.cta-banner::after,
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: var(--grain-ampia);
  mix-blend-mode: overlay;
  z-index: 0;
}
.section-crema::before,
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: multiply;
  z-index: 0;
}
.section-crema::after,
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  z-index: 0;
}
.site-header::before {
  /*background-image: var(--grain-fine);*/
}
.site-header::after {
  background-image: var(--grain-ampia);
}

.section-nero,
.page-header,
.cta-banner {
  box-shadow: inset 0 0 140px rgba(0,0,0,0.5);
}
.section-nero > .wrap,
.section-crema > .wrap,
.page-header > .wrap {
  position: relative;
  z-index: 1;
}
.card > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   SFONDI "INVECCHIATI" — colore pieno + texture,
   da applicare a QUALSIASI elemento (non solo alle
   sezioni a piena pagina). Sostituiscono i vecchi
   sfondi nero/crema piatti ovunque nel sito.
   ============================================ */
.bg-nero-invecchiato,
.bg-crema-invecchiato {
  position: relative;
  isolation: isolate;
}
.bg-nero-invecchiato {
  background-color: var(--nero);
  box-shadow: inset 0 0 90px rgba(0,0,0,0.5);
}
.bg-crema-invecchiato {
  background-color: var(--crema);
}
.bg-nero-invecchiato::before,
.bg-crema-invecchiato::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain-fine);
  z-index: 0;
}
.bg-nero-invecchiato::before {
  opacity: 0.08;
  mix-blend-mode: screen;
}
.bg-crema-invecchiato::before {
  opacity: 0.22;
  mix-blend-mode: multiply;
}
.bg-nero-invecchiato::after,
.bg-crema-invecchiato::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain-ampia);
  z-index: 0;
}
.bg-nero-invecchiato::after {
  opacity: 0.12;
  mix-blend-mode: overlay;
}
.bg-crema-invecchiato::after {
  opacity: 0.18;
  mix-blend-mode: multiply;
}
.bg-nero-invecchiato > *,
.bg-crema-invecchiato > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   HEADER / NAV
   ============================================ */
.site-header {
  background-color: var(--crema);
  box-shadow: 0 2px 8px rgba(13,14,12,0.25);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 70px;
  position: relative;
  z-index: 1;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  background-color: var(--nero);
  padding: 12px 30px 12px 22px;
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
  /* margine destro leggermente irregolare, da poster ritagliato */
  clip-path: polygon(0 0, 100% 0, 97% 30%, 100% 55%, 96% 100%, 0 100%);
}
.logo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: var(--grain-fine);
  mix-blend-mode: screen;
  z-index: 0;
}
.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: var(--grain-ampia);
  mix-blend-mode: overlay;
  z-index: 0;
}
.logo > * {
  position: relative;
  z-index: 1;
}

.nav-menu-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 24px;
  padding: 0 max(24px, calc((50vw - var(--max-width)) / 2)) 0 24px;
  flex-wrap: wrap;
}

.logo-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) brightness(1.4);
}

.logo-text {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--crema);
  line-height: 1.15;
  font-size: 17px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.logo-text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--rosso);
  margin-top: 2px;
}

.nav-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-left: 90px;
}

.nav-links a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nero);
  padding: 6px 2px;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.nav-links a:hover,
.nav-links a.active,
.nav-links .current-menu-item a,
.nav-links .current_page_item a {
  color: var(--rosso);
  border-bottom-color: var(--rosso);
  font-weight: 800;
}

.nav-social {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}
.nav-social a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--nero);
  color: var(--crema);
  display: grid;
  place-items: center;
  font-size: 13px;
  transition: background 0.2s, color 0.2s;
}
.nav-social a:hover {
  background: var(--rosso);
  color: var(--crema);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--nero);
  font-size: 26px;
  cursor: pointer;
}

@media (min-width: 901px) {
  .logo {
    padding-right: 110px;
  }
}

@media (max-width: 900px) {
  .nav {
    position: relative;
  }
  .nav-menu-area {
    flex-wrap: wrap;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--crema);
    padding: 0 24px;
    z-index: 50;
    box-shadow: 0 6px 10px rgba(13,14,12,0.2);
  }
  .nav-links::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
  background-image: var(--grain-fine);
    mix-blend-mode: multiply;
    z-index: 0;
  }
  .nav-links li {
    position: relative;
    z-index: 1;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    display: block;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(13,14,12,0.15);
  }
  .nav-links li:last-child a {
    border-bottom: none;
  }
  .nav-links a:hover,
  .nav-links a.active,
  .nav-links .current-menu-item a,
  .nav-links .current_page_item a {
    border-bottom-color: rgba(13,14,12,0.15);
  }
  .nav-toggle {
    display: block;
    order: 2;
    margin-left: auto;
  }
  .nav-social {
    display: none;
  }
}

/* ============================================
   PAGE HEADER (per pagine interne)
   ============================================ */
.page-header {
  background: var(--nero);
  color: var(--crema);
  padding: 70px 0 50px;
  position: relative;
  border-bottom: 6px solid var(--rosso);
}

.page-header .eyebrow {
  color: var(--rosso);
  font-weight: 800;
  letter-spacing: 3px;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 80px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.page-header p {
  margin-top: 16px;
  max-width: 560px;
  font-size: 16px;
  color: var(--crema-2);
}

/* ============================================
   BOTTONI
   ============================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s, color 0.2s;
  clip-path: polygon(0 4%, 98% 0, 100% 92%, 3% 100%);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-rosso {
  background: var(--rosso);
  color: var(--crema);
}
.btn-rosso:hover {
  background: var(--rosso-2);
}
.btn-crema {
  background: var(--crema);
  color: var(--nero);
  border-color: var(--nero);
}
.btn-crema:hover {
  background: var(--nero);
  color: var(--crema);
}
.btn-outline {
  background: transparent;
  border-color: var(--crema);
  color: var(--crema);
}
.btn-outline:hover {
  background: var(--crema);
  color: var(--nero);
}

/* ============================================
   SEZIONI GENERICHE
   ============================================ */
.section {
  padding: 80px 0;
}
.section-nero {
  background: var(--nero);
  color: var(--crema);
}
.section-crema {
  background: var(--crema);
  padding: 64px 0;
}

.eyebrow {
  font-weight: 800;
  letter-spacing: 3px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--rosso);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

.section-lead {
  max-width: 600px;
  font-size: 16px;
  color: inherit;
  opacity: 0.85;
}

/* ============================================
   CARD GENERICA (stile manifesto)
   ============================================ */
.card {
  background: var(--nero-2);
  color: var(--crema);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(242,234,217,0.08);
  display: block;
  transition: transform 0.15s ease;
}
.card:hover {
  transform: translateY(-3px);
}
.card-crema {
  background: var(--crema);
  color: var(--nero);
  border: 1px solid rgba(13,14,12,0.1);
}
.card-crema .card-desc {
  color: rgba(13,14,12,0.75);
}

.card-img {
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, #2a2724, #08090a);
  display: grid;
  place-items: center;
  color: rgba(242,234,217,0.35);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
}

.card-body {
  padding: 22px;
}

.card-tag {
  font-family: var(--font-script);
  font-size: 28px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.card-desc {
  font-size: 14px;
  color: var(--crema-2);
  margin-bottom: 16px;
}

.card-link {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rosso);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card-link::after {
  content: "→";
  transition: transform 0.2s;
}
.card:hover .card-link::after {
  transform: translateX(4px);
}

/* ============================================
   PLACEHOLDER IMMAGINI
   ============================================ */
.ph {
  background: repeating-linear-gradient(
    45deg,
    rgba(228,210,179,0.04),
    rgba(228,210,179,0.04) 10px,
    transparent 10px,
    transparent 20px
  ), linear-gradient(160deg, #2a2724, #08090a);
  display: grid;
  place-items: center;
  color: rgba(228,210,179,0.4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 12px;
}

/* Bordo "strappato" da poster, da applicare a immagini negli elementi
   fissi della grafica (hero). Le card di spettacoli restano regolari. */
.torn-edge {
  /* strappo orizzontale sul bordo basso, irregolare e non simmetrico */
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 91.2%, 96.8% 94.4%, 94.2% 95.9%, 91.4% 93.1%,
    87.9% 91.8%, 79.1% 91.5%, 75.0% 89.9%, 73.0% 88.8%,
    68.4% 89.3%, 65.1% 91.2%, 62.6% 92.6%, 62.4% 92.0%,
    57.3% 91.4%, 55.8% 89.7%, 51.0% 92.6%, 50.1% 93.6%,
    48.3% 92.0%, 48.0% 92.9%, 43.2% 93.5%, 42.9% 92.9%,
    31.0% 92.6%, 28.5% 94.0%, 23.3% 92.3%, 19.5% 92.5%,
    19.3% 91.6%, 17.0% 91.0%, 14.2% 95.6%, 0% 96.3%
  );
}
.torn-right {
  /* strappo verticale sul bordo destro */
  clip-path: polygon(
    0% 0%, 94.3% 0%,
    92.2% 3.4%, 92.1% 6.0%, 92.4% 10.7%, 92.6% 11.0%,
    92.6% 17.1%, 95.2% 19.7%, 97.0% 31.1%, 96.4% 45.4%,
    95.5% 46.7%, 91.9% 50.8%, 93.8% 51.1%, 96.2% 55.7%,
    94.0% 58.4%, 91.4% 61.1%, 93.9% 62.5%, 92.0% 64.8%,
    93.6% 68.6%, 91.8% 78.1%, 94.2% 79.7%, 92.6% 90.7%,
    91.0% 94.6%, 91.8% 96.3%, 92.8% 100%,
    0% 100%
  );
}
.torn-bottom-soft {
  /* variante più lieve per elementi piccoli (bottoni, etichette) */
  clip-path: polygon(
    0% 2%, 96% 0%, 100% 8%, 98% 30%, 100% 55%,
    97% 78%, 100% 92%, 94% 100%, 60% 97%, 30% 100%, 4% 96%, 0% 70%
  );
}
.torn-right-bottom {
  /* strappo combinato sul lato destro e sul fondo */
  clip-path: polygon(
    0% 0%, 88.3% 0%, 88% 15.4%, 88.5% 16.3%, 89.1% 19.7%,
    88.5% 21.8%, 90.3% 31.5%, 91.6% 38.8%, 91% 40.8%, 90.5% 49.5%,
    92.6% 55.7%, 91.7% 60.2%, 88.3% 61.1%, 91% 62%, 92% 66.7%,
    91.9% 68%, 94% 76.1%, 96% 77.2%, 96% 91.1%, 90.6% 93.4%,
    86% 91.1%, 84.8% 91.9%, 78.9% 89.4%, 74.4% 91.9%, 65.8% 89.4%,
    65% 89%, 61.1% 89%, 59.4% 89%, 55.7% 90.1%, 45% 91.2%,
    36.8% 94.1%, 35.8% 90.6%, 21.2% 93%, 0% 100%
  );
}
.ph-crema {
  background: repeating-linear-gradient(
    45deg,
    rgba(26,24,22,0.04),
    rgba(26,24,22,0.04) 10px,
    transparent 10px,
    transparent 20px
  ), var(--crema-2);
  color: rgba(26,24,22,0.4);
}
.ph-crema::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--crema) 0%,
    rgba(13,14,12,0) 14%,
    rgba(13,14,12,0) 86%,
    var(--crema) 100%
  );
  z-index: 2;
}
.ph-crema::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image: var(--grain-fine);
  mix-blend-mode: multiply;
  z-index: 2;
}

/* ============================================
   FOOTER — 4 blocchi colore affiancati,
   come nella locandina di riferimento
   ============================================ */
.site-footer {
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr 1.1fr 1fr;
  min-height: 280px;
}

.footer-col {
  padding: 32px 28px;
  position: relative;
}
.footer-col:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: 0;
  width: 1px;
  background: rgba(13,14,12,0.15);
  z-index: 2;
}

.footer-col-logo {
  background-color: var(--nero);
  color: var(--crema);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
  border-right: 1px solid rgba(228,210,179,0.15);
}
.footer-col-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: var(--grain-fine);
  mix-blend-mode: screen;
  z-index: 0;
}
.footer-col-logo::after {
  background-image: var(--grain-ampia);
  opacity: 0.12;
  mix-blend-mode: overlay;
  inset: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}
.footer-col-logo > * {
  position: relative;
  z-index: 1;
}

.footer-col-crema {
  background-color: var(--crema);
  color: var(--nero);
  position: relative;
  box-shadow: inset -1px 0 0 rgba(13,14,12,0.15);
}
.footer-col-crema::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  /*background-image: var(--grain-fine);*/
  mix-blend-mode: multiply;
  z-index: 0;
}
.footer-col-crema::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  /*background-image: var(--grain-ampia);*/
  mix-blend-mode: multiply;
  z-index: 0;
}
.footer-col-crema > * {
  position: relative;
  z-index: 1;
}

.footer-col-rosso {
  background: var(--rosso);
  color: var(--crema);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 18px;
}

.footer-col p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 6px;
}
.footer-col a {
  font-size: 13px;
  color: inherit;
  display: inline;
  text-decoration: none;
}
.footer-col a.btn {
  display: inline-block;
  color: var(--nero);
  font-size: 13px;
}
.footer-col-crema a:hover {
  color: var(--rosso);
}

.footer-logo {
  display: flex;
  margin-bottom: 16px;
}
.footer-logo .logo-mark {
  width: 56px;
  height: 56px;
}
.footer-logo .logo-mark img {
  filter: invert(1) brightness(1.4);
}

.footer-cal-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(13,14,12,0.12);
  font-size: 13px;
}
.footer-cal-row:last-of-type {
  border-bottom: none;
}
.footer-cal-data {
  color: var(--rosso);
  font-weight: 800;
  font-size: 12px;
}
.footer-cal-tag {
  font-weight: 800;
  text-transform: uppercase;
  grid-column: 2;
}
.footer-cal-luogo {
  grid-column: 2;
  opacity: 0.75;
  font-size: 12px;
}

.footer-link-arrow {
  display: inline-block;
  margin-top: 14px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nero);
}
.footer-link-arrow:hover {
  color: var(--rosso);
}

.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nero);
  color: var(--crema);
  display: grid;
  place-items: center;
  font-size: 12px;
}
.footer-social a:hover {
  background: var(--rosso);
  color: var(--crema);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-col:nth-child(2)::after,
  .footer-col:nth-child(4)::after {
    display: none;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-col::after {
    display: none;
  }
}

/* ============================================
   CTA banner finale (rosso) — ricorrente
   ============================================ */
.cta-banner {
  background: var(--rosso);
  color: var(--crema);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.cta-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  text-transform: uppercase;
  line-height: 1.05;
}

/* ============================================
   UTILS
   ============================================ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; }

/* Riga "In sala questa sera": card rossa più stretta + 3 spettacoli */
.grid-in-sala {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 0 max(16px, calc((100vw - 1400px) / 2));
}

.grid-in-sala .eyebrow{
  color: var(--crema);
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  text-transform: uppercase;
  line-height: 1.05;
  padding-bottom: clamp(30px, 10vw, 70px);
  border-bottom: 3px solid transparent;
  border-color: var(--nero);
}

.hero-photo {
  aspect-ratio: 4.8/1;
  max-height: 30vh;
  min-height: 140px;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--nero) 0%,
    rgba(13,14,12,0) 14%,
    rgba(13,14,12,0) 86%,
    var(--nero) 100%
  );
  z-index: 2;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image: var(--grain-fine);
  mix-blend-mode: multiply;
  z-index: 2;
}

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-in-sala { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4, .grid-in-sala { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .cta-banner-inner { text-align: center; justify-content: center; }
  .hero-photo {
    aspect-ratio: 2.4/1;
    max-height: 50vh;
    min-height: 220px;
  }
}

.text-rosso { color: var(--rosso); }
.text-giallo { color: var(--giallo); }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }

/* ============================================
   LIGHTBOX — foto galleria a schermo intero
   ============================================ */
.lightbox-item {
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.lightbox-item:hover {
  opacity: 0.85;
}

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,14,12,0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox-overlay.open {
  display: flex;
}

.lightbox-content {
  max-width: 900px;
  max-height: 85vh;
  width: 100%;
  text-align: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: 75vh;
  display: block;
  margin: 0 auto;
  border: 1px solid rgba(228,210,179,0.15);
}
.lightbox-caption {
  margin-top: 18px;
  color: var(--crema);
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: var(--crema);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 8px;
}
.lightbox-close:hover {
  color: var(--rosso);
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--crema);
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
  padding: 8px 16px;
}
.lightbox-arrow:hover {
  color: var(--rosso);
}
.lightbox-prev {
  left: 12px;
}
.lightbox-next {
  right: 12px;
}

@media (max-width: 600px) {
  .lightbox-overlay {
    padding: 20px;
  }
  .lightbox-close {
    top: 14px;
    right: 18px;
  }
  .lightbox-arrow {
    font-size: 36px;
    padding: 6px 10px;
  }
  .lightbox-prev {
    left: 2px;
  }
  .lightbox-next {
    right: 2px;
  }
}

/* ============================================
   Adattamento visivo del form FormLayer (pagine Contatti e
   Stiamo arrivando) alla grafica del sito. Le regole restano
   circoscritte a .rubikteatro-form-wrap per non toccare altri
   form del sito. Se FormLayer genera classi diverse da quelle
   indicate, apri gli strumenti sviluppatore del browser sulla
   pagina, individua le classi reali e sostituiscile qui.
   ============================================ */
.rubikteatro-form-wrap {
  width: 100%;
}
.rubikteatro-form-wrap input[type="text"],
.rubikteatro-form-wrap input[type="email"],
.rubikteatro-form-wrap input[type="tel"],
.rubikteatro-form-wrap textarea,
.rubikteatro-form-wrap select {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  padding: 13px 14px !important;
  border: 2px solid var(--nero) !important;
  background: var(--crema) !important;
  border-radius: 0 !important;
  margin-bottom: 14px !important;
}
.rubikteatro-form-wrap button,
.rubikteatro-form-wrap input[type="submit"] {
  display: inline-block !important;
  width: auto !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  padding: 14px 32px !important;
  background: var(--rosso) !important;
  color: var(--crema) !important;
  border: none !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
}