/* ============================================================
 * HD Team — Personen-Grid (Repeater), 1-4 Spalten, responsive.
 * Brand: Rajdhani, Tuerkis #0796a6, Ink #1a1a1a.
 * Spaltenzahl kommt per Klasse .hd-team--cols-N.
 * ============================================================ */

.hd-team {
	display: grid;
	gap: clamp(20px, 2.5vw, 34px);
	font-family: 'Rajdhani', Helvetica, Arial, sans-serif;
}

/* optionale Headline ueber dem Grid */
.hd-team__heading {
	font-family: 'Rajdhani', Helvetica, Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	line-height: 1.05;
	font-size: clamp(26px, 4vw, 44px);
	color: var(--hd-team-heading-color, #0796a6);
	margin: 0 0 clamp(24px, 3vw, 40px);
	text-wrap: balance;
}
.hd-team__heading--center { text-align: center; }

/* Desktop-Spalten */
.hd-team--cols-1 { grid-template-columns: minmax(0, 1fr); }
.hd-team--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hd-team--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hd-team--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Tablet: max 2 nebeneinander */
@media (max-width: 1024px) {
	.hd-team--cols-3,
	.hd-team--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Handy: 1 Spalte (Doppelklasse -> schlaegt die Tablet-Regel ohne !important) */
@media (max-width: 640px) {
	.hd-team.hd-team--cols-1,
	.hd-team.hd-team--cols-2,
	.hd-team.hd-team--cols-3,
	.hd-team.hd-team--cols-4 { grid-template-columns: minmax(0, 1fr); }
	.hd-team { max-width: 420px; }   /* auf dem Handy nicht ueber die ganze Breite ziehen */
	.hd-team--center-mobile { margin-inline: auto; }
}

/* --- Karte --- */
.hd-team__card {
	display: flex;
	flex-direction: column;
}

.hd-team__photo {
	position: relative;
	width: 100%;
	aspect-ratio: var(--hd-team-ratio, 16 / 9);
	border-radius: 14px;
	overflow: hidden;
	background: #e5dfda;   /* beige Platzhalter, falls Bild fehlt/laedt */
}
.hd-team__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;   /* Gesicht mittig statt Stirn-Crop im Querformat */
	display: block;
}

.hd-team__body { padding-top: 18px; }

/* --- Stil "Karte": weisser Hintergrund, Foto oben gerundet (durch Karten-Clip),
 *     unten bündig/gerade; Text mit Innenabstand. --- */
.hd-team--style-card .hd-team__card {
	background: var(--hd-team-card-bg, #ffffff);
	border-radius: 16px;
	overflow: hidden;   /* -> Foto-Oberkante uebernimmt die Karten-Rundung, Unterkante bleibt gerade */
	box-shadow: 0 18px 40px -24px rgba(13, 84, 96, 0.40), 0 2px 6px -2px rgba(13, 84, 96, 0.12);
}
.hd-team--style-card .hd-team__photo {
	border-radius: 0;   /* Rundung kommt vom Karten-Clip (nur oben) */
	background: #e5dfda;
}
.hd-team--style-card .hd-team__body {
	padding: 20px 22px 26px;
}

.hd-team__name {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.08;
	font-size: clamp(18px, 1.5vw, 21px);
	color: var(--hd-team-name-color, #1a1a1a);
}
.hd-team__title {
	margin: 7px 0 0;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	color: var(--hd-team-title-color, #1a1a1a);
}
.hd-team__company {
	margin: 2px 0 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.35;
	color: var(--hd-team-company-color, #6d7276);
}

.hd-team__focus {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(13, 84, 96, 0.12);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	line-height: 1.3;
	color: var(--hd-team-focus-color, #0796a6);
}
.hd-team__focus-label { flex: 0 0 auto; opacity: 0.75; }

.hd-team__linkedin {
	display: inline-flex;
	align-items: center;
	margin-top: 16px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.hd-team__linkedin img {
	height: 30px;
	width: auto;
	display: block;
}
.hd-team__linkedin:hover { opacity: 0.72; }
.hd-team__linkedin:focus-visible { outline: 2px solid #0796a6; outline-offset: 3px; }