/* Scheda categoria e riepilogo categorie.
   Sta a parte da styles.css perche serve solo a queste due pagine e perche
   deve annullare le regole di tabella pensate per la classifica del girone. */

.category-page .champ-hero h1 { max-width: 15ch; }
.category-page .champ-hero-lead { max-width: 52ch; margin: 22px 0 0; color: rgba(255,255,255,.78); font-size: 1.05rem; }
.category-page .champ-meta { flex-wrap: wrap; gap: 10px 16px; }
/* La barra sticky e alta 66px sotto l header: senza questo margine le ancore
   finiscono sotto la barra e la sezione sembra iniziare a meta. */
html { scroll-padding-top: 168px; }
/* Sezioni piu vicine: con 74px sopra e sotto fra un blocco e l altro restava
   uno stacco tale da far credere che la pagina fosse finita. */
.category-page .section { padding: 46px 0; }
.category-page .champ-nav + .section { padding-top: 40px; }
.category-page .section:last-of-type { padding-bottom: 64px; }
.category-page .champ-nav a { flex: none; padding: 22px 0; font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-bottom: 3px solid transparent; }
.category-page .champ-nav a.is-active { color: var(--navy); border-bottom-color: var(--orange); }
.category-page .section-heading.compact > p { max-width: 60ch; margin: 0; color: var(--muted); font-size: .9rem; }

