/**
 * Datei: /wp-content/plugins/mietp-core/inc/modules/vendors/css/vendors.css
 *
 * Zweck:
 * 1) CSS nur fuer oeffentliche Vermieter-Profilseite (/vermieter/{slug})
 * 2) Wird conditional geladen (nicht global), um Pagespeed sauber zu halten
 * 3) Definiert Hero/Kopfbereich, Tabs, Content/Sidebar Grid, Listings-Grid
 * 4) Avatar als runder Kreis links (Profilbild oder Fallback)
 * 5) Tabs oberhalb Kurzprofil im Profil-Stil
 * 6) Kein Eingriff in globale Styles oder Card-System
 *
 * Refactor:
 * - Tokens statt Hardcodes (keine festen Hex-Farben)
 * - Modernere Borders (soft via color-mix), Shadows ueber Tokens
 * - BFSG/WCAG: sichtbarer Fokus (:focus-visible)
 */

.mietp-vendor-page{
	max-width:var(--content-width);
	margin:0 auto;
	padding:0 16px 48px;
}

.mietp-vendor-hero{
	margin:20px 0 16px;
	border-radius:16px;
	overflow:hidden;

	/* Bannerbild (wird per inline background-image gesetzt) */
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;

	position:relative;
}

/* ============================================================
   HERO Overlay + Blur (nur bei Banner)
   - Overlay dunkelt das Bild ab
   - Blur wird ueber ein Pseudo-Element geloest
============================================================ */
.mietp-vendor-hero.has-banner::before{
	content:"";
	position:absolute;
	inset:0;
	background:color-mix(in srgb, #000 40%, transparent); /* Overlay-Staerke */
	z-index:1;
	pointer-events:none;
}

/* Blur-Layer: nutzt das gleiche Hintergrundbild wie der Hero */
.mietp-vendor-hero.has-banner::after{
	content:"";
	position:absolute;
	inset:0;
	background:inherit;              /* uebernimmt background-image/position/size */
	filter:blur(2px);                /* Blur-Staerke */
	transform:scale(1.04);           /* verhindert harte Blur-Raender */
	z-index:0;
	pointer-events:none;
}

/* Innenabstand + Banner-Layout */
.mietp-vendor-hero-inner{
	position:relative;
	z-index:2;
	padding:31.5px; /* +75% Headerblock-Hoehe (war 18px) */
}

/* Layout im Kopfbereich */
.mietp-vendor-hero-top{
	display:grid;
	grid-template-columns:168px 1fr auto; /* Logo/Avatar-Spalte +75% (war 96px) */
	gap:16px;
	align-items:center;
}

/* CTA-Reihe sitzt unten im Banner */
.mietp-vendor-ctas{
	display:flex;
	gap:10px;
	justify-content:flex-end;
	align-self:end;
}

/* ============================================================
   Vendor: List-Layout Bildbreite (ersetzt die frueheren Inline CSS Vars)
============================================================ */
.mietp-vendor-page .mp-search-results-grid{
	--mietp-list-img-w-desktop:200px;
	--mietp-list-img-w-mobile:160px;
}

/* ============================================================
   HERO MODES
   - has-banner: klassischer Hero (Text hell)
   - no-banner: White-Block-Look (innen weiss, soft border)
============================================================ */

/* Banner vorhanden -> Hero Look */
.mietp-vendor-hero.has-banner{
	color:var(--text-invert);
	background-color:color-mix(in srgb, var(--text-main) 22%, var(--bg-main)); /* Fallback, falls Bild fehlt */
}

/* Fallback -> wie White-Block */
.mietp-vendor-hero.no-banner{
	background-image:none !important;
	background-color:var(--block-bg);
	border:1px solid color-mix(in srgb, var(--block-border) 70%, transparent);
	color:var(--text-main);
	box-shadow:var(--shadow-md);
}

/* Avatar im Fallback: lesbar, ohne harte Kanten */
.mietp-vendor-hero.no-banner .mietp-vendor-avatar{
	background:color-mix(in srgb, var(--text-main) 4%, transparent);
	border:2px solid color-mix(in srgb, var(--block-border) 70%, transparent);
	box-shadow:none;
}

/* Textfarben im Fallback sicher dunkel */
.mietp-vendor-hero.no-banner .mietp-vendor-title,
.mietp-vendor-hero.no-banner .mietp-vendor-tagline,
.mietp-vendor-hero.no-banner .mietp-vendor-subline{
	color:var(--text-main);
}

/* ============================================================
   Avatar / Logo
============================================================ */
.mietp-vendor-avatar{
	width:168px;
	height:168px;
	border-radius:999px;
	border:0;
	background:var(--bg-main);
	box-shadow:0 0 0 1px color-mix(in srgb, var(--border-main) 55%, transparent), var(--shadow-sm);
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	overflow:hidden;
}

.mietp-vendor-avatar-img,
.mietp-vendor-avatar img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
}

