/* ==========================================================================
   PRUNe — componenti di pagina (header, hero, logo, news, footer)
   Dipende da tokens.css. Stesse geometrie misurate sul sito Next.
   ========================================================================== */

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.header__logo svg {
  display: block;
  overflow: visible;   /* il bordo del fantasmino non deve mai essere tagliato */
}

/* Il marchio e' il file vettoriale come e', solo dimensionato. L'altezza la
   decide il viewBox: non la forzo, altrimenti il disegno si deforma. */
.header__logo .brand-wm {
  /* È un file esterno: larghezza e altezza vengono dai suoi attributi, che
     corrispondono al rapporto del viewBox (260 × 89). */
  display: block;
}

.header__nav {
  display: none;
  align-items: center;
  gap: var(--sp-6);
}

.header__link {
  font-size: var(--fs-ui);
  color: var(--text-body);
  transition: color var(--t-fast) var(--ease);
}

.header__link:hover,
.header__link[aria-current="page"] {
  color: var(--text);
}

.header__cta {
  margin-left: var(--sp-2);
}

.header__toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
}

.header__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.header__menu {
  display: none;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--bg-card);
}

.header__menu[data-open="true"] {
  display: flex;
}

@media (min-width: 768px) {
  .header__nav {
    display: flex;
  }
  .header__toggle,
  .header__menu {
    display: none;
  }
  .header__menu[data-open="true"] {
    display: none;
  }
}

/* ---------- Icone ---------- */
.card__icon {
  display: block;
  color: var(--icon);
}

