/* ============================================================================
 * uo.css — Design system pubblico di UltimOraUniversità
 * ----------------------------------------------------------------------------
 * Unica fonte di verità per colori, spaziature, tipografia e componenti delle
 * pagine pubbliche. Prima di questo file la palette era ricopiata a mano in
 * index.php, articolo.php, chi-siamo.php e hard-coded senza variabili in
 * gruppi.php e ateneo.php.
 *
 * ► La cartella assets/ ha Cache-Control di un anno (assets/.htaccess):
 *   includere SEMPRE con ?v=<data> e incrementarlo a ogni modifica, altrimenti
 *   i browser continueranno a servire la versione vecchia.
 *
 *   <link rel="stylesheet" href="/assets/uo.css?v=20260908">
 *
 * ► I font NON sono importati qui (un @import sarebbe una richiesta a catena,
 *   render-blocking): ogni pagina mantiene il proprio <link> a Google Fonts con
 *   Playfair Display + Inter (+ Fira Mono dove servono i metadati monospaziati).
 * ========================================================================== */

/* ── TOKEN ────────────────────────────────────────────────────────────────── */
:root {
  /* Superfici */
  --bg:         #f2f0eb;
  --bg-white:   #ffffff;
  --bg-light:   #f8f6f1;
  --border:     #ddd9d0;
  --border-mid: #ccc8be;

  /* Testo */
  --text:       #1a1714;
  --text-sec:   #4a4540;
  --text-muted: #6f6a62;   /* scurito da #8a857d: era 3.4:1 su bianco, ora ~5.1:1 */

  /* Colori istituzionali */
  --red:        #c0392b;
  --red-dark:   #922b21;
  --red-light:  #fdf2f1;
  --navy:       #1c2b3a;
  --amber:      #d4870a;
  --green:      #1a7a4a;
  --blue:       #1565c0;

  /* ── Tipi di contenuto ──────────────────────────────────────────────────
   * Il colore identifica il TIPO, non solo la categoria della notizia.
   * `-ink` è la variante scura da usare per il TESTO: i colori di brand
   * (#25D366, #229ED9) su fondo bianco stanno sotto 2:1 e sono illeggibili. */
  --t-wa:        #25D366;  --t-wa-ink:   #0f7a3d;
  --t-tg:        #229ED9;  --t-tg-ink:   #16688f;
  --t-mat:       #0f766e;  --t-mat-ink:  #0f766e;
  --t-quiz:      #6d28d9;  --t-quiz-ink: #5b21b6;
  --t-lez:       #d4870a;  --t-lez-ink:  #92400e;
  --t-news:      #1c2b3a;  --t-news-ink: #1c2b3a;

  /* I colori delle CATEGORIE delle notizie non stanno qui di proposito.
     Hanno già due fonti — uo_categorie() in _helpers.php (server) e CAT in
     index.php (client) — che devono restare allineate fra loro; una terza
     copia in CSS, usata da nessuno, si sarebbe solo disallineata. Le pagine
     le applicano inline dal valore che ricevono (vedi ateneo.php). */

  /* Spaziature — prima erano valori sparsi da 4 a 28px senza scala */
  --sp-1: 4px;   --sp-2: 6px;   --sp-3: 8px;   --sp-4: 12px;
  --sp-5: 16px;  --sp-6: 20px;  --sp-7: 26px;  --sp-8: 34px;

  /* Raggi */
  --radius-sm: 3px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-pill: 99px;

  /* Tipografia */
  --font-ui:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-title: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:  'Fira Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ombre */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow:    0 2px 10px rgba(0,0,0,.07);
  --shadow-lg: 0 12px 30px rgba(0,0,0,.16);

  /* Larghezze */
  --w-text: 880px;    /* pagine di solo testo */
  --w-page: 1320px;   /* home e layout a due colonne */
}

/* Breakpoint unificati: 640 / 960 / 1280.
   Prima ne convivevano 18 (421, 480, 481, 521, 560, 600, 601, 640, 641, 720,
   767, 768, 820, 860, 900, 961, 1024, 1025) su due griglie incompatibili.
   Non esistono variabili CSS nelle media query: sono qui come promemoria. */

/* ── BASE ─────────────────────────────────────────────────────────────────── */
.uo *, .uo *::before, .uo *::after { box-sizing: border-box; }

