/* Temi stagionali (Halloween / Natale) — card «Notte» + testata «Scena» + chip.
   Logica e illustrazioni in /js/seasonal.js. Spec: SEASONAL_THEMES_SPEC.md */

/* ── Palette ── */
[data-tema="halloween"] {
  --t-a: #FF7A00;  --t-b: #FDBA24;                 /* arancio zucca, giallo candela */
  --t-night1: #2E1065; --t-night2: #0F0A1A;        /* notte viola */
}
[data-tema="natale"] {
  --t-a: #C8102E;  --t-b: #E8B931;                 /* rosso, oro */
  --t-night1: #0B5D3B; --t-night2: #052E1E;        /* verde abete */
}

/* ── Chip ── */
.t-chip {
  display: inline-flex; align-items: center; gap: .3rem; position: relative;
  padding: .24rem .7rem .24rem .5rem; border-radius: 99px;
  font-size: .68rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap; line-height: 1.3;
}
.t-chip-em { font-size: .95rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.t-chip[data-tema="halloween"] {
  color: #1a0b00; background: linear-gradient(100deg, #FF7A00, #FDBA24);
  box-shadow: 0 0 0 2px #2E1065, 0 0 14px rgba(255,122,0,.55);
}
.t-chip[data-tema="natale"] {
  color: #fff; background: linear-gradient(100deg, #C8102E, #E0303F);
  box-shadow: 0 0 0 2px #E8B931, 0 2px 10px rgba(200,16,46,.4);
}
.t-chip[data-tema="natale"]::after {   /* puntina a bastoncino */
  content: ''; position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: repeating-linear-gradient(45deg, #fff 0 2px, #C8102E 2px 4px); box-shadow: 0 0 0 1.5px #E8B931;
}

/* ═══ Card «Notte» (elenco) ═══ */
.event-card.c-notte .flyer-wrap { position: relative; }
.event-card.c-notte .flyer-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 5px; z-index: 2;
  background: linear-gradient(var(--t-a), var(--t-b));
}
.event-card.c-notte[data-tema="natale"] .flyer-wrap::after {
  width: 7px; background: repeating-linear-gradient(-45deg, #C8102E 0 6px, #fff 6px 12px);
}
.event-card.c-notte .card-body {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 88% 14%, rgba(253,230,138,.9) 0 13px, rgba(253,230,138,.25) 14px 26px, transparent 40px),
    linear-gradient(160deg, var(--t-night1), var(--t-night2));
}
.event-card.c-notte[data-tema="natale"] .card-body {
  background:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1.4px, transparent 2px) 0 0 / 34px 30px,
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.6px) 15px 12px / 26px 22px,
    linear-gradient(160deg, var(--t-night1), var(--t-night2));
}
.event-card.c-notte .card-title { color: #fff; position: relative; z-index: 1; padding-right: 28px; }
.event-card.c-notte .card-meta { color: rgba(255,255,255,.82); position: relative; z-index: 1; }
.event-card.c-notte .card-meta .ui-icon { color: rgba(255,255,255,.82); }
.event-card.c-notte .badge-green { background: rgba(255,255,255,.14); color: #fff; }
.event-card.c-notte .card-body > div[style*="color"] { color: rgba(255,255,255,.85) !important; position: relative; z-index: 1; }
.t-art { position: absolute; z-index: 0; pointer-events: none; line-height: 0; }
.t-chip-row { position: relative; z-index: 2; margin-bottom: .55rem; }

/* ═══ Testata «Scena» (modal + pagina evento) ═══
   Il contenitore NON ha overflow:hidden (taglierebbe il fumetto info): le decorazioni
   stanno in .t-deco, che si ritaglia da solo. */
.t-scena { position: relative; color: #fff; padding-bottom: 64px !important; isolation: isolate; }
.t-scena[data-tema="halloween"] {
  background:
    radial-gradient(circle at 84% 24%, #FEF3C7 0 26px, rgba(254,243,199,.35) 27px 40px, rgba(254,243,199,.1) 41px 62px, transparent 64px),
    radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px) 0 0 / 47px 41px,
    linear-gradient(180deg, #1E0B3F 0%, #4C1D95 60%, #9A3412 100%) !important;
}
.t-scena[data-tema="natale"] {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232,185,49,.35), transparent 60%),
    linear-gradient(180deg, #7A0A1C 0%, #C8102E 100%) !important;
  padding-top: 2.6rem !important;   /* spazio per le lucine */
}
.t-scena > *:not(.t-deco) { position: relative; z-index: 2; }
.t-deco { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.t-deco .t-art, .t-deco .t-bat { position: absolute; line-height: 0; }
.t-ground { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; }
.t-lights { position: absolute; left: 0; top: 0; width: 100%; height: 40px; z-index: 3; }
.t-snow { position: absolute; inset: 0;
  background:
    radial-gradient(circle, #fff 0 1.8px, transparent 2.3px) 0 0 / 40px 40px,
    radial-gradient(circle, rgba(255,255,255,.75) 0 1.2px, transparent 1.7px) 20px 14px / 28px 30px,
    radial-gradient(circle, rgba(255,255,255,.5) 0 2.5px, transparent 3px) 7px 25px / 64px 56px;
}
/* Testo e controlli leggibili sul fondo scuro */
.t-scena .detail-title, .t-scena h3, .t-scena .modal-desk-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.t-scena .action-btn, .t-scena .icon-btn { background: rgba(255,255,255,.92); border-color: transparent; color: #111827; }
.t-scena .btn-close { color: #fff; }
.t-scena .ev-kicker { background: rgba(255,255,255,.92) !important; }
.t-scena .info-tip-bubble { color: var(--text-1, #111827); text-shadow: none; }

@media (prefers-reduced-motion: no-preference) {
  .t-snow { animation: t-neve 9s linear infinite; }
  @keyframes t-neve { to { background-position: 10px 40px, 30px 44px, 15px 81px; } }
  .t-bat { animation: t-volo 3.2s ease-in-out infinite alternate; }
  .t-bat:nth-child(2) { animation-delay: -1.1s; animation-duration: 2.6s; }
  .t-bat:nth-child(3) { animation-delay: -2s; animation-duration: 3.8s; }
  @keyframes t-volo { from { transform: translate(0,0) scale(1); } to { transform: translate(8px,-6px) scale(.9); } }
  .t-bulb { animation: t-luce 1.6s ease-in-out infinite alternate; }
  .t-bulb:nth-of-type(3n+1) { animation-delay: -.5s; }
  .t-bulb:nth-of-type(3n+2) { animation-delay: -1.1s; }
  @keyframes t-luce { from { opacity: .55; } to { opacity: 1; } }
}

/* ── Modal app.html: su mobile la scena è la .modal-header (titolo + controlli),
   su desktop è il blocco in cima alla colonna destra (#modal-head-desk). ── */
@media (min-width: 768px) {
  .modal-header.t-scena { background: var(--surface) !important; padding: .55rem .8rem !important; color: inherit; }
  .modal-header.t-scena > .t-deco, .modal-header.t-scena > .t-chip-row { display: none; }
  .modal-header.t-scena .btn-close { color: var(--text-2); }
  #modal-head-desk.t-scena {
    margin: -1.5rem -1.75rem 1.1rem; padding: 1.4rem 1.75rem 64px;
  }
  #modal-head-desk.t-scena[data-tema="natale"] { padding-top: 2.8rem !important; }
}
@media (max-width: 767px) {
  #modal-head-desk { display: contents; }
  #modal-head-desk > .t-deco, #modal-head-desk > .t-chip-row { display: none; }
  .modal-header.t-scena { padding-left: 1rem; padding-right: 1rem; }
  .modal-header.t-scena > .t-chip-row { order: -1; margin: 0; align-self: center; }
  .modal-header.t-scena::before { background: rgba(255,255,255,.5); z-index: 3; }
}

/* ── Pagina evento event.html: la scena è .detail-header-mobile ── */
.detail-header-mobile.t-scena { padding-top: 1.2rem; }
@media (min-width: 768px) {
  .detail-header-mobile.t-scena { border-radius: var(--radius, 12px); margin-top: 1rem; padding: 1.4rem 1.4rem 64px; }
}
@media (max-width: 767px) {
  .detail-header-mobile.t-scena { padding: 1rem .8rem 64px; }
}