/*
=====================================================
 EF22 FRAMEWORK
 HERO.CSS
 Version 4.0
=====================================================
*/

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

.hero {

    position: relative;

    width: 100%;

    overflow: hidden;

    border:
        1px solid
        rgba(111, 191, 115, .35);

    border-radius:
        var(--radius-xl);

    background:
        var(--color-background-dark);

    box-shadow:
        0 0 24px rgba(111, 191, 115, .08),
        0 4px 0 rgba(0, 0, 0, .70),
        0 8px 14px rgba(0, 0, 0, .35),
        0 18px 32px rgba(0, 0, 0, .22);

}


/* ==========================================
   MEDIA
========================================== */

.hero-media {

    width: 100%;

    aspect-ratio: 16 / 9;

    background-position: center;

    background-repeat: no-repeat;

    background-size: contain;

    background-color:
        var(--color-background-dark);

}


/* ==========================================
   CONTENT AREA
========================================== */

.hero-content-area {

    width: 100%;

}


/* ==========================================
   CONTENT
========================================== */

.hero-content {

    display: flex;

    flex-direction: column;

}


/* ==========================================
   VERSTECKTE ELEMENTE
========================================== */

.hero [hidden] {

    display: none !important;

}


/* ==========================================
   KALENDER
========================================== */

.hero--calendar {

    background:
        var(--color-background-dark);

    cursor: pointer;

}


/* ==========================================
   KALENDER MEDIA
========================================== */

.hero--calendar .hero-media {

    aspect-ratio: 16 / 9;

}


/* ==========================================
   KALENDER CONTENT AREA
========================================== */

.hero--calendar .hero-content-area {

    background:
        var(--color-background-medium);

    color:
        var(--color-text-on-dark);

}


/* ==========================================
   KALENDER CONTENT
========================================== */

.hero--calendar .hero-content {

    gap:
        var(--space-md);

    padding-top:
        var(--space-lg);

    padding-bottom:
        var(--space-lg);

}


/* ==========================================
   KALENDER META
========================================== */

.hero--calendar .hero-meta {

    display: flex;

    align-items: center;

    gap:
        var(--space-sm);

    flex-wrap: wrap;

    margin-top:
        var(--space-sm);

    margin-bottom:
        var(--space-sm);

}


/* ==========================================
   KALENDER BADGE
========================================== */

.hero--calendar .hero-badge {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    height: 36px;

    padding:
        0
        var(--space-md);

    border:
        2px solid
        var(--color-primary);

    border-radius: 999px;

    color:
        var(--color-primary);

    font-size:
        var(--font-size-xs);

    font-weight: 700;

    line-height: 1;

    letter-spacing: .12em;

    text-transform: uppercase;

    white-space: nowrap;

}


/* ==========================================
   KALENDER COUNTDOWN
========================================== */

.hero--calendar .hero-countdown {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    height: 36px;

    padding:
        0
        var(--space-md);

    border:
        2px solid
        var(--color-border-strong);

    border-radius: 999px;

    background:
        var(--color-background-dark);

    color:
        var(--color-text-on-dark);

    font-size:
        var(--font-size-xs);

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

}


/* ==========================================
   KALENDER TITEL
========================================== */

.hero--calendar .hero-title {

    margin: 0;

    color:
        var(--color-text-on-dark);

    font-size: clamp(
        1.75rem,
        8vw,
        2.4rem
    );

    font-weight: 700;

    line-height: 1.1;

    text-wrap: balance;

}


/* ==========================================
   KALENDER INFO
========================================== */

.hero--calendar .hero-info {

    display: flex;

    flex-direction: column;

    gap:
        var(--space-sm);

}


/* ==========================================
   KALENDER INFO ITEM
========================================== */

.hero--calendar .hero-item {

    display: flex;

    align-items: center;

    gap:
        var(--space-sm);

    min-height: 36px;

    color:
        var(--color-text-on-dark);

    font-size:
        var(--font-size-lg);

    font-weight: 500;

}


/* ==========================================
   KALENDER ICON
========================================== */

.hero--calendar .hero-icon {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--color-background-dark);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-sm);

}


/* ==========================================
   KALENDER HINWEIS
========================================== */

.hero--calendar .hero-hint {

    align-self: center;

    margin-top:
        var(--space-md);

    color:
        var(--color-text-muted-on-dark);

    font-size:
        var(--font-size-xs);

    font-weight: 600;

    text-align: center;

}


/* ==========================================
   KALENDER INTERAKTION
========================================== */

.hero--calendar:focus-visible {

    outline:
        2px solid
        var(--color-primary);

    outline-offset: 3px;

}


/* ==========================================
   STARTSEITE, ÜBER UNS, ZUGKÖNIG
   Bild, darunter Überschrift, Text und
   (Startseite) Button
========================================== */

.hero--home .hero-content-area,
.hero--about .hero-content-area,
.hero--king .hero-content-area {

    background:
        var(--color-background-medium);

    color:
        var(--color-text-on-dark);

}