body.uo {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (min-width: 640px) {
  body.uo { font-size: 14px; }   /* desktop più denso, mobile più leggibile */
}

/* :where() azzera la specificità del selettore: senza, `.uo a` (0,1,1) batteva
   `.uo-btn` (0,1,0) e ogni bottone-link finiva col testo blu — illeggibile sul
   verde del pulsante di verifica. Così qualunque classe successiva vince. */
.uo :where(a) { color: var(--blue); }

/* Focus visibile: `outline:none` senza sostituto rendeva invisibile
   la navigazione da tastiera su ricerca, select e form. */
.uo :focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.uo-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
}
.uo-skip-link:focus { left: 0; }

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

/* ── CHROME DI PAGINA ─────────────────────────────────────────────────────── */
.uo-topbar {
  background: var(--navy);
  padding: 14px 18px;
  text-align: center;
}
.uo-topbar a.uo-brand {
  font-family: var(--font-title);
  font-size: 18px; font-weight: 800; letter-spacing: 1px;
  color: #fff; text-decoration: none;
}
.uo-topbar a.uo-brand .x { color: var(--red); }

.uo-main {
  max-width: var(--w-text);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) 70px;
}
.uo-main--wide { max-width: var(--w-page); }

.uo-crumb { font-size: 13px; color: var(--text-muted); margin-bottom: var(--sp-4); }
.uo-crumb a { color: var(--text-muted); }

.uo h1, .uo-h1 {
  font-family: var(--font-title);
  font-size: 26px; font-weight: 800; line-height: 1.2;
  margin: 0 0 var(--sp-3);
}
.uo h2, .uo-h2 {
  font-family: var(--font-title);
  font-size: 20px; font-weight: 700; line-height: 1.25;
  margin: var(--sp-7) 0 var(--sp-3);
}
@media (min-width: 640px) {
  .uo h1, .uo-h1 { font-size: 30px; }
  .uo h2, .uo-h2 { font-size: 22px; }
}

.uo-lead {
  font-size: 15px; color: var(--text-sec);
  margin: 0 0 var(--sp-7); max-width: 640px;
}
.uo-note { font-size: 13px; color: var(--text-muted); margin-top: var(--sp-7); }
.uo-back {
  display: inline-block; margin-top: var(--sp-7);
  color: var(--red); text-decoration: none; font-weight: 600;
}
.uo-back:hover { text-decoration: underline; }

.uo-footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  font-size: 11.5px; line-height: 1.7;
  color: var(--text-muted);
}
.uo-footer a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }

/* ── BOTTONI ──────────────────────────────────────────────────────────────── */
.uo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px;                       /* tap target */
  padding: 10px var(--sp-6);
  border: none; border-radius: 7px;
  background: var(--red); color: #fff;
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s;
}
.uo-btn:hover        { background: var(--red-dark); }
.uo-btn--green       { background: var(--green); }
.uo-btn--green:hover { background: #15633c; }
.uo-btn--wa          { background: var(--t-wa-ink); }
.uo-btn--wa:hover    { background: #0b6231; }
.uo-btn--ghost {
  background: transparent; color: var(--text-sec);
  border: 1px solid var(--border-mid);
}
.uo-btn--ghost:hover { background: var(--bg-light); color: var(--text); }
.uo-btn--sm { min-height: 34px; padding: 6px var(--sp-4); font-size: 12.5px; }

/* ── SISTEMA DEI TIPI DI CONTENUTO ────────────────────────────────────────
 * Tre regole costanti, applicate ovunque compaia un contenuto:
 *   1. barra colore 3px a sinistra    → .uo-card / .uo-row
 *   2. pastiglia di tipo con icona    → .uo-pill
 *   3. densità = importanza           → .uo-card (alta) vs .uo-row (compatta)
 * Ogni classe .uo-t-* imposta due sole variabili, da cui discende tutto. */
.uo-t-wa    { --type-c: var(--t-wa);    --type-ink: var(--t-wa-ink); }
.uo-t-tg    { --type-c: var(--t-tg);    --type-ink: var(--t-tg-ink); }
.uo-t-mat   { --type-c: var(--t-mat);   --type-ink: var(--t-mat-ink); }
.uo-t-quiz  { --type-c: var(--t-quiz);  --type-ink: var(--t-quiz-ink); }
.uo-t-lez   { --type-c: var(--t-lez);   --type-ink: var(--t-lez-ink); }
.uo-t-news  { --type-c: var(--t-news);  --type-ink: var(--t-news-ink); }

.uo-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--type-ink, var(--text-sec));
  background: color-mix(in srgb, var(--type-c, var(--border)) 13%, transparent);
  white-space: nowrap;
}
.uo-pill i { font-size: 11px; }

