/*
 * index_v3.css
 * ------------
 * Page-specific styles for the v3 landing page (main/index_v3.html).
 *
 * Only genuinely NEW components live here – chiefly the two user-controlled
 * carousels (club slider + functions slider) and the centred CTA panel.
 * Everything else reuses the shared tokens/classes from base.css,
 * gui_components_base.css, classes_base.css, main.css and index_V2.css.
 */

/* ------------------------------------------------------------------ */
/* Shared section helpers                                              */
/* ------------------------------------------------------------------ */

.v3-lead {
    /* explanatory paragraph blocks ("Für jede Art von Verein", DSGVO …) */
    margin: var(--large-gap) var(--medium-gap);
}

/* Centred white CTA panel ("In 8 Minuten…" and "In 3 Schritten…") */
.v3-panel {
    margin: var(--large-gap) var(--medium-gap);
    padding: var(--large-gap);
    background-color: var(--white-bg);
    border-radius: 2.4rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .v3-panel > h2 {
        padding-top: 0;
    }

    .v3-panel__body {
        width: 70%;
    }

    .v3-panel .steps-list {
        text-align: left;
        width: 100%;
    }

    .v3-panel .btn-primary {
        margin-top: var(--large-gap);
    }

@media (max-width: 700px) {
    .v3-lead,
    .v3-panel {
        margin-left: var(--medium-gap);
        margin-right: var(--medium-gap);
    }

    .v3-panel {
        padding: var(--medium-gap);
        border-radius: var(--large-gap);
    }
}

/* ------------------------------------------------------------------ */
/* Slider navigation controls (shared by both carousels)              */
/* ------------------------------------------------------------------ */

.slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--medium-gap);
    margin-top: var(--medium-gap);
}

.slider-nav__btn {
    width: var(--pill-h);
    height: var(--pill-h);
    min-width: var(--pill-h);
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color-2) 0%, var(--primary-color-3) 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

    .slider-nav__btn svg {
        width: 2rem;
        height: 2rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .slider-nav__btn:hover {
        filter: brightness(1.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 20px rgba(0, 0, 0, .12);
    }

    .slider-nav__btn:active {
        transform: scale(0.94);
    }

    .slider-nav__btn:focus-visible {
        outline: 3px solid var(--primary-color-2);
        outline-offset: 3px;
    }

.slider-nav__count {
    min-width: 7rem;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* For the dark functions section the counter text must stay legible. */
.fn-section .slider-nav__count {
    color: var(--gray-bg);
}

/* ------------------------------------------------------------------ */
/* Club slider (upper) – snap-to-centre, active card is full-bleed    */
/* ------------------------------------------------------------------ */

/* Decorative scattered dots are intentionally larger than the viewport in a
   few places; clip the horizontal bleed so it never creates page scroll.
   overflow-x: clip (not hidden/auto) keeps vertical flow untouched. */
.v3-clip-x,
.club-slider,
.v3-about {
    overflow-x: clip;
}

.club-slider {
    position: relative;
}

.club-slider__stage {
    position: relative;
}

/* Scattered dots anchored to the centre of the stage, bleeding outside
   whichever card is currently centred. Sits behind the track. */
.club-slider__dots {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(clamp(300px, 35rem, 90%) + var(--large-gap) * 4);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

    .club-slider__dots svg {
        width: 100%;
        height: auto;
    }

.club-slider__track {
    list-style: none;
    padding-left: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--medium-gap);
    /* Side padding lets the first and last card reach the centre. */
    padding-inline: max(var(--medium-gap), calc(50%));
    /* Vertical padding gives the scaled-up active card room (overflow-y is
       forced to auto by overflow-x, so this prevents clipping). */
    padding-block: var(--large-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

    .club-slider__track::-webkit-scrollbar {
        display: none;
    }

    .club-slider__track.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none; /* free scrolling while dragging */
    }

.club-card {
    flex: 0 0 auto;
    width: clamp(300px, 35rem, 90%);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* Calm cards sit smaller and slightly dimmed; the centred one grows. The
       transition is what makes the size + image animate as cards reach centre. */
    transform: scale(0.84);
    /*opacity: 0.68;*/
    transition: transform 0.45s cubic-bezier(.22, .61, .36, 1), opacity 0.45s ease;
    will-change: transform;
}

.club-card__inner {
    /* framed-box look: squared edges, 1px outline, white inset around the photo */
    position: relative;
    background-color: var(--white-bg);
    border: 1px solid var(--text-color);
    padding: var(--pill-gap);
}

/* The photo always fills the frame (full-bleed) so it can scale/animate
   smoothly between the calm and centred states. */
.club-card__media {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background-color: var(--dark-gray-bg);
}

    .club-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.02); /* hide sub-pixel edges under the ken-burns */
        transition: transform 0.45s ease;
        -webkit-user-drag: none;
        user-select: none;
        pointer-events: none;
    }

/* Name (+ revealed benefit) sit as a white overlay over the bottom of the photo. */
.club-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
    padding: var(--large-gap) var(--medium-gap) var(--medium-gap);
    color:var(--text-color);
    /*background: linear-gradient(to top,
            rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, 0) 100%);*/
}

.club-card__name {
    margin: 0;
    padding: 0;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
}

.club-card__benefit {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    /* hidden on calm cards, revealed (animated) on the centred one */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(6px);
    transition: max-height 0.45s ease, opacity 0.45s ease, transform 0.45s ease;
}

/* Pen-highlight effect: inline span so background only covers text width */
.club-card__name > span,
.club-card__benefit > span {
    display: inline;
    background-color: var(--white-bg);
    padding: var(--pill-gap);
    padding-right: var(--large-gap);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    line-height: 2;
}

/* --- Active (centred) card: clearly larger, lit up, the image animates --- */
.club-card.is-active {
    transform: scale(1.12);
    opacity: 1;
    z-index: 2;
}

    .club-card.is-active .club-card__inner {
       /* border-image: linear-gradient(to bottom,
                #FF8C00 0%, #FF0037 33%, #FF0037 66%, #FF8C00 100%) 1;*/
        /*box-shadow: 0 14px 38px rgba(0, 0, 0, .28);*/
    }

    .club-card.is-active .club-card__benefit {
        max-height: 12rem;
        opacity: 1;
        transform: translateY(0);
    }

    /* slow "ken-burns" zoom keeps the centred photo alive */
    .club-card.is-active .club-card__media img {
        animation: clubKenburns 9s ease-in-out infinite alternate;
    }

@keyframes clubKenburns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.14); }
}

