/*
 * OttantaPiù – pagina segnaposto
 *
 * Il blocco riproduce il fronte della cartellina (pannello 866 × 1220 unità).
 * Ogni misura interna è calc(var(--u) * unità), con --u = --block-w / 866.
 * Niente cqw: deve funzionare su Safari iOS 15/16.
 */

/* Fallback metrici per Arial/Roboto quando il kit Adobe Fonts (Helvetica Neue LT Pro)
   non è disponibile e Helvetica Neue non è installata:
   riportano titolo e scritta verticale alla lunghezza della cartellina.
   Safari < 17 ignora size-adjust, ma su Apple arriva prima Helvetica Neue. */
@font-face {
  font-family: "OP Display Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Liberation Sans");
  font-weight: 100 400;
  size-adjust: 97.5%;
}
@font-face {
  font-family: "OP Display Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Liberation Sans Bold");
  font-weight: 700;
  size-adjust: 97.5%;
}
@font-face {
  font-family: "OP Flap Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Liberation Sans");
  font-weight: 100 400;
  size-adjust: 90%;
}
@font-face {
  font-family: "OP Flap Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Liberation Sans Bold");
  font-weight: 700;
  size-adjust: 90%;
}

:root {
  /* Colori del logo ufficiale kosgroup.com (vedi NOTE.md) */
  --blu: #20467B;
  --rosso: #D2072A;
  --bianco: #FFFFFF;
  /* Scritta verticale: bianco al 16% sul blu, come colore pieno. Con rgba le parti in cui
     le lettere si sovrappongono ("tt") risulterebbero più chiare. */
  --flap-colore: #446490;

  /* Kit Adobe Fonts, poi Helvetica Neue locale, poi i fallback metrici basati su Arial */
  --font-display: "helvetica-neue-lt-pro", "Helvetica Neue", "OP Display Fallback", Helvetica, Arial, sans-serif;
  --font-flap: "helvetica-neue-lt-pro", "Helvetica Neue", "OP Flap Fallback", Helvetica, Arial, sans-serif;
  --font-text: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* 1% dell'altezza del viewport: svh dove supportato (vedi @supports sotto) */
  --vh: 1vh;
  /* Larghezza utile: 100vw meno la barra di scorrimento classica, misurata dallo
     script in fondo a index.html (--sbw). Senza JS --sbw vale 0. */
  --vw: calc(100vw - var(--sbw, 0px));

  /* Fascia dei contatti sotto il blocco: blocco + fascia occupano la prima schermata */
  --contatti-h: 72px;
  /* Altezza disponibile per il blocco nella prima schermata */
  --block-hmax: calc(var(--vh) * 100 - var(--contatti-h));

  /* Schermi verticali: larghezza blocco = min(larghezza utile, (100svh − fascia) × 0,7098), minimo 300px */
  --block-w: max(300px, min(var(--vw), calc(var(--block-hmax) * 0.7098)));
  --u: calc(var(--block-w) / 866);
  --block-h: calc(var(--u) * 1220);
  /* Blocco sempre in alto, in tutti i formati: il cerchio superiore dell'otto è tagliato
     dal bordo della pagina, contatti subito sotto, lo spazio avanzato va in fondo */
  --block-top: 0px;
  /* Margine a sinistra del blocco: stessa formula per blocco e logo */
  --block-left: max(0px, calc((var(--vw) - var(--block-w)) / 2));
}

@supports (height: 100svh) {
  :root { --vh: 1svh; }
}

/* Schermi orizzontali: il blocco lascia spazio alla patella a destra */
@media (min-aspect-ratio: 1/1) {
  :root {
    --block-w: max(300px, min(calc(var(--block-hmax) * 0.7098), calc(var(--vw) / 2.006)));
  }
}

/* ---------- Base ---------- */

html {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  background: var(--bianco);
  color: var(--blu);
  font-family: var(--font-text);
  font-size: 1.125rem;
  line-height: 1.5;
}

