/*
 * functions_detail.css
 * --------------------
 * Page-specific styles for the four function detail pages
 * (main/functions_detail_base.html -> functions_events / _booking /
 * _management / _privacy).
 */

/* The design goes straight from the hero marquee into the first text section,
   so the (empty) hero subtext block below the divider must not take up space. */
.hero-subtext {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Vertical rhythm                                                    */
/* ------------------------------------------------------------------ */

.highlight-content,
.highlight-benefits {
    margin: var(--large-gap) 0;
}

    .highlight-content > h2 {
        margin-top: var(--d-large-gap);
    }

        .highlight-content > h2:first-child {
            margin-top: 0;
        }

    .highlight-content > h3 {
        padding-top: var(--large-gap);
    }

/* ------------------------------------------------------------------ */
/* "So funktioniert ..." prose left, illustration right               */
/* ------------------------------------------------------------------ */

.fd-split {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--large-gap);
    /* same side inset as .highlight-content, applied once for both columns */
    padding: 0 var(--large-gap);
}

    /* Inside the split the prose keeps its .highlight-content typography but
       neither its own horizontal padding (.fd-split provides it) nor the
       section margins, which would push the column out of line with the
       carousel beside it. */
    .fd-split .highlight-content {
        margin: 0;
        padding: 0;
    }

/* The oversized grow factor keeps all the spare width in the prose column, so
   the aside stays exactly one card wide while both share a row. */
.fd-split__main {
    flex: 999 1 40rem;
    min-width: 0; /* let long words wrap instead of stretching the column */
}

/* Once it wraps it is alone on its line and grows to the full width; the
   slider inside stays card-sized and centred. */
.fd-split__aside {
    flex: 1 1 40rem;
    max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Illustration carousel of narrow aside                              */
/* ------------------------------------------------------------------ */

/* Never wider than a card, and centred once the aside spans a full row. */
.fd-aside-slider {
    max-width: 40rem;
    margin-inline: auto;
}

/* The homepage version centres its cards inside a full-bleed dark band; in a
   40rem rail that side padding would just leak a gap, and the card must fill
   the track so exactly one is visible at a time. */
.fd-aside-slider .fn-slider__track {
    padding-inline: 0;
    padding-block: 0;
}

.fd-aside-slider .section-4-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 700px) {
    .fd-split {
        padding: 0 var(--medium-gap);
    }

    .fd-aside-slider {
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/* "Typische Einsatzszenarien"                                        */
/* ------------------------------------------------------------------ */

.fd-scenarios .club-card__overlay {
    max-height: 100%;
    overflow: hidden;
}

/* On the landing page a club benefit are very few lines, so the white
   "pen highlight" is drawn per line. A scenario is several sentences, which
   would turn into a stack of stripes --> We use a solid block instead */
.fd-scenarios .club-card__benefit {
    font-size: 1.6rem;
    min-height: 0;
}

    .fd-scenarios .club-card__benefit > span {
        display: block;
        padding: var(--pill-gap);
        line-height: 1.4;
    }

/* Room for the full scenario text (the 12rem default only fits one line). */
.fd-scenarios .club-card.is-active .club-card__benefit {
    max-height: 30rem;
}