/* SP-IN · Landing "Baskin" in stile "Prima serata" (Landing). Markup generato da landing.js.
   Un solo markup per mobile e PC; il layout cambia con la larghezza del contenitore .lpx (container query):
     < 900px   testata a una colonna (fascia arancio in basso, campo sotto il testo), numeri 2 × 2 sovrapposti alla
               testata, ruoli e pilastri in colonna, invito con gli eventi sotto il testo
     ≥ 900px   testata a due colonne (fascia arancio a destra con il campo inclinato), numeri su una striscia inclinata,
               ruoli a 3 colonne, invito con gli eventi a destra, pilastri a 4 colonne
   Testata, numeri e invito restano scuri anche nel tema scuro (come la scheda evento). Tutto il resto usa i token. */

.lpx{
  --lpx-skew:var(--skew);--lpx-unskew:var(--unskew);--lpx-w:1200px;
  container-type:inline-size;container-name:lpx;
  display:flex;flex-direction:column;color:var(--ink);font-family:var(--font-body);
}
:where(.lpx) button{font:inherit}
.lpx :is(h1,.lpx-tag b,.lpx-btn,.lpx-role-n b,.lpx-role-t>b,.lpx-cta-t>b,.lpx-pil-n,.lpx-pil-h,.lpx-ev-t>b,.lpx-bug b){font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;text-transform:uppercase}
.lpx :is(a,button):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.lpx-tex{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 14px)}

/* ---------- testata ---------- */
.lpx-hero{position:relative;overflow:hidden;background:var(--scorebox);color:var(--on-stage);padding:calc(22px + env(safe-area-inset-top,0px)) 16px 90px}
.lpx-hero-band{position:absolute;left:0;right:0;bottom:0;height:150px;background:var(--brand-orange);clip-path:polygon(0 40%,100% 0,100% 100%,0 100%)}
.lpx-hero-in{position:relative;display:flex;flex-direction:column;gap:16px}
.lpx-hero-t{display:flex;flex-direction:column;gap:16px;min-width:0}
.lpx-kick{align-self:flex-start;display:inline-flex;padding:5px 12px;background:var(--on-stage);color:var(--scorebox);transform:skewX(-10deg)}
.lpx-kick b{display:block;transform:skewX(10deg);font-size:var(--fs-11);letter-spacing:.14em;text-transform:uppercase}
.lpx-hero h1{margin:0;font-size:56px;line-height:.86;display:flex;flex-direction:column}
.lpx-accent{color:var(--brand-orange)}
.lpx-hero p{margin:0;font-size:var(--fs-15);line-height:1.55;color:#DDE3E8;max-width:560px}
.lpx-hero p b{color:var(--on-stage)}
.lpx-hero-b{display:none;gap:14px;flex-wrap:wrap}
.lpx-hero-c{margin-top:6px;transform:rotate(-4deg);filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}

/* campo */
.lpx-court{display:block;width:100%;height:auto}
.lpx-cf{fill:var(--brand-blue);stroke:var(--on-stage);stroke-width:4}
.lpx-cl{fill:none;stroke:var(--on-stage);stroke-width:3}
.lpx-bb{stroke-width:4}
.lpx-sb{stroke-width:5}
.lpx-dash{stroke-dasharray:7 6;stroke-width:2}
.lpx-hp{fill:var(--on-stage);stroke:var(--scorebox);stroke-width:3.5}
.lpx-hp-lo{fill:var(--scorebox)}

/* bottoni */
.lpx-btn{flex:none;display:inline-flex;align-items:center;height:48px;padding:0 22px;border:0;transform:skewX(var(--lpx-skew));text-decoration:none;cursor:pointer;font-size:19px}
.lpx-btn>span{display:inline-flex;align-items:center;gap:10px;transform:skewX(var(--lpx-unskew));white-space:nowrap}
.lpx-btn svg{width:18px;height:18px}
.lpx-btn--pri{background:var(--primary-fill);color:var(--on-fill)}
.lpx-btn--acc{background:var(--brand-orange);color:var(--scorebox)}
.lpx-btn--ghost{background:transparent;color:var(--on-stage);box-shadow:inset 0 0 0 2px var(--on-stage)}
@media (hover:hover){.lpx-btn:hover{filter:brightness(1.08)}}

/* ---------- numeri ---------- */
.lpx-nums-wrap{position:relative;margin:-64px 16px 0}
.lpx-nums{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--scorebox);box-shadow:0 12px 30px rgba(0,0,0,.2)}
.lpx-nums li{display:flex;flex-direction:column;gap:4px;padding:12px;background:var(--scorebox);min-width:0}
.lpx-nums b{font-family:var(--font-mono);font-size:32px;line-height:1;color:var(--on-stage);font-style:normal;text-transform:none}
.lpx-nums li:first-child b{color:var(--brand-orange)}
.lpx-nums span{font-size:var(--fs-11);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--on-stage)}
.lpx-nums small{font-size:var(--fs-12);color:var(--on-stage-muted);line-height:1.3}

