/**
 * Datei: cards.css
 * Pfad: /wp-content/plugins/mietp-core/inc/modules/cards/css/cards.css
 *
 * Modul: Cards (Core)
 * Projekt: MietPortalo
 *
 * Zweck:
 * Zentrale, modul- und builderunabhängige Card-Basis für das gesamte Projekt.
 * Diese Datei definiert ausschließlich das visuelle Grundgerüst einer Card
 * und dient als Single Source of Truth für alle Card-Darstellungen.
 *
 * Enthält:
 * - Card-Container (.listing-box)
 * - Bilddarstellung
 * - Meta-Bereich (Kategorie / Ort)
 * - Titel, Untertitel, Beschreibung (Clamp-fähig)
 * - Footer (Preis / Favoriten)
 *
 * WICHTIG:
 * - KEIN Grid (Ausnahme: list layout / grid4 helper unten)
 * - KEIN Slider
 * - KEINE Layout-Logik (list, grid2, grid3) außer dem expliziten list-Block unten
 * - KEINE Theme-Abhängigkeiten
 *
 * Token-Regel (Darkmode-fest):
 * - Keine harten Hex-Farben (außer zwingend für Overlay/Icons)
 * - Nur Theme-Tokens / CSS-Variablen verwenden
 */

/* ============================================================
   CARD CONTAINER
============================================================ */
.listing-box{
	/* Card-Tokens (Single Source of Truth: Theme :root) */
	background: var(--card-bg, var(--block-bg, var(--bg-main, var(--color-8))));
	border-radius: var(--card-radius, var(--radius-md, 8px));

	height: 100%;
	overflow: hidden;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: left;

	border: 1px solid var(--card-border, color-mix(in srgb, var(--block-border, var(--border-main, var(--color-6))) 35%, transparent));
	box-shadow: var(--card-shadow, var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.10)));

	transition: box-shadow .2s ease, transform .15s ease;
}

.listing-box:hover{
	box-shadow: var(--card-shadow-hover, var(--shadow-md, 0 6px 18px rgba(0,0,0,0.16)));
}

/* Card selbst bekommt NIE Fokusrahmen */
.listing-box:focus-within{
	outline: none;
}

/* Fokus sichtbar für Tastatur: Titel-Link */
.listing-title a:focus-visible{
	outline: 3px solid var(--brand-primary, var(--color-1));
	outline-offset: 3px;
	border-radius: 4px;
}

/* Fokus sichtbar für Bild-Link (falls das Bild verlinkt ist) */
.listing-thumb-wrap a:focus-visible{
	outline: 3px solid var(--brand-primary, var(--color-1));
	outline-offset: 4px;
	border-radius: 6px;
}

/* ============================================================
   BILD
============================================================ */
.listing-thumb-wrap{
	height: var(--card-thumb-height, 180px);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative; /* Bezugspunkt für Herz */
	background: var(--bg-surface, var(--color-7));
}

.listing-thumb-wrap img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;

	/* modern: Border statt harter #eee */
	border-bottom: 1px solid var(--card-border, color-mix(in srgb, var(--block-border, var(--border-main, var(--color-6))) 35%, transparent));
}

/* ============================================================
   META (Kategorie / Ort)
============================================================ */
.listing-meta{
	display: flex;
	align-items: center;
	gap: var(--card-meta-gap, 8px);
	padding: var(--card-meta-pad-top, 6px) var(--card-pad-x, 10px) var(--card-meta-pad-bottom, 4px);

	font-size: var(--card-meta-font-size, .9rem);
	color: var(--card-meta-color, var(--text-muted, var(--color-5)));

	min-height: 1.2em;
	min-width: 0; /* wichtig für echtes Shrinking */
}

/* Basis für beide Meta-Labels */
.listing-cat,
.listing-loc{
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	flex: 1 1 auto; /* wichtig: erlaubt Wachstum bei freiem Platz */
}

/* Standort immer rechtsbündig im eigenen Bereich */
.listing-loc{
	text-align: right;
}

/* Trenner (falls vorhanden) */
.listing-meta .mp-meta-sep{
	flex: 0 0 auto;
	opacity: .6;
}

/* =========================
   Prioritäten
========================= */

/* gleichwertig (50 / 50) */
.listing-meta.mp-meta-priority-equal .listing-cat,
.listing-meta.mp-meta-priority-equal .listing-loc{
	flex: 1 1 auto;
}