/* ------------------------------------------------------------------ */
/* Functions section (dark band) + functions slider (lower)           */
/* ------------------------------------------------------------------ */

.fn-section {
    /* Full-bleed dark band – same technique as .divider: a normal-flow block
       (starts at the viewport's left edge) stretched to the full viewport
       width. No left/translate, which would shift it off-centre when the
       parent is narrower than 100vw (scrollbar). */
    width: 100vw;
    background-color: var(--text-color);
    color: var(--gray-bg);
    padding: var(--large-gap) 0;
    overflow: hidden; /* contain the horizontally scrolling track */
}

    .fn-section h2 {
        color: var(--gray-bg);
    }

    .fn-section .fn-section__intro {
        color: var(--gray-bg);
        opacity: 0.92;
    }

.fn-section__head {
    padding: 0 var(--large-gap);
}

/* Representative icon row (decorative – the cards carry the real content). */
.fn-icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pill-gap);
    justify-content: center;
    margin: var(--large-gap) 0;
}

.fn-icon {
    min-width: var(--pill-h);
    height: var(--pill-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pill-gap);
    background-color: var(--white-bg);
    border-radius: calc(var(--pill-h) / 2);
    padding: 0 var(--pill-gap);
}

    .fn-icon img {
        width: calc(var(--pill-h) / 2.3);
        height: calc(var(--pill-h) / 2.3);
    }

    .fn-icon span {
        /* dark text on the white pill (the band itself is dark) */
        color: var(--text-color);
        font-weight: 700;
        padding-right: var(--small-gap);
    }

.fn-slider__track {
    display: flex;
    align-items: start;
    gap: var(--medium-gap);
    padding-inline: max(var(--medium-gap), calc(50% - 20rem));
    padding-block: var(--medium-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

    .fn-slider__track::-webkit-scrollbar {
        display: none;
    }

    .fn-slider__track.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
    }

/* Reuse the existing .section-4-card visuals, just make them snap + sit in
   a flat (non-sticky) row. The cards are white, so reset the text colour the
   dark band would otherwise inherit. */
.fn-slider__track .section-4-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    margin: 0;
    color: var(--text-color);
}

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

/* ------------------------------------------------------------------ */
/* "Über mich" – photo with scattered dots behind it                  */
/* ------------------------------------------------------------------ */

.v3-about {
    display: flex;
    flex-wrap: wrap;
    gap: var(--large-gap);
    align-items: center;
    margin: var(--large-gap) var(--medium-gap);
}

.v3-about__media {
    position: relative;
    flex: 0 0 auto;
    width: 22rem;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .v3-about__media svg {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 150%;
        height: 150%;
        transform: translate(-50%, -50%);
        z-index: 0;
        pointer-events: none;
    }

    .v3-about__media img {
        position: relative;
        z-index: 1;
        width: 16rem;
        height: 16rem;
        object-fit: cover;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 20px rgba(0, 0, 0, .12);
    }

.v3-about__text {
    flex: 1 1 30rem;
}

    .v3-about__text > h2 {
        padding-top: 0;
    }

@media (max-width: 700px) {
    .v3-about {
        margin: var(--large-gap) var(--medium-gap);
        justify-content: center;
        text-align: center;
    }
}

/* ------------------------------------------------------------------ */
/* Smooth drag-release snapping + seamless loop teleport               */
/* ------------------------------------------------------------------ */

/* While the JS glides a released card to centre, keep snapping off so the
   browser doesn't instantly jump it to the snap point first. */
.club-slider__track.is-snapping,
.fn-slider__track.is-snapping {
    scroll-snap-type: none;
}

/* During the infinite-loop teleport the active card hands over to its
   pixel-identical clone; freeze the card transitions/animation for that single
   frame so the name/benefit text reveal doesn't replay. */
.club-slider__track.is-shifting .club-card,
.club-slider__track.is-shifting .club-card__benefit,
.club-slider__track.is-shifting .club-card__media img {
    transition: none !important;
    animation: none !important;
}

/* ------------------------------------------------------------------ */
/* Reduced motion: instant snap, no scale/transition theatrics        */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .club-card,
    .club-card__benefit,
    .club-card__media img,
    .slider-nav__btn {
        transition: none;
    }

    .club-card.is-active .club-card__media img {
        animation: none;
    }

    .club-slider__track,
    .fn-slider__track {
        scroll-behavior: auto;
    }
}