/* home.css - Stili specifici homepage */

/* ============================================
   BADGE TIPO — varianti mancanti in cards.css
   (helpers.php genera classi diverse dall'HTML)
============================================ */
.article-card-type.t-con  { background: #e0e7ff; color: #4f46e5; }
.article-card-type.t-new  { background: #e0f2fe;  color: #0369a1; }
.article-card-type.t-pres { background: #ccfbf1; color: #0f766e; }
.article-card-type.t-rum  { background: #fef3c7; color: #b45309; }
.article-card-type.t-hub  { background: #fef3c7; color: #b45309; }

/* Newsletter icon color */
.nl-icon { color: #3b82f6; }

/* ============================================
   MAIN CONTENT
============================================ */
main {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-lg);
}

/* ============================================
   HERO SECTION
============================================ */
.hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.hero-main {
    background: var(--surface);
    border-radius: var(--radius-lg);   /* 24px = come l'hero articolo: l'angolo card combacia con l'immagine (16px + 10px cornice) */
    overflow: hidden;
    box-shadow: var(--elevation-2);
    transition: box-shadow 0.2s ease,
                transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.hero-main:hover {
    transform: translateY(-4px);
    box-shadow: var(--elevation-3);
}

.hero-image {
    width: 100%;
    aspect-ratio: 1200 / 630;   /* = hero-article: stesso rapporto dell'hero articolo e dell'og:image */
    background: linear-gradient(145deg, var(--gray-100) 0%, var(--gray-200) 100%);  /* placeholder se manca foto */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Copertina incastonata (ricetta hero: inset 10px, angoli 16px); fondo bianco = la cornice È il banner */
.hero-image:has(img) { background: var(--white); }
.hero-image > img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: cover;
    border-radius: 16px;
}

.hero-image .article-card-type {
    position: absolute;
    top: 20px;
    left: 20px;
}

/* ===== Section Icon System ===== */
.section-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 6px;
}

.section-icon svg {
    width: 24px;
    height: 24px;
}

.rumors-header .section-icon svg {
    width: 18px;
    height: 18px;
}

.hero-content {
    padding: var(--space-md);
}

.category-chip {
    display: inline-flex;
    align-items: center;
    background: none;
    color: var(--gray-400);
    padding: 0;
    border-radius: 0;
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: var(--on-surface);
    transition: color 0.15s ease;
    margin-bottom: var(--space-sm);
}

.hero-excerpt {
    color: var(--on-surface-variant);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--gray-500);
    font-size: 0.875rem;
}

.meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-icon {
    width: 16px;
    height: 16px;
    fill: var(--gray-400);
    flex-shrink: 0;
}

/* Hero Sidebar */
.hero-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.hero-small {
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--elevation-1);
    transition: box-shadow 0.2s ease,
                transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.hero-small:hover {
    box-shadow: var(--elevation-3);
    transform: translateY(-3px);
}

.hero-small:hover .hero-small-title {
    color: var(--blue-500);
}

.hero-small.hero-small-rumor:hover .hero-small-title {
    color: var(--amber-600);
}

/* Mini sidebar (desktop ≥1100): i 3 pannelli (numeri + 2 mini) si dividono l'altezza
   e riempiono la colonna fino al fondo dell'hero (soluzione a). Su <1100 la sidebar
   diventa grid: flex:1 non si applica → pannelli a misura naturale. */
/* desktop ≥1101: la sidebar diventa una colonna-grid di 3 righe uguali che riempiono l'altezza dell'hero */
@media (min-width: 1101px) {
    .hero-sidebar { display: grid; grid-template-rows: repeat(3, 1fr); }
    .hero-sidebar > .proof-box,
    .hero-sidebar > .hero-small { min-height: 0; }
}
.proof-box { justify-content: center; }   /* contenuto centrato nel pannello più alto */

/* Immagine IBRIDA: fascia incastonata a tutta altezza quando c'è la copertina;
   senza copertina la thumb non viene proprio emessa (PHP) → pannello solo-testo, niente blocco vuoto */
.hero-small { display: flex; align-items: stretch; }
.hero-small-thumb {
    flex: 0 0 40%;
    position: relative;
    background: var(--white);
    overflow: hidden;
}
.hero-small-thumb > img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: cover;
    border-radius: 14px;   /* concentrico: card 24 − cornice 10 */
}
.hero-small-content {
    flex: 1;
    min-width: 0;
    padding: 14px 16px 34px;   /* il bottom riserva lo spazio alla meta ancorata in basso */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;        /* ancora per la meta assoluta */
}
.hero-small-content .hero-small-title {
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Affidabilità rumor = pillola "come prima": sull'immagine quando c'è la copertina, in cima al testo quando manca */
.hero-small-thumb .rumor-badge { top: 16px; left: 16px; }
.hero-small-content .rumor-badge { position: static; align-self: flex-start; margin-bottom: 8px; }

.hero-small-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--on-surface);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.hero-small .meta {
    font-size: 0.75rem;
    gap: 8px;
    flex-wrap: wrap;
    position: absolute;   /* meta ancorata in fondo alla card (titolo centrato sopra) */
    left: 16px;
    right: 16px;
    bottom: 14px;
}
.hero-small .meta span { white-space: nowrap; }   /* "21 Mar 2026" resta su una riga, niente spezzature */

.reliability-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.reliability-dot.high {
    background: var(--green-500);
}

.reliability-dot.medium {
    background: var(--amber-500);
}

.reliability-dot.low {
    background: var(--red-500);
}

/* ============================================
   PROOF BOX — Social Proof sidebar
============================================ */
.proof-box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--elevation-1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.proof-box-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.proof-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.proof-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.03em;
}

.proof-label {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

/* ============================================
   TRENDING SECTION - Compact Article Style
============================================ */
.trending-section {
    margin-bottom: var(--space-xl);
}

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

.trending-card {
    background: var(--surface);
    border-radius: var(--radius-md);   /* 16px = come /articoli e archivi: l'angolo card combacia con l'immagine (12px + 6px cornice) */
    overflow: hidden;
    box-shadow: var(--elevation-2);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease,
                transform 0.2s ease;
    position: relative;
}

.trending-card:hover {
    box-shadow: var(--elevation-3);
    transform: translateY(-4px);
}

.trending-rank {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    background: var(--white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    box-shadow: var(--shadow-md);
    z-index: 2;
}

.trending-rank.gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: white;
}

.trending-thumb {
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, var(--gray-100) 0%, var(--gray-200) 100%);  /* placeholder se manca foto */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.trending-thumb:has(img) { background: var(--white); }
.trending-thumb > img {
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    object-fit: cover;
    border-radius: 12px;
}

.trending-content {
    padding: 11px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.trending-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--on-surface);
    margin-bottom: 12px;
    transition: color 0.15s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trending-content .meta {
    font-size: 0.8125rem;
    gap: 16px;
    margin-top: auto;
}

/* ============================================
   SECTION SHARED STYLES
============================================ */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
}

.view-all {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease, color 0.15s ease;
}

.view-all:hover {
    gap: 8px;
    color: var(--blue-600);
}

/* ============================================
   ARTICLE GRID
============================================ */
.articles-title {
    color: var(--blue-500);
}

.card-score {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    background: var(--white);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.card-score .score-ring-svg {
    width: 32px;
    height: 32px;
    display: block;
}

.card-score .score-value {
    font-size: 0.625rem;
    font-weight: 800;
    fill: var(--gray-900);
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.article-card {
    background: var(--surface);
    border-radius: var(--radius-md);   /* 16px = come /articoli e archivi (era 28): l'angolo card combacia con l'immagine (12px + 6px cornice) */
    overflow: hidden;
    box-shadow: var(--elevation-1);
    transition: box-shadow 0.2s ease,
                transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    box-shadow: var(--elevation-3);
    transform: translateY(-4px);
}

.article-image {
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, var(--gray-100) 0%, var(--gray-200) 100%);  /* placeholder se manca foto */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.article-image:has(img) { background: var(--white); }
.article-image > img {
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    object-fit: cover;
    border-radius: 12px;
}

.article-content {
    padding: 11px var(--space-md) var(--space-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--on-surface);
    margin-bottom: var(--space-sm);
    transition: color 0.15s ease;
    letter-spacing: -0.01em;
}

.article-content .meta {
    font-size: 0.75rem;
    margin-top: auto;
}

/* ============================================
   RUMORS SECTION
============================================ */
.rumors-section {
    margin-bottom: var(--space-xl);
}

.rumors-section .section-title {
    color: var(--amber-600);
}

.rumors-section .view-all {
    color: var(--amber-600);
}

.rumors-section .view-all:hover {
    color: var(--amber-500);
    gap: 8px;
}

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

/* La griglia segue il numero reale di card: niente colonne vuote */
.rumors-grid--1 { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.rumors-grid--2 { grid-template-columns: repeat(2, 1fr); }

.rumor-card {
    background: var(--white);
    border-radius: var(--radius-md);   /* 16px = come /articoli e archivi: l'angolo card combacia con l'immagine (12px + 6px cornice) */
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.2s ease,
                transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-100);
}

.rumor-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.rumor-card-image {
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, rgba(255, 184, 77, 0.08) 0%, rgba(255, 184, 77, 0.15) 100%);  /* placeholder ambra (brand) se manca foto */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.rumor-card-image:has(img) { background: var(--white); }
.rumor-card-image > img {
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    object-fit: cover;
    border-radius: 12px;
}

.rumor-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    padding: 5px 10px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-600);
    backdrop-filter: blur(8px);
}

.rumor-badge .reliability-dot {
    width: 7px;
    height: 7px;
}

.rumor-card-content {
    padding: 11px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rumor-card-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gray-900);
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.rumor-card:hover .rumor-card-title {
    color: var(--amber-600);
}

.rumor-card-content .meta {
    font-size: 0.8125rem;
    gap: 16px;
    margin-top: auto;
}

/* ============================================
   PREMIUM HOVER SYSTEM
============================================ */
/* Image containers — overflow hidden for zoom */
.hero-image,
.hero-small-thumb,
.trending-thumb,
.article-image,
.rumor-card-image {
    overflow: hidden;
}

/* Subtle gradient overlay on hover */
.hero-image::after,
.trending-thumb::after,
.article-image::after,
.rumor-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28, 25, 23, 0.04), transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.hero-main:hover .hero-image::after,
.trending-card:hover .trending-thumb::after,
.article-card:hover .article-image::after,
.rumor-card:hover .rumor-card-image::after {
    opacity: 1;
}

/* Reset stagger-delay (anti hover-lag): spostato in animations.css (globale, non solo home). */

/* Image zoom on hover — smooth scale */
.hero-image > *:not(.article-card-type):not(.card-score),
.hero-small-thumb > *:not(.rumor-badge):not(.article-card-type),
.trending-thumb > *,
.article-image > *:not(.article-card-type):not(.card-score),
.rumor-card-image > *:not(.rumor-badge) {
    transition: transform 0.2s ease;
}

/* zoom hover SOLO sulla mini-card sidebar: sulle card grandi cresceva oltre i 6px e rompeva la cornice incastonata (rimosso 15 giu). Le card restano vive via lift + velo ::after */
.hero-small:hover .hero-small-thumb > *:not(.rumor-badge):not(.article-card-type) {
    transform: scale(1.04);
}

/* Badge lift on hover */
.trending-rank {
    transition: transform 0.2s ease,
                box-shadow 0.2s ease;
}

.hero-main:hover .article-card-type,
.hero-small:hover .article-card-type,
.trending-card:hover .trending-rank,
.article-card:hover .article-card-type,
.rumor-card:hover .rumor-badge {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Score badge lift on hover */
.card-score {
    transition: transform 0.2s ease,
                box-shadow 0.2s ease;
}

.article-card:hover .card-score {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

/* Title color change on hover */
.hero-main:hover .hero-title,
.trending-card:hover .trending-title,
.article-card:hover .article-title {
    color: var(--blue-500);
}

/* ============================================
   Counter animation pulse
============================================ */
@keyframes counterPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.proof-number.counted {
    animation: counterPulse 0.3s ease-out;
}

/* ============================================
   Score ring animation
============================================ */
.card-score-ring svg circle:last-child {
    transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

/* ============================================
   RESPONSIVE — 1100px
============================================ */
@media (max-width: 1100px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .hero-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .proof-box {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: 24px;
        justify-content: center;
    }

    .trending-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   RESPONSIVE — 768px
============================================ */
@media (max-width: 768px) {
    main {
        padding: var(--space-md);
    }

    .hero-title {
        font-size: 1.375rem;
    }

    /* .hero-image: niente height fissa su mobile — governa aspect-ratio 1.9:1 */

    .hero-sidebar {
        grid-template-columns: 1fr;
    }

    .proof-box {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        grid-column: auto;
        gap: 8px 24px;
    }

    .proof-box-title {
        width: 100%;
        text-align: center;
    }

    .proof-row {
        flex: 1;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-align: center;
    }

    .trending-grid {
        grid-template-columns: 1fr;
    }

    .article-grid {
        grid-template-columns: 1fr;
    }

    .meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .rumors-grid {
        grid-template-columns: 1fr;
    }

    /* Hero reveal — mobile tuning */
    [data-reveal-hero] {
        transform: translateY(10px);
        transition-duration: 0.35s;
    }

    /* Disabilita hover effects su touch */
    .hero-image::after,
    .trending-thumb::after,
    .article-image::after,
    .rumor-card-image::after {
        display: none;
    }
}