/* Kategorie priorisiert (~60 / 40) */
.listing-meta.mp-meta-priority-category .listing-cat{ flex: 3 1 0; }
.listing-meta.mp-meta-priority-category .listing-loc{ flex: 2 1 0; }

/* Standort priorisiert (~60 / 40) */
.listing-meta.mp-meta-priority-location .listing-cat{ flex: 2 1 0; }
.listing-meta.mp-meta-priority-location .listing-loc{ flex: 3 1 0; }

/* ============================================================
   TITEL
============================================================ */
.listing-title{
	margin: var(--card-title-mt, 6px) var(--card-pad-x, 10px) 0;
	font-size: var(--card-title-size, 1rem);
	font-weight: var(--card-title-weight, 600);
	line-height: var(--card-title-lineheight, 1.3);

	color: var(--text-main, var(--color-4));

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--clamp-title, 1);
	overflow: hidden;
}

.listing-title a{
	color: var(--card-title-link, var(--brand-primary, var(--color-1)));
	text-decoration: none;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--clamp-title, 1);
	overflow: hidden;
}

.listing-title a:hover{
	color: var(--card-title-link-hover, var(--card-title-link, var(--brand-primary, var(--color-1))));
	text-decoration: underline;
}

/* ============================================================
   LINKS IN CARDS – KEINE OPTISCHE ÄNDERUNG
============================================================ */
.listing-box .listing-title a,
.listing-box .listing-title a:focus,
.listing-box .listing-title a:active,
.listing-box .listing-title a:visited{
	color: var(--card-title-link, var(--brand-primary, var(--color-1)));
	text-decoration: none;
}

/* ============================================================
   UNTERTITEL / BESCHREIBUNG
============================================================ */
.listing-subtitle{
	margin: var(--card-text-mt, 4px) var(--card-pad-x, 10px) 0;
	font-size: var(--card-text-size, .9rem);
	color: var(--card-text, var(--text-main, var(--color-4)));
	font-weight: var(--card-price-weight, 600);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--clamp-subtitle, 1);
	overflow: hidden;
}

/*
 * Wenn Untertitel leer ist:
 * - keine leere Hoehe/Margin
 * - Beschreibung rutscht automatisch nach oben
 */
.listing-subtitle:empty{
	display: none;
}

.listing-desc{
	margin: var(--card-text-mt, 4px) var(--card-pad-x, 10px) 0;
	font-size: var(--card-text-size, .9rem);
	color: var(--card-text, var(--text-main, var(--color-4)));

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--clamp-desc, 2);
	overflow: hidden;
}

/* ============================================================
   FOOTER (Preis / Favoriten)
============================================================ */
.listing-footer{
	display: grid;
	grid-template-columns: auto 1fr; /* Herz | Preis */
	align-items: center;
	gap: var(--card-footer-gap, 8px);

	padding: var(--card-footer-pad-top, 8px) var(--card-pad-x, 10px) var(--card-footer-pad-bottom, 10px);
	font-size: var(--card-footer-font-size, .95rem);

	position: relative;
	z-index: 5;
}

.listing-footer .listing-fav{
	justify-self: start;
	position: relative;
	z-index: 6;
}

.listing-footer .listing-price{
	justify-self: end;
	font-weight: var(--card-price-weight, 600);
	color: var(--card-price, var(--text-main, var(--color-4)));
}

.listing-bottom{
	margin-top: auto; /* schiebt Footer+Notes nach unten */
	display: flex;
	flex-direction: column;
}

