/* caso.css — sezioni speciali dei casi studio (/progetti/<slug>/). Mappa: css/caso.md.
   Le scrive genera_pagine.py → sezioni_caso(); ogni sezione compare solo se il caso ha i suoi dati. */

/* ---------- apertura: video o immagine 16:9 subito dopo la testa ---------- */
.cs-apertura { margin-top: var(--passo-12); }
.cs-media { position: relative; overflow: hidden; background: var(--vuoto-alto); max-width: 100%; }
.cs-media > video, .cs-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* scena HTML viva del cliente (scene/<slug>/*.html), in un iframe; sul telefono può avere un altro rapporto */
.cs-media--scena { aspect-ratio: var(--r); }
.cs-scena { margin: 0; }
.cs-scena figcaption { display: flex; justify-content: space-between; gap: var(--passo-4); margin-top: var(--passo-3); }
.cs-media--scena > iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }

/* ---------- in breve: tre colonne ---------- */
.cs-breve { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--passo-8); margin-top: var(--passo-12); padding-top: var(--passo-6); border-top: 1px solid var(--polvere-900); }
.cs-breve h2 { margin: 0 0 var(--passo-3); color: var(--malva); }
.cs-breve p { margin: 0; font: 400 15px/1.6 var(--font-testo); color: var(--polvere-200); max-width: 46ch; text-wrap: pretty; }
.cs-breve a, .cs-intro a, .cs-tesi a, .cs-scelte a, .cs-regole a { color: inherit; text-decoration: underline; text-decoration-color: var(--polvere-700); text-underline-offset: 3px; }

/* ---------- tendine dei link: details nativo, una aperta alla volta (attributo name) ---------- */
.cs-tendine { margin-top: var(--passo-8); border-top: 1px solid var(--polvere-900); }
.cs-tendina { border-bottom: 1px solid var(--polvere-900); }
.cs-tendina summary { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 18px; gap: var(--passo-4); align-items: center; padding: 18px 0; cursor: pointer; list-style: none; }
.cs-tendina summary::-webkit-details-marker { display: none; }
.cs-tendina summary:focus-visible { outline: 2px solid var(--malva); outline-offset: 2px; }
.cs-tendina__punto { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--polvere-400); transition: background-color 360ms ease-out, box-shadow 360ms ease-out; }
.cs-tendina__nome { font: 400 18px/1.2 var(--font-testo); letter-spacing: -0.01em; transition: color 160ms ease-out; }
.cs-tendina__conta { font: 800 14px/1 var(--font-punto); color: var(--malva); letter-spacing: .06em; }
.cs-tendina__segno { position: relative; width: 18px; height: 18px; transition: transform 360ms cubic-bezier(0.23, 1, 0.32, 1); }
.cs-tendina__segno::before, .cs-tendina__segno::after { content: ""; position: absolute; background: var(--osso); }
.cs-tendina__segno::before { left: 0; top: 8.5px; width: 18px; height: 1px; }
.cs-tendina__segno::after { left: 8.5px; top: 0; width: 1px; height: 18px; }
.cs-tendina[open] .cs-tendina__punto { background: var(--scintilla); box-shadow: 0 0 2px rgba(255, 241, 230, .9), 0 0 12px rgba(255, 241, 230, .45); }
.cs-tendina[open] .cs-tendina__segno { transform: rotate(45deg); }
.cs-tendina[open] .cs-lista { animation: cs-componi 900ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes cs-componi { from { opacity: 0; filter: blur(6px); transform: translateY(-10px); } }
@media (hover: hover) and (pointer: fine) {
  .cs-tendina summary:hover .cs-tendina__nome { color: var(--scintilla); }
  .cs-tendina summary:hover .cs-tendina__punto { box-shadow: inset 0 0 0 1px var(--scintilla); }
}
.cs-lista { list-style: none; margin: 0; padding: 0 0 18px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--passo-12); }
.cs-lista li { border-top: 1px solid var(--polvere-900); }
.cs-lista a { display: grid; gap: 4px; padding: 12px 0; text-decoration: none; color: var(--osso); }
.cs-lista b { font: 400 15px/1.35 var(--font-testo); }
.cs-lista a:hover b { color: var(--scintilla); }

/* glifo dei link esterni: quadrato aperto nell'angolo del taglio, il punto esce */
.cs-esce { position: relative; display: inline-block; width: .62em; height: .62em; margin-left: .4em; vertical-align: .02em; }
.cs-esce::before { content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6.6 .6H.6v10.8h10.8V5.4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6.6 .6H.6v10.8h10.8V5.4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.cs-esce::after { content: ""; position: absolute; width: 26%; height: 26%; right: -2%; top: -2%; border-radius: 50%; background: currentColor; transition: transform 360ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 360ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  a:hover .cs-esce::after { transform: translate(.14em, -.14em); box-shadow: 0 0 2px rgba(255, 241, 230, .9), 0 0 8px rgba(255, 241, 230, .45); }
}

/* ---------- sezioni numerate ---------- */
.cs-titolo { margin: var(--passo-3) 0 0; text-wrap: balance; }
.cs-intro { margin: var(--passo-4) 0 0; font: 400 16px/1.6 var(--font-testo); color: var(--polvere-200); max-width: 62ch; text-wrap: pretty; }

/* direzione: tesi più piccola del titolo, poi tre scelte */
.cs-tesi { margin: var(--passo-4) 0 0; font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--font-testo); color: var(--polvere-200); max-width: 52ch; text-wrap: pretty; }
.cs-scelte { list-style: none; margin: var(--passo-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--passo-4); counter-reset: scelta; }
.cs-scelte li { display: grid; gap: var(--passo-3); align-content: start; min-width: 0; }
.cs-scelte h3 { margin: var(--passo-1) 0 0; font: 400 20px/1.2 var(--font-testo); letter-spacing: -0.015em; }
.cs-scelte h3::before { counter-increment: scelta; content: "0" counter(scelta); display: block; margin-bottom: var(--passo-2); font: 800 14px/1 var(--font-punto); color: var(--malva); letter-spacing: .08em; }
.cs-scelte p { margin: 0; font: 400 14px/1.55 var(--font-testo); color: var(--polvere-200); max-width: 46ch; }

