/*
 * FVF-Spielervorstellung -- eigenstaendiges CSS (laeuft auf jedem Design),
 * nutzt die Theme-Akzentfarbe (--color-primary) mit FVF-rotem Fallback.
 * Die grosse Trikotnummer ist bewusst dieselbe visuelle Handschrift wie
 * die nummerierten Menuepunkte der Navigation -- EIN Zahlenmotiv zieht
 * sich durch die ganze Seite. Bewegung nur ueber transform/opacity.
 */
.widget-fvf-spielervorstellung {
    --fvfp-red: var(--color-primary, #C8102E);
    --fvfp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    max-width: 76rem;
    margin: 0 auto;
    padding: var(--wl-section-spacing, 4rem) 1.5rem;
}

.fvf-spieler__head { max-width: 40rem; margin: 0 auto 2.5rem; text-align: center; }

.fvf-spieler__eyebrow {
    display: block;
    color: var(--fvfp-red);
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 0.75rem;
}

.fvf-spieler__title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
}

.fvf-spieler__subtitle { margin: 0.75rem 0 0; opacity: 0.7; line-height: 1.6; }

/* Mehrere Gruppen untereinander (Torwart/Abwehr/Mittelfeld/Angriff,
   zuletzt Trainer & Betreuer) statt eines einzigen Rasters -- derselbe
   Aufbau wie beim allgemeinen player-card-Modul, nur in eigener Optik. */
.fvf-player-group + .fvf-player-group { margin-top: 2.5rem; }

.fvf-player-group__title {
    margin: 0 0 1.25rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fvfp-red);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(200, 16, 46, 0.15);
}

/* Nutzerwunsch (22.10.2026): "die Leute sollen immer gleich gross sein,
   egal wie viel in einer Reihe sind" -- mit "auto-fit" streckten sich die
   Karten einer KURZEN Gruppe (z.B. die Alten Herren mit nur einem
   Spieler) ueber die volle Breite und wurden dadurch riesig, waehrend
   dieselbe Karte in einer vollen Gruppe (z.B. 23 Feldspieler) klein
   blieb -- jede Gruppe (Torwart/Abwehr/... je eigenes Grid, siehe
   render.php) bekam ihre eigene Kartengroesse. "auto-fill" behaelt
   stattdessen die vom Container errechnete Spaltenbreite bei und laesst
   ungenutzte Spalten einfach leer, statt vorhandene Karten zu dehnen --
   dieselbe Breite in jeder Gruppe, ob 1 oder 23 Karten drin stehen. */
.fvf-player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.75rem 1.5rem;
}

.fvf-player-card {
    position: relative;
    border-radius: var(--wl-radius, 1rem);
    overflow: visible;
    transition: transform 240ms var(--fvfp-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .fvf-player-card:hover { transform: translateY(-5px); }
    .fvf-player-card:hover .fvf-player-card__photo { transform: scale(1.06); }
    .fvf-player-card:hover .fvf-player-card__number {
        transform: translateY(-50%) scale(1.1) rotate(-6deg);
    }
}

/* Eigener Rahmen UM das Foto, nicht das Foto selbst: .media rundet die
   Ecken per overflow:hidden (noetig fuers Zuschneiden von Foto/Streifen)
   -- die Nummer haengt bewusst UEBER den unteren Rand hinaus und wuerde
   von genau diesem overflow:hidden mit abgeschnitten, saesse sie
   innerhalb von .media selbst. Deshalb Geschwister statt Kind. */
.fvf-player-card__frame {
    position: relative;
}

.fvf-player-card__media {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--wl-radius, 1rem);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 36px -22px rgba(24, 21, 18, 0.4);
}

.fvf-player-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    display: block;
    transition: transform 320ms var(--fvfp-ease-out);
}

/* Kein Foto hinterlegt: Trikot-Streifen statt leerem Feld -- dieselbe
   Handschrift wie die Mannschaftskarten (fvf-mannschaften), nur hier
   steht die riesige Initiale fuer das Gesicht, das (noch) fehlt. */
.fvf-player-card--stripes .fvf-player-card__media {
    background: repeating-linear-gradient(125deg, var(--fvfp-red) 0 20px, #fff 20px 40px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fvf-player-card--stripes .fvf-player-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(20, 18, 16, 0.3), rgba(20, 18, 16, 0.55));
}

.fvf-player-card__initial {
    position: relative;
    z-index: 1;
    font-size: 4rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* Die Trikotnummer -- das eigentliche Herzstueck der Karte, haengt
   bewusst UEBER den unteren Rand des Fotos hinaus (dieselbe "Marke
   ragt heraus"-Geste wie die News-Datumsstempel), statt brav daneben zu
   stehen. */
.fvf-player-card__number {
    position: absolute;
    left: 1rem;
    bottom: 0;
    transform: translateY(50%);
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fvfp-red);
    color: #fff;
    font-weight: 900;
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    border: 3px solid #fff;
    box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.45);
    transition: transform 240ms var(--fvfp-ease-out);
}

.fvf-player-card__body {
    padding: 1.6rem 0.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.fvf-player-card__name { margin: 0; font-size: 1.05rem; font-weight: 800; }

.fvf-player-card__position {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fvfp-red);
}

.fvf-player-card__text { margin: 0.2rem 0 0; font-size: 0.88rem; line-height: 1.55; opacity: 0.75; }

.fvf-player-card__stats {
    display: flex;
    gap: 1.1rem;
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.fvf-player-card__stats span {
    display: flex;
    flex-direction: column;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

.fvf-player-card__stats strong {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--fvfp-ink, inherit);
    opacity: 1;
}

/* ── Scroll-Einblenden: gestaffelt, nur wenn Design > Feinschliff aktiv ── */

html.wl-animate .fvf-player-grid > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 420ms var(--fvfp-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 420ms var(--fvfp-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

html.wl-animate .widget.wl-in-view .fvf-player-grid > * { opacity: 1; transform: none; }

html.wl-animate .widget.wl-in-view .fvf-player-grid > *:nth-child(1) { transition-delay: 0ms; }
html.wl-animate .widget.wl-in-view .fvf-player-grid > *:nth-child(2) { transition-delay: 50ms; }
html.wl-animate .widget.wl-in-view .fvf-player-grid > *:nth-child(3) { transition-delay: 100ms; }
html.wl-animate .widget.wl-in-view .fvf-player-grid > *:nth-child(4) { transition-delay: 150ms; }
html.wl-animate .widget.wl-in-view .fvf-player-grid > *:nth-child(5) { transition-delay: 200ms; }
html.wl-animate .widget.wl-in-view .fvf-player-grid > *:nth-child(n+6) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
    html.wl-animate .fvf-player-grid > * {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .fvf-player-card:hover,
    .fvf-player-card:hover .fvf-player-card__photo,
    .fvf-player-card:hover .fvf-player-card__number {
        transform: none;
    }
}

@media (max-width: 420px) {
    .fvf-player-card__initial { font-size: 3rem; }
}