.category-chip { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.13); font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.category-chip.is-aperto { color: #06301f; background: #7ee0b6; }
.category-chip.is-proposta { color: #3a2000; background: #ffcf9a; }
.category-chip.is-chiuso { color: #fff; background: rgba(255,255,255,.22); }
.summary-table .category-chip { display: inline-block; color: var(--navy); background: #eceef1; }
.summary-table .category-chip.is-aperto { color: #06301f; background: #cdf0e0; }
.summary-table .category-chip.is-proposta { color: #4a2a00; background: #ffe4c6; }
.summary-table .category-chip.is-chiuso { color: var(--muted); background: #eceef1; }

/* Scheda categoria */
/* Niente sfondo grigio sul contenitore: l ultima riga e quasi sempre
   incompleta e il vuoto finale si vedrebbe come un blocco pieno. */
.spec-grid { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.spec-grid > div { padding: 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.spec-grid dt { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.spec-grid dd { margin: 8px 0 0; color: var(--navy); font: 600 1.35rem/1.2 var(--font-display); }
.costs-panel { margin-top: 28px; padding: 28px; border: 1px solid #cbdced; background: linear-gradient(135deg, #f7fbff, #fff); }
.costs-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.cost-card { padding: 20px; border-top: 4px solid var(--orange); background: var(--white); box-shadow: 0 10px 28px rgba(7,26,51,.06); }
.cost-card h4 { margin: 0 0 10px; color: var(--navy); font: 700 .88rem var(--font-display); text-transform: uppercase; }
.cost-card p { margin: 0; color: #27384f; font-size: .9rem; line-height: 1.5; }
.cost-card .cost-fee { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.cost-card small { display: block; margin-top: 9px; color: var(--muted); font-size: .7rem; }

.off-quota-panel { margin-top: 28px; padding: 28px; border: 1px solid #cbdced; background: linear-gradient(135deg, #f7fbff, #fff); }
.off-quota-heading { display: flex; margin-bottom: 20px; align-items: end; justify-content: space-between; gap: 18px; }
.off-quota-heading p { margin: 0 0 5px; }
.off-quota-heading h3 { max-width: 24ch; margin: 0; color: var(--navy); font: 600 clamp(1.5rem, 3vw, 2.15rem)/1.05 var(--font-display); text-transform: uppercase; }
.off-quota-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.off-quota-card { padding: 22px; border-top: 4px solid var(--blue); background: var(--white); box-shadow: 0 10px 28px rgba(7,26,51,.06); }
.off-quota-card.is-csi { border-top-color: var(--orange); }
.off-quota-card.is-note { border-top-color: #7b8796; }
.off-quota-card-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.off-quota-card h4 { margin: 0 0 13px; color: var(--navy); font: 700 .92rem var(--font-display); letter-spacing: .025em; text-transform: uppercase; }
.off-quota-card-title span { padding: 5px 8px; flex: none; color: #06301f; border-radius: 999px; background: #cdf0e0; font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.off-quota-card p { margin: 0; color: #27384f; font-size: .88rem; line-height: 1.55; }
.off-quota-card p + p { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.off-quota-card .off-quota-context { color: var(--muted); font-size: .8rem; }

.note-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.note-card { padding: 26px; border-left: 4px solid var(--blue); background: var(--white); box-shadow: 0 14px 40px rgba(7,26,51,.07); }
.note-card.is-alt { border-left-color: var(--orange); }
.note-card.is-warning { border-left-color: #e0a021; background: #fffaf0; }
.note-card h3 { margin: 0 0 12px; color: var(--navy); font: 600 1.05rem var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.note-card p { margin: 0; font-size: .92rem; white-space: pre-line; }
.note-card small { display: block; margin-top: 14px; color: var(--muted); font-size: .7rem; }

.doc-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.doc-list a { display: flex; min-height: 66px; padding: 0 22px; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); background: var(--white); transition: border-color .2s, transform .2s; }
.doc-list a:hover { border-color: var(--blue); transform: translateY(-2px); }
.doc-list b { font-size: .9rem; }
.doc-list span { color: var(--orange); font-weight: 800; }
.text-link.inline { display: inline; color: var(--blue); text-decoration: underline; }

.cta-panel { display: flex; padding: 46px; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; color: #fff; background: linear-gradient(115deg, var(--navy), #0b3768); }
.cta-panel h2 { margin: 0 0 14px; font: 600 clamp(2.2rem, 5vw, 3.2rem)/1 var(--font-display); text-transform: uppercase; }
.cta-panel h2 em { color: var(--orange-2); font-style: normal; }
.cta-panel p { max-width: 44ch; margin: 0; color: rgba(255,255,255,.76); font-size: .92rem; }
.cta-panel .hero-actions { flex: none; }

/* Riepilogo */
.summary-block + .summary-block { margin-top: 46px; }
.summary-block .block-title { display: flex; margin-bottom: 16px; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--navy); padding-bottom: 10px; }
.summary-block .block-title h2 { margin: 0; font: 600 1.5rem var(--font-display); text-transform: uppercase; }
.summary-block .block-title span { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

.summary-page .standings-wrap { background: var(--white); }
.summary-table, .years-table { min-width: 0; }
/* Larghezze fisse: le quattro tabelle di gruppo devono incolonnarsi fra loro,
   altrimenti ogni blocco si dimensiona sui propri contenuti. */
.summary-table { table-layout: fixed; min-width: 860px; }
.summary-table th:nth-child(1) { width: 20%; }
.summary-table th:nth-child(2) { width: 16%; }
.summary-table th:nth-child(3) { width: 9%; }
.summary-table th:nth-child(4) { width: 11%; }
.summary-table th:nth-child(5) { width: 15%; }
.summary-table th:nth-child(6) { width: 18%; }
.summary-table th:nth-child(7) { width: 7%; }
.summary-table th:nth-child(8) { width: 4%; }
.summary-table th, .years-table th { text-align: center; }
.summary-table td, .years-table td { font-size: .8rem; font-weight: 600; }
.summary-table td, .summary-table tbody th, .years-table td, .years-table tbody th { padding: 14px; border-bottom: 1px solid var(--line); }
/* La prima colonna resta ancorata: scorrendo in orizzontale sul telefono si
   perderebbe l unica cosa che dice di quale categoria e la riga. */
.summary-table tbody th, .years-table tbody th { position: sticky; left: 0; z-index: 1; color: var(--navy); background: var(--white); box-shadow: 1px 0 0 var(--line); font-size: .82rem; font-weight: 800; letter-spacing: 0; text-align: left; text-transform: none; }
.summary-table thead th:first-child, .years-table thead th:first-child { position: sticky; left: 0; z-index: 2; background: #f2f3f4; box-shadow: 1px 0 0 var(--line); text-align: left; }
.summary-table tbody th a, .years-table tbody th a { border-bottom: 2px solid transparent; }
.summary-table tbody th a:hover, .years-table tbody th a:hover { border-bottom-color: var(--orange); }
.summary-table td:first-child, .summary-table td:last-child, .years-table td:first-child, .years-table td:last-child { width: auto; color: inherit; font: inherit; }
.summary-table td { text-align: center; }
.off-quota-summary-cell > span { display: block; white-space: pre-line; }
.off-quota-summary-cell sup { display: inline; margin-left: 1px; color: var(--blue); font-size: .72em; font-weight: 900; letter-spacing: 0; vertical-align: super; }
.off-quota-summary-cell small { display: block; margin-top: 7px; color: var(--muted); font-size: .68rem; font-weight: 600; line-height: 1.4; }
.summary-table tbody th a.row-link, .years-table tbody th a.row-link { color: var(--blue); border-bottom: 2px solid rgba(7,95,185,.28); }
.summary-table tbody th a.row-link:hover, .years-table tbody th a.row-link:hover { border-bottom-color: var(--orange); }
.summary-table:not(.is-showing-details) [data-optional-column] { display: none; }
.registration-status-summary { display: grid; justify-items: center; gap: 7px; }
.comparison-controls { margin: -8px 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border-left: 4px solid var(--orange); background: #f1f5f8; }
.comparison-controls p { margin: 0; color: var(--muted); font-size: .76rem; font-weight: 700; }
.comparison-detail-toggle, .comparison-focus-heading button { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 9px; color: var(--navy); border: 1px solid #b8c7d5; background: #fff; font: 800 .65rem var(--font-body); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.comparison-detail-toggle:hover, .comparison-detail-toggle[aria-pressed="true"] { color: #fff; border-color: var(--blue); background: var(--blue); }
.comparison-detail-toggle span { font-size: 1rem; }
.comparison-select-cell label { display: grid; place-items: center; gap: 4px; color: var(--muted); font-size: .57rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.comparison-select-cell input { width: 18px; height: 18px; margin: 0; accent-color: var(--orange); cursor: pointer; }
.comparison-focus { margin: 0 0 34px; padding: 24px; border-top: 5px solid var(--orange); color: #fff; background: linear-gradient(125deg, var(--navy), #0b3b70); box-shadow: var(--shadow); }
.comparison-focus-heading { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.comparison-focus-heading .eyebrow { margin: 0 0 8px; }
.comparison-focus-heading h3 { margin: 0; font: 600 clamp(1.7rem, 3vw, 2.5rem)/1 var(--font-display); text-transform: uppercase; }
.comparison-focus-heading button { flex: none; color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.comparison-focus-heading button:hover { border-color: var(--orange); background: var(--orange); }
.comparison-focus-hint { display: none; }
.comparison-focus-grid { overflow-x: auto; }
.comparison-matrix { min-width: max-content; color: var(--ink); background: #fff; }
.comparison-matrix-row { min-width: 720px; display: grid; grid-template-columns: minmax(150px, .8fr) repeat(var(--comparison-columns), minmax(210px, 1fr)); border-bottom: 1px solid var(--line); }
.comparison-matrix-row > * { min-width: 0; padding: 13px 15px; display: flex; align-items: center; color: #34445a; font-size: .76rem; font-weight: 700; line-height: 1.45; }
.comparison-matrix-row > strong { color: var(--navy); background: #f2f5f7; font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; }
.comparison-matrix-row > span + span { border-left: 1px solid var(--line); }
.comparison-matrix-row.is-header { color: #fff; background: #0b3768; }
.comparison-matrix-row.is-header > * { min-height: 64px; color: inherit; background: transparent; border: 0; }
.comparison-matrix-row.is-header > span { color: rgba(255,255,255,.6); font-size: .6rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.comparison-matrix-row.is-header > strong { font: 600 1.05rem/1 var(--font-display); text-transform: uppercase; }

.table-note { max-width: 78ch; margin: 22px 0 0; color: var(--muted); font-size: .8rem; }
.group-footnotes { display: grid; gap: 7px; margin-top: 12px; padding: 14px 18px; border-left: 3px solid var(--blue); background: #eef5fc; }
.group-footnotes p { display: grid; grid-template-columns: 28px 1fr; gap: 8px; margin: 0; color: #34445a; font-size: .75rem; line-height: 1.45; }
.group-footnotes strong { color: var(--blue); font-weight: 900; letter-spacing: .08em; }
.group-advisory { display: grid; grid-template-columns:minmax(150px,.28fr) 1fr; gap: 14px 22px; margin-top: 12px; padding: 17px 18px; border-left: 3px solid var(--orange); background: #fff7ed; }
.group-advisory strong { color: var(--navy); font: 700 .78rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.group-advisory p { margin: 0; color: #4a3b2d; font-size: .78rem; line-height: 1.5; }
.grid-legend { display: flex; margin: 0 0 20px; padding: 0; flex-wrap: wrap; gap: 10px 26px; list-style: none; color: var(--muted); font-size: .74rem; }
.grid-legend li { display: flex; align-items: center; gap: 9px; }
.cell-sample { width: 18px; height: 18px; flex: none; border: 1px solid var(--line); border-radius: 4px; }
.cell-continua { flex: none; color: var(--blue); font-size: .7rem; font-weight: 800; letter-spacing: .06em; }
.cell-sample.is-ammesso, .year-cell.is-ammesso { background: #cfe6ff; }
.cell-sample.is-fuori-quota, .year-cell.is-fuori-quota { background: #ffdcc4; }
.years-table { min-width: 620px; }
.years-table thead th { min-width: 56px; }
.year-cell { color: var(--blue); font-size: .68rem; font-weight: 800; }
.year-cell.is-fuori-quota { color: #a04300; }
.mobile-table-hint { display: none; }

.grid-aside { margin-top: 32px; padding: 24px; border-left: 4px solid var(--line); background: var(--white); }
.grid-aside h3 { margin: 0 0 8px; font: 600 1.1rem var(--font-display); text-transform: uppercase; }
.grid-aside > p { margin: 0 0 14px; color: var(--muted); font-size: .84rem; }
.grid-aside ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.grid-aside li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-weight: 700; }
.grid-aside li a { border-bottom: 2px solid var(--orange); }
.grid-aside li span { color: var(--muted); font-size: .74rem; font-weight: 600; }

@media (max-width: 980px) {
  .category-page .section { padding: 38px 0; }
  .category-page .champ-nav a { padding: 18px 0; font-size: .68rem; }
  .cta-panel { padding: 30px 22px; }
  .cta-panel .hero-actions { width: 100%; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .spec-grid > div { padding: 18px; }
  .spec-grid dd { font-size: 1.15rem; }
  .summary-table { min-width: 860px; }
  .off-quota-panel { padding: 22px; }
}

@media (max-width: 620px) {
  /* Il confronto principale diventa una sequenza di schede: la lettura e
     immediata senza imporre uno scorrimento orizzontale alla pagina. */
  .summary-page .summary-block .standings-wrap { overflow: visible; background: transparent; }
  .summary-page .summary-table, .summary-page .summary-table tbody { width: 100%; min-width: 0; display: block; }
  .summary-page .summary-table thead { display: none; }
  .summary-page .summary-table tr { display: grid; gap: 0; margin-bottom: 14px; padding: 0 16px; border-top: 4px solid var(--orange); background: var(--white); box-shadow: 0 10px 28px rgba(7,26,51,.07); }
  .summary-page .summary-table tbody th, .summary-page .summary-table td { width: auto; min-height: 42px; padding: 10px 0; display: grid; grid-template-columns: minmax(118px, .85fr) minmax(0, 1.15fr); align-items: center; gap: 14px; color: var(--ink); background: transparent; box-shadow: none; border-bottom: 1px solid var(--line); font: 600 .8rem/1.4 var(--font-body); text-align: left; }
  .summary-page .summary-table tbody th { position: static; display: block; padding: 16px 0 12px; color: var(--navy); font: 700 1.25rem/1.05 var(--font-display); text-transform: uppercase; }
  .summary-page .summary-table tbody th::before { display: none; }
  .summary-page .summary-table td::before { content: attr(data-label); color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .07em; line-height: 1.3; text-transform: uppercase; }
  .summary-page .summary-table td:last-child { border-bottom: 0; }
  .summary-page .summary-table .off-quota-summary-cell { align-items: start; }
  .summary-page .summary-table .off-quota-summary-cell > span { white-space: normal; }
  .summary-page .summary-table .deadline-cell { white-space: normal; }
  .summary-page .summary-table .registration-status-summary { grid-column: 2; justify-items: start; }
  .summary-page .summary-table .comparison-select-cell { display: block; padding: 12px 0; }
  .summary-page .summary-table .comparison-select-cell::before { display: none; }
  .summary-page .summary-table .comparison-select-cell label { grid-template-columns: 18px auto; justify-content: start; gap: 9px; font-size: .63rem; }
  .comparison-controls { align-items: start; flex-direction: column; }
  .comparison-focus { margin-bottom: 26px; padding: 18px; }
  .comparison-focus-heading { align-items: start; flex-direction: column; gap: 13px; }
  .comparison-focus-heading button { width: 100%; justify-content: center; }
  .comparison-focus-hint { margin: -2px 0 14px; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font-size: .7rem; line-height: 1.4; }
  .comparison-focus-hint img { width: 24px; height: 24px; flex: none; color: #8bc8ff; }
  .comparison-matrix-row { min-width: 600px; grid-template-columns: 132px repeat(var(--comparison-columns), minmax(170px, 1fr)); }
  .comparison-matrix-row > * { padding: 11px 12px; font-size: .72rem; }
  .mobile-table-hint { margin: 0 0 12px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; color: #344b61; border-left: 3px solid var(--blue); background: #eef5fc; font-size: .72rem; line-height: 1.4; }
  .mobile-table-hint img { width: 23px; height: 23px; flex: none; color: var(--blue); }
  .group-advisory { grid-template-columns: 1fr; }
  .off-quota-panel { margin-top: 20px; padding: 18px; }
  .off-quota-heading { display: block; }
  .off-quota-card { padding: 18px; }
}

/* Scadenze */
.deadline-cell { font-weight: 800; white-space: nowrap; }
.deadline-cell.is-scaduta { color: var(--muted); text-decoration: line-through; }
.deadline-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.deadline-card { padding: 26px; border-top: 5px solid var(--orange); background: var(--white); box-shadow: 0 14px 40px rgba(7,26,51,.07); }
.deadline-card.is-attesa { border-top-color: var(--line); }
.deadline-card.is-scaduta { border-top-color: var(--muted); opacity: .72; }
.deadline-date { margin: 0; color: var(--navy); font: 600 1.5rem/1.1 var(--font-display); text-transform: uppercase; }
.deadline-note { margin: 6px 0 16px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.deadline-card ul { display: grid; gap: 8px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.deadline-card li a { font-size: .88rem; font-weight: 700; border-bottom: 2px solid transparent; }
.deadline-card li a:hover { border-bottom-color: var(--orange); }