/* ==========================================================================
   Cabaret amoremio! — base.css
   Reset, tipografia di base, layout (container, sezioni, griglie), focus,
   skip-link, utility, rivelazione allo scroll, debug data-todo.
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h-compact) + var(--sp-4));
}
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul{ margin:0; }
ol,ul{ padding:0; }
ul[role="list"],ol[role="list"]{ list-style:none; }
img,picture,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
input,button,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
a{ color:inherit; }
table{ border-collapse:collapse; }
[hidden]{ display:none !important; }
:target{ scroll-margin-top:calc(var(--header-h-compact) + var(--sp-4)); }

/* ---------- Tipografia ---------- */
/* Anton: un solo peso (400). font-weight:normal azzera il grassetto di default
   dei titoli ed evita il falso grassetto sintetizzato dal browser. */
h1,h2,h3,h4,
.t-display,.t-h1,.t-h2,.t-h3,.t-h4{
  font-family:var(--font-display);
  font-weight:normal;
  text-transform:uppercase;
  letter-spacing:var(--ls-display);
  text-wrap:balance;
}
h1,.t-h1{ font-size:var(--fs-h1); line-height:var(--lh-title); }
h2,.t-h2{ font-size:var(--fs-h2); line-height:var(--lh-title); }
h3,.t-h3{ font-size:var(--fs-h3); line-height:var(--lh-heading); }
h4,.t-h4{ font-size:var(--fs-h4); line-height:var(--lh-heading); }
.t-display{ font-size:var(--fs-display); line-height:var(--lh-display); }

p{ max-width:var(--measure); text-wrap:pretty; }
strong,b{ font-weight:600; }
small{ font-size:var(--fs-small); }

.lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
  font-weight:600;
  color:var(--fg);
  max-width:46ch;
}
.text-muted{ color:var(--fg-muted); }
.text-small{ font-size:var(--fs-small); }
.text-center{ text-align:center; }
.text-center p,p.text-center{ margin-inline:auto; }

/* Link nel testo corrente */
a:not([class]){
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  transition:text-decoration-thickness var(--dur-fast) var(--ease);
}
a:not([class]):hover{ text-decoration-thickness:2px; }

/* ---------- Focus ---------- */
/* .is-focus forza lo stato: usata solo dalla styleguide. */
:focus-visible,
.is-focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
:focus:not(:focus-visible){ outline:none; }

/* ---------- Skip-link ---------- */
.skip-link{
  position:fixed;
  top:var(--sp-2); left:var(--sp-2);
  z-index:calc(var(--z-lightbox) + 1);
  padding:var(--sp-3) var(--sp-5);
  background:var(--white);
  color:var(--navy-900);
  font-weight:700;
  text-decoration:none;
  transform:translateY(-200%);
  transition:transform var(--dur-fast) var(--ease);
}
.skip-link:focus{ transform:none; outline:3px solid var(--orange-500); outline-offset:2px; }

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:calc(var(--container) + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:calc(var(--container-narrow) + 2 * var(--gutter)); }

.section{
  background:var(--bg);
  color:var(--fg);
  padding-block:var(--section-y);
}
.section--tight{ padding-block:calc(var(--section-y) * .6); }

/* Flusso verticale */
.stack > * + *{ margin-block-start:var(--stack, var(--sp-4)); }
.stack--sm{ --stack:var(--sp-2); }
.stack--lg{ --stack:var(--sp-7); }
.stack--xl{ --stack:var(--sp-9); }

/* Riga che va a capo */
.cluster{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--cluster, var(--sp-3));
}

/* Griglie responsive (mobile first) */
.grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--grid-gap, var(--sp-6)); } /* una colonna che si restringe: senza, un'immagine larga allarga la pagina */
.grid--auto{ grid-template-columns:repeat(auto-fit,minmax(min(100%, var(--grid-min, 16rem)),1fr)); }
@media (min-width:600px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:900px){
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
/* Griglia di card artista: 2 colonne già da mobile, 3 da sm, 4 da md */
.grid--cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-7) var(--sp-4); }
@media (min-width:600px){ .grid--cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-8) var(--sp-5); } }
@media (min-width:900px){ .grid--cards{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Griglia a 12 colonne, da md */
@media (min-width:900px){
  .grid-12{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--sp-6); align-items:start; }
  /* span sulla fine e partenza separata: .col-5.col-start-8 = 8 / span 5 */
  .col-4{ grid-column-end:span 4; } .col-5{ grid-column-end:span 5; }
  .col-6{ grid-column-end:span 6; } .col-7{ grid-column-end:span 7; }
  .col-8{ grid-column-end:span 8; } .col-12{ grid-column:1 / -1; }
  .col-start-7{ grid-column-start:7; } .col-start-8{ grid-column-start:8; }
}

/* ---------- Utility ---------- */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.icon{
  width:var(--icon); height:var(--icon);
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon--sm{ width:var(--icon-sm); height:var(--icon-sm); }
.icon--lg{ width:var(--icon-lg); height:var(--icon-lg); }
.icon--fill{ fill:currentColor; stroke:none; }

/* Link a tutta card: il ::after copre il primo antenato posizionato */
.stretched::after{ content:''; position:absolute; inset:0; z-index:1; }

/* ---------- Testo lungo (privacy, cookie policy, descrizioni) ---------- */
.prose{ max-width:var(--measure); }
.prose > * + *{ margin-block-start:var(--sp-4); }
.prose h2{ font-size:var(--fs-h3); line-height:var(--lh-heading); color:var(--fg); margin-block-start:var(--sp-9); }
.prose h3{ font-size:var(--fs-h4); margin-block-start:var(--sp-7); }
.prose ul,.prose ol{ padding-inline-start:1.25em; }
.prose li + li{ margin-block-start:var(--sp-2); }
.prose li::marker{ color:var(--accent-graphic); }

/* ---------- Rivelazione allo scroll (§5.31) ---------- */
/* Si applica alle sezioni figlie dirette di <main>, mai ai singoli elementi.
   Lo stato nascosto esiste solo con JS attivo (.js su <html>) e senza
   riduzione del movimento: senza JS il contenuto resta visibile. */
@media (prefers-reduced-motion:no-preference){
  .js main > .section:not(.is-visible){
    opacity:0;
    transform:translateY(16px);
  }
  .js main > .section{
    transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
}
@media print{
  .js main > .section{ opacity:1 !important; transform:none !important; }
}

/* ---------- Movimento ridotto: nessuna animazione, nessun parallasse ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Debug data-todo (?debug=1) ---------- */
/* Magenta: colore di servizio, volutamente estraneo alla palette. */
.debug-todo [data-todo]{
  outline:3px dashed #FF00FF !important;
  outline-offset:2px;
}
:where(.debug-todo [data-todo]){ position:relative; } /* specificità zero: non altera i componenti posizionati */
.debug-todo [data-todo]::before{
  content:'TODO · ' attr(data-todo);
  position:absolute;
  z-index:5;
  top:0; left:0;
  max-width:100%;
  padding:2px 6px;
  background:#FF00FF;
  color:#FFFFFF;
  font:700 11px/1.3 var(--font-body);
  text-transform:none;
  letter-spacing:0;
  white-space:normal;
  pointer-events:none;
}