/*
 * public/assets/css/home.css | Ultima modifica: 07/05/2026 | v1.0
 *
 * PURPOSE:
 *   Homepage-specific layout and section styles.
 *   Covers: hero (3 featured articles), top-news, hot-this-week,
 *   more-news grid. Sidebar styles live in components.css.
 *
 * DEPENDS ON: base.css, layout.css, components.css
 *
 * CHANGELOG:
 *   - 07/05/2026 v1.0: initial implementation
 */

/* =============================================================================
   BLOCK: Hero section
   3-column featured articles at the top of the homepage.
   Left: 1 large card (2fr). Right: 2 stacked smaller cards (1fr).
   ============================================================================= */
.hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

/* Large hero card — main featured article */
.hero__main .article-card__image,
.hero__main .article-card__image-ph {
    height: 200px;
    aspect-ratio: unset;
}

.hero__main .article-card__title {
    font-size: var(--font-size-md);
    font-weight: 600;
}

.hero__main .article-card__excerpt {
    max-width: 62ch;
}

/* Right column — 2 smaller stacked cards */
.hero__secondary {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.hero__secondary .article-card__image,
.hero__secondary .article-card__image-ph {
    height: 80px;
    aspect-ratio: unset;
}

/* =============================================================================
   BLOCK: Top news section
   Filter tabs row + 2-column layout: left big card + right mini list.
   ============================================================================= */
.top-news {
    margin-bottom: var(--space-lg);
}

.top-news__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

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

/* Left: one bigger card with excerpt */
.top-news__main .article-card__image,
.top-news__main .article-card__image-ph {
    height: 110px;
    aspect-ratio: unset;
}

.top-news__main .article-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* Right: vertical stack of mini cards */
.top-news__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.top-news__list .article-card--mini-thumb .article-card__title {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* =============================================================================
   BLOCK: Hot this week section
   3-column equal grid of article cards.
   ============================================================================= */
.hot-this-week {
    margin-bottom: var(--space-lg);
}

.hot-this-week__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
}

.hot-this-week__grid .article-card__image,
.hot-this-week__grid .article-card__image-ph {
    height: 100px;
    aspect-ratio: unset;
}

/* =============================================================================
   BLOCK: More news section
   2-column grid for the remaining article stream.
   ============================================================================= */
.more-news {
    margin-bottom: var(--space-lg);
}

.more-news__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.more-news__grid .article-card__image,
.more-news__grid .article-card__image-ph {
    height: 90px;
    aspect-ratio: unset;
}

/* =============================================================================
   BLOCK: Mobile homepage
   Collapse desktop grids into readable portrait stacks.
   ============================================================================= */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__secondary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .top-news__header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .filter-tabs {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .filter-tabs__item {
        white-space: nowrap;
    }

    .top-news__grid,
    .hot-this-week__grid,
    .more-news__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .hero__main .article-card__image,
    .hero__main .article-card__image-ph {
        height: 160px !important;
    }

    .hero__secondary {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__secondary .article-card__image,
    .hero__secondary .article-card__image-ph,
    .top-news__main .article-card__image,
    .top-news__main .article-card__image-ph,
    .hot-this-week__grid .article-card__image,
    .hot-this-week__grid .article-card__image-ph,
    .more-news__grid .article-card__image,
    .more-news__grid .article-card__image-ph {
        height: 135px !important;
    }
}