/**
 * Flavor Starter — Homepage Hero / Featured Section
 *
 * @package Flavor_Starter
 */

.flavor-hero {
    padding-top: 2.28571rem;
    padding-bottom: 1.14286rem;
}

/* Hero grid: 1 large card (spans 2 cols + 2 rows) then regular 5-col flow */
.flavor-hero-grid {
    display: grid;
    grid-template-columns: repeat(var(--flavor-grid-columns, 5), 1fr);
    gap: var(--flavor-grid-gap);
}

/* First card spans 2 columns + 2 rows for the hero banner effect */
.flavor-hero-grid .flavor-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Hero featured card title — larger since the card is bigger */
.flavor-hero-grid .flavor-card:first-child .flavor-card-title {
    font-size: 1.42857rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Hero card entrance animation */
.flavor-hero-grid .flavor-card {
    animation: flavor-card-enter 0.4s ease both;
}

.flavor-hero-grid .flavor-card:nth-child(1) { animation-delay: 0.05s; }
.flavor-hero-grid .flavor-card:nth-child(2) { animation-delay: 0.10s; }
.flavor-hero-grid .flavor-card:nth-child(3) { animation-delay: 0.15s; }
.flavor-hero-grid .flavor-card:nth-child(4) { animation-delay: 0.20s; }
.flavor-hero-grid .flavor-card:nth-child(5) { animation-delay: 0.10s; }
.flavor-hero-grid .flavor-card:nth-child(6) { animation-delay: 0.15s; }
.flavor-hero-grid .flavor-card:nth-child(7) { animation-delay: 0.20s; }