/* ==========================================================
   Astrocamp Related — automatisches Kachel-Raster verwandter
   Beiträge/Seiten (kein Shortcode, wird an the_content angehängt)
   ========================================================== */

.acrel-wrap {
	margin: 32px 0 0;
}

.acrel-heading {
	color: #FFF8E7;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	/* !important aus demselben Grund wie bei ac_content: manche
	   Theme-Stylesheets geben Überschriften im Inhaltsbereich eigene,
	   großzügige Außenabstände. */
	margin: 0 0 16px !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

.acrel-grid {
	display: grid;
	grid-template-columns: repeat(var(--acrel-columns, 4), 1fr);
	column-gap: var(--acrel-gap, 5px);
	row-gap: var(--acrel-gap-vertical, 20px);
}

@media (max-width: 1024px) {
	.acrel-grid { grid-template-columns: repeat(var(--acrel-columns-tablet, 2), 1fr); }
}
@media (max-width: 600px) {
	.acrel-grid { grid-template-columns: repeat(var(--acrel-columns-mobile, 1), 1fr); }
}

.acrel-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid rgba(255, 248, 231, 0.15);
	text-decoration: none;
	background: #2A3538;
}
.acrel-tile:hover { border-color: #009DD5; }

.acrel-tile-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* explizit "aus der Mitte des Bildes", nicht gestaucht — object-fit:
	   cover schneidet das Bild proportional zu, object-position hält den
	   Bildmittelpunkt dabei fix (Standard, hier zur Klarheit explizit). */
	object-position: center;
}

/* ---------- Bildhöhe "Volle Höhe" / "Halbe Höhe" / "Drittel-Höhe" ----------
   Der Titel bleibt in JEDER Variante als Verlauf-Overlay AUF dem Bild
   (wie gehabt) — es ändert sich nur das Seitenverhältnis der ganzen
   Kachel selbst: "halbe/Drittel Höhe" bedeutet eine insgesamt flachere
   Kachel (Breite bleibt erhalten), nicht ein zusätzlicher Textbereich
   unter einem verkleinerten Bild. Das Bild füllt weiterhin die komplette
   Kachel (object-fit: cover schneidet dabei automatisch mittig zu, ohne
   zu stauchen — s. .acrel-tile-img oben). 3/2 (voll), 3/1 (halb, =
   halbierte Höhe bei gleicher Breite), 9/2 (Drittel, = 3 : 2/3). */
.acrel-tile--img-full {
	aspect-ratio: 3 / 2;
}
.acrel-tile--img-half {
	aspect-ratio: 3 / 1;
}
.acrel-tile--img-third {
	aspect-ratio: 9 / 2;
}
.acrel-tile--img-full .acrel-tile-media,
.acrel-tile--img-half .acrel-tile-media,
.acrel-tile--img-third .acrel-tile-media {
	position: absolute;
	inset: 0;
}
.acrel-tile--img-full .acrel-tile-body,
.acrel-tile--img-half .acrel-tile-body,
.acrel-tile--img-third .acrel-tile-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 14px 12px;
	background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
	pointer-events: none;
}

/* Ohne Beitragsbild (Darstellungsoption "Beitragsbild anzeigen" aus, oder
   Beitrag ohne gültiges Bild): feste Mindesthöhe statt Seitenverhältnis,
   damit die Kachel nicht auf eine Nulllinie zusammenfällt. */
.acrel-tile--noimg {
	min-height: 120px;
}
.acrel-tile--noimg .acrel-tile-body {
	position: static;
	background: none;
	padding: 14px;
}

.acrel-tile-title {
	display: block;
	color: #FFF8E7;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.35;
}

.acrel-tile-meta {
	display: block;
	margin-top: 4px;
	color: #FFF8E7;
	opacity: 0.6;
	font-size: 11px;
	line-height: 1.3;
}

.acrel-tile-teaser {
	display: block;
	margin-top: 6px;
	color: #FFF8E7;
	opacity: 0.75;
	font-size: 12px;
	line-height: 1.4;
}