/* ════════════════════════════════════════════════════════════
   @project  ABAFG — Redesign istituzionale
   @file     abafg.css — foglio di stile unificato
   @version  2.0
   @date     Aprile 2026
   @author   Italo Sannino <italo@italosan.com>

   ARCHITETTURA
   ├── 1. Tokens          Custom properties — unica fonte di verità
   ├── 2. Reset           Box model, margini, ereditarietà base
   ├── 3. Base            Body, tipografia di default
   ├── 4. Layout          page-wrap, .grid-2, .grid-3 — utility generali
   ├── 5. Topbar          Navigazione sticky condivisa
   ├── 6. Header          .hdr — intestazione pagina condivisa
   ├── 7. Footer          .foot — footer condiviso da tutte le pagine
   ├── 8. Sections        .sec, .div — sezioni DS / Brand Manual
   ├── 9. DS Components   Componenti specifici del Design System
   ├── 10. Brand Manual   Componenti specifici del Brand Manual
   ├── 11. Schede         Form docente / insegnamento
   ├── 12. Index          Home di navigazione
   ├── 13. Responsive     Tablet ≤768px · Mobile ≤430px
   ├── 14. Accessibilità  Pagina abafg-accessibilita.html
   └── Print
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   1. TOKENS
   ════════════════════════════════════════════════════════════ */

:root {
  /* — Brand — */
  --brand-900:   #1C0104;
  --brand-700:   #5F030D;
  --brand-500:   #8E0413;   /* primary */
  --brand-300:   #B45862;
  --brand-100:   #E8CDD0;
  --highlights:  #CF2622;   /* badge NEW, alert states */

  /* — Neutral — */
  --neutral-900: #1A1A1A;   /* nav, button */
  --neutral-800: #404040;   /* testo primario */
  --neutral-700: #666666;   /* testo secondario */
  --neutral-300: #D8D8D4;   /* bordi, divisori */
  --neutral-05:  #F3F4F6;   /* bg card */
  --neutral-0:   #FFFFFF;   /* bg pagina */

  /* — Tipografia — */
  --font-editorial: 'IBM Plex Serif', Georgia, serif;
  --font-ui:        'Inter', system-ui, sans-serif;
  --font-mono:      'IBM Plex Mono', 'Courier New', monospace;

  /* — Layout — */
  --page-max:   960px;
  --pad-h:      64px;   /* desktop */
  --pad-h-sm:   24px;   /* tablet */
  --pad-h-xs:   20px;   /* mobile */
  --sec-gap:    52px;   /* spaziatura verticale sezioni */
  --sec-gap-sm: 40px;
  --sec-gap-xs: 32px;
}


/* ════════════════════════════════════════════════════════════
   2. RESET
   ════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}


/* ════════════════════════════════════════════════════════════
   3. BASE
   ════════════════════════════════════════════════════════════ */

body {
  background-color: var(--neutral-05);
  color: var(--neutral-800);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}


/* ════════════════════════════════════════════════════════════
   4. LAYOUT
   ════════════════════════════════════════════════════════════ */

.page-wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  position: relative;
}

/* Utility grid — usate in schede, accessibilità e ovunque serva */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}