.card__icon svg,
.card__icon img {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.card--dark .card__icon {
  color: var(--action);
}

.icon-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.icon-inline svg,
.icon-inline img {
  width: 100%;
  height: 100%;
}

/* ---------- Toggle del tema ---------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  color: var(--icon);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.theme-toggle:hover {
  border-color: var(--action);
}

.theme-toggle svg {
  width: 24px;
  height: 24px;
}

/* Le due metà del fantasmino.
   Metà A (alto-sinistra) = tema chiaro · metà B (basso-destra) = tema scuro.
   In tema chiaro si vede A piena e B solo nel suo spicchio in basso a destra;
   in tema scuro il contrario. Così il pulsante *è* un interruttore: mostra
   sempre i due stati, e quello attivo occupa la maggior parte dell'icona. */
.theme-toggle__ghost {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

.theme-toggle__ghost picture,
.theme-toggle__ghost img {
  position: absolute;
  inset: 0;
  width: 24px;
  height: 24px;
  display: block;
}

.theme-toggle__ghost-a,
.theme-toggle__ghost-b {
  transition: clip-path var(--t-base) var(--ease);
}

.theme-toggle__ghost-a {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.theme-toggle__ghost-b {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* tema scuro: si invertono le due metà */
:root[data-theme="dark"] .theme-toggle__ghost-a {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

:root[data-theme="dark"] .theme-toggle__ghost-b {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__ghost-a {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  :root:not([data-theme="light"]) .theme-toggle__ghost-b {
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
}

/* Niente transizione quando l'utente ha chiesto meno movimento. */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle__ghost-a,
  .theme-toggle__ghost-b {
    transition: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  /* 64px header + 64px di respiro: il sito Next usava 128px e poi 0px sotto. */
  padding-top: calc(var(--header-h) + var(--sp-16));
  padding-bottom: var(--sp-20);
  background: var(--bg-card);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
}

.hero__title {
  max-width: 48rem;
}

.hero__lead {
  max-width: 42rem;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: 24rem;
  margin-top: var(--sp-2);
}

.hero__visual {
  margin: var(--sp-6) 0 0;
}

.hero__visual {
  display: grid;
  place-items: center;
}

.hero__lockup {
  position: relative;
  display: block;
  /* La cornice ha il RAPPORTO DEL VIEWBOX del file (520,1 × 491,5 = 1,058):
     con un rapporto diverso `preserveAspectRatio` rimpicciolisce il disegno e lo
     sposta. Il viewBox è inquadrato sul contenuto da `tests/fit_brand.py`, quindi
     il disegno riempie la cornice con un margine uniforme. */
  width: min(380px, 70vw);
  aspect-ratio: 520.1 / 491.5;
  background: var(--hero-plate);
  border-radius: var(--r-pill);
  transition: background var(--t-base) var(--ease);
}

.hero__lockup .brand-lockup {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
    justify-content: center;
    width: auto;
    max-width: none;
  }
}

/* Sotto 640px i CTA restano pill centrate, non barre a tutta larghezza:
   è la gerarchia del sito Next, dove i due bottoni hanno peso visivo pari. */
.hero__actions .btn {
  align-self: center;
}

/* ---------- Liste di voci con bordo ---------- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  font-size: var(--fs-body);
  color: var(--text);
}

/* ---------- Card team ---------- */
.team-card {
  gap: var(--sp-4);
}

.team-card__avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  color: var(--accent-strong);
  font-weight: var(--fw-bold);
}

.team-card__avatar picture,
.news-card__media picture {
  display: contents;
}

.team-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__role {
  display: inline-block;
  margin-top: var(--sp-1);
}

.team-card__affiliation {
  font-size: var(--fs-label);
  color: var(--text-faint);
}

.team-card__link {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Card news ---------- */

/* Il sito Next usava 3 colonne: con 2 soli articoli le card restavano strette.
   Qui la griglia si centra e le colonne restano vicine alla larghezza originale. */
.news-grid {
  max-width: 68rem;
  margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

.heading--left {
  text-align: left;
}

.heading--left .heading__title,
.heading--left .h2 {
  margin-inline: 0;
}

.news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: var(--bg-card);
}

.news-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-img);
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-base) var(--ease);
}

.news-card:hover .news-card__media img {
  transform: scale(1.02);
}

.news-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

.news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.news-card__date {
  font-size: var(--fs-label);
  color: var(--text-muted);
}

.news-card__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: 1.375;
  color: var(--text);
  transition: color var(--t-fast) var(--ease);
}

.news-card:hover .news-card__title {
  color: var(--accent-strong);
}

.news-card__text {
  flex: 1;
}

.news-card__author {
  font-size: var(--fs-label);
  color: var(--text-muted);
}

.news-card__more {
  margin-top: auto;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--accent-strong);
}

.news-card:hover .news-card__more {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Footer ---------- */
.footer {
  margin-top: auto;
  padding: var(--sp-20) var(--gutter) var(--sp-8);
  background: var(--tile-dark-bg);
  color: var(--tile-dark-text);
}

.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 20rem;
}

.footer__logo {
  position: relative;
  display: block;
  width: 150px;
}

.footer__logo .brand-wm {
  /* è un file esterno: le misure vengono dai suoi attributi */
  display: block;
}

/* Nel footer le varianti si INVERTONO rispetto al resto della pagina. Il piede
   usa `--tile-dark-*`, che è SCURO in tema chiaro e CHIARO in tema scuro: quindi
   in tema chiaro serve la scritta chiara (il verde profondo su #111111
   misurerebbe 1,02:1 — era il difetto #3 del prototipo) e in tema scuro torna il
   file ufficiale.
   
   Sono quattro stati e vanno scritti tutti: se se ne lascia uno scoperto vincono
   per ordine le regole `.brand-wm` qui sopra (`display: block`) e si vedrebbero
   due marchi sovrapposti. */
.footer__logo .brand-wm--piede.brand-wm--chiaro { display: none; }
.footer__logo .brand-wm--piede.brand-wm--scuro { display: block; }

:root[data-brand="light"] .footer__logo .brand-wm--piede.brand-wm--chiaro { display: none; }
:root[data-brand="light"] .footer__logo .brand-wm--piede.brand-wm--scuro { display: block; }

:root[data-brand="dark"] .footer__logo .brand-wm--piede.brand-wm--chiaro { display: block; }
:root[data-brand="dark"] .footer__logo .brand-wm--piede.brand-wm--scuro { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-brand="light"]) .footer__logo .brand-wm--piede.brand-wm--chiaro { display: block; }
  :root:not([data-brand="light"]) .footer__logo .brand-wm--piede.brand-wm--scuro { display: none; }
}