a {
  color: var(--blu);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

a:focus {
  outline: 3px solid var(--blu);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Unità di testo che non vanno spezzate (numero, e-mail, codici fiscali) */
.voce {
  white-space: nowrap;
}

/* ---------- Logo KOS (header, allineato al blocco) ---------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 2;
}

.kos-logo {
  position: absolute;
  top: calc(var(--block-top) + var(--u) * 41);
  left: calc(var(--block-left) + var(--u) * 41);
  width: calc(var(--u) * 118);
  height: calc(var(--u) * 118);
}

.kos-logo:focus {
  /* più distante, per non sembrare una seconda cornice del logo */
  outline-offset: 6px;
}

.kos-logo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Blocco ---------- */

.hero {
  padding-top: var(--block-top);
}

/* Bianco a sinistra, blu a destra: il blocco centrato copre la linea di divisione */
.band {
  overflow: hidden;
  background: linear-gradient(90deg, var(--bianco) 50%, var(--blu) 50%);
}

.block {
  position: relative;
  width: var(--block-w);
  height: var(--block-h);
  margin: 0 0 0 var(--block-left);
  background: var(--bianco);
  container-type: inline-size;
}

.otto {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.otto .rosso { fill: var(--rosso); }
.otto .blu { fill: var(--blu); }

/* Titolo e sottotitolo: ancorati in basso a destra, crescono verso l'alto */
.claim {
  position: absolute;
  right: calc(var(--u) * 59);
  bottom: calc(var(--u) * 197);
  /* resta dentro il cerchio blu inferiore anche quando scattano i minimi */
  max-width: calc(var(--u) * 570);
  color: var(--bianco);
  text-align: right;
}

.claim h1 {
  margin: 0 calc(var(--u) * 1) calc(var(--u) * 6) 0;
  font-family: var(--font-display);
  font-size: max(40px, calc(var(--u) * 112));
  font-weight: 300;
  line-height: 1;
  /* spaziatura stretta della cartellina (misurata con Helvetica Neue) */
  letter-spacing: -0.03em;
}

.light { font-weight: 300; }
.bold { font-weight: 700; }

.claim p {
  margin: 0;
  font-size: max(15px, calc(var(--u) * 25));
  line-height: 1.2;
  /* Quando gli a capo della cartellina non valgono, righe di lunghezza simile
     (niente ultima riga corta). Ignorato dove non è supportato. */
  text-wrap: balance;
}

.claim strong {
  font-weight: 700;
}

/* Interruzioni di riga della cartellina: solo quando c'è spazio, cioè quando il
   corpo non è ancora al minimo di 15px (25 unità ≥ 15px ⇔ blocco ≥ 520px).
   Senza container query i <br> restano nascosti e il testo rifluisce. */
.claim br {
  display: none;
}

@container (min-width: 520px) {
  .claim br { display: inline; }
  .claim p { text-wrap: wrap; }
}

/* Scritta verticale sulla patella (decorativa, aria-hidden) */
.flap {
  display: none;
  position: absolute;
  /* riquadro stretto sull'inchiostro (x 1065–1277): la patella utile finisce a 866 + 436 */
  left: calc(var(--u) * 1056);
  bottom: calc(var(--u) * 16);
  font-family: var(--font-flap);
  /* spaziatura moderata: funziona sia con Helvetica Neue LT Pro 25 Ultra Light (peso 100)
     sia con i fallback regular; il corpo compensa per la lunghezza 1160 */
  font-size: calc(var(--u) * 288);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--flap-colore);
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.flap .light { font-weight: 100; }  /* lo stile più sottile del kit (non c'è un Thin) */

@media (min-aspect-ratio: 1/1) {
  .flap { display: block; }
}

/* ---------- Sotto il blocco ---------- */

/* Fascia dei contatti: altezza fissa (entra nel calcolo del blocco), su una riga
   finché c'è spazio; sotto i 30em le voci vanno a capo e la fascia cresce */
.contatti {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--contatti-h);
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.4;
}

.contatti p {
  margin: 0;
}

.sep {
  white-space: pre;
}

/* Su schermi stretti una voce per riga, senza separatori appesi */
@media (max-width: 30em) {
  .contatti .voce { display: block; }
  .contatti .sep { display: none; }
}

.site-footer {
  padding: 1.5rem 1rem 2rem;
  text-align: center;
}

/* Loghi istituzionali (provvisori): altezza visiva uniforme */
.loghi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 3rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 0 1.5rem;
  list-style: none;
}

.loghi li {
  display: block;
}

.loghi img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 44px;
}

.loghi .logo-ministero { height: 64px; }
.loghi .logo-italiadomani { height: 40px; }

/* Sotto i 600px: griglia 2×2, ogni logo si adatta alla sua colonna */
@media (max-width: 600px) {
  .loghi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: 1.5rem 1rem;
  }
  .loghi img { height: auto; max-height: 38px; }
  .loghi .logo-ministero { height: auto; max-height: 56px; }
  .loghi .logo-italiadomani { height: auto; max-height: 34px; }
}

.finanziamento {
  max-width: 44rem;
  margin: 0 auto;
  font-size: 1rem;
}

.legale {
  margin: 1.5rem 0 0;
  font-size: 1rem;
}

/* ---------- Stampa ---------- */

@media print {
  :root {
    /* ≥ 520px: restano gli a capo della cartellina */
    --block-w: 14cm;
    --block-top: 0cm;
  }

  body {
    font-size: 11pt;
  }

  .hero {
    padding: 0;
  }

  /* Su carta il blu a destra del blocco non serve */
  .band {
    background: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* L'otto è un'immagine SVG e si stampa sempre: il testo bianco su di esso
     non deve essere "adattato" dal browser quando i fondi sono disattivati. */
  .block {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .flap {
    display: none;
  }

  .claim p {
    font-size: calc(var(--u) * 25);
  }

  .contatti {
    padding: 0.8cm 0 0.3cm;
    font-size: 12pt;
  }

  .site-footer { padding: 0; }
  .loghi { padding: 0.3cm 0; gap: 0.4cm 1cm; }
  .finanziamento { font-size: 9pt; }
  .legale { margin-top: 0.3cm; font-size: 9pt; }
  .loghi img { height: 1cm; }
  .loghi .logo-ministero { height: 1.4cm; }
}