/* ════════════════════════════════════════════════════════════
   5. TOPBAR
   Navigazione sticky condivisa da tutti i file
   ════════════════════════════════════════════════════════════ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: 40px;
  padding-inline: var(--pad-h);
  background-color: var(--neutral-900);
  border-bottom: 1px solid rgba(255 255 255 / .08);
}

.topbar-home {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--neutral-0);
  text-decoration: none;
  opacity: .7;
  flex-shrink: 0;
  margin-inline-end: 24px;
  line-height: 1;
  transition: opacity .15s;
}
.topbar-home:hover { opacity: 1; }

.topbar-sep {
  width: 1px;
  height: 16px;
  background-color: rgba(255 255 255 / .15);
  flex-shrink: 0;
  margin-inline-end: 24px;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.topbar-link {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255 255 255 / .45);
  text-decoration: none;
  padding-inline: 10px;
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.topbar-link:hover  { color: rgba(255 255 255 / .85); }
.topbar-link.active {
  color: var(--neutral-0);
  border-bottom-color: var(--brand-500);
}

/* Hamburger — visibile solo ≤430px */
.topbar-burger {
  display: none;
  margin-inline-start: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.topbar-burger span {
  display: block;
  width: 18px;
  height: 1px;
  background-color: rgba(255 255 255 / .7);
  transition: opacity .15s;
}
.topbar-burger:hover span { background-color: var(--neutral-0); }

/* Drawer mobile */
.topbar-drawer {
  display: none;
  position: fixed;
  top: 40px;
  inset-inline: 0;
  background-color: var(--neutral-900);
  border-bottom: 1px solid rgba(255 255 255 / .08);
  z-index: 99;
  flex-direction: column;
  padding-block: 8px;
}
.topbar-drawer.open { display: flex; }

.topbar-drawer .topbar-link {
  height: 44px;
  padding-inline: 20px;
  border-bottom: none;
  border-inline-start: 2px solid transparent;
}
.topbar-drawer .topbar-link.active {
  border-inline-start-color: var(--brand-500);
  color: var(--neutral-0);
}


/* ════════════════════════════════════════════════════════════
   6. HEADER
   Intestazione condivisa da tutti i file
   ════════════════════════════════════════════════════════════ */

.hdr {
  background-color: var(--brand-500);
  padding: 56px var(--pad-h) 48px;
  font-size: 16px;
}

.hdr-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255 255 255 / .65);
  margin-block-end: 20px;
}

.hdr h1 {
  font-family: var(--font-editorial);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.1px;
  color: var(--neutral-0);
  margin-block-end: 12px;
}

.hdr-desc {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255 255 255 / .8);
  margin-block-start: 8px;
}

.hdr-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255 255 255 / .55);
  margin-block-start: 24px;
}


/* ════════════════════════════════════════════════════════════
   7. FOOTER
   Condiviso da tutte le pagine
   ════════════════════════════════════════════════════════════ */

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: var(--sec-gap);
  padding: 20px var(--pad-h) 64px;
  border-top: 1px solid var(--neutral-300);
}

.foot span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neutral-700);
}

/* Quadrato brand decorativo */
.foot-mark {
  width: 14px;
  height: 14px;
  background-color: var(--brand-500);
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   8. SECTIONS
   Struttura sezioni DS e Brand Manual
   ════════════════════════════════════════════════════════════ */

.sec {
  padding: var(--sec-gap) var(--pad-h) 0;
}

.sec-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-500);
  margin-block-end: 4px;
}

.sec-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--neutral-800);
  padding-block-end: 16px;
  border-bottom: 1px solid var(--neutral-300);
  margin-block-end: 32px;
}

/* Sublabel interno alle sezioni */
.sec-sublabel {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--neutral-700);
  margin-block-end: 8px;
}

/* Divisore orizzontale tra sezioni */
.div {
  height: 1px;
  background-color: var(--neutral-300);
  margin: var(--sec-gap) var(--pad-h) 0;
}


/* ════════════════════════════════════════════════════════════
   9. DS COMPONENTS
   Componenti esclusivi del Design System
   ════════════════════════════════════════════════════════════ */

/* —— 9a. Color strip —— */

.cstrip {
  display: flex;
  border: 1px solid var(--neutral-300);
  overflow: hidden;
  margin-block-end: 8px;
}

.cc {
  flex: 1;
  padding: 14px 12px 12px;
  min-width: 0;
}

/* Separatori tra chip cromatici */
.cc + .cc          { border-inline-start: 1px solid rgba(255 255 255 / .2); }
.cc.sep-light      { border-inline-start-color: var(--neutral-300); }

.cm {
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.7;
}
.cm strong { font-size: 10px; }

/* Colore testo nei chip — usa token direttamente */
.cm-light  { color: var(--neutral-05); }
.cm-dark   { color: var(--neutral-800); }
.cm-brand  { color: var(--brand-300); }

.cstrip-mb { margin-block-end: 24px; }

/* —— 9b. Highlight row —— */

.highlight-row {
  margin-block-end: 20px;
}

.highlight-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--neutral-300);
  background-color: var(--neutral-05);
}

/* Token dot — piccolo quadrato colore */
.tdot {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-block-start: 1px;
}

