/* Aktionsbanner im Hero (ersetzt die Videokarte, siehe hero/actionbanner.php).
   Wird nur geladen, wenn der Banner im Template-Backend aktiv ist. */

.club-hero__banner-position[hidden] {
    display: none !important;
}

/* Desktop/Tablet quer: gleiche Verankerung wie .club-hero__video-position,
   aber ueber die volle Hoehe zentriert; unten bleibt Luft, weil die
   Statistik-Kacheln (.club-statistics, negativer margin-top) ein Stueck in den
   Hero-Rand hineinragen. */
.club-hero--has-banner {
    min-height: 28rem;
}

.club-hero--has-banner .club-hero__content {
    padding-right: min(46vw, 38rem);
}

.club-hero__banner-position {
    position: absolute;
    inset: 1rem 0 3.5rem;
    z-index: 1;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

.club-hero__banner {
    width: clamp(22rem, 42vw, 36rem);
    max-width: 100%;
    max-height: 100%;
    color: #fff;
    pointer-events: auto;
}

.club-hero__banner-panel {
    max-width: 100%;
}

.club-hero__banner-panel[hidden] {
    display: none;
}

.club-hero__banner img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* .club-hero p / h1 / .club-hero__content * setzen im Hero pauschal Weiss,
   Rand und Schriftgroesse - fuer frei gestaltete Artikelinhalte zuruecknehmen,
   damit der Artikel selbst bestimmt (Spezifitaet bewusst hoeher als .club-hero p). */
.club-hero .club-hero__banner p {
    max-width: none;
    margin: 0 0 0.5rem;
    font-size: inherit;
    color: inherit !important;
}

.club-hero .club-hero__banner p:last-child {
    margin-bottom: 0;
}

/* Tablet/Mobile: Banner steht als eigener Block nach den Statistik-Kacheln
   (Pendant zu .club-hero__video-position--mobile). */
.club-hero__banner-position--mobile {
    position: static;
    inset: auto;
    display: flex;
    justify-content: center;
    /* Randlos: .club-container hat sonst 1rem Rand je Seite (width: 100% - 2rem) */
    width: 100%;
    margin: 1.5rem 0 0;
}

/* Der Banner steht direkt vor dem Hauptinhalt: dessen oberes Padding (3rem)
   wuerde sonst eine grosse Leerflaeche unter dem Banner erzeugen. */
.club-hero__banner-position--mobile + .club-main {
    padding-top: 0;
}

/* padding-top: 2rem kommt als Inline-Style aus layouts/sectionblock/dispatcher.php,
   daher !important (anders nicht ueberschreibbar). */
.club-hero__banner-position--mobile + .club-main .club-sections-wrapper {
    padding-top: 1rem !important;
}

.club-hero__banner-position--mobile .club-hero__banner {
    width: 100%;
    max-height: none;
    /* Der Hero ist hell/dunkel nicht garantiert - Banner bringt eigenen Grund mit. */
    color: var(--club-text, #17202a);
}

@media (max-width: 991.98px) {
    .club-hero--has-banner {
        min-height: 320px;
    }

    .club-hero--has-banner .club-hero__content {
        padding-right: 0;
    }
}

/* Countdown: rein aus Inline-Elementen, damit er auch in Absaetzen valide ist.
   Farben/Hintergrund kommen als --banner-cd-* aus dem Template-Backend. */
.club-countdown {
    --cd-num-size: 1.75rem;
    --cd-label-size: 0.75rem;
    --cd-unit-width: 3.9rem;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-width: 100%;
}

.club-hero__banner--sm .club-countdown {
    --cd-num-size: 1.25rem;
    --cd-label-size: 0.65rem;
    --cd-unit-width: 3rem;
    gap: 0.35rem;
}

.club-hero__banner--lg .club-countdown {
    --cd-num-size: 2.4rem;
    --cd-label-size: 0.85rem;
    --cd-unit-width: 5rem;
    gap: 0.65rem;
}

.club-countdown__unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: var(--cd-unit-width);
    padding: 0.4rem 0.35rem;
    border: 2px solid var(--banner-cd-border, #f2c14e);
    border-radius: var(--tpl-radius, 0.5rem);
    background: var(--banner-cd-bg, rgba(20, 16, 10, 0.55));
    line-height: 1.1;
    text-align: center;
}

.club-countdown__num {
    font-size: var(--cd-num-size);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--banner-cd-num, #fff);
}

.club-countdown__label {
    font-size: var(--cd-label-size);
    color: var(--banner-cd-label, #fff);
}

/* Weicher Wechsel zwischen Countdown- und Verkaufs-Artikel; nur ohne
   Bewegungsreduzierung - sonst erscheint der neue Artikel sofort. */
@media (prefers-reduced-motion: no-preference) {
    .club-hero__banner-panel.is-switched-in {
        animation: club-banner-fade-in 0.6s ease both;
    }
}

@keyframes club-banner-fade-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}