/*
 * biglietto.css — ogni proiezione e un biglietto.
 *
 * Si carica per ultimo e non tocca la logica: toglie la riga <link> in
 * index.html e Pellicola torna com'era. Vale per le righe del programma e del
 * piano (.row); desideri e settimana restano quelli di prima.
 *
 * L'idea, una sola: carta chiara posata sul panno scuro. Il tagliando a
 * sinistra porta l'orario, una perforazione lo separa dal resto, e due
 * mezzelune ai capi della perforazione dicono «si strappa qui». Il colore del
 * tagliando e un'informazione: carta = non scelto, verde = nel tuo piano,
 * ambra = biglietto gia comprato.
 *
 * Dentro il biglietto i colori si rovesciano ridefinendo le stesse variabili
 * del tema: tutto cio che vive nella riga (anteprima, cartina, pastiglie)
 * diventa scuro-su-chiaro da solo, senza una regola per ciascuno.
 */

.row{
  /* la carta e il suo inchiostro */
  --carta:#EFE7D2; --carta-2:#E4D9BD; --inchiostro:#1D211C;
  --timbro:#34407A;                 /* l'inchiostro blu dei timbri */
  /* le variabili del tema, rovesciate per chi sta sulla carta */
  --ink:var(--carta); --felt:var(--carta-2); --felt-2:#D9CDAE;
  --paper:var(--inchiostro); --dim:#6B6552; --line:#C9BD9C;
  --carpet:#1E7A4C; --carpet-soft:#CFE4D4; --alarm:#B23A22; --amber:#9A6B12;
  /* dove cade la perforazione */
  --strappo:92px; --buco:7px;

  position:relative;
  grid-template-columns:70px 1fr auto;
  color:var(--paper);
  background-color:var(--carta);
  background-image:var(--gTagliando, none), var(--gCinema, none), var(--gPosti, none);
  border-bottom:0;
  border-radius:5px;
  margin:0 0 9px;
  padding:14px 12px 14px 16px;
  color-scheme:light;
  box-shadow:0 1px 0 rgba(0,0,0,.35), 0 6px 14px -8px rgba(0,0,0,.6);
  /* le due mezzelune, ritagliate davvero: sotto si vede il panno */
  -webkit-mask:
    radial-gradient(circle var(--buco) at var(--strappo) 0, transparent 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--buco) at var(--strappo) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle var(--buco) at var(--strappo) 0, transparent 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--buco) at var(--strappo) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
}
/* la perforazione */
.row::before{
  content:""; position:absolute; top:calc(var(--buco) + 3px); bottom:calc(var(--buco) + 3px);
  left:var(--strappo); width:0; border-left:2px dotted rgba(29,33,28,.38);
  pointer-events:none;
}
.row.conmarca{grid-template-columns:30px 70px 1fr auto; --strappo:134px; padding-left:16px}

/* il tagliando: l'orario come sui biglietti, stretto e pesante */
.row .time{font-family:"Archivo", var(--font-ui); font-stretch:72%; font-weight:700;
  font-size:24px; line-height:1; letter-spacing:.01em; padding-top:3px; white-space:nowrap}
.row .time small{font-stretch:100%; font-weight:500; font-size:11.5px; line-height:1.35;
  margin-top:5px; letter-spacing:0}