/* ---------- corpo ---------- */
.lpx-main{display:flex;flex-direction:column;gap:26px;padding:26px 16px calc(40px + var(--tabh,0px))}
.lpx-sec{display:flex;align-items:center;gap:10px}
.lpx-tag{flex:none;padding:5px 14px;background:var(--scorebox);color:var(--on-stage);transform:skewX(var(--lpx-skew))}
.lpx-tag b{display:block;transform:skewX(var(--lpx-unskew));font-size:var(--fs-13);letter-spacing:.06em;white-space:nowrap}
.lpx-rule{flex:1;height:2px;background:var(--line)}
.lpx-sec-x{display:none;font-size:var(--fs-12);color:var(--muted);white-space:nowrap}

/* ruoli */
.lpx-roles{display:flex;flex-direction:column;gap:14px}
.lpx-roles-sub{margin:0;font-size:var(--fs-13);color:var(--muted)}
.lpx-roles-g{display:grid;grid-template-columns:1fr;gap:12px}
.lpx-role{display:flex;gap:14px;padding:16px;background:var(--surface);border-radius:4px;box-shadow:0 1px 2px rgba(20,32,43,.06),0 8px 20px rgba(20,32,43,.07)}
.lpx-role-n{flex:none;width:62px;height:62px;display:grid;place-items:center;background:var(--rc);color:var(--scorebox);transform:skewX(var(--lpx-skew))}
.lpx-role-n b{transform:skewX(var(--lpx-unskew));font-size:30px}
.lpx-role-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.lpx-role-t>b{font-size:21px;line-height:.95}
.lpx-role-t>span{font-size:var(--fs-14);line-height:1.45;color:var(--muted)}

