/* IronCompare - pagine guida (/guide/..., generate da tools/genera_pagine.py nella pipeline).
   Solo le poche regole che css/style.css non ha: la pagina usa gia' le pagine di testo (about-*), la tabella delle
   pagine generate (static-table) e il primo posto delle classifiche (ppk-row rank-1). Colori solo con le variabili
   di style.css (REGOLE_GRAFICHE.md). */

/* La tabella sta nella colonna del testo: su computer senza scorrimento, da telefono scorre nel suo riquadro. */
.guide-main .static-table.guide-table {
    min-width: 560px;
}

.guide-main .static-table.guide-table-pairs {
    min-width: 600px;
}

.guide-main .static-table-wrap {
    margin: 1rem 0 0;
}

.guide-small {
    font-size: 0.8rem;
    color: var(--ink-2);
}

.guide-small a {
    color: var(--ink-2);
}

.guide-mark {
    font-weight: 700;
    color: var(--ink-2);
}

.guide-main .about-section p.guide-note {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.guide-main .about-section ul.guide-list li {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-2);
}

/* Il primo posto: una scheda sola, come la prima riga delle classifiche. */
.guide-best {
    margin: 1rem 0 0;
}

/* Il segnaposto del testo di Bruno: si deve notare finche' il testo non c'e'. */
.guide-placeholder {
    padding: 1rem 1.25rem;
    border: 2px dashed var(--warn);
    border-radius: 6px;
    background: var(--surface);
}

.guide-main .about-section .guide-placeholder p {
    margin: 0 0 0.5rem;
}

.guide-main .about-section .guide-placeholder p:last-child {
    margin-bottom: 0;
}

.guide-main .about-section p.guide-placeholder-label {
    font-weight: 700;
    color: var(--warn);
}

.guide-main h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.1rem;
}

/* La riga «A cura di ...» sotto il titolo del testo di Bruno: piccola, testo secondario. */
.guide-main .about-section p.guide-byline {
    margin: -0.4rem 0 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-2);
}

/* Da telefono le tabelle stanno nella larghezza dello schermo: niente scorrimento di lato. */
@media (max-width: 640px) {
    .guide-main .static-table.guide-table,
    .guide-main .static-table.guide-table-pairs {
        min-width: 0;
        font-size: 0.85rem;
    }

    .guide-main .static-table.guide-table th,
    .guide-main .static-table.guide-table td {
        padding: 0.55rem 0.5rem;
    }

    .guide-main .static-table.guide-table caption {
        padding: 0.75rem 0.5rem;
    }
}

/* Da telefono «Set pronto o coppie?» diventa una scheda per brand: modello in alto, sotto il prezzo delle coppie e il
   set pronto affiancati, in fondo la differenza. Ogni valore ha davanti il nome della sua colonna (data-etichetta). */
@media (max-width: 640px) {
    .guide-main .guide-table-pairs thead {
        display: none;
    }

    .guide-main .guide-table-pairs tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid var(--line);
    }

    .guide-main .guide-table-pairs tr[hidden] {
        display: none;
    }

    .guide-main .guide-table-pairs td {
        border-top: 0;
        white-space: normal;
    }

    .guide-main .guide-table-pairs td:first-child,
    .guide-main .guide-table-pairs td:last-child {
        grid-column: 1 / -1;
    }

    .guide-main .guide-table-pairs td[data-etichetta]::before {
        content: attr(data-etichetta);
        display: block;
        font-size: 0.72rem;
        color: var(--ink-2);
    }
}