/* ============================================================
   RASSEGNA — sovrascritture sopra guida.css (caricato prima).
   Solo ciò che la guida non ha: badge hero viola, cartellini dei
   blocchi per DISPONIBILITÀ (non per fascia di prezzo), tag di
   disponibilità sulle card, prezzo senza bottone, spaziature.
   8 set 2026 (㊵).
   ============================================================ */

/* Badge hero: teal, lo stesso delle presentazioni (Ⓐ 8 set, ㊵-bis: il CPT resta
   rassegna, al lettore si presenta come Presentazione). Le regole .t-ras in cards.css
   restano inerti: tornare indietro costa una riga. */
.article-type-badge.t-pres {
    background: #ccfbf1;
    color: #0f766e;
}

/* Le etichette di stato sono più lunghe di «Fino a 500€»: su schermo stretto
   l'intestazione va a capo invece di schiacciare il titolo (visto su IFA, blocco Lenovo).
   column-reverse: il TITOLO va sopra e l'etichetta sotto (decisione del proprietario,
   10 set, giro apple-keynote) senza toccare il markup — nel DOM il badge resta primo,
   quindi l'ordine di lettura per gli screen reader non cambia. align-items serve perché
   in colonna il `center` ereditato da guida.css centrerebbe tutto orizzontalmente. */
.rassegna-blocco .tier-header {
    flex-direction: column-reverse;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 8px;
}

/* Il titolo del blocco è un H2 (nella guida era uno span): stesso peso visivo */
.rassegna-blocco .tier-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.3;
}

/* Cartellini dei blocchi per disponibilità (la guida aveva low/mid/high) */
.tier-badge.tono-vendita   { background: var(--emerald-50); color: var(--emerald-700); }
.tier-badge.tono-prototipo { background: var(--gray-100);   color: var(--gray-600); }
.tier-badge.tono-concept   { background: #fef3c7;           color: #92400e; }
.tier-badge.tono-misto     { background: #f3e8ff;           color: #6b21a8; }

/* Il racconto del blocco: più paragrafi, respiro prima delle card */
.rassegna-racconto {
    margin-bottom: 20px;
}
.rassegna-racconto p + p {
    margin-top: 0.9em;
}

/* Tag di disponibilità sulla card: piccolo, con pallino, MAI stella */
.disp-tag {
    display: inline-flex;
    align-self: flex-start; /* .product-info è flex-column: senza, il tag si stira */
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.4;
}
.disp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.disp-nota {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.85;
}
.disp-vendita   { background: var(--emerald-50); color: var(--emerald-700); }
.disp-prototipo { background: var(--gray-100);   color: var(--gray-600); }
.disp-concept   { background: #fef3c7;           color: #92400e; }

/* Immagine del blocco (opzionale, ㊷ — 10 set): sta fra il titolo e il racconto.
   Il campo è facoltativo per decisione del proprietario, quindi la pagina deve
   reggere blocchi MISTI: qui non c'è nessuna regola sul blocco senza immagine,
   il `figure` semplicemente non esiste e il racconto attacca al titolo come prima.
   aspect-ratio fisso: nove blocchi con foto di proporzioni diverse resterebbero
   disallineati, e `card-thumb` è già 16:9 ritagliato dal tema. */
.rassegna-blocco .rassegna-figura {
    margin: 0 0 18px;
}

.rassegna-blocco .rassegna-figura img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    background: var(--gray-100);
}

.rassegna-blocco .rassegna-figura figcaption {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Prezzo senza bottone (oggetto senza link acquisto ma con prezzo verificato) */
.product-price {
    margin-top: 10px;
    font-size: 0.8125rem;
    color: var(--gray-600);
}

/* Card senza bottone (prototipi, concept): una colonna sola, niente vuoto a destra */
.rassegna-blocco .product-card:not(:has(.product-right)) {
    grid-template-columns: 1fr;
}

/* Intro e chiusura: card di prosa, stessa gabbia dei blocchi */
.rassegna-intro .prose,
.rassegna-chiusura .prose {
    max-width: none;
}