/**
 * Hero Section — assets/css/hero.css
 * Full-width gradient banner with heading and subtitle on the front page.
 *
 * @package  DEI4SME
 * @used-in  front-page.php
 *
 * SELECTORS:
 *   .hero      — Gradient background (--color-primary → --color-primary-light), white text, centered
 *   .hero h1   — Hero heading (42px, weight 400, white)
 *   .hero p    — Hero subtitle (20px, max-width 700px, opacity 0.9)
 */

/* === Hero Section === */
.hero {
    background: var(--gradient-primary);
    color: #fff;
    padding: calc(var(--spacing-xl) + var(--spacing-md)) 0;
    text-align: center;
}

.hero h1 {
    color: #fff;
    margin-bottom: var(--spacing-sm);
    font-size: 42px;
    font-weight: 700;
}

.hero p {
    font-size: 20px;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
}

/* === Responsive Hero === */
@media (max-width: 768px) {
    .hero h1 { font-size: 32px; }
    .hero p { font-size: 17px; }
    .hero { padding: var(--spacing-lg) 0; }
}