/**
 * P'INC WPGB Thumbnail – Styles
 *
 * Basis-Styles des Blocks sowie optionale Zuschnitt-Klassen. Die Zuschnitt-
 * Klassen werden auf ein übergeordnetes Element gesetzt – am einfachsten am
 * GRID (WP Grid Builder → Grid → Advanced → eigene CSS-Klasse) oder an einer
 * Card. Beispiel: "pinc-thumb-ratio-3-2 pinc-thumb-fit-cover".
 *
 * Ohne Ratio-Klasse zeigt das Bild sein natürliches Verhältnis (Standard,
 * ideal für Masonry). Bei Metro/Justified steuert WP Grid Builder die Höhe
 * selbst – dort keine Ratio-Klasse setzen.
 */

/* =========================================================================
 *  BASIS
 * ====================================================================== */
.pinc-thumb { display: block; }
.pinc-thumb-img { display: block; width: 100%; height: auto; }

/* =========================================================================
 *  SEITENVERHÄLTNIS
 *  Setzt eine feste Box; das Bild füllt sie (Standard: Cover, siehe unten).
 * ====================================================================== */
.pinc-thumb-ratio-1-1   .pinc-thumb { aspect-ratio: 1 / 1;   overflow: hidden; }
.pinc-thumb-ratio-4-3   .pinc-thumb { aspect-ratio: 4 / 3;   overflow: hidden; }
.pinc-thumb-ratio-3-2   .pinc-thumb { aspect-ratio: 3 / 2;   overflow: hidden; }
.pinc-thumb-ratio-16-9  .pinc-thumb { aspect-ratio: 16 / 9;  overflow: hidden; }
.pinc-thumb-ratio-2-1   .pinc-thumb { aspect-ratio: 2 / 1;   overflow: hidden; }

/* Hochformate */
.pinc-thumb-ratio-3-4   .pinc-thumb { aspect-ratio: 3 / 4;   overflow: hidden; }
.pinc-thumb-ratio-2-3   .pinc-thumb { aspect-ratio: 2 / 3;   overflow: hidden; }
.pinc-thumb-ratio-9-16  .pinc-thumb { aspect-ratio: 9 / 16;  overflow: hidden; }

/* =========================================================================
 *  BILDANPASSUNG
 *  Sobald eine Ratio-Klasse aktiv ist, füllt das Bild die Box mit
 *  object-fit: cover (Standard). Mit .pinc-thumb-fit-contain wird stattdessen
 *  das ganze Bild eingepasst.
 * ====================================================================== */
[class*="pinc-thumb-ratio-"] .pinc-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pinc-thumb-fit-contain .pinc-thumb-img {
	object-fit: contain;
}

/* Hintergrund für die Contain-Letterbox (optional, hier anpassbar). */
.pinc-thumb-fit-contain .pinc-thumb { background: #f2f2f2; }

/* =========================================================================
 *  FOKUSPUNKT (optional, bei Cover)
 *  Steuert, welcher Bildausschnitt beim Zuschnitt erhalten bleibt.
 * ====================================================================== */
.pinc-thumb-pos-top    .pinc-thumb-img { object-position: top; }
.pinc-thumb-pos-bottom .pinc-thumb-img { object-position: bottom; }
.pinc-thumb-pos-left   .pinc-thumb-img { object-position: left; }
.pinc-thumb-pos-right  .pinc-thumb-img { object-position: right; }