/* --- Homepage Specific Styles --- */

/* --- Hero Section --- */
.hero-section {
    /* Adjust gradient for potentially lighter images or remove if not needed */
    /* Consider using a variable for the hero image path if it changes */
    /* Reverted to using background shorthand with CSS variable */
    background-image: linear-gradient(rgba(30, 60, 60, 0.7), rgba(30, 60, 60, 0.7)), url('/images/hero.jpg'); /* Use root-relative path */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--background-color); /* Dark fallback */
    color: var(--dark-color); /* Keep text light */
    padding: 6rem 0; /* Base padding in responsive.css */
    text-align: center;
    min-height: 400px; /* Base min-height in responsive.css */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content h1 {
    /* Base font size in responsive.css */
    margin-bottom: 1rem;
    font-weight: 700;
}

.hero-content p {
    /* Base font size in responsive.css */
    margin-bottom: 2rem;
}

/* --- Games Section (Homepage Teaser) --- */
/* Styles for the .games-grid container itself are in pages/games.css */
/* Styles for .game-card are in components/game-card.css */
/* Add specific overrides for homepage game cards if needed */
/* e.g., #home-games .game-card { ... } */


/* --- Gallery Section (Homepage Teaser) --- */
/* Styles for .gallery-grid and .gallery-item are in components/gallery-teaser.css */


/* --- Contact Teaser --- */
.contact-teaser-text {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    color: var(--dark-color);
}

/* Note: General responsive adjustments for hero section are in responsive.css */
/* --- Angry Chef Food Section Fix --- */
/* Ensures the inner container of the #food section doesn't have its own background,
   allowing the alternating background from base.css to show through. */
#food > .container {
    background-color: transparent;
}
/* Ensure the #food section itself is transparent to inherit alternating background */
section#food {
}