/* ===== OO Card =====
   Varianten: filled (Standard), outlined, flat, ghost
   ===================== */

.oo-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--oo-radius-md); /* Fallback; Component überschreibt per inline style */
    font-family: var(--oo-font-family);
    font-size: var(--oo-font-size-md);
    color: var(--oo-color-text);
    transition: box-shadow var(--oo-transition), background var(--oo-transition);
}

/* ── Varianten ─────────────────────────────────────────────────────── */

.oo-card--filled {
    background: var(--oo-color-surface);
    border: var(--oo-border-width) solid var(--oo-color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.oo-card--outlined {
    background: transparent;
    border: var(--oo-border-width) solid var(--oo-color-border-strong);
    box-shadow: none;
}

.oo-card--flat {
    background: var(--oo-color-surface);
    border: none;
    box-shadow: none;
}

.oo-card--ghost {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* ── Klickbar ──────────────────────────────────────────────────────── */

.oo-card--clickable {
    cursor: pointer;
    user-select: none;
}

.oo-card--clickable:hover.oo-card--filled,
.oo-card--clickable:hover.oo-card--flat {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
    background: color-mix(in srgb, var(--oo-color-surface) 96%, var(--oo-gray-300));
}

.oo-card--clickable:hover.oo-card--outlined {
    border-color: var(--oo-primary);
}

.oo-card--clickable:hover.oo-card--ghost {
    background: color-mix(in srgb, var(--oo-gray-200) 40%, transparent);
}

.oo-card--clickable:focus-visible {
    outline: 2px solid var(--oo-primary);
    outline-offset: 2px;
}

/* ── Bild ──────────────────────────────────────────────────────────── */

.oo-card__image {
    line-height: 0;
    flex-shrink: 0;
}

    .oo-card__image img {
        width: 100%;
        display: block;
        object-fit: cover;
    }

/* ── Header ────────────────────────────────────────────────────────── */

/* flex-wrap: Bei wenig Platz (Handy) rutscht HeaderContent unter Titel und Untertitel,
   statt diese auf wenige Zeichen je Zeile zu quetschen (Mindestbreite an .oo-card__header-text). */
.oo-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--oo-space-2);
    padding: var(--oo-space-4);
    border-bottom: var(--oo-border-width) solid var(--oo-color-border);
}

/* Besteht die Card nur aus dem Header, läge seine Linie doppelt über dem Rahmen der Card. */
.oo-card__header:last-child {
    border-bottom: none;
}

/* Header mit Inhalt darunter: getönt wie der Footer, damit sich Kopf und Inhalt auch farblich trennen. Die oberen Ecken
   übernimmt er von der Card, sonst stünde die Fläche eckig über dem runden Rahmen. Ein Bild darüber hat seine eigenen. */
.oo-card--filled > .oo-card__header:not(:last-child),
.oo-card--outlined > .oo-card__header:not(:last-child) {
    background: color-mix(in srgb, var(--oo-color-surface) 50%, var(--oo-gray-100));
}

.oo-card > .oo-card__header:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.oo-card--flat .oo-card__header,
.oo-card--ghost .oo-card__header {
    border-bottom-color: transparent;
}

.oo-card__icon {
    font-size: 1.4em;
    flex-shrink: 0;
    color: var(--oo-primary);
    margin-top: 0.05em;
}

.oo-card__header-text {
    flex: 1;
    min-width: min(12rem, 100%);
}

.oo-card__header-extra {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--oo-space-1);
}

.oo-card__title {
    font-weight: 600;
    font-size: var(--oo-font-size-md);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Titel mit TitleContent (etwa eine Badge) in einer Zeile; der Titel kürzt, der Zusatz behält seine Breite. */
.oo-card__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--oo-space-1) var(--oo-space-2);
    min-width: 0;
}

.oo-card__title-row > .oo-card__title {
    min-width: 0;
}

.oo-card__subtitle {
    font-size: var(--oo-font-size-sm);
    color: var(--oo-color-text-subtle);
    margin-top: 0.1em;
    line-height: 1.3;
    overflow-wrap: anywhere; /* lange Wörter/Code in schmalen Cards umbrechen statt überlaufen */
}

/* ── Body ──────────────────────────────────────────────────────────── */

.oo-card__body {
    padding: var(--oo-space-4);
    flex: 1;
}

/* Kein doppeltes Padding wenn kein Header vorhanden */
.oo-card:not(:has(.oo-card__header)) .oo-card__body {
    padding-top: var(--oo-space-4);
}

/* ── Footer ────────────────────────────────────────────────────────── */

.oo-card__footer {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    padding: var(--oo-space-3) var(--oo-space-4);
    border-top: var(--oo-border-width) solid var(--oo-color-border);
    background: color-mix(in srgb, var(--oo-color-surface) 50%, var(--oo-gray-100));
}

.oo-card > .oo-card__footer:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.oo-card--flat .oo-card__footer,
.oo-card--ghost .oo-card__footer {
    border-top-color: transparent;
    background: transparent;
}