/*
 * Kacheln der Dokumentations-Uebersicht (Planner → Support → Dokumentation).
 *
 * Ohne diese Regeln richtet sich jede Kachel nach der Laenge ihres eigenen
 * Textes, und die Knoepfe einer Reihe stehen auf verschiedenen Hoehen. Das
 * Raster streckt seine Felder bereits — die Kachel muss die Hoehe nur
 * annehmen und ihre Fusszeile nach unten schieben.
 *
 * Selektoren auf Filaments stabilen Hook-Klassen; registriert via
 * FilamentAsset im DocumentationServiceProvider, publiziert nach
 * public/css/documentation/ (php artisan filament:assets).
 */
.clubo-doc-card {
    height: 100%;
}

.clubo-doc-card > .fi-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Filament haengt die Fusszeile in eine Zwischenstufe; ohne diese Regel
   bliebe `margin-top: auto` darin wirkungslos (Block-Kontext) und die
   Knoepfe einer Reihe staenden auf verschiedenen Hoehen. */
.clubo-doc-card > .fi-section > .fi-section-content-ctn {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.clubo-doc-card .fi-section-footer {
    margin-top: auto;
}

/* Anleitungsvideo: volle Breite, ruhige Ecken.
   `height: auto` ist Pflicht — ohne die Angabe behaelt der Browser die
   Originalhoehe bei und quetscht das Bild in die Breite. */
.clubo-doc-video {
    width: 100%;
    height: auto;
    max-height: 32rem;
    object-fit: contain;
    border-radius: 0.75rem;
    background: #000;
}

/* Kurzer Ablauf: kompakter als die Kapitel-Kacheln, ohne Fusszeile. */
.clubo-doc-step .fi-section-header {
    padding-bottom: 0.5rem;
}

/* Bild eines Schnellstart-Schritts: skaliert immer im Seitenverhaeltnis. */
.clubo-doc-shot {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-top: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(228 228 231);
}

:is(.dark) .clubo-doc-shot {
    border-color: rgb(255 255 255 / 0.1);
}