/* ==========================================================================
   SuperEasyWeb — base.css
   Token, reset, tipografia, griglia a mattonelle. Vedi docs/BRIEF.md §3.
   ========================================================================== */

:root {
  /* colori */
  --ink: #0d2b30;
  --blu: #0b6e7a;
  --blu-testo: #0a5f69;
  --blu-scuro: #095c66;
  --cielo: #d3ecea;
  --lime: #d4f03c;
  --lime-scuro: #c2de22;
  --carta: #ffffff;
  --sfondo: #f1f3ef;
  --testo-2: #4a5b5d;
  --linea: rgba(13, 43, 48, 0.10);
  --ombra-card: 0 10px 30px rgba(13, 43, 48, 0.08);
  --ombra-nav: 0 8px 30px rgba(13, 43, 48, 0.10);

  /* forma e spazio */
  --r: 14px;
  --r-in: 10px;
  --gap: 9px;
  --margine: 10px;
  --pad-tile: clamp(24px, 3.5vw, 56px);
  --max: 1440px;
  --nav-h: 60px;

  /* tipografia */
  --f-display: 'Gabarito', 'Figtree', system-ui, sans-serif;
  --f-corpo: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-hero: clamp(56px, 9.5vw, 148px);
  --t-display: clamp(36px, 4.6vw, 60px);
  --t-frase: clamp(28px, 3.2vw, 44px);
  --t-h3: clamp(22px, 2vw, 28px);
  --t-lead: clamp(18px, 1.5vw, 22px);
  --t-corpo: 17px;
  --t-small: 14px;

  /* movimento */
  --speed-fast: .2s;
  --speed-normal: .4s;
  --speed-slow: .6s;
  --speed-slower: .9s;
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --ease-bounce: cubic-bezier(.47, 1.64, .41, .8);
  --ease-gentle: cubic-bezier(.17, 1.38, .35, .96);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-hover: cubic-bezier(.4, 0, .2, 1);
  --perspective: 800px;
}

@media (min-width: 1200px) {
  :root { --t-corpo: 18px; }
}
@media (max-width: 767px) {
  :root { --margine: 8px; --gap: 8px; --pad-tile: 22px; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--ink);
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--lime); color: var(--ink); }

/* ---------- tipografia ---------- */
.t-hero, .t-display, .t-frase, .t-h3 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.t-hero { font-size: var(--t-hero); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: .9; }
.t-display { font-size: var(--t-display); text-transform: uppercase; letter-spacing: -0.03em; line-height: .92; }
.t-frase { font-size: var(--t-frase); line-height: 1.05; }
.t-h3 { font-size: var(--t-h3); line-height: 1.12; letter-spacing: -0.01em; }
.t-lead { font-size: var(--t-lead); line-height: 1.4; font-weight: 500; }
.t-small { font-size: var(--t-small); }
.t-2 { color: var(--testo-2); }
.t-blu { color: var(--blu-testo); }
.t-bianco { color: var(--carta); }
.misura { max-width: 62ch; }
.misura-stretta { max-width: 44ch; }
strong, b { font-weight: 700; }

/* ---------- layout ---------- */
.pagina { padding: 0 var(--margine); max-width: calc(var(--max) + var(--margine) * 2); margin: 0 auto; }
.sezione { padding-block: clamp(48px, 7vw, 112px); }
.sezione--stretta { padding-block: clamp(32px, 4vw, 64px); }
.sezione__testa { display: grid; gap: 16px; margin-bottom: clamp(24px, 3vw, 40px); }
@media (min-width: 900px) {
  .sezione__testa { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 48px; }
}

/* griglia a mattonelle */
.mattonelle { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.mattonelle > * { min-width: 0; }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@media (max-width: 1023px) {
  .col-8, .col-7, .col-6, .col-5, .col-4 { grid-column: span 6; }
  .col-3 { grid-column: span 6; }
}
@media (max-width: 767px) {
  .mattonelle > * { grid-column: span 12; }
}

/* tile */
.tile {
  position: relative;
  border-radius: var(--r);
  background: var(--carta);
  color: var(--ink);
  padding: var(--pad-tile);
  overflow: clip;
}
.tile--blu { background: var(--blu); color: var(--carta); }
.tile--cielo { background: var(--cielo); color: var(--ink); }
.tile--lime { background: var(--lime); color: var(--ink); }
.tile--ink { background: var(--ink); color: var(--carta); }
.tile--carta { background: var(--carta); }
.tile--sfondo { background: var(--sfondo); }
.tile--aperta { overflow: visible; }
.tile--nopad { padding: 0; }
.tile--blu .t-2, .tile--ink .t-2 { color: rgba(255, 255, 255, .92); }
.tile--blu .t-blu { color: var(--carta); }

/* utilità */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.flusso > * + * { margin-top: 1em; }
.flusso-s > * + * { margin-top: .5em; }
.centro { text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--carta); padding: 10px 16px; border-radius: 999px;
  transition: top var(--speed-fast) var(--ease-out);
}
.skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}