/* Fallback aus mietp_get_avatar() (Span statt Img) */
.mietp-vendor-avatar .mp-avatar-fallback{
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;

	/* keine Doppel-Border im Vendor-Avatar */
	border:0;
	width:100%;
	height:100%;
}

/* Silhouette (hinter Initialen) */
.mietp-vendor-avatar .mp-avatar-silhouette{
	position:absolute;
	inset:0;
	opacity:0.55;
}

/* Initialen */
.mietp-vendor-avatar .mp-avatar-initials{
	position:relative;
	z-index:1;
	font-weight:700;
	line-height:1;
	letter-spacing:0.5px;
	color:var(--border-main);
	font-size:32px;
	user-select:none;
}

/* Wenn kein Banner: Initialen dunkel */
.mietp-vendor-hero.no-banner .mietp-vendor-avatar .mp-avatar-initials{
	color:var(--text-main);
}

/* ============================================================
   Headline / Subline
============================================================ */
.mietp-vendor-title{
	margin:0;
	font-size:22px;
	line-height:1.2;
}

.mietp-vendor-hero.has-banner .mietp-vendor-title{
	color:var(--text-invert);
}

.mietp-vendor-subline{
	margin-top:6px;
	font-size:15px;
	opacity:0.92;
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}

.mietp-vendor-sep{
	opacity:0.85;
}

.mietp-vendor-tagline{
	margin:10px 0 0;
	font-size:15px;
	opacity:0.95;
	max-width:780px;
}

.mietp-vendor-wrap{
	margin-top:12px;
}

.mietp-vendor-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:16px;
	align-items:start;
}

/* verhindert, dass Slider/Track den Grid-Container verbreitert */
.mietp-vendor-main{
	min-width:0;
}

/* ============================================================
   Pill-Navigation
============================================================ */
.mietp-vendor-local-tabs{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center;
	margin:0 0 14px;
	border-bottom:none;
}

.mietp-vendor-local-tabs .mp-pill.is-active{
	background:var(--btn-primary-bg);
	border-color:var(--btn-primary-bg);
	color:var(--btn-primary-color);
}

/* Tabs im Banner: rechts ausrichten, kein Aussenabstand */
.mietp-vendor-hero .mietp-vendor-local-tabs.mietp-vendor-hero-tabs{
	margin:0;
	justify-content:flex-end;
	align-self:end;
}

.mietp-vendor-hero .mietp-vendor-local-tabs.mietp-vendor-hero-tabs .mp-pill{
	white-space:nowrap;
}


/* ============================================================
   Kontakt (zentral gerendert wie Single Listing)
============================================================ */

/* Map: oben eckig, unten abgerundet */
.mietp-vendor-contact-map{
	margin-top:12px;
	border-radius:0 0 14px 14px;
	overflow:hidden;
	margin-bottom:-14px;
}

/* ============================================================
   Preblocks
============================================================ */
.mietp-vendor-preblocks{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:16px;
}

/* echte Tabs: Panels ein-/ausblenden */
.mietp-vendor-tab-panel{
	display:none;
}

.mietp-vendor-tab-panel.is-active{
	display:block;
}

