/* ==========================================================================
   LHAL — Homepage
   Palette e componenti. Da caricare DOPO bootstrap.css e styles.css.
   ========================================================================== */

:root {
    --lhal-ink: #101F2A;   /* grafite bluastro: pannelli scuri, testo forte */
    --lhal-ink-2: #1B3242; /* variante del pannello scuro */
    --lhal-ice: #EDF2F5;   /* fondo pagina: ghiaccio */
    --lhal-paper: #FFFFFF; /* superfici */
    --lhal-line: #D5DFE6;  /* bordi */
    --lhal-blue: #1660B4;  /* linea blu della pista: accento principale */
    --lhal-red: #C8102E;   /* linea rossa: live, gol, urgenza */
    --lhal-muted: #5C7080;

    --lhal-radius: 6px;
    --lhal-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}

body {
    background-color: var(--lhal-ice);
    color: var(--lhal-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

main.p-3 {
    padding: 0 !important; /* la homepage gestisce da sé i propri margini */
}

/* --- Tipografia -------------------------------------------------------- */

.lhal-display,
.lhal-score,
.lhal-h {
    font-family: var(--lhal-display);
    font-weight: 600;
    letter-spacing: .01em;
}

.lhal-h {
    font-size: 1.6rem;
    line-height: 1.1;
    margin: 0;
}

/* Titolo di sezione con la "linea blu" della pista */
.lhal-section-title {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    border-left: 4px solid var(--lhal-blue);
    padding-left: .75rem;
    margin-bottom: 1rem;
}

.lhal-section-title .lhal-more {
    margin-left: auto;
    font-size: .875rem;
    text-decoration: none;
    color: var(--lhal-blue);
    align-self: center;
}

.lhal-section-title .lhal-more:hover {
    text-decoration: underline;
}

/* --- Fascia principale (prossima partita) ------------------------------ */

.lhal-hero {
    background:
        linear-gradient(105deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 34px),
        linear-gradient(160deg, var(--lhal-ink-2), var(--lhal-ink) 60%);
    color: #fff;
    border-bottom: 3px solid var(--lhal-red);
}

.lhal-hero__season {
    font-size: .8125rem;
    color: #9FB6C5;
}

.lhal-matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.lhal-team {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.lhal-team--away {
    flex-direction: row-reverse;
    text-align: right;
}

.lhal-team__name {
    font-family: var(--lhal-display);
    font-size: clamp(1.25rem, 3.4vw, 2.25rem);
    font-weight: 600;
    line-height: 1.05;
    overflow-wrap: break-word;
}

.lhal-crest {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: contain;
    background: rgba(255, 255, 255, .08);
    border-radius: var(--lhal-radius);
    display: grid;
    place-items: center;
    font-family: var(--lhal-display);
    font-size: 1.5rem;
    color: #CBDCE7;
}

.lhal-vs {
    font-family: var(--lhal-display);
    font-size: 1.125rem;
    color: #8FA9B9;
    padding: 0 .5rem;
    border-left: 2px solid var(--lhal-red);
    border-right: 2px solid var(--lhal-red);
}

/* Conto alla rovescia */
.lhal-countdown {
    display: flex;
    gap: .5rem;
}

.lhal-countdown div {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--lhal-radius);
    padding: .35rem .6rem;
    min-width: 58px;
    text-align: center;
}

.lhal-countdown b {
    display: block;
    font-family: var(--lhal-display);
    font-size: 1.5rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.lhal-countdown span {
    font-size: .6875rem;
    color: #9FB6C5;
}

/* Elenco compatto nella fascia scura */
.lhal-upnext {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--lhal-radius);
    padding: .5rem .75rem;
}

.lhal-upnext li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem 0;
    font-size: .875rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.lhal-upnext li:last-child {
    border-bottom: 0;
}

.lhal-upnext time {
    color: #9FB6C5;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Schede generiche --------------------------------------------------- */

.lhal-card {
    background: var(--lhal-paper);
    border: 1px solid var(--lhal-line);
    border-radius: var(--lhal-radius);
}

.lhal-card__body {
    padding: 1rem;
}

/* --- Partite: prossime / risultati ------------------------------------- */

.lhal-tabs .btn {
    --bs-btn-color: var(--lhal-muted);
    --bs-btn-border-color: var(--lhal-line);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-color: var(--lhal-ink);
    --bs-btn-hover-border-color: var(--lhal-line);
    --bs-btn-active-bg: var(--lhal-ink);
    --bs-btn-active-border-color: var(--lhal-ink);
    --bs-btn-active-color: #fff;
    font-size: .875rem;
}

.lhal-match {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--lhal-line);
    text-decoration: none;
    color: inherit;
}

.lhal-match:last-child {
    border-bottom: 0;
}

.lhal-match:hover,
.lhal-match:focus-visible {
    background: #F6F9FB;
}

.lhal-match__when {
    font-size: .8125rem;
    color: var(--lhal-muted);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.lhal-match__teams {
    font-size: .9375rem;
    min-width: 0;
}

.lhal-match__result {
    font-family: var(--lhal-display);
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lhal-match__result small {
    font-size: .75rem;
    color: var(--lhal-muted);
}

.lhal-match__time {
    font-family: var(--lhal-display);
    font-size: 1.25rem;
    color: var(--lhal-blue);
    font-variant-numeric: tabular-nums;
}

.lhal-live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: system-ui, sans-serif;
    font-size: .6875rem;
    color: var(--lhal-red);
    vertical-align: middle;
}

.lhal-live::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--lhal-red);
    animation: lhal-pulse 1.6s ease-in-out infinite;
}

@keyframes lhal-pulse {
    50% {
        opacity: .2;
    }
}

.lhal-day {
    background: #F1F5F8;
    border-bottom: 1px solid var(--lhal-line);
    padding: .35rem 1rem;
    font-size: .75rem;
    color: var(--lhal-muted);
}

/* --- Classifica --------------------------------------------------------- */

.lhal-table {
    width: 100%;
    font-size: .9375rem;
    border-collapse: collapse;
}

.lhal-table th {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--lhal-muted);
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--lhal-line);
}

