/*
 * page-header.css — Text-based hero header component
 * Standalone module: move to centralized repo (HTML2026/assets/css/)
 *
 * Depends on: styles.css custom properties
 *   --color-bg, --color-border, --color-accent,
 *   --color-text-secondary, --font-title, --font-body
 *
 * Usage: <header class="hero hero--text">
 */

/* ---- Layout & background (light: white) ---- */
.hero--text {
    background: var(--color-bg, #ffffff);
    padding: 10.25rem 2rem 5.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

/* Very soft accent wash — purely decorative */
.hero--text::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 75% 50% at 50% 0%,
        rgba(210, 121, 97, 0.06) 0%,
        transparent 55%
    );
    pointer-events: none;
}

/* ---- Inner wrapper ---- */
.hero-text-content {
    position: relative;
    z-index: 1;
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.75rem 1.5rem;
    box-sizing: border-box;
}

/* ---- Title (aligns with feria-intro__title / hero accent) ---- */
.hero--text .hero-title {
    color: var(--color-accent, #d27961);
    font-size: clamp(2rem, 6vw, 3.5rem);
}

/* ---- Subtitle ---- */
.hero--text .hero-subtitle {
    color: var(--color-text-secondary, #334155);
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    margin-bottom: 0;
    animation-delay: 0.2s;
}

/* ---- Dark theme ---- */
[data-theme="dark"] .hero--text {
    background: var(--color-bg, #18191d);
    border-bottom-color: var(--color-border, rgba(255, 255, 255, 0.12));
}

[data-theme="dark"] .hero--text::before {
    background: radial-gradient(
        ellipse 75% 50% at 50% 0%,
        rgba(232, 160, 144, 0.08) 0%,
        transparent 55%
    );
}

[data-theme="dark"] .hero--text .hero-subtitle {
    color: var(--color-text-secondary, #b0ada6);
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
    .hero--text {
        padding: 7.75rem 1.5rem 4.25rem;
    }

    .hero-text-content {
        padding: 1.5rem 1.25rem;
    }
}