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

/* ==========================================
   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;

}