/*
 * File: cmp-podium.css
 * Munich Musicians DB - Competition (CMP_) Ergebnis-Podium
 *
 * Die EINE Podiums-Komponente: Medaillen-Treppe 2-1-3 mit Portraits, Punkten und
 * Stufen. Bis 2026-09-06 stand sie als <style>-Block in bm-event-detail.php und war
 * damit an die Event-Detailseite gefesselt; die Alltime-Detailseite baute sich
 * daneben ein eigenes Balken-Board - zwei Ergebnis-Ansichten, zwei Aussehen
 * (User 2026-09-06: "MACH DAS IDENTISCH ZUM VIEW IM EVENT-DETAIL"). Jetzt laden
 * BEIDE Seiten diese Datei; wer hier aendert, aendert beide.
 *
 * Markup (Event-Detail baut es in bm-event-detail.js, die Alltime-Detailseite
 * serverseitig in cmp-alltime-charts.php - Reihenfolge der Stufen IMMER 2, 1, 3):
 *   <div class="cmp-podium">
 *     <div class="cmp-podium-step cmp-podium-1">
 *       <div class="cmp-podium-medal">🥇</div>
 *       <a class="cmp-podium-act-link"><img class="cmp-podium-thumb"><div class="cmp-podium-act">Name</div></a>
 *       <div class="cmp-podium-points">235 Punkte</div>
 *       <div class="cmp-podium-base">#1</div>
 *     </div> …
 *
 * Farben ausschliesslich ueber Tokens (--mmdb-medal-* in theme.css).
 */

/* Feierliches Ergebnis-Podium (User 2026-08-06): Medaillen-Treppe 2-1-3 */
.cmp-podium {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 12px; margin: 18px 0 14px; flex-wrap: wrap;
}
.cmp-podium-step {
    flex: 1 1 0; max-width: 220px; min-width: 130px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    text-align: center;
}
.cmp-podium-medal { font-size: 2.2rem; line-height: 1; margin-bottom: 6px; }
.cmp-podium-1 .cmp-podium-medal { font-size: 3rem; }
.cmp-podium-act { font-weight: bold; font-size: 1rem; overflow-wrap: anywhere; }
.cmp-podium-1 .cmp-podium-act { font-size: 1.15rem; }
.cmp-podium-points { color: var(--mmdb-ink-muted); font-size: 0.82rem; margin: 4px 0 8px; }
/* Herleitung der Punkte bei Gleichstand: "8,00 + 6 Tie-Break" (User 2026-08-28).
   Bewusst leise - die SUMME ist die Aussage, die Herleitung erklaert sie nur. */
.cmp-tie-note { color: var(--mmdb-warm-deep); font-size: 0.74rem; margin: -4px 0 8px; }
.cmp-results-table .cmp-tie-note { margin: 2px 0 0; text-align: right; }
/* Platznummer in INK, nicht in Weiss (Kontrast-Waechter 2026-09-06): Weiss auf Gold
   ergab 1,86:1, auf Silber 2,13:1, auf Bronze 2,40:1 - die Zahl war praktisch nicht
   zu lesen. Der Fehler steckte immer schon in der Komponente, wurde aber nie
   gemessen: der Abzug der Event-Detailseite rendert das Podium nicht (es entsteht
   per JS aus API-Daten). Erst die serverseitig gerenderte Alltime-Detailseite hat
   es dem Waechter vorgelegt. Ink liegt hier bei 5,07-9,65:1. */
.cmp-podium-base {
    width: 100%; border-radius: 8px 8px 0 0; color: var(--mmdb-ink); font-weight: bold;
    font-size: 1.1rem; padding-top: 8px;
    background: linear-gradient(135deg, var(--mmdb-ink-faint), var(--mmdb-ink-muted));
}
.cmp-podium-1 .cmp-podium-base {
    height: 74px; background: linear-gradient(135deg, var(--mmdb-medal-gold), var(--mmdb-medal-gold-deep));
    box-shadow: 0 4px 14px var(--mmdb-medal-gold-glow); font-size: 1.35rem;
}
.cmp-podium-2 .cmp-podium-base { height: 52px; background: linear-gradient(135deg, var(--mmdb-medal-silver), var(--mmdb-ink-faint)); }
.cmp-podium-3 .cmp-podium-base { height: 38px; background: linear-gradient(135deg, var(--mmdb-warm), var(--mmdb-medal-bronze-deep)); }
@media (max-width: 560px) {
    .cmp-podium { gap: 8px; }
    .cmp-podium-step { min-width: 96px; }
    .cmp-podium-act { font-size: 0.9rem; }
    .cmp-podium-1 .cmp-podium-act { font-size: 1rem; }
}

/* User 2026-08-06: Podium mit klickbaren Thumbnails + leerer Platz-3-Stufe */
.cmp-podium-act-link {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; color: inherit; margin-bottom: 4px;
}
a.cmp-podium-act-link:hover .cmp-podium-act { color: var(--mmdb-accent-deep); text-decoration: none; }
div.cmp-podium-act-link { cursor: default; }
.cmp-podium-thumb {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--mmdb-line); background: var(--mmdb-card);
}
.cmp-podium-1 .cmp-podium-thumb { width: 84px; height: 84px; border-color: var(--mmdb-medal-gold); }
.cmp-podium-2 .cmp-podium-thumb { border-color: var(--mmdb-medal-silver); }
.cmp-podium-3 .cmp-podium-thumb { border-color: var(--mmdb-medal-bronze); }
.cmp-podium-thumb-placeholder {
    width: 64px; height: 64px; border-radius: 50%; background: var(--mmdb-neutral-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--mmdb-ink-faint); border: 3px solid var(--mmdb-line);
}
.cmp-podium-1 .cmp-podium-thumb-placeholder { width: 84px; height: 84px; border-color: var(--mmdb-medal-gold); }
.cmp-podium-step.cmp-podium-empty { opacity: 0.45; }
.cmp-podium-empty-slot { color: var(--mmdb-ink-faint); font-size: 1.2rem; padding: 10px 0 14px; }