/* =============================================================================
   LAYOUT T - Veranstaltungsliste als Tabelle
   Spalten: Titel | [aktive Meta-Felder] | Kategorie - Anzahl/Breite wird
   von PHP dynamisch als CSS-Variable --vce-lay-t-cols pro Artikel gesetzt
   (siehe child_lay_v_grid_template() in functions.php).
   Technik: Jede .vce-lay-t Zeile ist selbst ein CSS-Grid mit identischen
   Spaltenbreiten -> die Zeilen fluchten optisch wie eine Tabelle,
   ganz ohne <table>-Markup oder display:contents.
   ============================================================================= */
.vce-lay-t {
    /* WICHTIG: .vce-loop-wrap (Parent-Theme, main.css) ist ein Flex-
       Container (display:flex; flex-wrap:wrap). Ohne "flex: 1 1 100%"
       schrumpft jede Zeile als Flex-Item auf ihre Inhaltsbreite -
       dadurch stehen die Spalten pro Zeile an unterschiedlichen
       Positionen. flex-basis:100% erzwingt volle Zeilenbreite und damit
       automatisch einen Zeilenumbruch nach jedem Event. */
    flex: 1 1 100%;
    width: 100%;
    display: grid;
    /* Fallback-Wert greift nur, falls --vce-lay-t-cols aus irgendeinem
       Grund fehlt (z.B. sehr altes Caching einer Vorversion). Der
       eigentliche Wert kommt inline von PHP, je nach aktivierten
       Meta-Feldern in "Layout T > Meta data". */
    grid-template-columns: var(--vce-lay-t-cols, minmax(0, 1.8fr) minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 0.8fr));
    gap: 0.5rem 2rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    border-left: none;
    border-right: none;
}
.vce-lay-t:first-of-type {
    border-top: 1px solid var(--color-border, #e0e0e0);
}
/* Der Schatten kommt weder von .main-box noch von .vce-lay-t selbst,
   sondern von einer sehr breiten Selektor-Liste in main.css (Zeile
   3430-3448), in der ".vce-post" direkt enthalten ist:
     .main-header, .main-box-title, ..., .main-box, ..., .vce-post, ...
     { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); }
   Jede Zeile in Layout T trägt selbst die Klasse "vce-post" (siehe
   post_class() in layout-v.php) und bekommt den Schatten daher direkt,
   nicht über den .main-box-Container. Deshalb gezielt hier für
   .vce-lay-t ausgeschaltet statt für .main-box. */
.vce-lay-t {
    box-shadow: none !important;
    -moz-box-shadow: none !important;
}
/* Grid-Items haben per Default min-width:auto (= Inhaltsbreite).
   Ohne diese Zeile sprengt langer Inhalt trotz minmax() die Spalte. */
.vce-lay-t > div {
    min-width: 0;
}
/* Titel-Spalte */
.vce-lay-t-title .entry-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.vce-lay-t-title .entry-title a {
    text-decoration: none;
    color: inherit;
}
.vce-lay-t-title .entry-title a:hover {
    text-decoration: underline;
}
/* Meta-Spalten (Datum, Ort, Autor, ... - je nach Redux-Auswahl) */
.vce-lay-t-meta {
    font-size: 15px;
}
/* WICHTIG: Parent-Theme setzt global ".entry-meta div, .entry-meta div a"
   auf white-space:nowrap. Bei langen Inhalten (z.B. Ortsnamen wie
   "Seniorenresidenz am Landgrafenschloss") verhindert das den Zeilen-
   umbruch und sprengt dadurch die Grid-Spalte (Blowout). Hier gezielt
   für Layout T überschrieben, mit höherer Spezifität
   (.entry-meta.vce-lay-t-meta statt nur .entry-meta), damit es
   unabhängig von der CSS-Ladereihenfolge sicher greift. */
.vce-lay-t-meta.entry-meta div,
.vce-lay-t-meta.entry-meta div a {
    white-space: normal;
    overflow-wrap: break-word;
}
.vce-lay-t-meta-ort .meta-item.ort a {
    color: inherit;
    text-decoration: none;
}
/* Datum-Spalte rechtsbündig, damit die Uhrzeiten (am Ende der Zeile)
   untereinander stehen statt am unterschiedlich breiten Datumstext
   auszurichten. */
.vce-lay-t-meta-date {
    text-align: right;
}
/* Kategorie-Spalte: Farbe/Style NICHT neu definiert, sondern wie bei
   Layout A/B/C übernommen - dort ist die Kategorie ein normaler Link
   ohne Badge/Hintergrund. Die Textfarbe kommt automatisch aus der
   theme-weiten Regel "a.category-{ID}{ color: ... }" in dynamic-css.php,
   die für jeden Kategorie-Link auf der Seite gilt (inkl. der im Backend
   gewählten individuellen Farben) - hier also nur Ausrichtung nötig. */
.vce-lay-t-cat {
    text-align: right;
    line-height: 0.9;
}
.vce-lay-t-cat a {
    font-size: 14px;
}
/* Mobil: untereinander statt Spalten (Redaktion tippt oft auf dem Handy nach) */
@media (max-width: 768px) {
    .vce-lay-t {
        /* !important nötig, weil --vce-lay-t-cols sonst per Inline-Style
           (höhere Spezifität) die Media Query überstimmen würde */
        grid-template-columns: 1fr !important;
        gap: 0.35rem;
        padding: 1rem 0;
    }
    .vce-lay-t-cat {
        text-align: left;
    }
    .vce-lay-t-meta-date {
        text-align: left;
    }
}

/* =============================================================================
   LAYOUT U - Tabelle mit Bild (Erweiterung von Layout T)
   Layout U teilt sich das komplette obige CSS mit Layout T (die Artikel
   tragen zusätzlich die Klasse .vce-lay-t) - hier nur die neue Bildspalte.
   Bildquelle: vce_featured_image('vce-lay-d') = 145x100px zugeschnitten
   (dieselbe Größe, die Layout E selbst nutzt). Bewusst OHNE eigene
   Skalierung/Rundung, damit es exakt wie in Layout E aussieht - die
   Grid-Spalte ist deshalb auch 145px breit (nicht mehr 70px), sonst
   müsste das Bild künstlich verkleinert werden. */
.vce-lay-u-image img {
    display: block;
}
.vce-lay-u-excerpt {
    font-size: 13px;
    color: var(--color-text-muted, #666);
    line-height: 1.35;
    margin-top: 2px;
}