/* ── CARD (alta densità visiva: gruppi) ───────────────────────────────────── */
.uo-card {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 3px);
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.uo-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--type-c, var(--border));
}
.uo-card:hover {
  border-color: color-mix(in srgb, var(--type-c, var(--border-mid)) 45%, var(--border));
  box-shadow: var(--shadow);
}

/* È uno <span> (sta dentro un <a>, che non può contenere <div>): senza
   display:block resterebbe inline e ignorerebbe width/height. */
.uo-card-avatar {
  display: block;
  position: relative;
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--radius-lg);
}
.uo-card-avatar img {
  width: 100%; height: 100%; display: block;
  border-radius: var(--radius-lg); object-fit: cover;
  background: var(--bg-light);
}
/* Badge piattaforma nell'angolo dell'avatar */
.uo-card-avatar > i {
  position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff;
  background: var(--type-c, var(--navy));
  border: 2px solid var(--bg-white);
}
/* Foto assente o non caricata: il riquadro diventa l'icona stessa */
.uo-card-avatar--ko img { display: none; }
.uo-card-avatar--ko {
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--type-c, var(--border)) 15%, transparent);
}
.uo-card-avatar--ko > i {
  position: static; width: 100%; height: 100%;
  font-size: 21px; border: none; border-radius: var(--radius-lg);
  background: transparent; color: var(--type-ink, var(--text-sec));
}

.uo-card-body { flex: 1; min-width: 0; }
/* Nome, meta e sottotitolo sono <span> (stanno dentro un <a>, che non può
   contenere <div>): senza display:block resterebbero sulla stessa riga. */
.uo-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2;   /* due righe: tiene le card allineate */
  -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.35;
  overflow-wrap: anywhere;
}
.uo-card-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: 5px;
  font-size: 11.5px; color: var(--text-muted);
}
.uo-card-ateneo {
  font-weight: 600; color: var(--text-sec);
}
/* Provenienza e freschezza: una riga sola, troncata. Prima erano voci separate
   di una riga flex e "Condiviso in TFA XI ciclo Roma Link" andava a capo a
   metà frase, sfilacciando la griglia. */
.uo-card-sub {
  display: block; margin-top: 3px;
  font-size: 11.5px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uo-card-nota {
  margin-top: var(--sp-1);
  font-size: 11.5px; line-height: 1.4; color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.uo-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0; align-self: center;
  padding: 7px 13px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  color: var(--type-ink, var(--text-sec));
  background: color-mix(in srgb, var(--type-c, var(--border)) 13%, transparent);
  transition: background .15s;
}
.uo-card:hover .uo-card-cta {
  background: color-mix(in srgb, var(--type-c, var(--border)) 22%, transparent);
}

/* Gruppo dietro verifica email. Per chi non si è verificato TUTTE le card sono
   bloccate: dare loro un bordo tratteggiato ambra faceva sembrare rotta l'intera
   pagina senza distinguere nulla. Il lucchetto resta, ma in tono neutro — e la
   card si accende di colore solo quando l'invito è davvero apribile. */
.uo-card--locked .uo-card-cta {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--border) 55%, transparent);
}
.uo-card--locked:hover .uo-card-cta {
  color: var(--text-sec);
  background: color-mix(in srgb, var(--border) 85%, transparent);
}
.uo-card--locked::before { opacity: .45; }

/* ── ROW (bassa densità: materiali, quiz, lezioni) ────────────────────────── */
.uo-row {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background .12s;
}
.uo-row:last-child { border-bottom: none; }
.uo-row:hover { background: var(--bg-light); }
.uo-row-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); font-size: 14px;
  color: var(--type-ink, var(--text-sec));
  background: color-mix(in srgb, var(--type-c, var(--border)) 15%, transparent);
}
.uo-row-body { flex: 1; min-width: 0; }
.uo-row-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uo-row-sub {
  margin-top: 2px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uo-row-meta {
  flex-shrink: 0; padding-top: 2px;
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
}

/* ── SEZIONE (contenitore con intestazione colorata per tipo) ─────────────── */
.uo-section {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--sp-7);
}
.uo-section-hd {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(105deg, color-mix(in srgb, var(--type-c, var(--navy)) 10%, #fff) 0%, #fff 60%);
  border-bottom: 1px solid color-mix(in srgb, var(--type-c, var(--border)) 22%, var(--border));
}
.uo-section-hd::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--type-c, var(--navy)) 0%, transparent 100%);
  opacity: .55;
}
.uo-section-hd-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); font-size: 17px;
  color: var(--type-ink, var(--navy));
  background: color-mix(in srgb, var(--type-c, var(--border)) 16%, transparent);
}
.uo-section-hd-title {
  font-family: var(--font-title);
  font-size: 15px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 2.5px;
  color: color-mix(in srgb, var(--type-ink, var(--text)) 85%, var(--text));
  margin: 0;
}
.uo-section-hd-count {
  margin-left: auto; flex-shrink: 0;
  padding: 4px var(--sp-4); border-radius: var(--radius-pill);
  background: var(--type-ink, var(--navy)); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 800;
}
.uo-section-body { padding: var(--sp-4); }
.uo-section-body--flush { padding: 0; }