.tname {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-500);
}

/* —— 9c. Token grid —— */

.tgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-block-end: 8px;
}

.ti {
  background-color: var(--neutral-05);
  border: 1px solid var(--neutral-300);
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ttext {
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.7;
  color: var(--neutral-800);
}

/* —— 9d. Font cards —— */

.fcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-block-end: 32px;
}

.fc {
  border: 1px solid var(--neutral-300);
  padding: 20px;
  background-color: var(--neutral-05);
}

.fc-role {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand-500);
  margin-block-end: 12px;
}

.fc-specimen {
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
  letter-spacing: -1px;
  margin-block-end: 8px;
}
.fc-specimen--serif   { font-family: var(--font-editorial); }
.fc-specimen--sans    { font-family: var(--font-ui); letter-spacing: 0; }
.fc-specimen--mono    { font-family: var(--font-mono); font-size: 24px; }
.fc-specimen--regular { font-weight: 400; }
.fc-specimen--mono-sm { font-size: 22px; font-weight: 400; }

.fc-desc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neutral-700);
  line-height: 1.7;
  margin-block-start: 8px;
}

/* —— 9e. Type table —— */

.ttable {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: 32px;
}

.ttable thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--neutral-700);
  text-align: left;
  padding: 8px 12px;
  background-color: var(--neutral-05);
  border-bottom: 1px solid var(--neutral-300);
  font-weight: 400;
}

.ttable tbody tr      { border-bottom: 1px solid var(--neutral-300); }
.ttable tbody tr:last-child { border-bottom: none; }
.ttable tbody td      { padding: 16px 12px; vertical-align: middle; }

/* Token pill */
.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brand-500);
  background-color: rgba(142 4 19 / .07);
  padding: 2px 6px;
  white-space: nowrap;
}

/* Type meta */
.tmeta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neutral-700);
  line-height: 1.8;
}

/* Type specimen — usati nella tabella */
.ts { display: inline; }
.ts--display     { font-family: var(--font-editorial); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -1.1px; color: var(--neutral-900); }
.ts--kicker      { font-family: var(--font-ui); font-size: 24px; font-weight: 700; line-height: 1; color: var(--neutral-800); }
.ts--kicker-xl   { font-family: var(--font-ui); font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -1.1px; color: var(--neutral-800); }
.ts--banner      { font-family: var(--font-editorial); font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.264px; color: var(--neutral-800); }
.ts--small-title { font-family: var(--font-editorial); font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: -0.198px; color: var(--neutral-800); }
.ts--body        { font-family: var(--font-ui); font-size: 16px; font-weight: 400; line-height: normal; color: var(--neutral-800); }
.ts--nav         { font-family: var(--font-ui); font-size: 16px; font-weight: 400; line-height: 1; color: var(--neutral-900); }
.ts--nav-small   { font-family: var(--font-ui); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.154px; color: var(--neutral-700); }
.ts--new         { font-family: var(--font-ui); font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--neutral-0); background-color: var(--highlights); padding: 2px 10px; display: inline-block; }

/* —— 9f. Component cards —— */

.cgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-block-end: 16px;
}

.ccard {
  border: 1px solid var(--neutral-300);
  padding: 20px;
  background-color: var(--neutral-05);
}

.clabel {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--neutral-700);
  margin-block-end: 14px;
}

.cmeta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neutral-700);
  line-height: 1.8;
  margin-block-start: 14px;
  padding-block-start: 12px;
  border-top: 1px solid var(--neutral-300);
}

/* —— 9g. UI component specimens —— */

/* btn-primary */
.btn-fig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--neutral-900);
  color: var(--neutral-0);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.176px;
  padding-inline: 16px;
  height: 44px;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  margin-inline-end: 8px;
  margin-block-end: 8px;
}

/* category label */
.cat-fig {
  display: inline-flex;
  align-items: center;
  background-color: var(--brand-500);
  color: var(--neutral-0);
  font-family: var(--font-editorial);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.264px;
  padding: 14px 32px;
  height: 52px;
  white-space: nowrap;
  margin-block-end: 8px;
  margin-inline-end: 8px;
}