/* invito */
.lpx-cta{position:relative;overflow:hidden;background:var(--scorebox);color:var(--on-stage);border-radius:4px}
.lpx-cta-band{position:absolute;right:0;top:0;bottom:0;width:40%;background:var(--primary-fill);clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}
.lpx-cta-in{position:relative;display:flex;flex-direction:column;gap:16px;padding:22px 16px}
.lpx-cta-t{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.lpx-cta-t>b{font-size:34px;line-height:.9}
.lpx-cta-t>span{font-size:var(--fs-15);color:var(--on-stage-muted)}
.lpx-cta-ev{display:flex;flex-direction:column;gap:8px;width:100%}
.lpx-cta-ev .lpx-rule{background:rgba(255,255,255,.18)}
.lpx-cta-ev .lpx-tag{background:var(--on-stage);color:var(--scorebox)}
.lpx-ev{position:relative;display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:12px 36px 12px 12px;border:0;border-radius:4px;background:rgba(255,255,255,.06);box-shadow:inset 4px 0 0 var(--ty);color:var(--on-stage);text-align:left;text-decoration:none;cursor:pointer}
@media (hover:hover){.lpx-ev:hover{background:rgba(255,255,255,.12)}}
.lpx-ev-band{flex:none;display:flex;align-items:center;gap:8px}
/* telefono: niente stemmi accanto al tabellone (giorno e ora su due righe lo allargano; restano le sigle nel colore della squadra), Diego 2026-10-21 */
.lpx-crest{display:none;width:26px;height:26px;flex:none;border-radius:999px;background:var(--c-bg);box-shadow:0 0 0 2px var(--c-team);overflow:hidden;place-items:center}
.lpx-crest img{width:86%;height:86%;object-fit:contain}
.lpx-crest b{font-size:10px;color:var(--scorebox)}
.lpx-bug{display:inline-flex;height:36px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
.lpx-bug>span{display:grid;place-items:center;padding:0 9px;transform:skewX(var(--lpx-skew))}
.lpx-bug>span>b{transform:skewX(var(--lpx-unskew));font-size:12px}
.lpx-bug .lpx-bug-mid{background:#0B1218;color:var(--on-stage);padding:0 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.lpx-bug .lpx-bug-mid small{transform:skewX(var(--lpx-unskew));font-size:var(--fs-11);font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--on-stage-muted)}
.lpx-bug .lpx-bug-mid b{font-family:var(--font-mono);font-style:normal;font-weight:700;font-size:14px;line-height:1}
.lpx-ev-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.lpx-ev-t>b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpx-ev-t>span{font-size:var(--fs-12);color:var(--on-stage-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpx-chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--on-stage-muted)}
.lpx-chev svg{width:18px;height:18px;display:block}

/* pilastri */
.lpx-pil{display:flex;flex-direction:column;gap:14px}
.lpx-pil-g{display:grid;grid-template-columns:1fr;gap:12px}
.lpx-pil-c{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:18px 16px;background:var(--surface);border-radius:4px;box-shadow:0 1px 2px rgba(20,32,43,.06),0 8px 20px rgba(20,32,43,.07)}
.lpx-pil-c>*{position:relative}
.lpx-pil-n{position:absolute!important;right:-4px;top:-18px;font-size:96px;line-height:1;color:var(--line)}
.lpx-pil-i{width:40px;height:40px;display:grid;place-items:center;background:var(--scorebox);transform:skewX(var(--lpx-skew))}
.lpx-pil-i>span{display:grid;transform:skewX(var(--lpx-unskew))}
.lpx-pil-i svg{width:20px;height:20px}
.lpx-pil-h{font-size:22px;line-height:.95}
.lpx-pil-c>span:last-child{font-size:var(--fs-14);line-height:1.5;color:var(--muted)}

/* ---------- PC ---------- */
@container lpx (min-width:900px){
  .lpx-hero{padding:64px 0 120px}
  .lpx-hero-band{left:auto;top:0;width:46%;height:auto;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%)}
  .lpx-hero-in{width:min(var(--lpx-w),100% - 64px);margin:0 auto;display:grid;grid-template-columns:1fr minmax(0,520px);align-items:center;gap:24px}
  .lpx-hero-t{gap:22px}
  .lpx-hero h1{font-size:clamp(80px,8.2vw,118px)}
  .lpx-hero p{font-size:18px}
  .lpx-hero-b{display:flex}
  .lpx-hero-c{margin-top:0;filter:drop-shadow(0 24px 40px rgba(0,0,0,.35))}
  .lpx-nums-wrap{width:min(var(--lpx-w),100% - 64px);margin:-56px auto 0}
  .lpx-nums{display:flex;gap:0;transform:skewX(-8deg);box-shadow:0 12px 30px rgba(0,0,0,.25)}
  .lpx-nums li{flex:1;transform:skewX(8deg);padding:18px 20px;background:transparent}
  .lpx-nums li+li{border-left:1px solid rgba(255,255,255,.12)}
  .lpx-nums b{font-size:44px}
  .lpx-main{width:min(var(--lpx-w),100% - 64px);margin:0 auto;padding:48px 0 48px;gap:40px}
  .lpx-tag b{font-size:var(--fs-14)}
  .lpx-sec-x{display:inline}
  .lpx-roles-sub{display:none}
  .lpx-roles-g{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .lpx-role-n{width:74px;height:74px}
  .lpx-role-n b{font-size:36px}
  .lpx-role-t>b{font-size:24px}
  .lpx-cta-band{width:30%}
  .lpx-cta-in{display:grid;grid-template-columns:1fr 520px;gap:32px;align-items:center;padding:32px 36px}
  .lpx-cta-t>b{font-size:48px}
  .lpx-crest{display:grid;width:30px;height:30px}
  .lpx-bug{height:40px}
  .lpx-ev-t>b{font-size:18px}
  .lpx-pil-g{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .lpx-pil-h{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.lpx-hero-c{transform:none}}