.footer__tagline {
  font-size: var(--fs-body);
  color: var(--tile-dark-body);
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__label {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.footer__nav a {
  font-size: var(--fs-body);
  color: var(--tile-dark-body);
  transition: color var(--t-fast) var(--ease);
}

.footer__nav a:hover {
  color: var(--tile-dark-text);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-on-dark);
  font-size: var(--fs-label);
  color: var(--text-on-dark-muted);
}

@media (min-width: 768px) {
  .footer__top {
    flex-direction: row;
    gap: var(--sp-20);
  }
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
  .footer__bottom p:last-child {
    max-width: 28rem;
    text-align: right;
  }
}

/* ------------------------------------------------------------------ *
 * Il marchio in tema scuro
 *
 * Ogni marchio ha due file: quello ufficiale (`wordmark.svg`, `network.svg`) e
 * una variante scura con le strisce della rete chiare
 * (`tests/build_brand_dark.py`). In pagina ci sono entrambi gli `<img>` e il CSS
 * ne mostra uno.
 *
 * La scelta la fa il CSS e non `<picture>`: `prefers-color-scheme` vede solo la
 * preferenza di SISTEMA, non il tema scelto col pulsante. `app.js` scrive la
 * scelta in `data-brand` sul documento; senza JavaScript valgono le regole della
 * media query, quindi si vede comunque il marchio giusto.
 *
 * **Nel footer le varianti si invertono**: il piede usa `--tile-dark-*`, che è
 * scuro in tema chiaro e chiaro in tema scuro, quindi in tema chiaro serve la
 * scritta chiara.
 *
 * Le regole hanno la stessa forma di quelle base (`<zona> .<classe>`): con una
 * forma più debole perderebbero per specificità e si vedrebbero due marchi
 * sovrapposti.
 * ------------------------------------------------------------------ */

/* .header__logo */
.header__logo .brand-wm--scuro { display: none; }
.header__logo .brand-wm--chiaro { display: block; }
:root[data-brand="light"] .header__logo .brand-wm--scuro { display: none; }
:root[data-brand="light"] .header__logo .brand-wm--chiaro { display: block; }
:root[data-brand="dark"] .header__logo .brand-wm--scuro { display: block; }
:root[data-brand="dark"] .header__logo .brand-wm--chiaro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-brand="light"]) .header__logo .brand-wm--scuro { display: block; }
  :root:not([data-brand="light"]) .header__logo .brand-wm--chiaro { display: none; }
}

/* .hero__lockup */
.hero__lockup .brand-lockup--scuro { display: none; }
.hero__lockup .brand-lockup--chiaro { display: block; }
:root[data-brand="light"] .hero__lockup .brand-lockup--scuro { display: none; }
:root[data-brand="light"] .hero__lockup .brand-lockup--chiaro { display: block; }
:root[data-brand="dark"] .hero__lockup .brand-lockup--scuro { display: block; }
:root[data-brand="dark"] .hero__lockup .brand-lockup--chiaro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-brand="light"]) .hero__lockup .brand-lockup--scuro { display: block; }
  :root:not([data-brand="light"]) .hero__lockup .brand-lockup--chiaro { display: none; }
}

/* .footer__logo */
.footer__logo .brand-wm--piede--chiaro { display: none; }
.footer__logo .brand-wm--piede--scuro { display: block; }
:root[data-brand="light"] .footer__logo .brand-wm--piede--chiaro { display: none; }
:root[data-brand="light"] .footer__logo .brand-wm--piede--scuro { display: block; }
:root[data-brand="dark"] .footer__logo .brand-wm--piede--chiaro { display: block; }
:root[data-brand="dark"] .footer__logo .brand-wm--piede--scuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-brand="light"]) .footer__logo .brand-wm--piede--chiaro { display: block; }
  :root:not([data-brand="light"]) .footer__logo .brand-wm--piede--scuro { display: none; }
}