/* label-new */
.new-fig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--highlights);
  color: var(--neutral-0);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  width: 44px;
  height: 16px;
  flex-shrink: 0;
}

/* link-nav */
.nav-fig {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding-inline: 8px;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--neutral-900);
  white-space: nowrap;
  text-decoration: none;
}

/* helper interni al DS */
.ds-navfig-wrap  { display: flex; flex-wrap: wrap; }
.ds-new-row      { display: flex; align-items: center; gap: 8px; margin-block-end: 12px; }

/* —— 9h. modulo-news —— */

.mn-wrap {
  display: flex;
  border: 1px solid var(--neutral-300);
  overflow: hidden;
  margin-block-end: 8px;
}

.mn {
  background-color: var(--neutral-05);
  padding: 16px;
  width: 308px;
  min-width: 308px;
  height: 238px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-inline-end: 1px solid var(--neutral-300);
}
.mn:last-child { border-inline-end: none; }

.mn-inner   { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.mn-content { display: flex; flex-direction: column; gap: 12px; }
.mn-body    { display: flex; flex-direction: column; gap: 8px; }

.mn-title {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.198px;
  color: var(--neutral-800);
}

.mn-text {
  font-size: 16px;
  color: var(--neutral-800);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.mn-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

.mn-date {
  font-size: 14px;
  letter-spacing: -0.154px;
  color: var(--neutral-700);
}

.mn-link {
  font-size: 14px;
  letter-spacing: -0.154px;
  color: var(--neutral-700);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

/* —— 9i. Spacing scale —— */

.srow {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-block-end: 28px;
}

.si { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* Barra di spacing — altezza via inline style="height:Npx" sulla pagina DS */
.sb {
  background-color: var(--neutral-900);
  opacity: .15;
  width: 32px;
}

.sl {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--neutral-700);
  text-align: center;
  line-height: 1.6;
}

/* —— 9j. Grid spec —— */

.ggrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-block-end: 8px;
}

.gc {
  background-color: var(--neutral-05);
  border: 1px solid var(--neutral-300);
  padding: 18px 20px;
}

.gc-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand-500);
  margin-block-end: 10px;
}

/* —— 9k. DS link bar (solo Figma — il link DS↔BM è rimosso) —— */

.ds-link-bar {
  padding: 14px 16px;
  border: 1px solid var(--neutral-300);
  background-color: var(--neutral-05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ds-link-bar + .ds-link-bar { margin-block-start: 16px; }

.ds-link-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neutral-700);
  line-height: 1.6;
}
.ds-link-text strong { color: var(--neutral-800); }

.ds-link-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-500);
  text-decoration: none;
  white-space: nowrap;
  gap: 6px;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   10. BRAND MANUAL COMPONENTS
   Componenti esclusivi del Brand Manual
   ════════════════════════════════════════════════════════════ */

/* —— 10a. Logo display hero —— */

.bm-logo-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  border: 1px solid var(--neutral-300);
  background-color: var(--neutral-05);
  margin-block-end: 16px;
}

.bm-logo-display img {
  max-width: 150px;
  height: auto;
}

/* —— 10b. Notice bilingue —— */

.bm-notice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--brand-500);
  margin-block-end: 32px;
}

.bm-notice-cell {
  padding: 14px 18px;
  border-inline-end: 1px solid var(--brand-500);
}

.bm-notice-cell--en {
  border-inline-end: none;
  background-color: rgba(142 4 19 / .03);
}

.bm-notice-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-500);
  margin-block-end: 6px;
}

.bm-notice-body {
  font-size: 12px;
  line-height: 1.6;
  color: var(--neutral-800);
}

/* —— 10c. Rationale bilingue —— */

.rationale-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--neutral-300);
  margin-block-end: 32px;
}

.rat-block {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rat-block--en {
  background-color: var(--neutral-05);
  border-inline-start: 1px solid var(--neutral-300);
}

.rat-lang {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-500);
  padding-block-end: 16px;
  border-bottom: 1px solid var(--neutral-300);
}

.rat-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--neutral-700);
}

.rat-body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--neutral-800);
}

.rat-body em {
  font-family: var(--font-editorial);
  font-style: normal;
  font-weight: 700;
  color: var(--neutral-900);
}