/* scelto: tagliando verde. comprato: tagliando ambra. */
.row.picked{--gCinema:none;
  --gTagliando:linear-gradient(to right, #1E7A4C 0 var(--strappo), transparent var(--strappo))}
.row.bought{background-color:var(--carta);
  --gTagliando:linear-gradient(to right, #B8862A 0 var(--strappo), transparent var(--strappo))}
.row.picked .time, .row.bought .time{color:#FBF6E6}
.row.picked .time small, .row.bought .time small{color:rgba(251,246,230,.82)}
.row.picked::before, .row.bought::before{border-left-color:rgba(251,246,230,.55)}
/* nel piano il tagliando prende il colore del cinema, come gia faceva la riga */
.row.conmarca.picked{--gTagliando:none}
.row.conmarca[class*=" cl-"], .row.conmarca[class*=" clp-"]{
  --gCinema:linear-gradient(to right, var(--c) 0 var(--strappo), transparent var(--strappo));
  box-shadow:0 1px 0 rgba(0,0,0,.35), 0 6px 14px -8px rgba(0,0,0,.6)}
.row.conmarca[class*=" cl-"]::before, .row.conmarca[class*=" clp-"]::before{border-left-color:rgba(29,33,28,.45)}
/* i colori dei cinema sono tutti chiari: sopra ci sta l'inchiostro, non il bianco */
.row.conmarca[class*=" cl-"] .time, .row.conmarca[class*=" clp-"] .time{color:var(--inchiostro)}
.row.conmarca[class*=" cl-"] .time small, .row.conmarca[class*=" clp-"] .time small{color:rgba(29,33,28,.75)}
.row.conmarca .marca .ticket{border-color:rgba(29,33,28,.5); color:rgba(29,33,28,.7)}

/* il corpo del biglietto */
.row .title{font-size:21.5px; line-height:1.22; margin-bottom:6px; color:var(--inchiostro)}
.row .title a{color:inherit}
.row .meta{color:var(--dim)}
.row .meta b{color:#3F4239; font-weight:600}
.row .meta .dove{color:#2A2E27}
/* la sezione e un timbro: inchiostro blu, bordo doppio, angoli appena smussati */
.row .tag{color:var(--timbro); border:1px solid currentColor; border-radius:3px;
  box-shadow:inset 0 0 0 1.5px var(--carta), inset 0 0 0 2.5px currentColor;
  padding:3px 9px; font-weight:600; letter-spacing:.03em; font-size:11.5px}
.row .tag.gala{color:#A0301C; border-color:currentColor}

/* i bottoni: fori da obliteratrice */
.row .add{border:1.5px solid #8C8468; color:#4A4636; background:transparent}
.row .add:hover{border-color:var(--carpet); color:var(--carpet)}
.row.picked .add{background:var(--carpet); border-color:var(--carpet); color:#FBF6E6}
.row .soldBtn, .row .pinBtn, .row .swapBtn, .row .ticket{border-color:#B4A985; color:#6B6552}
.row .soldBtn.on{color:#FBF6E6}
.row .ticket.on{background:#B8862A; border-color:#B8862A; color:#FBF6E6}
.row .pinBtn.on{background:#3F4239; border-color:#3F4239; color:#FBF6E6}

/* i posti, leggibili sulla carta */
.row .posti.p-liberi{background:rgba(30,122,76,.14); color:#17633D; box-shadow:inset 0 0 0 1px rgba(30,122,76,.4)}
.row .posti.p-ultimi{background:rgba(184,134,42,.20); color:#7A5306; box-shadow:inset 0 0 0 1px rgba(154,107,18,.5)}
.row .posti.p-esaurito{background:rgba(178,58,34,.14); color:#98301B; box-shadow:inset 0 0 0 1px rgba(178,58,34,.45)}
.row .posti.p-nonInVendita{background:rgba(107,101,82,.12); color:#6B6552; box-shadow:inset 0 0 0 1px rgba(107,101,82,.3)}
.row .sinExtra i.p-liberi{color:#17633D}
.row .sinExtra i.p-ultimi{color:#7A5306}
.row .sinExtra i.p-esaurito{color:#98301B}
.row .qaTag{color:#7A5306}
.row.st-liberi{--gPosti:linear-gradient(to left, rgba(30,122,76,.20) 0, rgba(30,122,76,.07) 30%, transparent 60%)}
.row.st-ultimi{--gPosti:linear-gradient(to left, rgba(200,140,30,.34) 0, rgba(200,140,30,.12) 30%, transparent 60%)}
.row.st-esaurito{--gPosti:linear-gradient(to left, rgba(178,58,34,.30) 0, rgba(178,58,34,.10) 30%, transparent 60%)}
.row.st-nonInVendita{--gPosti:linear-gradient(to left, rgba(107,101,82,.20) 0, rgba(107,101,82,.07) 30%, transparent 60%)}
.row.soldout{opacity:.78}

/* anteprima e cartina, dentro il biglietto: un riquadro incassato nella carta */
.row .sinossi, .row .mappaCinema{background:#F7F1E1; border:1px solid var(--line); color:var(--inchiostro)}
.row.lampo{outline-color:#F0C24B}

/* il titolo del giorno resta sul panno */
.daytitle{margin-bottom:12px}

@media (max-width:640px){
  /* Sul telefono il tagliando sta in alto, la perforazione corre in
     orizzontale, e i bottoni salgono sul tagliando accanto all'orario: la
     riga dei bottoni da sola, sotto il testo, era un terzo di biglietto vuoto. */
  .row{--strappo:60px; padding:8px 10px 13px 14px; margin-bottom:10px; gap:0 10px;
    grid-template-columns:1fr auto; grid-template-areas:"time azioni" "testo testo";
    -webkit-mask:
      radial-gradient(circle var(--buco) at 0 var(--strappo), transparent 97%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--buco) at 100% var(--strappo), transparent 97%, #000) right / 51% 100% no-repeat;
            mask:
      radial-gradient(circle var(--buco) at 0 var(--strappo), transparent 97%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--buco) at 100% var(--strappo), transparent 97%, #000) right / 51% 100% no-repeat}
  .row::before{top:var(--strappo); bottom:auto; left:calc(var(--buco) + 3px); right:calc(var(--buco) + 3px);
    width:auto; height:0; border-left:0; border-top:2px dotted rgba(29,33,28,.38)}
  .row.conmarca{--strappo:60px; padding-left:12px; grid-template-columns:auto 1fr auto;
    grid-template-areas:"marca time azioni" "testo testo testo"}
  .row .time{font-size:24px; padding:0 0 0 2px; height:44px; align-items:center; margin-bottom:20px}
  .row .time small{margin-top:3px; font-size:12.5px}
  .row .marca{height:44px; margin-bottom:20px}
  /* nel piano i bottoni sono quattro: l'orario si impila per lasciar loro posto */
  .row.conmarca .time{flex-direction:column; align-items:flex-start; justify-content:center; gap:0; font-size:22px}
  .row.conmarca .time small{margin-top:2px; font-size:11.5px}
  .row.conmarca .azioni{gap:4px}
  .row.conmarca .azioni button{width:34px; height:34px}
  .row.conmarca .azioni .add{width:38px; height:38px; font-size:18px}
  .row .azioni{height:44px; margin:0 0 20px; align-self:start}
  .row .azioni button{width:36px; height:36px; font-size:15px}
  .row .azioni .add{width:42px; height:42px; font-size:20px}
  .row .testo{padding-right:4px}
  .row .sinossi, .row .mappaCinema{margin-right:4px}
  .row.picked{--gTagliando:linear-gradient(to bottom, #1E7A4C 0 var(--strappo), transparent var(--strappo))}
  .row.bought{--gTagliando:linear-gradient(to bottom, #B8862A 0 var(--strappo), transparent var(--strappo))}
  .row.picked::before, .row.bought::before{border-top-color:rgba(251,246,230,.55)}
  /* sul tagliando colorato i bottoni si rovesciano: carta sul colore */
  .row.picked:not(.conmarca) .add, .row.bought:not(.conmarca) .add{background:#FBF6E6; border-color:#FBF6E6; color:#1E7A4C}
  .row.picked:not(.conmarca) .azioni button:not(.add):not(.on),
  .row.bought:not(.conmarca) .azioni button:not(.add):not(.on){border-color:rgba(251,246,230,.6); color:#FBF6E6}
  .row.conmarca[class*=" cl-"], .row.conmarca[class*=" clp-"]{
    --gCinema:linear-gradient(to bottom, var(--c) 0 var(--strappo), transparent var(--strappo))}
  .row.conmarca[class*=" cl-"]::before, .row.conmarca[class*=" clp-"]::before{border-top-color:rgba(29,33,28,.45)}
  .row.conmarca .azioni button:not(.add):not(.on){border-color:rgba(29,33,28,.45); color:rgba(29,33,28,.75)}
}

@media print{
  .row{-webkit-mask:none; mask:none; box-shadow:none; border:1px solid #999}
}

/* ---------------------------------------------------------------
 * La disponibilita: una fascia di colore pieno sul bordo destro del
 * biglietto, come il filo colorato dei rotoli di biglietti, e una tinta
 * che sfuma verso il centro. Sulla carta le sfumature leggere del tema
 * scuro non si vedevano piu: qui il colore e pieno e non si puo mancare.
 * Verde: posti liberi. Ambra: ultimi posti. Rosso: esaurito. Grigio: non
 * in vendita.
 * --------------------------------------------------------------- */
.row{border-right:0}
.row[class*=" st-"]{border-right:9px solid var(--filo)}
.row.st-liberi{--filo:#2E9B63;
  --gPosti:linear-gradient(to left, rgba(46,155,99,.42) 0, rgba(46,155,99,.20) 35%, rgba(46,155,99,.06) 62%, transparent 80%)}
.row.st-ultimi{--filo:#E0A021;
  --gPosti:linear-gradient(to left, rgba(224,160,33,.62) 0, rgba(224,160,33,.30) 35%, rgba(224,160,33,.09) 62%, transparent 80%)}
.row.st-esaurito{--filo:#C4432B;
  --gPosti:linear-gradient(to left, rgba(196,67,43,.56) 0, rgba(196,67,43,.27) 35%, rgba(196,67,43,.08) 62%, transparent 80%)}
.row.st-nonInVendita{--filo:#9A937E;
  --gPosti:linear-gradient(to left, rgba(120,114,96,.36) 0, rgba(120,114,96,.17) 35%, rgba(120,114,96,.05) 62%, transparent 80%)}
/* Il foglio di base, per le righe scelte e per quelle col biglietto comprato,
   scrive lo sfondo per intero («background:») e cosi cancellava gli strati:
   proprio sui film del piano la sfumatura dei posti spariva. Qui gli strati
   si rimettono con la stessa forza, per ogni stato della riga. */
.row.picked, .row.bought, .row.conmarca, .row.soldout{
  background:var(--gTagliando, none), var(--gCinema, none), var(--gPosti, none), var(--carta)}
/* esaurito: il biglietto resta leggibile, ma si vede che non si compra piu */
.row.st-esaurito .title{text-decoration:line-through; text-decoration-thickness:1.5px;
  text-decoration-color:rgba(196,67,43,.75)}
.row .posti{font-size:12px; padding:2px 9px}

/* ---------------------------------------------------------------
 * La sala: il fondo della pagina e la testata.
 * --------------------------------------------------------------- */
:root{
  --ink:#4A1820; --felt:#5E202B; --felt-2:#712835; --line:#86414B;
  --paper:#F7ECDA; --dim:#DDB9B6;
  --carpet:#F0C063; --carpet-soft:#7A4B22;
}
:root.blu{
  --ink:#1D2C4D; --felt:#273A63; --felt-2:#32487A; --line:#44598C;
  --paper:#F4EDDD; --dim:#B4BFD8;
  --carpet:#F0C063; --carpet-soft:#5B4E2C;
}
:root.chiaro{
  --ink:#D9D0BC; --felt:#E7E0CE; --felt-2:#F2ECDD; --line:#B7AC93;
  --paper:#211E18; --dim:#5F5847;
  --carpet:#1E6B45; --carpet-soft:#BFDCCB; color-scheme:light;
}
:root.chiaro .row{--carta:#FBF7EC; --carta-2:#F0E9D6}
:root.chiaro .frame[aria-current="true"] .wd{color:#1E6B45}
/* Tre sale, una riga per cambiarla: velluto (rosso, quella di sempre), blu,
   chiaro. Per provarle senza toccare niente: aggiungi ?sala=blu oppure
   ?sala=chiaro all'indirizzo (e ?sala=velluto per tornare). La scelta resta
   nel browser. Per fissarne una per tutti: class="blu" sul tag <html>. */
.mark h1{font-family:var(--font-titoli); font-style:italic; font-weight:500;
  font-size:44px; letter-spacing:-.01em; line-height:1}
@media (max-width:640px){ .mark h1{font-size:36px} }