/**
 * Hero Components
 * Juliana y Fadi Tango Website
 * 
 * Hero-Sections für Seiten-Header
 * Basiert auf Design aus privatstunden.php & shows-workshops.php
 */

/* ==================== BASE HERO ==================== */

.hero {
    width: 100%;
    /* Fluid statt 3-stufiger Kaskade (vorher 600px Desktop / 400px ≤768px /
       300px ≤480px, siehe Fluid-Design-Audit Kategorie A). clamp() nähert
       die alten Stufen linear an: bei 320px Breite ≈300px (Minimum
       erreicht), bei ~768px ≈430px (nah am alten 400px-Wert), oberhalb
       ~1333px Breite ist das Maximum 600px erreicht (identisch zum alten
       Fixwert für Desktop) - keine harten Sprünge mehr dazwischen. */
    height: clamp(300px, 30vw + 200px, 600px);
    /* Zentrale Definition des dunklen Foto-Verlaufs (aktuell 0.5/0.7) -
       wird von allen Seiten per var(--hero-gradient) referenziert, damit
       der Wert nur an dieser einen Stelle gepflegt werden muss. */
    /*--hero-gradient: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));*/
    --hero-gradient: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    position: relative;
}

/* Hero Overlay (dunkler Gradient) */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-hero);
    z-index: -1;
}

/* Hero Content Container */
.hero__content {
    text-align: center;
    z-index: 1;
    padding: var(--spacing-lg);
    /* Rutscht mit schrumpfender Breite zunehmend nach unten (umgekehrte
       Rampe, gleiches Rechenprinzip wie bei .intro-wunsch-liste in
       practicamos-juntos.css): bei großen Screens 0 (bleibt exakt
       vertikal zentriert wie bisher), bei sehr schmalen Screens bis zu
       40px Versatz nach unten. Bewusst moderat gehalten, da .hero selbst
       bei schmalen Screens auf nur noch 300px Höhe schrumpft (siehe
       height-Regel oben) - ein größerer Versatz würde den Content zu
       nah an den unteren Rand der Box drücken. Wird von Seiten mit
       eigener Content-Positionierung (.hero__content--startseite in
       homepage.css, .hero__content--about in ueber-uns.css) durch deren
       eigene, spezifischere Regeln überschrieben - siehe Hinweis in der
       Antwort. */
    /*margin-top: calc(15rem + clamp(0px, 40px - 8vw, 40px));/*clamp(0px, 80px - 8vw, 80px);/*clamp(0px, 40px - 8vw, 40px);*/
	margin-top: calc(
						clamp(120px, 12vw + 80px, 240px) +
						clamp(0px, 40px - 8vw, 40px)
					);
}

.hero h1 {
    font-size: var(--font-size-7xl);
    color: var(--color-text-accent);
    line-height: var(--line-height-none);
    margin-bottom: 0;
    text-shadow: var(--text-shadow-hero-strong);
    animation: fadeInUp 1s ease-out;
}

.hero__subtitle {
    font-size: var(--font-size-4xl);
    /* Fluid statt starrem var(--spacing-md) - Desktop-Wert bleibt
       unverändert als Ceiling, Mobile schrumpft stufenlos statt hart
       (gleiches Prinzip wie bereits mehrfach im Projekt angewendet). */
    margin-top: clamp(var(--spacing-sm), 4vw, var(--spacing-md));
    /* Identisch zu .hero h1 statt geerbtem body-Wert (1.6) - verhinderte
       bislang bei mehrzeiligem Umbruch einen deutlich größeren
       Zeilenabstand als beim Titel. */
    line-height: var(--line-height-tight);/*var(--line-height-none);*/
    font-weight: var(--font-weight-light);
    letter-spacing: var(--letter-spacing-widest);
    color: var(--color-white);
    text-shadow: var(--text-shadow-hero-strong);
    animation: fadeInUp 1s ease-out 0.2s backwards;
}

/* ==================== HERO VARIANTS ==================== */

/* Hero mit Bild - nutzt background-image (Langform), NICHT background
   (Kurzform), da Kurzform sonst background-size/-position aus .hero
   unbeabsichtigt zurücksetzen würde (siehe Kommentar in .hero__content). */
.hero--image {
    background-image: var(--hero-gradient);
}

/* Seiten-spezifisches Hero-Hintergrundbild (Shows & Workshops) */
.hero--shows {
    background-image: var(--hero-gradient), url('../images/shows-hero.jpg');
}

/* Hero mit Video */
.hero--video {
    overflow: hidden;
}

.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: -2;
}

/* Hero mit einfarbigem Hintergrund */
.hero--solid {
    background: var(--gradient-hero);
}

/* ==================== HERO CTA SECTION ==================== */

.hero__cta {
    margin-top: var(--spacing-xl);
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .hero h1 {
        font-size: var(--font-size-6xl);
    }

    .hero__subtitle {
        font-size: var(--font-size-2xl);
        letter-spacing: var(--letter-spacing-wide);
    }
    
    .hero__cta {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: var(--font-size-5xl);
    }
	
	.hero__subtitle {
        font-size: var(--font-size-md);
        letter-spacing: var(--letter-spacing-wide);
    }
	
}