/* —— 10d. Logo grid —— */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-block-end: 32px;
}

.logo-card {
  border: 1px solid var(--neutral-300);
  display: flex;
  flex-direction: column;
}

.logo-preview {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.logo-preview img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

/* Background varianti logo */
.logo-preview--white    { background-color: var(--neutral-0); }
.logo-preview--brand    { background-color: var(--brand-500); }
.logo-preview--dark     { background-color: var(--neutral-900); }
.logo-preview--neutral  { background-color: var(--neutral-05); }

/* Placeholder quando immagine non disponibile */
.logo-placeholder {
  width: 100%;
  height: 60px;
  border: 1px dashed rgba(128 128 128 / .35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-placeholder span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(128 128 128 / .6);
}

.logo-meta {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--neutral-300);
  background-color: var(--neutral-05);
}

.logo-meta-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-500);
  margin-block-end: 2px;
}

.logo-meta-file {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--neutral-700);
  line-height: 1.7;
}

/* —— 10e. Regole d'uso logo —— */

.rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-block-end: 32px;
}

.rule-item {
  border: 1px solid var(--neutral-300);
  padding: 14px 16px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background-color: var(--neutral-05);
}

.rule-icon {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-block-start: 1px;
}
.rule-icon--ok { color: #2A7A2A; }
.rule-icon--no { color: var(--highlights); }

.rule-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neutral-800);
  line-height: 1.7;
}

/* —— 10f. Dimensioni minime logo —— */

.size-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  margin-block-end: 32px;
  flex-wrap: wrap;
}

.size-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Barra dimensione — width via inline style sulla pagina BM */
.size-bar {
  background-color: var(--neutral-300);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.size-bar--brand { background-color: var(--brand-500); }
.size-bar--dark  { background-color: var(--neutral-800); }

.size-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--neutral-700);
  line-height: 1.6;
}
.size-label--light { color: rgba(255 255 255 / .7); }

/* —— 10g. Palette colori —— */

.bm-palette {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-block-end: 32px;
}

.bm-cc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutral-300);
  overflow: hidden;
}

.bm-swatch { height: 80px; }

.bm-values {
  padding: 12px 14px;
  background-color: var(--neutral-05);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bm-token {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-500);
  margin-block-end: 4px;
}

.bm-val {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--neutral-700);
  line-height: 1.8;
}
.bm-val strong { color: var(--neutral-800); font-weight: 700; }

/* —— 10h. Font grid —— */

.bm-fonts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-block-end: 24px;
}

.bm-font {
  border: 1px solid var(--neutral-300);
  padding: 24px 20px 20px;
  background-color: var(--neutral-05);
}

.bm-font-role {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand-500);
  margin-block-end: 16px;
}

.bm-font-specimen {
  margin-block-end: 16px;
  padding-block-end: 16px;
  border-bottom: 1px solid var(--neutral-300);
}

.bm-font-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neutral-700);
  line-height: 1.8;
}

.bm-font-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neutral-700);
  line-height: 1.8;
  margin-block-start: 32px;
  padding: 14px 16px;
  border: 1px solid var(--neutral-300);
  background-color: var(--neutral-05);
}

/* —— 10i. Download grid —— */

.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-block-end: 8px;
}

.dl-card {
  border: 1px solid var(--neutral-300);
  background-color: var(--neutral-05);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dl-icon {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--neutral-300);
  line-height: 1;
}

.dl-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--neutral-800);
  line-height: 1.5;
}

.dl-file {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--neutral-700);
  line-height: 1.7;
  flex: 1;
}

.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--neutral-900);
  color: var(--neutral-0);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding-inline: 12px;
  height: 32px;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: background-color .15s;
}
.dl-btn:hover { background-color: var(--brand-500); }


/* ════════════════════════════════════════════════════════════
   11. SCHEDE
   Form docente e insegnamento
   ════════════════════════════════════════════════════════════ */

/* —— 11a. Form layout —— */

.form-body {
  background-color: var(--neutral-05);
  padding: 56px var(--pad-h) 80px;
  font-size: 16px;
  line-height: 1.5;
}

/* —— 11b. Section label —— */

.section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-700);
  border-top: 1px solid var(--neutral-300);
  padding-block-start: 32px;
  margin-block-end: 24px;
}