/* ============================================================
   ADMIN – BEARBEITEN ICON IM FOOTER
============================================================ */
.listing-footer .listing-edit-link{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 28px;
	height: 28px;

	border-radius: 6px;

	background: var(--pill-bg, var(--bg-surface, var(--color-7)));
	border: 1px solid color-mix(in srgb, var(--pill-border, var(--border-main, var(--color-6))) 45%, transparent);

	color: var(--text-muted, var(--color-5));
	text-decoration: none;

	cursor: pointer;

	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.listing-footer .listing-edit-link:hover{
	background: color-mix(in srgb, var(--pill-bg, var(--bg-surface, var(--color-7))) 80%, var(--brand-primary, var(--color-1)));
	color: var(--text-main, var(--color-4));
	box-shadow: var(--shadow-xs, 0 2px 6px rgba(0,0,0,0.10));
}

/* ============================================================
   FAVORITEN-HERZ (Button)
============================================================ */
.mp-favorite-toggle{
	background: none;
	border: 0;
	padding: 0;
	margin: 0;

	appearance: none;
	-webkit-appearance: none;

	cursor: pointer;
	line-height: 1;
}

.mp-favorite-toggle i.fa-heart{
	color: var(--brand-primary, var(--color-1));
	font-size: 1rem;
}

.mp-favorite-toggle:hover i.fa-heart{
	opacity: .85;
}

/* Fokus NUR bei Tastatur, NUR auf dem Herz */
.mp-favorite-toggle:focus-visible i.fa-heart{
	outline: 2px solid var(--brand-primary, var(--color-1));
	outline-offset: 3px;
	border-radius: 4px;
}

/* Favoriten-Herz im Bild (oben rechts) */
.listing-thumb-wrap .listing-fav,
.listing-thumb-wrap .mp-favorite-toggle{
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 10;

	width: 30px;
	height: 30px;

	display: flex;
	align-items: center;
	justify-content: center;

	/* Wunsch-Style: weisser Kreis (leicht transparent) hinter dem Herz */
	/* Hinweis: Weiß ist hier bewusst fest, damit der Kreis in Light/Dark konsistent bleibt. */
	/* Fallback fuer Browser ohne color-mix() (z.B. Chrome 109) */
	background: rgba(255,255,255,0.75);
	border: 1px solid rgba(255,255,255,0.55);

	/* Moderne Browser: feineres Mischen */
	background: color-mix(in srgb, #ffffff 75%, transparent);
	border: 1px solid color-mix(in srgb, #ffffff 55%, transparent);

	border-radius: 50%;
	box-shadow: var(--shadow-xs, 0 2px 6px rgba(0,0,0,0.18));

	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.listing-thumb-wrap .mp-favorite-toggle:hover{
	transform: scale(1.05);
}

.listing-thumb-wrap .mp-favorite-toggle:active{
	transform: scale(0.95);
}

/* ============================================================
   FAVORITEN – AKTIVER STATUS
============================================================ */

/* Grundzustand (inaktiv): Herz nicht gefuellt, aber gleiche Brand-Farbe */
.listing-thumb-wrap .mp-favorite-toggle i.fa-heart{
	color: var(--brand-primary, var(--color-1));
}

/* Aktiv (gemerkt): Herz gefuellt, gleiche Brand-Farbe */
.listing-thumb-wrap .mp-favorite-toggle.is-active i.fa-heart,
.listing-thumb-wrap .mp-favorite-toggle.active i.fa-heart,
.listing-thumb-wrap .mp-favorite-toggle[aria-pressed="true"] i.fa-heart,
.listing-thumb-wrap .mp-favorite-toggle i.fa-heart.fas{
	color: var(--brand-primary, var(--color-1));
}

/* ============================================================
   FAVORITEN – NOTIZEN
============================================================ */
.listing-fav-notes{
	display: flex;
	align-items: center;
	gap: 10px;

	padding: 8px 10px 10px;

	border-top: 1px solid color-mix(in srgb, var(--block-border, var(--border-main, var(--color-6))) 35%, transparent);

	font-size: .85rem;
	color: var(--text-main, var(--color-4));
}

/* Label links */
.listing-fav-notes label{
	flex: 0 0 auto;
	white-space: nowrap;

	color: var(--text-muted, var(--color-5));
	font-weight: normal;
}

.listing-fav-notes .js-fav-note{
	flex: 1 1 auto;
	min-width: 0;

	height: 32px;
	padding: 6px 8px;

	border: 1px solid color-mix(in srgb, var(--border-main, var(--color-6)) 70%, transparent);
	border-radius: 6px;

	background: transparent;
	color: var(--text-main, var(--color-4));
}

.listing-fav-notes .js-fav-note:focus{
	outline: none;
	border-color: var(--brand-primary, var(--color-1));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary, var(--color-1)) 15%, transparent);
}

/* Status rechts (Fade-in/out) */
.listing-fav-notes .fav-note-status{
	flex: 0 0 auto;
	font-size: .75rem;

	/* keine feste #4caf50 */
	color: var(--brand-primary, var(--color-1));

	opacity: 0;
	white-space: nowrap;
	transition: opacity .25s ease;
}

.listing-fav-notes .fav-note-status.is-visible{
	opacity: 1;
}

/* ============================================================
   CLAMP – TABLET
============================================================ */
@media (max-width: 1024px){
	.listing-title,
	.listing-title a{ -webkit-line-clamp: var(--clamp-title, 1); }

	.listing-subtitle{ -webkit-line-clamp: var(--clamp-subtitle, 1); }

	.listing-desc{ -webkit-line-clamp: var(--clamp-desc, 2); }
}

/* ============================================================
   CLAMP – MOBILE
============================================================ */
@media (max-width: 640px){
	.listing-title,
	.listing-title a{ -webkit-line-clamp: var(--clamp-title, 1); }

	.listing-subtitle{ -webkit-line-clamp: var(--clamp-subtitle, 1); }

	.listing-desc{ -webkit-line-clamp: var(--clamp-desc, 2); }
}

/* ============================================================
   TRUNCATE HELFER
   Hinweis:
   - Du hast mp-truncate-* schon global in modules.css.
   - Hier bleiben sie, aber ohne Konflikt (gleiche Semantik).
============================================================ */
.mp-truncate-0{
	overflow: visible;
	white-space: normal;
}

.mp-truncate-1{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mp-truncate-2,
.mp-truncate-3{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.mp-truncate-2{ -webkit-line-clamp: 2; }
.mp-truncate-3{ -webkit-line-clamp: 3; }

/* ============================================================
   RESULTS WRAPPER – GRID4 (global)
   Hinweis:
   - grid2/grid3 kommen aus anderen Styles
   - hier wird nur grid4 ergänzt, um nichts zu überschreiben
============================================================ */
.mp-layout-grid4{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 1024px){
	.mp-layout-grid4{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px){
	.mp-layout-grid4{
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   LIST LAYOUT (DESKTOP)
============================================================ */
.listing-box.layout-list{
	display: grid;
	grid-template-columns: var(--mietp-list-img-w-desktop, 200px) 1fr;
	grid-template-areas:
		"image meta"
		"image title"
		"image subtitle"
		"image desc"
		"image bottom";
	column-gap: 0px;
	grid-auto-rows: min-content;
	align-items: start;
}

/*
 * List-Layout ohne Untertitel:
 * - Untertitel-Zeile wird komplett entfernt
 * - verhindert sichtbare Leerzeile (vor allem wegen row-gap im Mobile-List)
 */
.listing-box.layout-list.no-subtitle{
	grid-template-areas:
		"image meta"
		"image title"
		"image desc"
		"image bottom";
}

.listing-box.layout-list .listing-thumb-wrap{
	grid-area: image;

	/* Höhe begrenzen: verhindert "Riesen-Cards" durch hohe Originalbilder */
	height: 160px;
	max-height: 160px;

	/* Im List-Grid spannt "image" über mehrere Reihen */
	align-self: center;

	/* kein Aspect-Ratio im Grid */
	aspect-ratio: auto;
}

.listing-box.layout-list .listing-meta{ grid-area: meta; }
.listing-box.layout-list .listing-title{ grid-area: title; margin: 0 10px; }
.listing-box.layout-list .listing-subtitle{ grid-area: subtitle; margin: 0 10px; }
.listing-box.layout-list .listing-desc{ grid-area: desc; margin: 0 10px; }
.listing-box.layout-list .listing-footer{ padding: 4px 10px 6px; }
.listing-box.layout-list .listing-bottom{ grid-area: bottom; }

/* ============================================================
   LIST LAYOUT (MOBILE)
============================================================ */
@media (max-width: 768px){

	.listing-box.layout-list{
		grid-template-columns: var(--mietp-list-img-w-mobile, 120px) 1fr;
		grid-template-areas:
			"image meta"
			"image title"
			"image subtitle"
			"image desc"
			"image bottom";
		row-gap: 6px;
		column-gap: 12px;
	}

	/* Mobile List ohne Untertitel: Untertitel-Row komplett entfernen */
	.listing-box.layout-list.no-subtitle{
		grid-template-areas:
			"image meta"
			"image title"
			"image desc"
			"image bottom";
	}

	.listing-box.layout-list .listing-thumb-wrap{
		height: 160px;
		max-height: 160px;
		align-self: center;
	}

	.listing-box.layout-list .listing-thumb-wrap img{
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: center;
	}

	.listing-box.layout-list .listing-meta{
		padding-top: 4px;
	}

	.listing-box.layout-list .listing-footer{
		margin-top: 4px;
	}
}