/* RealLabor Events – Frontend-Styles (Design v4, 2026-07)
   Abgestimmt auf das Design von reallabor-bildung.de + events.reallabor-bildung.de:
   Signatur-Gradient Lila→Pink, Condensed-Titel, pinker Kategorie-Kicker,
   Pill-Elemente (45px). Schriften kommen von der WordPress-Seite selbst
   (Roboto/Roboto Condensed sind auf reallabor-bildung.de vorhanden). */

.rle-grid,
.rle-list,
.rle-empty {
    --rle-purple: #5A2362;
    --rle-pink: #e6007e;
    --rle-pink-dark: #c5006b;
    --rle-ink: #171717;
    --rle-body: #4a4150;
    --rle-muted: #8e8596;
    --rle-line: #eceaf0;
    --rle-gradient: linear-gradient(0.3turn, #5A2362 20%, #e6007e 80%);
    --rle-font-head: 'Roboto Condensed', 'RobotoCondensed', 'Segoe UI', sans-serif;
    --rle-font-body: 'Roboto', 'Segoe UI', system-ui, sans-serif;
}

.rle-grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 0 8px;
}
.rle-cols-1 { grid-template-columns: 1fr; }
.rle-cols-2 { grid-template-columns: repeat(2, 1fr); }
.rle-cols-3 { grid-template-columns: repeat(3, 1fr); }
.rle-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
    .rle-cols-3, .rle-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .rle-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Karte ---------- */