.section-label.first {
  border-top: none;
  padding-block-start: 0;
}

/* —— 11c. Fields —— */

.field { margin-block-end: 24px; }

.field-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-800);
  margin-block-end: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.field-hint {
  font-size: 14px;
  font-weight: 400;
  color: var(--neutral-700);
}

.field-note {
  font-size: 14px;
  color: var(--neutral-700);
  margin-block-start: 8px;
  line-height: 1.5;
}

.char-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--neutral-300);
  font-variant-numeric: tabular-nums;
  transition: color .2s;
  flex-shrink: 0;
}
.char-counter.warn { color: var(--highlights); }

/* —— 11d. Inputs —— */

:is(input[type="text"], input[type="email"], input[type="number"], textarea) {
  width: 100%;
  border: 1px solid var(--neutral-300);
  border-radius: 0;
  padding: 10px 12px;
  font-size: 16px;
  color: var(--neutral-800);
  background-color: var(--neutral-05);
  outline: none;
  resize: vertical;
  appearance: none;
  transition: border-color .15s, background-color .15s;
}

:is(input[type="text"], input[type="email"], input[type="number"], textarea):focus {
  border-color: var(--neutral-900);
  background-color: var(--neutral-0);
}

input[type="file"] {
  width: 100%;
  border: 1px dashed var(--neutral-300);
  padding: 14px 12px;
  font-size: 14px;
  color: var(--neutral-700);
  background-color: var(--neutral-05);
  cursor: pointer;
}

/* —— 11f. Ciclo settimanale — pulsanti toggle —— */

.ciclo-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ciclo-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-700);
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-300);
  padding: 0 16px;
  height: 40px;
  cursor: pointer;
  border-radius: 0;
  transition: border-color .15s, color .15s, background-color .15s;
}
.ciclo-btn:hover {
  border-color: var(--neutral-900);
  color: var(--neutral-900);
}
.ciclo-btn.active {
  background-color: var(--neutral-900);
  border-color: var(--neutral-900);
  color: var(--neutral-0);
}

/* —— 11h. Submit —— */

.submit-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-block-start: 40px;
  padding-block-start: 32px;
  border-top: 1px solid var(--neutral-300);
}

.btn-submit {
  background-color: var(--neutral-900);
  color: var(--neutral-0);
  border: none;
  padding-inline: 16px;
  height: 44px;
  font-family: var(--font-ui);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 0;
  transition: background-color .15s;
}
.btn-submit:hover { background-color: var(--brand-500); }

.submit-note {
  font-size: 14px;
  color: var(--neutral-700);
  line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════
   12. INDEX
   Home di navigazione tra gli artefatti
   ════════════════════════════════════════════════════════════ */

.index-intro {
  padding: 32px var(--pad-h) 48px;
}

.index-intro p {
  font-size: 16px;
  color: var(--neutral-700);
  max-width: 560px;
  line-height: 1.6;
}

.index-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-inline: var(--pad-h);
}

.index-card {
  position: relative;
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-300);
  padding: 32px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color .15s;
}
.index-card:hover { border-color: var(--neutral-900); }

.index-card-arrow {
  position: absolute;
  top: 32px;
  inset-inline-end: 32px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--neutral-300);
  transition: color .15s;
}
.index-card:hover .index-card-arrow { color: var(--neutral-900); }

.index-card-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-500);
}

.index-card-title {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.22px;
  color: var(--neutral-900);
}

.index-card-desc {
  font-size: 14px;
  color: var(--neutral-700);
  line-height: 1.55;
  flex: 1;
}

.index-card-file {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neutral-300);
  margin-block-start: auto;
}


/* ════════════════════════════════════════════════════════════
   13. RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* —— Tablet ≤768px —— */