/* ── FILTRI E RICERCA ─────────────────────────────────────────────────────── */
.uo-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.uo-search {
  position: relative; flex: 1 1 260px; min-width: 0;
}
.uo-search > i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 13px; pointer-events: none;
}
.uo-search input {
  width: 100%; min-height: 44px;
  padding: 10px var(--sp-4) 10px 36px;
  border: 1px solid var(--border-mid); border-radius: var(--radius);
  background: var(--bg-white); color: var(--text);
  font-family: var(--font-ui); font-size: 16px;  /* 16px evita lo zoom iOS */
}
.uo-search input::placeholder { color: var(--text-muted); }

.uo-select {
  min-height: 44px;
  padding: 10px var(--sp-4);
  border: 1px solid var(--border-mid); border-radius: var(--radius);
  background: var(--bg-white); color: var(--text);
  font-family: var(--font-ui); font-size: 15px; cursor: pointer;
}

.uo-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.uo-filter {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 38px; padding: 7px var(--sp-4);
  border: 1px solid var(--border-mid); border-radius: var(--radius-pill);
  background: var(--bg-white); color: var(--text-sec);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.uo-filter:hover { background: var(--bg-light); color: var(--text); }
.uo-filter[aria-pressed="true"], .uo-filter.is-active {
  background: color-mix(in srgb, var(--type-c, var(--navy)) 12%, transparent);
  border-color: color-mix(in srgb, var(--type-c, var(--navy)) 45%, transparent);
  color: var(--type-ink, var(--navy));
}

/* ── GRIGLIE ──────────────────────────────────────────────────────────────── */
.uo-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 640px)  { .uo-grid { grid-template-columns: repeat(2, 1fr); } }
/* Su schermi ampi tre colonne: con due, le card erano larghe 650px e il nome
   del gruppo — che è l'informazione utile — annegava nel vuoto. */
@media (min-width: 1080px) { .uo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .uo-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ── STAT ─────────────────────────────────────────────────────────────────
 * Una fascia sola, non quattro riquadri: sono numeri di contorno e su mobile
 * si mangiavano due righe di schermo prima del primo contenuto vero. */
/* Griglia e non flex-wrap: in flex l'ultimo elemento finiva da solo su una
   seconda riga, centrato e con un separatore penzolante. */
.uo-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) 0;
  margin: 0 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-2);
  background: var(--bg-white);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
@media (min-width: 640px) {
  .uo-stats { grid-template-columns: repeat(4, 1fr); gap: 0; }
}
.uo-stat {
  padding: 0 var(--sp-3); text-align: center;
  border-left: 1px solid var(--border);
}
.uo-stat:nth-child(odd)   { border-left: none; }
@media (min-width: 640px) {
  .uo-stat:nth-child(odd)   { border-left: 1px solid var(--border); }
  .uo-stat:first-child      { border-left: none; }
}
.uo-stat b {
  display: block; line-height: 1.15;
  font-family: var(--font-title); font-size: 22px; color: var(--navy);
}
.uo-stat span {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--text-muted); line-height: 1.3;
}

/* ── CALLOUT ──────────────────────────────────────────────────────────────── */
.uo-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  margin: 0 0 var(--sp-7);
  background: var(--bg-white);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.uo-cta p { flex: 1 1 280px; margin: 0; font-size: 14px; color: var(--text-sec); }
.uo-cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ── STATO VUOTO ──────────────────────────────────────────────────────────── */
.uo-empty {
  padding: var(--sp-8) var(--sp-5);
  text-align: center; color: var(--text-muted);
}
.uo-empty > i { display: block; font-size: 28px; margin-bottom: var(--sp-4); opacity: .55; }
.uo-empty p { margin: 0 0 var(--sp-2); font-size: 15px; }
.uo-empty .hint { font-size: 13px; }

/* ── UTILITY ──────────────────────────────────────────────────────────────── */
.uo-mono   { font-family: var(--font-mono); }
.uo-muted  { color: var(--text-muted); }
.uo-hidden { display: none !important; }
.uo-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}