/*
 * club_detail.css
 * ---------------
 * Page-specific styles for the club-type landing pages
 * (main/clubs/club_detail_base.html -> main/clubs/<slug>.html).
 *
 * Builds on highlight.css (content columns, CTA panel), index_v3.css (slider
 * controls), index_V2.css (FAQ list) and functions_detail.css (split layout,
 * hidden hero subtext). Only what those don't cover lives here.
 */

/* An optional block that the page leaves unfilled renders an element without
   any child node (see the base template). Without this rule its margins would
   still add an empty gap to the page. */
.cd-optional:empty {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Lead: intro text, trial note, CTA                                  */
/* ------------------------------------------------------------------ */

.cd-lead {
    /*margin-top: 0;*/
}

    .cd-lead > .btn-primary {
        display: inline-flex;
        align-items: center;
        min-height: var(--btn-h);
        text-decoration: none;
    }

/* ------------------------------------------------------------------ */
/* Second split: screenshots on the left while both columns share a   */
/* row. Once the columns wrap, the text stays first (DOM order).      */
/* ------------------------------------------------------------------ */

.cd-split--reverse {
    flex-direction: row-reverse;
}

/* The slide screenshots carry width/height attributes so the browser reserves
   their space before they load. The height attribute would otherwise beat the
   2:3 ratio of .section-4-card and stretch every card to 1200px. */
.cd .section-4-card > img {
    height: auto;
}

/* ------------------------------------------------------------------ */
/* "Was uns von anderen Anbietern unterscheidet"                      */
/* ------------------------------------------------------------------ */

/* Framed cards like the comparison boxes on the landing page. Flex instead of
   grid, so a shorter last row (5 cards -> 3 + 2) widens to the full width
   rather than leaving a hole. */
.cd-usps__list {
    list-style: none;
    padding: 0;
    margin: var(--medium-gap) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--medium-gap);
}

    .cd-usps__list > li {
        flex: 1 1 30rem;
        background-color: var(--white-bg);
        border: 1px solid var(--text-color);
        padding: var(--medium-gap);
    }

        .cd-usps__list > li > h3 {
            padding: 0;
        }

        .cd-usps__list > li > p {
            margin: 0;
            line-height: 1.6;
        }

/* ------------------------------------------------------------------ */
/* Numbered steps                                                     */
/* ------------------------------------------------------------------ */

/* A real <ol> (with role="list", since Safari drops the list semantics once
   list-style is none); the visible number comes from a CSS counter. The circle
   uses the button look - gradient ring, white fill, dark digit - because white
   text on the orange gradient would fail the contrast minimum. */
.cd-steps__list {
    list-style: none;
    padding: 0;
    margin: var(--medium-gap) 0 0;
    counter-reset: cd-step;
    display: flex;
    flex-wrap: wrap;
    gap: var(--medium-gap) var(--large-gap);
}

    .cd-steps__list > li {
        counter-increment: cd-step;
        flex: 1 1 24rem;
    }

        .cd-steps__list > li::before {
            content: counter(cd-step);
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--pill-h);
            aspect-ratio: 1;
            margin-bottom: var(--pill-gap);
            border-radius: 50%;
            border: 4px solid transparent;
            background: linear-gradient(var(--white-bg), var(--white-bg)) padding-box,
                        linear-gradient(35deg, var(--primary-color-2) 15%, var(--primary-color-3) 100%) border-box;
            box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
            font-size: 2rem;
            font-weight: 800;
        }

        .cd-steps__list > li > h3 {
            padding: 0;
        }

        .cd-steps__list > li > p {
            margin: 0;
            line-height: 1.6;
        }

/* ------------------------------------------------------------------ */
/* FAQ                                                                */
/* ------------------------------------------------------------------ */

/* The answer sits in a wrapper that carries the schema.org Answer item, so the
   paragraph rule of index_V2.css (.faq-item > p) needs this twin. */
.faq-item > .faq-answer > p {
    padding: 0 0 var(--medium-gap) 0;
    margin: 0;
    line-height: 1.7;
}

/* ------------------------------------------------------------------ */
/* "Mehr über die Vereinsapp erfahren"                                */
/* ------------------------------------------------------------------ */

.cd-more__list {
    list-style: none;
    padding: 0;
    margin: var(--medium-gap) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pill-gap);
}