@media (max-width: 768px) {

  body { font-size: 13px; }

  /* Layout */
  .hdr         { padding: 40px var(--pad-h-sm) 36px; }
  .hdr h1      { font-size: 40px; letter-spacing: -.8px; }
  .sec         { padding: var(--sec-gap-sm) var(--pad-h-sm) 0; }
  .div         { margin: var(--sec-gap-sm) var(--pad-h-sm) 0; }
  .foot        { padding-inline: var(--pad-h-sm); }
  .topbar      { padding-inline: var(--pad-h-sm); }
  .topbar-link { font-size: 12px; padding-inline: 8px; }

  /* DS */
  .cstrip .cc  { flex: 1 1 30%; }
  .cstrip      { flex-wrap: wrap; }
  .tgrid       { grid-template-columns: repeat(2, 1fr); }
  .fcards      { grid-template-columns: repeat(2, 1fr); }
  .cgrid       { grid-template-columns: 1fr; }
  .ggrid       { grid-template-columns: 1fr; }
  .mn-wrap     { overflow-x: auto; }

  /* Nasconde la colonna Specimen (prima) nelle tabelle tipografiche */
  .ttable thead th:first-child,
  .ttable tbody td:first-child { display: none; }

  /* Brand Manual */
  .rationale-grid { grid-template-columns: 1fr; }
  .rat-block--en  { border-inline-start: none; border-top: 1px solid var(--neutral-300); }
  .rat-block      { padding: 24px 20px; }
  .logo-grid      { grid-template-columns: repeat(2, 1fr); }
  .rules-grid     { grid-template-columns: 1fr; }
  .bm-palette     { grid-template-columns: repeat(2, 1fr); }
  .bm-fonts       { grid-template-columns: 1fr; }
  .dl-grid        { grid-template-columns: repeat(2, 1fr); }

  /* Index */
  .index-intro { padding: 24px var(--pad-h-sm) 40px; }
  .index-grid  { grid-template-columns: 1fr; padding-inline: var(--pad-h-sm); }
  .index-foot  { padding: 20px var(--pad-h-sm) 48px; }

  /* Schede */
  .form-body { padding: 40px var(--pad-h-sm) 64px; }
}

/* —— Mobile ≤430px —— */

@media (max-width: 430px) {

  body { font-size: 13px; }

  /* Layout */
  .hdr          { padding: 32px var(--pad-h-xs) 28px; }
  .hdr-eyebrow  { font-size: 10px; margin-block-end: 16px; }
  .hdr h1       { font-size: 32px; letter-spacing: -.6px; }
  .hdr-desc     { font-size: 14px; }
  .hdr-sub      { font-size: 10px; margin-block-start: 16px; }
  .sec          { padding: var(--sec-gap-xs) var(--pad-h-xs) 0; }
  .div          { margin: var(--sec-gap-xs) var(--pad-h-xs) 0; }
  .sec-title    { font-size: 20px; line-height: 1.1; margin-block-end: 24px; }
  .foot         { padding: 20px var(--pad-h-xs); flex-direction: column; align-items: flex-start; }
  .topbar       { padding-inline: var(--pad-h-xs); }
  .topbar-nav   { display: none; }
  .topbar-burger { display: flex; }

  /* DS */
  .cstrip .cc  { flex: 1 1 45%; }
  .tgrid       { grid-template-columns: 1fr; }
  .fcards      { grid-template-columns: 1fr; margin-block-end: 24px; }
  .fc          { padding: 16px; }
  .ttable      { display: block; overflow-x: auto; white-space: nowrap; }
  .cgrid       { grid-template-columns: 1fr; }
  .ccard       { padding: 16px; }
  .cat-fig     { font-size: 18px; padding: 10px 20px; height: 44px; }
  .mn-wrap     { overflow-x: auto; scroll-snap-type: x mandatory; }
  .mn          { width: 300px; min-width: 300px; scroll-snap-align: start; }
  .srow        { gap: 12px; }
  .sb          { width: 24px; }
  .ggrid       { grid-template-columns: 1fr; }

  /* Brand Manual */
  .rat-block   { padding: 20px 16px; gap: 20px; }
  .rat-body    { font-size: 12px; }
  .logo-grid   { grid-template-columns: 1fr; }
  .rules-grid  { grid-template-columns: 1fr; }
  .bm-palette  { grid-template-columns: 1fr; }
  .bm-fonts    { grid-template-columns: 1fr; }
  .dl-grid     { grid-template-columns: 1fr; }

  /* Index */
  .index-intro { padding: 20px var(--pad-h-xs) 32px; }
  .index-grid  { grid-template-columns: 1fr; padding-inline: var(--pad-h-xs); }
  .index-card  { padding: 24px; }
  .index-foot  { margin-block-start: 48px; padding: 20px var(--pad-h-xs) 40px; }

  /* Schede */
  .form-body   { padding: 32px var(--pad-h-xs) 48px; }
  .grid-2      { grid-template-columns: 1fr; }
  .grid-3      { grid-template-columns: 1fr; }
  .submit-row  { flex-direction: column; align-items: flex-start; gap: 16px; }
  .btn-submit  { width: 100%; }
}