.lhal-table td {
    padding: .55rem 1rem;
    border-bottom: 1px solid #EEF2F5;
    font-variant-numeric: tabular-nums;
}

.lhal-table tbody tr:last-child td {
    border-bottom: 0;
}

.lhal-table .lhal-pos {
    width: 2.25rem;
    color: var(--lhal-muted);
    font-family: var(--lhal-display);
    font-size: 1.125rem;
}

/* Le prime posizioni: barra blu a sinistra, senza colorare l'intera riga */
.lhal-table tr[data-qualified="1"] .lhal-pos {
    box-shadow: inset 3px 0 0 var(--lhal-blue);
    color: var(--lhal-ink);
}

.lhal-table .lhal-pts {
    font-family: var(--lhal-display);
    font-size: 1.125rem;
    text-align: right;
}

.lhal-table td.num,
.lhal-table th.num {
    text-align: right;
}

/* --- Leader (marcatori, portieri, fair play) --------------------------- */

.lhal-leader {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .55rem 1rem;
    border-bottom: 1px solid #EEF2F5;
}

.lhal-leader:last-child {
    border-bottom: 0;
}

.lhal-leader__pos {
    font-family: var(--lhal-display);
    font-size: 1.125rem;
    color: var(--lhal-muted);
}

.lhal-leader__team {
    display: block;
    font-size: .75rem;
    color: var(--lhal-muted);
}

