/**
 * ECOS DESIGN SYSTEM — Section: Hero
 * Classes: .ecos-hero
 * Variantes: --centered | --split | --dark | --gradient
 *
 * AGENT_GUIDE: Primeira seção de qualquer landing page.
 * Sempre a primeira seção. Inclui background com grid SVG e glow (padrão Product OS).
 *
 * Estrutura padrão:
 *   <section class="ecos-hero">
 *     <div class="ecos-container">
 *       <div class="ecos-hero__badge">...</div>
 *       <h1 class="ecos-hero__title">...</h1>
 *       <p class="ecos-hero__subtitle">...</p>
 *       <div class="ecos-hero__actions">
 *         <a href="#" class="ecos-button ecos-button--cta ecos-button--lg">CTA Principal</a>
 *         <a href="#" class="ecos-button ecos-button--outline">CTA Secundário</a>
 *       </div>
 *       <div class="ecos-hero__social-proof">...</div>
 *     </div>
 *     <div class="ecos-hero__bg" aria-hidden="true">...</div>
 *   </section>
 *
 * Ref: AGENT_GUIDE.md#sections | sections/authority.css | sections/cta.css
 */

.ecos-hero {
    position: relative;
    padding-block: clamp(var(--ecos-space-16), 10vw, 10rem);
    overflow: hidden;
    background: var(--ecos-color-bg);
    display: flex;
    align-items: center;
}

.ecos-hero .ecos-container {
    position: relative;
    z-index: 2;
}

.ecos-hero__badge {
    margin-bottom: var(--ecos-space-6);
}

.ecos-hero__title {
    font-family: var(--ecos-font-display);
    font-size: clamp(var(--ecos-text-4xl), 6vw, 5rem);
    font-weight: var(--ecos-font-black);
    line-height: var(--ecos-leading-tight);
    color: var(--ecos-color-text);
    letter-spacing: -0.03em;
    max-width: 18ch;
    margin-bottom: var(--ecos-space-6);
}

.ecos-hero__title strong,
.ecos-hero__title .ecos-accent {
    color: var(--ecos-color-accent);
}

.ecos-hero__subtitle {
    font-size: clamp(var(--ecos-text-lg), 2.5vw, var(--ecos-text-2xl));
    color: var(--ecos-color-text-muted);
    line-height: var(--ecos-leading-relaxed);
    max-width: 50ch;
    margin-bottom: var(--ecos-space-8);
}

.ecos-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ecos-space-4);
    align-items: center;
    margin-bottom: var(--ecos-space-10);
}

/* Prova social (ex: "500 alunos", fotos) */
.ecos-hero__social-proof {
    display: flex;
    align-items: center;
    gap: var(--ecos-space-4);
    flex-wrap: wrap;
}

.ecos-hero__social-proof-text {
    font-size: var(--ecos-text-sm);
    color: var(--ecos-color-text-muted);
}

.ecos-hero__social-proof-text strong {
    color: var(--ecos-color-text);
}

/* Background decorativo com grid e glow */
.ecos-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.ecos-hero__bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.ecos-hero__bg-glow {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    filter: blur(60px);
}

/* Variante centralizada */
.ecos-hero--centered {
    text-align: center;
}

.ecos-hero--centered .ecos-hero__title,
.ecos-hero--centered .ecos-hero__subtitle {
    margin-inline: auto;
}

.ecos-hero--centered .ecos-hero__actions,
.ecos-hero--centered .ecos-hero__social-proof {
    justify-content: center;
}

/* Variante split (conteúdo + media lado a lado) */
.ecos-hero--split .ecos-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ecos-space-12);
    align-items: center;
}

@media (max-width: 768px) {
    .ecos-hero--split .ecos-hero__inner {
        grid-template-columns: 1fr;
    }
}

.ecos-hero__media {
    border-radius: var(--ecos-radius-2xl);
    overflow: hidden;
    box-shadow: var(--ecos-shadow-xl);
}

/* Linha decorativa lateral (padrão Product OS) */
.ecos-hero__bar {
    position: absolute;
    left: var(--ecos-space-8);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ecos-space-3);
    z-index: 3;
}

.ecos-hero__bar-line {
    width: 4px;
    height: 10rem;
    background: linear-gradient(to bottom, var(--ecos-color-accent), transparent);
    border-radius: var(--ecos-radius-full);
}

.ecos-hero__bar-dot {
    width: 8px;
    height: 8px;
    background: var(--ecos-color-accent);
    border-radius: 50%;
}

@media (max-width: 768px) {
    .ecos-hero__bar {
        display: none;
    }
}