/**
 * PHASE 11 (additiv): kompaktes Karten-Grid fuer den [ccampelmini]-
 * Shortcode (Startseiten-Teaser).
 *
 * Namespace: ausschliesslich .mo-cc-ampel-mini* Klassen. Ueberschreibt/
 * beruehrt NICHT .cc-box / .cc-table / .mo-cc-ampel-table* (eigene
 * Farbdefinition fuer die wiederverwendete Rating-Pille, bewusst dupliziert
 * statt geteilt importiert -- siehe Docblock in includes/cc-ampel-mini.php).
 * Diese Datei wird nur ueber moccMaybeLoadAmpelMiniAssets()
 * (includes/cc-ampel-mini.php) geladen, unbedingt auf jeder Frontend-Seite
 * (gleiche Begruendung wie bei den anderen Ampel-Renderern: ACF-Flexible-
 * Content-Seiten fuellen post_content nicht, has_shortcode() waere
 * unzuverlaessig).
 */

.mo-cc-ampel-mini-wrap {
    --mo-cc-primary: var(--role-primary, #25325c);
    --mo-cc-secondary: var(--role-secondary, #e88e20);
    --mo-cc-secondary-hover: var(--role-secondary-hover, #d47f10);
    --mo-cc-radius-sm: var(--radius-sm, 6px);
    --mo-cc-radius-md: var(--radius-md, 10px);
    --mo-cc-radius-lg: var(--radius-lg, 14px);
    --mo-cc-radius-pill: var(--radius-pill, 999px);
    --mo-cc-shadow-sm: var(--shadow-sm, 0 2px 8px rgba(37, 50, 92, 0.10));
    --mo-cc-shadow-md: var(--shadow-md, 0 6px 20px rgba(37, 50, 92, 0.14));
    --mo-cc-font-heading: var(--font-heading, inherit);
    --mo-cc-font-content: var(--font-content, inherit);
    --mo-cc-link: var(--link, var(--mo-cc-primary));
    --mo-cc-text-body: var(--text-body, #333333);
    --mo-cc-text-secondary: var(--text-secondary, #52607d);
    --mo-cc-text-muted: var(--text-muted, #64708c);
    --mo-cc-border: var(--border, #dde1ea);
    --mo-cc-border-strong: var(--border-strong, #c3c9d8);
    --mo-cc-surface-page: var(--surface-page, #ffffff);
    --mo-cc-surface-card: var(--surface-card, #f7f8fb);
    --mo-cc-surface-muted: var(--surface-muted, #eef0f5);

    /* Gleicher Ampel-Farbsatz wie mo-cc-ampel-table.css, bewusst
       dupliziert (kein gemeinsamer Import) -- eigenstaendiger Namespace. */
    --mo-cc-status-green: #2e9b57;
    --mo-cc-status-green-bg: #e5f5eb;
    --mo-cc-status-amber: #b9820e;
    --mo-cc-status-amber-bg: #fbf1da;
    --mo-cc-status-neutral: var(--mo-cc-text-muted);
    --mo-cc-status-neutral-bg: var(--mo-cc-surface-muted);
    --mo-cc-status-red: #c6433d;
    --mo-cc-status-red-bg: #fbeae9;

    box-sizing: border-box;
    font-family: var(--mo-cc-font-content);
    max-width: 100%;
    margin: 2rem 0;
}

.mo-cc-ampel-mini-wrap *,
.mo-cc-ampel-mini-wrap *::before,
.mo-cc-ampel-mini-wrap *::after {
    box-sizing: inherit;
}

/* --- Grid ---------------------------------------------------------------
   Feste 3-Spalten-Logik (Mark, 03.09.2026: an die bestehende 3-Spalten-
   Logik der Blog-Karten auf der Startseite angeglichen) statt der
   urspruenglichen auto-fill-Variante. Die Kartenzahl bleibt dynamisch
   (3-6 je nach redaktioneller Auswahl) -- bei weniger als 3 Karten bleiben
   die restlichen Spalten schlicht leer, bei mehr als 3 wird umgebrochen,
   genau wie bei den Blog-Karten. */

.mo-cc-ampel-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 860px) {
    .mo-cc-ampel-mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Karte --------------------------------------------------------------- */

.mo-cc-ampel-mini-card {
    display: flex;
    flex-direction: column;
    background: var(--mo-cc-surface-page);
    border: 1px solid var(--mo-cc-border);
    border-radius: var(--mo-cc-radius-lg);
    box-shadow: var(--mo-cc-shadow-sm);
    overflow: hidden;
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.mo-cc-ampel-mini-card:hover {
    box-shadow: var(--mo-cc-shadow-md);
    transform: translateY(-2px);
}

/* Featured-Akzent: ein farbiger oberer Rand statt eines schwereren
   Rahmens/Hintergrunds -- soll auffallen, ohne die anderen Karten neben
   sich "grau" wirken zu lassen. */
.mo-cc-ampel-mini-card[data-mo-cc-ampel-mini-featured="true"] {
    border-top: 3px solid var(--mo-cc-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .mo-cc-ampel-mini-card {
        transition: none;
    }
    .mo-cc-ampel-mini-card:hover {
        transform: none;
    }
}

.mo-cc-ampel-mini-art-wrap {
    position: relative;
    background: var(--mo-cc-surface-card);
}

.mo-cc-ampel-mini-art {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    padding: 0.75rem;
}

.mo-cc-ampel-mini-country {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.15rem 0.55rem;
    background: var(--mo-cc-primary);
    color: #ffffff;
    border-radius: var(--mo-cc-radius-pill);
    font-family: var(--mo-cc-font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.mo-cc-ampel-mini-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.1rem 1.2rem;
    flex: 1;
}

.mo-cc-ampel-mini-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mo-cc-ampel-mini-featured-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: var(--mo-cc-radius-pill);
    background: color-mix(in srgb, var(--mo-cc-secondary) 14%, var(--mo-cc-surface-page));
    color: var(--mo-cc-secondary-hover);
    font-size: 0.75rem;
    font-weight: 700;
}

.mo-cc-ampel-mini-name {
    margin: 0;
    font-family: var(--mo-cc-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mo-cc-text-body);
}

.mo-cc-ampel-mini-name a {
    color: inherit;
    text-decoration: none;
}

.mo-cc-ampel-mini-name a:hover,
.mo-cc-ampel-mini-name a:focus-visible {
    text-decoration: underline;
}

.mo-cc-ampel-mini-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.mo-cc-ampel-mini-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--mo-cc-radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--mo-cc-surface-muted);
    color: var(--mo-cc-text-secondary);
}

.mo-cc-ampel-mini-badge--business {
    color: var(--mo-cc-primary);
    background: color-mix(in srgb, var(--mo-cc-primary) 10%, var(--mo-cc-surface-page));
}

.mo-cc-ampel-mini-badge--status {
    color: var(--mo-cc-secondary-hover);
    background: color-mix(in srgb, var(--mo-cc-secondary) 12%, var(--mo-cc-surface-page));
}

.mo-cc-ampel-mini-bonus {
    margin-top: 0.15rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mo-cc-text-body);
}

.mo-cc-ampel-mini-enddate {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mo-cc-text-muted);
}

.mo-cc-ampel-mini-requirement {
    margin: 0;
    color: var(--mo-cc-text-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
}

/* Zwei Buttons nebeneinander, gleich breit -- Vorbild ist die Legacy-
   Kartenbox ([ccbox], "Zum Angebot" + "Mehr Infos" nebeneinander). Bei nur
   einem Button (z. B. more_info_url fehlt) nimmt der eine Button den
   gesamten Platz ein, da flex: 1 auf beiden liegt. */
.mo-cc-ampel-mini-buttons {
    display: flex;
    gap: 0.6rem;
    margin-top: auto;
}

.mo-cc-ampel-mini-button {
    flex: 1;
    display: inline-block;
    padding: 0.55rem 1rem;
    border-radius: var(--mo-cc-radius-pill);
    font-weight: 700;
    font-size: 0.875rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mo-cc-ampel-mini-button--primary {
    background: var(--mo-cc-secondary);
    color: #ffffff;
}

.mo-cc-ampel-mini-button--primary:hover,
.mo-cc-ampel-mini-button--primary:focus-visible {
    background: var(--mo-cc-secondary-hover);
    color: #ffffff;
}

.mo-cc-ampel-mini-button--secondary {
    background: var(--mo-cc-primary);
    color: #ffffff;
}

.mo-cc-ampel-mini-button--secondary:hover,
.mo-cc-ampel-mini-button--secondary:focus-visible {
    background: var(--role-primary-hover, #1a2547);
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .mo-cc-ampel-mini-button {
        transition: none;
    }
}

.mo-cc-ampel-mini-more {
    margin: 1.25rem 0 0;
    text-align: center;
}

.mo-cc-ampel-mini-more a {
    color: var(--mo-cc-link);
    font-weight: 600;
    text-decoration: none;
}

.mo-cc-ampel-mini-more a:hover,
.mo-cc-ampel-mini-more a:focus-visible {
    text-decoration: underline;
}

/* --- Rating-Pille (geteilte Markup-Struktur mit moccAmpelRatingMarkup(),
       eigene Farbdeklaration da eigener Namespace) --------------------- */

.mo-cc-ampel-mini-wrap .mo-cc-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--mo-cc-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.mo-cc-ampel-mini-wrap .mo-cc-rating-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: none;
}

.mo-cc-ampel-mini-wrap .mo-cc-rating--green {
    color: var(--mo-cc-status-green);
    background: var(--mo-cc-status-green-bg);
}

.mo-cc-ampel-mini-wrap .mo-cc-rating--green .mo-cc-rating-dot {
    background: var(--mo-cc-status-green);
}

.mo-cc-ampel-mini-wrap .mo-cc-rating--yellow {
    color: var(--mo-cc-status-amber);
    background: var(--mo-cc-status-amber-bg);
}

.mo-cc-ampel-mini-wrap .mo-cc-rating--yellow .mo-cc-rating-dot {
    background: var(--mo-cc-status-amber);
}

.mo-cc-ampel-mini-wrap .mo-cc-rating--grey {
    color: var(--mo-cc-status-neutral);
    background: var(--mo-cc-status-neutral-bg);
}

.mo-cc-ampel-mini-wrap .mo-cc-rating--grey .mo-cc-rating-dot {
    background: var(--mo-cc-status-neutral);
}

.mo-cc-ampel-mini-wrap .mo-cc-rating--red {
    color: var(--mo-cc-status-red);
    background: var(--mo-cc-status-red-bg);
}

.mo-cc-ampel-mini-wrap .mo-cc-rating--red .mo-cc-rating-dot {
    background: var(--mo-cc-status-red);
}

/* --- Mobil ---------------------------------------------------------------
   Ab hier eine Spalte -- bei 3-6 Karten liest sich eine gestapelte Liste
   auf dem Handy besser als ein enges Mehrspalten-Grid. */

@media (max-width: 480px) {
    .mo-cc-ampel-mini-grid {
        grid-template-columns: 1fr;
    }
}