.lhal-leader__val {
    font-family: var(--lhal-display);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

/* --- News --------------------------------------------------------------- */

.lhal-news {
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.lhal-news article {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--lhal-line);
}

.lhal-news article:last-child {
    border-bottom: 0;
}

.lhal-news h3 {
    font-size: 1rem;
    margin: 0 0 .15rem;
}

.lhal-news time {
    font-size: .75rem;
    color: var(--lhal-muted);
}

.lhal-news p {
    margin: .4rem 0 0;
    font-size: .9375rem;
    color: #33475A;
}

/* --- Squadre ------------------------------------------------------------ */

.lhal-crests {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .75rem;
}

.lhal-crests a {
    background: var(--lhal-paper);
    border: 1px solid var(--lhal-line);
    border-radius: var(--lhal-radius);
    padding: .75rem;
    display: grid;
    place-items: center;
    min-height: 92px;
}

.lhal-crests img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

.lhal-crests a:hover,
.lhal-crests a:focus-visible {
    border-color: var(--lhal-blue);
}

/* --- Accessibilità ------------------------------------------------------ */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--lhal-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .lhal-live::before {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .lhal-matchup {
        grid-template-columns: 1fr;
        text-align: center;
        gap: .5rem;
    }

    .lhal-team,
    .lhal-team--away {
        flex-direction: row;
        justify-content: center;
        text-align: left;
    }

    .lhal-vs {
        justify-self: center;
        border: 0;
        border-top: 2px solid var(--lhal-red);
        border-bottom: 2px solid var(--lhal-red);
        padding: .15rem .75rem;
    }

    .lhal-match {
        grid-template-columns: 3.75rem 1fr auto;
        padding: .6rem .75rem;
    }
}

/* ==========================================================================
   Stato pre-stagione: nessuna partita a calendario
   ========================================================================== */

.lhal-hero--pre .lhal-lead {
    font-family: var(--lhal-display);
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 600;
    line-height: 1.05;
    margin: 0 0 .75rem;
    max-width: 20ch;
}

.lhal-hero--pre p.lhal-sub {
    color: #B7CAD6;
    max-width: 56ch;
    margin-bottom: 1.5rem;
}

.lhal-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--lhal-red);
    color: #fff;
    border: 0;
    border-radius: var(--lhal-radius);
    padding: .6rem 1.1rem;
    text-decoration: none;
    font-weight: 600;
}

.lhal-btn:hover,
.lhal-btn:focus-visible {
    background: #A80C25;
    color: #fff;
}

.lhal-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}

.lhal-btn--ghost:hover,
.lhal-btn--ghost:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* Albo: campioni in carica */
.lhal-champs {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 3px solid var(--lhal-blue);
    border-radius: var(--lhal-radius);
    padding: 1rem 1.25rem;
}

.lhal-champs dt {
    font-size: .75rem;
    color: #9FB6C5;
    font-weight: 400;
}

.lhal-champs dd {
    font-family: var(--lhal-display);
    font-size: 1.5rem;
    margin: 0 0 .75rem;
}

.lhal-champs dd:last-child {
    margin-bottom: 0;
}

/* Documenti in pagina (oggi raggiungibili solo dalla finestra modale) */
.lhal-docs a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--lhal-line);
    text-decoration: none;
    color: inherit;
    font-size: .9375rem;
}

.lhal-docs a:last-child {
    border-bottom: 0;
}

.lhal-docs a:hover,
.lhal-docs a:focus-visible {
    background: #F6F9FB;
}

.lhal-docs i {
    color: var(--lhal-red);
}

.lhal-docs span {
    margin-left: auto;
    font-size: .75rem;
    color: var(--lhal-muted);
}

/* Selettore di stato: solo per l'anteprima, da non copiare in produzione */
.lhal-preview-switch {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    background: var(--lhal-ink);
    border-radius: 999px;
    padding: .35rem;
    box-shadow: 0 6px 24px rgba(16, 31, 42, .35);
}

.lhal-preview-switch button {
    border: 0;
    background: transparent;
    color: #9FB6C5;
    font-size: .8125rem;
    padding: .35rem .9rem;
    border-radius: 999px;
}

.lhal-preview-switch button.active {
    background: #fff;
    color: var(--lhal-ink);
}