.rle-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--rle-body, #4a4150);
    border: 1px solid var(--rle-line, #eceaf0);
    box-shadow: 0 1px 2px rgba(27, 18, 31, .05);
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
    font-family: var(--rle-font-body, sans-serif);
}
.rle-card:hover,
.rle-card:focus {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(27, 18, 31, .12);
    color: var(--rle-body, #4a4150);
    text-decoration: none;
}
.rle-card--cancelled { opacity: .6; }

/* Bild / Kopf – Platzhalter = Signatur-Gradient */
.rle-card__img {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--rle-gradient, linear-gradient(0.3turn, #5A2362 20%, #e6007e 80%));
    overflow: hidden;
}
.rle-card__img img {
    /* !important nötig (#422, gleiche Ursache wie bei .rle-social-media__icon
       oben): ".rle-card__img img" und Host-Themes' generische
       "<Beitragsinhalt> img"-Regel (z. B. Lichtfluss One:
       ".rl-post__content img", siehe dortige theme.css) haben BEIDE die
       Spezifität "eine Klasse + ein Elementselektor" – bei einem Unentschieden
       gewinnt die zuletzt geladene Regel, und Theme-CSS wird von WordPress
       nach Plugin-CSS eingebunden. Ohne !important überschreibt das Theme
       "height:100%/object-fit:cover" mit seinem generischen "height:auto",
       wodurch das Bild nicht mehr die ganze Kachel füllt und der
       Farbverlauf-Hintergrund als Streifen durchscheint – exakt das
       Beitragsboxen-Problem, das Lichtfluss One für seine EIGENEN Karten
       bereits per Selektor-Reihenfolge löst, hier aber wegen des separaten
       Stylesheets zusätzlich !important braucht. */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* Bilder nie verzerren */
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
/* Standort-Badge: weiß mit Standortfarbe als Kante (wie Event-Seite) */
.rle-card__loc {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, .92);
    color: var(--rle-ink, #171717);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-left: 4px solid var(--accent, #5A2362);
    border-radius: 6px;
    line-height: 1.3;
    max-width: calc(100% - 24px);
}
.rle-card__status {
    position: absolute;
    top: 12px;
    right: 12px;
}
.rle-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 5px 12px;
    border-radius: 45px;
    color: #fff;
}
.rle-badge--cancelled { background: #d4302f; }
.rle-badge--ended     { background: #8e8596; }
.rle-badge--full      { background: #c77b16; }

/* Datum als weiße Pill (DNA-Detail) */
.rle-card__date {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: #fff;
    color: var(--rle-purple, #5A2362);
    font-family: var(--rle-font-head, sans-serif);
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 45px;
    box-shadow: 0 1px 2px rgba(27, 18, 31, .15);
}

.rle-card__body {
    padding: 18px 20px 10px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Kategorie-Kicker: pink, uppercase (DNA) */
.rle-card__cat {
    color: var(--rle-pink, #e6007e);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
}
/* .rle-card__body nutzt einen einheitlichen 6px-Flex-Gap für Kategorie/
   Titel/Beschreibung/Meta (#…, Nutzerfeedback: "Abstand zwischen Kategorie
   und Titel zu groß"). Der 6px-Gap allein wirkt bei Kategorie -> Titel
   optisch größer als bei den anderen Paaren, weil die kleine 12px-Kategorie-
   Zeile zusätzlichen Leerraum durch ihre eigene Zeilenhöhe mitbringt — gezielt
   nur diesen einen Übergang per Nachbar-Selektor verkleinern, Titel selbst
   hat bereits margin:0 (siehe .rle-card__title), daher hier ein negativer
   Korrekturwert. */
.rle-card__cat + .rle-card__title {
    margin-top: -4px;
}
/* Titel: Condensed 600, Lila → Pink beim Hover */
.rle-card__title {
    margin: 0;
    font-family: var(--rle-font-head, sans-serif);
    font-size: 21px;
    line-height: 1.12;
    letter-spacing: -.01em;
    font-weight: 600;
    color: var(--rle-purple, #5A2362);
    transition: color .2s ease;
}
.rle-card:hover .rle-card__title { color: var(--rle-pink, #e6007e); }
.rle-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--rle-body, #4a4150);
}
.rle-card__meta {
    margin-top: auto;
    padding-top: 8px;
    font-size: 13px;
    color: var(--rle-muted, #8e8596);
}

.rle-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--rle-line, #eceaf0);
}
.rle-card__cost {
    font-size: 14px;
    font-weight: 700;
    color: var(--rle-ink, #171717);
}
/* CTA: gefüllte Pink-Pill (Anmelde-CTA, wie Event-Seite) */
.rle-card__cta {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    color: #fff;
    background: var(--rle-pink, #e6007e);
    padding: 8px 18px;
    border-radius: 45px;
    white-space: nowrap;
    transition: background .2s ease;
}
.rle-card:hover .rle-card__cta { background: var(--rle-pink-dark, #c5006b); }
.rle-card__cta.is-full { background: #8e8596; }

/* ---------- Liste ---------- */
.rle-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rle-line, #eceaf0);
    font-family: var(--rle-font-body, sans-serif);
}
.rle-list__item { border-bottom: 1px solid var(--rle-line, #eceaf0); }
.rle-list__item a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 8px;
    text-decoration: none;
    color: var(--rle-body, #4a4150);
    transition: background .15s ease;
}
.rle-list__item a:hover { background: #f7f3f8; }
.rle-list__date {
    flex: 0 0 auto;
    min-width: 96px;
    font-family: var(--rle-font-head, sans-serif);
    font-weight: 600;
    color: var(--rle-purple, #5A2362);
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.rle-list__date small { font-family: var(--rle-font-body, sans-serif); font-weight: 400; color: var(--rle-muted, #8e8596); font-size: 12px; }
.rle-list__main { flex: 1 1 auto; display: flex; flex-direction: column; }
.rle-list__title {
    font-family: var(--rle-font-head, sans-serif);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.01em;
    color: var(--rle-purple, #5A2362);
}
.rle-list__item a:hover .rle-list__title { color: var(--rle-pink, #e6007e); }
.rle-list__loc { font-size: 13px; color: var(--rle-muted, #8e8596); }
.rle-list__arrow { color: var(--rle-pink, #e6007e); font-size: 20px; font-weight: 700; }

/* ---------- Zustände ---------- */
.rle-empty {
    padding: 26px;
    text-align: center;
    color: var(--rle-muted, #8e8596);
    background: #f7f3f8;
    border-radius: 14px;
    font-family: var(--rle-font-body, sans-serif);
}
/* Feldbezeichnung über Standort-Feldern (titel="ja") – Kicker-Stil der Marke */
.rle-standort-titel {
    display: block;
    color: #e6007e;
    font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 4px;
}
.rle-admin-error {
    padding: 12px 16px;
    background: #fdecea;
    border: 1px solid #f5c2c0;
    border-radius: 8px;
    color: #b32d2e;
    font-size: 14px;
}
/* Social-Media-Icons (#342): horizontale Reihe anklickbarer, runder Buttons */
.rle-social-media {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 2px 0 0;
}
.rle-social-media__icon {
    /* Kein Kreis-Hintergrund mehr (ToDo #382, Nutzerwunsch): reines Icon in
       Markenfarbe statt gefüllter Lila-Kreis-Button. !important nötig, da
       Host-Themes (z. B. Lichtfluss One) oft eine generische, spezifischere
       "Links im Beitragsinhalt sind Magenta"-Regel mitbringen, die sonst
       diese Icon-Farbe unabhängig von der Link-Farbe überschreiben würde. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--rle-purple, #5A2362) !important;
    flex-shrink: 0;
    transition: color .2s ease, transform .2s ease;
}
.rle-social-media__icon:hover,
.rle-social-media__icon:focus {
    color: var(--rle-pink, #e6007e) !important;
    transform: translateY(-2px);
}
.rle-social-media__icon svg { width: 18px; height: 18px; }
.rle-custom { display: contents; }

/* [reallabor_kontaktdaten] (#425): alle Kontaktdaten eines Standorts
   horizontal nebeneinander, zentriert – auf schmalen Bildschirmen
   untereinander. */
.rle-kontaktdaten {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 32px 48px;
    text-align: center;
}
.rle-kontaktdaten__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rle-kontaktdaten__value {
    font-family: var(--rle-font-body, 'Roboto', 'Segoe UI', system-ui, sans-serif);
    font-size: 15px;
    color: inherit;
}
.rle-kontaktdaten__value a {
    color: inherit;
    text-decoration: none;
}
.rle-kontaktdaten__value a:hover,
.rle-kontaktdaten__value a:focus {
    text-decoration: underline;
}
@media (max-width: 600px) {
    .rle-kontaktdaten { flex-direction: column; align-items: center; gap: 20px; }
}