/* ════════════════════════════════════════════════════════════
   14. ACCESSIBILITÀ
   Pagina abafg-accessibilita.html
   Solo classi genuinamente nuove — tutto il resto usa classi
   esistenti: .grid-2 .ccard .sec-sublabel .cgrid .clabel
   .fc-desc .fcards .fc .fc-role .index-card-title .tmeta
   (.grid-2 definita in sezione 4 — Layout)
   ════════════════════════════════════════════════════════════ */

/* —— 14a. Body text —— */

/* Paragrafo introduttivo delle sezioni */
.acc-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--neutral-800);
  max-width: 640px;
  margin-block-end: 32px;
}

/* —— 14b. Link esterno con bordo-bottom —— */

.acc-ext-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--neutral-300);
  padding-block-end: 10px;
  margin-block: 8px 0;
}

.acc-ext-link:hover {
  color: var(--brand-500);
  border-bottom-color: var(--brand-500);
}

/* Variante ridotta — usata nelle card standard (cgrid) */
.acc-ext-link--small {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 400;
  margin-block-start: auto;
  padding-block-end: 0;
  border-bottom: none;
  color: var(--brand-500);
}

.acc-ext-link--small:hover { text-decoration: underline; color: var(--brand-500); }

.acc-ext-arrow {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* —— 14c. Email contatto —— */

.acc-contact-email {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--neutral-900);
  text-decoration: none;
  border-bottom: 1px solid var(--neutral-300);
  padding-block-end: 8px;
}

.acc-contact-email:hover {
  color: var(--brand-500);
  border-bottom-color: var(--brand-500);
}

/* —— 14d. Issues — lista non-conformità con tag laterale —— */

.acc-issues {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutral-300);
  overflow: hidden;
  margin-block-start: 8px;
}

.acc-issue {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--neutral-300);
  background-color: var(--neutral-0);
}

.acc-issue:last-child { border-bottom: none; }

.acc-issue-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--neutral-700);
  background-color: var(--neutral-05);
  border-right: 1px solid var(--neutral-300);
  padding: 20px 16px;
  width: 100px;
  flex-shrink: 0;
}

.acc-issue-content {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acc-issue-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
}

.acc-issue-desc {
  font-size: 13px;
  color: var(--neutral-700);
  line-height: 1.6;
}

/* —— 14e. Norms — tabella normativa con ID laterale —— */

.acc-norms {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutral-300);
  overflow: hidden;
}

.acc-norm {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--neutral-300);
  background-color: var(--neutral-0);
}

.acc-norm:last-child { border-bottom: none; }

.acc-norm-id {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-500);
  background-color: var(--neutral-05);
  border-right: 1px solid var(--neutral-300);
  padding: 16px;
  width: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.acc-norm-text {
  font-size: 13px;
  color: var(--neutral-800);
  line-height: 1.6;
  padding: 16px 24px;
  display: flex;
  align-items: center;
}

.acc-norm-text a    { color: var(--brand-500); text-decoration: none; }
.acc-norm-text a:hover { text-decoration: underline; }
.acc-norm-text em   { font-style: italic; color: var(--neutral-700); }

/* —— 14f. Responsive —— */

@media (max-width: 430px) {
  .acc-issue-tag { width: 72px; font-size: 9px; padding: 16px 10px; }
  .acc-norm-id   { width: 80px; font-size: 9px; }
}


/* ════════════════════════════════════════════════════════════
   PRINT
   ════════════════════════════════════════════════════════════ */

@media print {
  .topbar { display: none; }
  .sec    { page-break-inside: avoid; }
  .hdr    { page-break-after: always; }
}