.hero--home .hero-content,
.hero--about .hero-content,
.hero--king .hero-content {

    align-items: flex-start;

    gap:
        var(--space-md);

    padding-top:
        var(--space-lg);

    padding-bottom:
        var(--space-lg);

}

.hero--home .hero-meta:not(:has(> :not([hidden]))),
.hero--about .hero-meta:not(:has(> :not([hidden]))),
.hero--king .hero-meta:not(:has(> :not([hidden]))) {

    display: none;

}

.hero--home .hero-subtitle,
.hero--about .hero-subtitle,
.hero--king .hero-subtitle {

    margin: 0;

    font-size: clamp(
        1.5rem,
        6vw,
        2.2rem
    );

    font-weight: 700;

    line-height: 1.15;

}

.hero--home .hero-description,
.hero--about .hero-description,
.hero--king .hero-description {

    color:
        var(--color-text-muted-on-dark);

}

.hero--home .hero-button {

    align-self: stretch;

}


/* ==========================================
   STARTSEITE – HERO-POOL
   Bild oder Video aus components/hero-pool.php.
   Der Hero richtet sich nach dem Seitenverhältnis
   des Inhalts (aspect-ratio setzt hero.php), wird
   aber nie höher als der sichtbare Bereich unter
   dem großen Header. Reicht der Platz nicht, wird
   das Bild niedriger und oben/unten beschnitten –
   bei fit "contain" ganz gezeigt, mit dunklem Rand.
========================================== */

.hero--pool {

    display: flex;

    flex-direction: column;

    max-height: calc(100vh - var(--header-height) - (2 * var(--space-lg)));

    max-height: calc(100svh - var(--header-height) - (2 * var(--space-lg)));

}

.hero--home .hero-media--pool {

    position: relative;

    flex: 0 1 auto;

    min-height: 0;

    overflow: hidden;

}

.hero-media--pool img,
.hero-media--pool video {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.hero-media--contain img,
.hero-media--contain video {

    object-fit: contain;

}

.hero--pool .hero-content-area {

    flex: none;

}

/* ==========================================
   STARTSEITE – AB TABLET
========================================== */

@media (min-width: 600px) {

    .hero--home .hero-button {

        align-self: flex-start;

    }

}


/* ==========================================
   ÜBER UNS
   Foto füllt den Bildbereich: 3:2 auf dem
   Smartphone (Desktop siehe unten)
========================================== */

.hero--about .hero-media {

    aspect-ratio: 3 / 2;

    background-size: cover;

}


/* ==========================================
   ZUGKÖNIG
   Plakat im Hochformat: ganz sichtbar (contain),
   3:4 auf dem Smartphone (Desktop siehe unten)
========================================== */

.hero--king .hero-media {

    aspect-ratio: 3 / 4;

    background-size: contain;

}


/* ==========================================
   DESKTOP (ab 900 px)
   Medien im Originalformat: nichts wird
   beschnitten, keine breiten Ränder (entschieden
   03.11.). Und nie höher als der sichtbare
   Bereich unter dem großen Header.
   --hero-ratio  Seitenverhältnis des Bildes
                 (hero.php; beim Termin hero.js)
   --hero-max-h  sichtbarer Bereich
   Smartphone und Tablet bleiben wie oben.
========================================== */

@media (min-width: 900px) {

    .hero {

        --hero-max-h: calc(100vh - var(--header-height) - (2 * var(--space-lg)));

        --hero-max-h: calc(100svh - var(--header-height) - (2 * var(--space-lg)));

        --hero-media-max-w: min(56vw, 760px);

    }

    /* ----- Startseite: Karte so breit wie das Bild
             in der erlaubten Höhe, mittig ----- */

    .hero--pool {

        --hero-pool-content-h: 96px;   /* Button-Bereich unter dem Bild */

        width: min(
            100%,
            calc((var(--hero-max-h) - var(--hero-pool-content-h)) * var(--hero-ratio, 1.7778))
        );

        max-height: none;

        margin-inline: auto;

    }

    .hero--pool .hero-media--pool {

        flex: none;

    }

    /* ----- Über uns, Zugkönig, Termine: Bild links
             im Originalformat, Text rechts ----- */

    .hero--about,
    .hero--king,
    .hero--calendar {

        display: grid;

        grid-template-columns: auto minmax(0, 1fr);

    }

    .hero--about .hero-media,
    .hero--king .hero-media,
    .hero--calendar .hero-media {

        width: min(
            var(--hero-media-max-w),
            calc(var(--hero-max-h) * var(--hero-ratio, 1.7778))
        );

        aspect-ratio: var(--hero-ratio, 1.7778);

        align-self: center;

        background-size: contain;

    }

    .hero--about .hero-content-area,
    .hero--king .hero-content-area,
    .hero--calendar .hero-content-area {

        display: flex;

        align-items: center;

    }

}