/* ============================================================
   Karten/Blocks im Vendor (lokal, keine Card-SSOT anfassen)
============================================================ */
.mietp-vendor-card{
	background:var(--block-bg);
	border-radius:14px;
	border:1px solid color-mix(in srgb, var(--block-border) 70%, transparent);
	box-shadow:var(--shadow-md);
	padding:14px;
	margin-bottom:16px;
}

.mietp-vendor-h2{
	margin:0 0 10px;
	font-size:16px;
	line-height:1.2;
	color:var(--text-main);
}

.mietp-vendor-h3{
	margin:0;
	font-size:15px;
	line-height:1.25;
}

.mietp-vendor-text{
	margin:0 0 10px;
	font-size:15px;
	line-height:1.55;
	color:color-mix(in srgb, var(--text-main) 85%, transparent);
}

.mietp-vendor-note{
	margin:12px 0 0;
	font-size:13px;
	color:color-mix(in srgb, var(--text-main) 70%, transparent);
}

.mietp-vendor-listings{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:12px;
}

.mietp-vendor-listing{
	display:grid;
	grid-template-columns:92px 1fr;
	gap:10px;
	padding:10px;
	border-radius:12px;
	border:1px solid color-mix(in srgb, var(--block-border) 65%, transparent);
	background:color-mix(in srgb, var(--text-main) 1%, transparent);
}

.mietp-vendor-listing-thumb{
	width:92px;
	height:72px;
	border-radius:10px;
	background:linear-gradient(135deg,
		color-mix(in srgb, var(--text-main) 10%, transparent),
		color-mix(in srgb, var(--text-main) 3%, transparent)
	);
	border:1px solid color-mix(in srgb, var(--block-border) 60%, transparent);
	display:block;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

.mietp-vendor-link{
	color:var(--text-main);
	text-decoration:none;
}

/* BFSG Fokus sichtbar */
.mietp-vendor-link:focus-visible{
	outline:2px solid color-mix(in srgb, var(--brand-primary) 55%, transparent);
	outline-offset:2px;
	border-radius:8px;
}

.mietp-vendor-meta{
	margin-top:6px;
	font-size:13px;
	color:color-mix(in srgb, var(--text-main) 75%, transparent);
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}

.mietp-vendor-map{
	width:100%;
	height:180px;
	border-radius:12px;
	background:linear-gradient(135deg,
		color-mix(in srgb, var(--text-main) 8%, transparent),
		color-mix(in srgb, var(--text-main) 2%, transparent)
	);
	border:1px solid color-mix(in srgb, var(--block-border) 60%, transparent);
	margin-bottom:10px;
}

.mietp-vendor-actions{
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
}

/* Slider im Vendor: Breite strikt im Block halten */
.mietp-vendor-slider-card{
	overflow:hidden;
}

.mietp-vendor-slider-card .mp-listings-slider{
	width:100%;
	max-width:100%;
}

.mietp-vendor-slider-card .mp-slider-viewport{
	margin:0;
	padding:12px;
	overflow-x:auto;
	overflow-y:visible;
}

.mietp-vendor-slider-card .mp-slider-track{
	padding:0;
	margin:0;
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width:980px){
	.mietp-vendor-grid{
		grid-template-columns:1fr;
	}

	.mietp-vendor-ctas{
		justify-content:flex-start;
	}

	/* Preblocks auf Tablet/Mobile stacken */
	.mietp-vendor-preblocks{
		grid-template-columns:1fr;
	}

	/* Tabs im Banner auf Tablet: links ausrichten */
	.mietp-vendor-hero .mietp-vendor-local-tabs.mietp-vendor-hero-tabs{
		justify-content:flex-start;
	}
}

@media (max-width:620px){
	.mietp-vendor-hero-top{
		grid-template-columns:126px 1fr; /* +75% (war 72px) */
	}

	.mietp-vendor-avatar{
		width:126px;
		height:126px;
	}

	.mietp-vendor-avatar .mp-avatar-initials{
		font-size:42px;
	}

	.mietp-vendor-ctas{
		justify-content:flex-start;
	}

	.mietp-vendor-hero .mietp-vendor-local-tabs.mietp-vendor-hero-tabs{
		margin-top:10px;
	}

	.mietp-vendor-listings{
		grid-template-columns:1fr;
	}
}