/* ==========================================================================
   mindline – Komponenten fuer page-templates/page-multisite.php
   Geladen ueber inc/mindline-components.php (nur auf "Multisite Page").
   1. Statisches Banner      (.banner--static)
   2. Headline H1 im Textabschnitt
   3. Team-Raster            (.team-grid)
   4. Portfolio-Bilder mobil (.portfolio .image-mobile)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Statisches Banner
   Ersetzt das Parallax-Banner, wenn das Seitenfeld "Banner statisch" aktiv ist.
   --banner-offset = Hoehe der Untermenue-Leiste, die ueber dem Banner liegt.
   Die !important-Regeln neutralisieren die alten Banner-Hacks im
   Customizer-CSS (Hoehe, Hintergrundbild, negative Abstaende). Sie greifen
   nur bei .banner--static, das alte Parallax-Banner bleibt unberuehrt.
   -------------------------------------------------------------------------- */

.banner.banner--static {
	--banner-offset: 55px; /* fixe Untermenue-Leiste endet bei 169px, Banner beginnt bei 114px */
	position: relative;
	height: auto !important;
	margin-top: 0 !important;
	padding-top: var(--banner-offset);
	background: var(--banner-bg, #5d5e5a) !important;
	transform: none !important;
	overflow: hidden;
	line-height: 0; /* keine Luecke unter dem Bild */
}

.banner--static .banner__img {
	display: block;
	width: 100%;
	max-width: var(--banner-max, 1800px);
	height: auto;
	margin: 0 auto;
}

/* Alte Ausgleichs-Hacks im Folgeinhalt ausser Kraft setzen */
.banner.banner--static + * {
	margin-top: 0 !important;
}

.banner.banner--static ~ * .desktop-upshift {
	margin-top: 0 !important;
}

@media screen and (max-width: 800px) {
	.banner.banner--static {
		--banner-offset: 50px;
	}
}


/* --------------------------------------------------------------------------
   2. H1 im Textabschnitt
   Das Theme stylt nur h2 (.text-section h2). Damit eine auf H1 umgestellte
   Headline nicht auf Browser-Standard (2em) zurueckfaellt, gleiche Optik.
   -------------------------------------------------------------------------- */

.text-section h1 {
	clear: both;
	margin: 0;
	padding: 0 10%;
	font-weight: 900;
	font-size: 52px;
	line-height: 60px;
	letter-spacing: 0.5px;
	color: #000;
	text-align: center;
}

@media screen and (max-width: 880px) {
	.text-section h1 {
		padding: 30px 3%;
	}
}

@media screen and (max-width: 800px) {
	.text-section h1 {
		font-size: 42px;
		line-height: 50px;
		word-break: break-word;
		hyphens: auto;
	}
}


/* --------------------------------------------------------------------------
   3. Team-Raster
   4 Spalten Desktop, 3 Tablet quer, 2 Tablet hoch, 1 Smartphone.
   Aufklappen ueber <details>; Nachbarn in derselben Zeile bleiben oben buendig.
   -------------------------------------------------------------------------- */

.team-grid {
	--team-accent: #5e82b9;
	--team-text: #3b3b3b;
	--team-img: 260px;
	padding: 6% 8%;
}

.team-grid__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 56px 40px;
	align-items: start;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.team-grid__item {
	margin: 0;
	padding: 0;
}

/* Portraet: die PNGs bringen Kreis und Ring selbst mit -> kein eigener Rahmen */
.team-grid__portrait {
	width: 100%;
	max-width: var(--team-img);
	aspect-ratio: 1 / 1;
	margin: 0 auto 18px;
}

.team-grid__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Toggle-Kopf */
.team-grid__details {
	max-width: var(--team-img);
	margin: 0 auto;
}

.team-grid__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 0;
	cursor: pointer;
	list-style: none; /* Firefox */
	font-size: 18px;
	line-height: 1.3;
	color: var(--team-text);
}

.team-grid__summary::-webkit-details-marker {
	display: none; /* Safari/Chrome */
}

.team-grid__summary:focus-visible {
	outline: 2px solid var(--team-accent);
	outline-offset: 4px;
}

/* Plus/Minus-Icon als Quadrat (wie Avada-Toggle auf mindline explore) */
.team-grid__icon {
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: var(--team-accent);
}

.team-grid__icon::before,
.team-grid__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	background: #fff;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.team-grid__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.team-grid__details[open] .team-grid__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.team-grid__name {
	font-weight: 400;
}

/* Inhalt */
.team-grid__body {
	padding: 14px 0 0 36px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--team-text);
	text-align: left;
}

.team-grid__body p {
	margin: 0 0 10px;
	padding: 0; /* Theme setzt .text-section p { padding: 0 15% } */
}

.team-grid__function {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.5px;
}

.team-grid__contact a {
	display: block;
	color: var(--team-accent);
	word-break: break-word;
}

@media screen and (max-width: 1200px) {
	.team-grid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (max-width: 900px) {
	.team-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 24px;
	}
}

@media screen and (max-width: 560px) {
	.team-grid {
		--team-img: 220px;
		padding: 12% 6%;
	}

	.team-grid__list {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}


/* --------------------------------------------------------------------------
   4. Portfolio-Bilder mobil
   Theme: .teammembers .collapsed .image-mobile { height: 400px; cover }
   -> Bilder mit Text/Logos wurden beschnitten. Jetzt echtes Seitenverhaeltnis
   (--img-ratio aus page-multisite.php) und vollstaendige Darstellung.
   Gilt fuer alle Subsites mit Portfolio-Abschnitt.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 800px) {
	.portfolio .collapsed .image-mobile {
		height: auto;
		aspect-ratio: var(--img-ratio, 4 / 3);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
}