/* interazioni: una grande, poi a due o a tre */
.cs-inter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--passo-8) var(--passo-4); margin-top: var(--passo-8); }
.cs-clip { margin: 0; grid-column: span 3; min-width: 0; }
.cs-clip--grande { grid-column: 1 / -1; }
.cs-clip--terzo { grid-column: span 2; }
.cs-clip figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--passo-4); margin-top: var(--passo-3); align-items: baseline; }
.cs-clip h3 { margin: 0; font: 400 19px/1.2 var(--font-testo); }
.cs-clip p { grid-column: 1 / -1; margin: 0; font: 400 14px/1.55 var(--font-testo); color: var(--polvere-200); }

/* sistema di design: fascia col fondo del cliente (--fondo, --inchiostro), voce del portfolio */
.cs-fascia { --fondo: var(--vuoto-velo); --inchiostro: var(--osso); background: var(--fondo); color: var(--inchiostro);
  margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%);
  /* respiro al cambio di colore: sopra (dopo la sezione precedente) e dentro, in fondo */
  margin-top: var(--passo-20); padding-bottom: var(--passo-20); }
.cs-fascia .pg-righello, .cs-fascia .pv-lettura { color: color-mix(in srgb, var(--inchiostro) 70%, transparent); }
.cs-fascia .cs-intro { color: color-mix(in srgb, var(--inchiostro) 85%, transparent); }
.cs-blocco { margin-top: var(--passo-12); }
.cs-blocco > h3 { margin: 0 0 var(--passo-4); padding-bottom: var(--passo-3); border-bottom: 1px solid color-mix(in srgb, var(--inchiostro) 22%, transparent); font: 400 22px/1.15 var(--font-testo); letter-spacing: -0.02em; }
.cs-blocco > .pv-lettura { margin: var(--passo-6) 0 var(--passo-3); }
.cs-colori { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--passo-4) var(--passo-6); }
.cs-colori li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px var(--passo-3); align-items: center; }
.cs-colori i { grid-row: span 2; width: 32px; height: 32px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inchiostro) 25%, transparent); }
.cs-colori b { font: 400 14px/1.2 var(--font-testo); }
.cs-colori code { font: 400 11px/1.2 var(--font-dato); letter-spacing: .04em; color: color-mix(in srgb, var(--inchiostro) 65%, transparent); }
.cs-caratteri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--passo-10, 40px); }
.cs-caratteri > div { display: grid; gap: var(--passo-4); padding-block: var(--passo-6); border-bottom: 1px solid color-mix(in srgb, var(--inchiostro) 22%, transparent); min-width: 0; }
.cs-caratteri p { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--passo-4); align-items: baseline; }
.cs-caratteri b { font: 400 16px/1.2 var(--font-testo); }
.cs-caratteri img { width: 100%; height: auto; }
.cs-regole { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--passo-6); }
.cs-regole p { margin: var(--passo-2) 0 0; font: 400 15px/1.55 var(--font-testo); }

/* pagine: gruppi di screenshot con le proporzioni vere (riusa .pg-foto) */
.cs-pagine { margin-top: var(--passo-6); max-width: none; }

/* crediti */
.cs-crediti { margin: var(--passo-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--passo-6) var(--passo-8); }
.cs-crediti dt { margin-bottom: var(--passo-1); }
.cs-crediti dd { margin: 0; font: 400 15px/1.45 var(--font-testo); }
.cs-crediti a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--polvere-700); }

@media (max-width: 760px) {
  .cs-breve, .cs-scelte, .cs-regole, .cs-caratteri, .cs-crediti { grid-template-columns: minmax(0, 1fr); }
  .cs-breve { gap: var(--passo-6); }
  .cs-lista { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .cs-inter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-clip, .cs-clip--grande { grid-column: 1 / -1; }
  .cs-media--scena { aspect-ratio: var(--r-tel, var(--r)); }
  .cs-clip--terzo { grid-column: span 1; }
  .cs-clip figcaption { grid-template-columns: minmax(0, 1fr); }
  .cs-clip--terzo p { display: none; }
  .cs-colori { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-tendina[open] .cs-lista { animation: none; }
  .cs-tendina__segno, .cs-esce::after { transition: none; }
}