/* =============================================================================
   LAYOUT P - Plakat/Hochkant (Erweiterung von Layout C)
   Layout P teilt sich das komplette Layout-C-CSS (main.css: Grid-Spalten-
   breite, Margins im 3-Spalten-Raster, Kategorie/Titel/Meta-Optik) - die
   Artikel tragen zusätzlich die Klasse .vce-lay-c, siehe layout-p.php.
   Hier nur die Bildformat-Anpassung: DIN-A Hochkant (1:√2) statt der
   Standard-Landschaft-Optik von Layout C (375x195).
   ============================================================================= */
.vce-lay-p.vce-lay-c .meta-image {
    overflow: hidden;
    width: 100%;
}
.vce-lay-p.vce-lay-c img,
.vce-lay-p.vce-lay-c video,
.vce-lay-p.vce-lay-c .mejs-container,
.vce-lay-p.vce-lay-c iframe {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: initial !important;
    aspect-ratio: 1 / 1.41421356;
    object-fit: cover;
}
/* WordPress' natives Video (wp_video_shortcode) wird per Player
   "mediaelement.js" zu verschachteltem Markup (.mejs-container etc.)
   - hier zusätzlich absichern, dass der äußere Wrapper die volle
   Breite nimmt (das aspect-ratio auf dem <video> selbst greift
   trotzdem, die zusätzliche Regel oben ist nur ein Sicherheitsnetz). */
.vce-lay-p.vce-lay-c .wp-video {
    width: 100% !important;
}
/* Scale-Hover-Effekt (vom Theme oder einem Plugin, genaue Quelle nicht
   eindeutig auffindbar) für Layout P deaktivieren - bei Plakaten wirkt
   das Hineinzoomen störend, anders als bei normalen Foto-Vorschauen.
   NUR für Bilder, nicht für Video - dort störte das Deaktivieren die
   normale Bedienleiste/Steuerung des Players. */
.vce-lay-p.vce-lay-c img,
.vce-lay-p.vce-lay-c .meta-image:hover img,
.vce-lay-p.vce-lay-c .meta-image a:hover img,
.vce-lay-p.vce-lay-c:hover img {
    transform: none !important;
    transition: none !important;
}
/* Zeigt ein Post NUR das Bild/Video (Kategorie, Titel, Meta und
   Excerpt alle ausgeschaltet - siehe $lay_p_media_only in
   layout-p.php)? Dann die sonst reservierten Abstände unter dem Bild
   entfernen, die normalerweise Platz für den folgenden Titel/Text
   schaffen (Layout-C-Basis: .meta-image margin-bottom:12px,
   .vce-lay-c padding-bottom:10px). */
.vce-lay-p.vce-lay-c.vce-lay-p-media-only .meta-image,
.vce-lay-p.vce-lay-c.vce-lay-p-media-only .meta-image * {
    margin-bottom: 0 !important;
}
.vce-lay-p.vce-lay-c.vce-lay-p-media-only {
    padding-bottom: 0 !important;
}
/* Margin-basierte Zeilenabstände (main.css: ".vce-lay-c { margin: 0
   20px 20px 0; }" + diverse :nth-of-type-Varianten) erzeugen bei der
   LETZTEN Reihe immer einen sichtbaren Nachlauf, weil keine folgende
   Reihe den margin-bottom "auffrisst". Für Layout P daher komplett auf
   "gap" statt Margin umgestellt - das erzeugt Abstand NUR zwischen
   Elementen, nie am Ende. Card-Breite (353px) bleibt unverändert,
   passt weiterhin für 3 Spalten pro Reihe. */
.vce-lay-p.vce-lay-c {
    margin: 0 !important;
}
.vce-loop-wrap:has(.vce-lay-p) {
    gap: 20px;
    /* WICHTIG: Flexbox streckt per Standard (align-items:stretch) alle
       Elemente einer Zeile auf die Höhe des größten Elements dieser
       Zeile. Steht eine "nur Bild"-Karte (kürzer) neben einer Karte
       mit Titel/Meta (höher), wird die kürzere gestreckt - der
       übrige Platz bleibt als Leerraum INNERHALB der kürzeren Karte
       am unteren Rand übrig. align-items:flex-start lässt jede Karte
       stattdessen ihre eigene, natürliche Höhe behalten. */
    align-items: flex-start;
    /* Abstand nach der letzten Reihe (vorher kam das vom individuellen
       margin-bottom jeder Karte - das musste weg wegen des Stretching-
       Problems oben, daher hier einmalig am ganzen Wrapper nachgerüstet). */
    margin-bottom: 20px;
}