/* =====================================================================
   HW Ansprechpartner Grid

   Every card spans the same four rows of one shared grid and inherits the
   row sizes via `grid-template-rows: subgrid`. That is the whole point:
   images, function, name and the contact block sit on identical baselines
   across all cards, no matter how long the individual texts are. Separate
   widgets per person can never do this — each would be its own formatting
   context with no knowledge of its neighbours.
   ===================================================================== */

.hw-apg {
	--hw-apg-cols: 4;
	--hw-apg-col-min: 240px;
	--hw-apg-gap-x: 24px;
	--hw-apg-gap-y: 32px;

	--hw-apg-card-bg: #ffffff;
	--hw-apg-card-bg-alt: #2b2b2b;
	--hw-apg-card-radius: 0px;
	--hw-apg-card-lift: -6px;
	--hw-apg-transition: 300ms;

	--hw-apg-pad-x: 24px;
	--hw-apg-pad-y: 28px;

	--hw-apg-ratio: 1/1;
	--hw-apg-img-pos: center top;
	--hw-apg-img-radius: 0px;
	--hw-apg-img-zoom: 1.06;

	--hw-apg-position-color: #6aa42f;
	--hw-apg-position-color-alt: #8cc63f;
	--hw-apg-position-gap: 8px;

	--hw-apg-name-color: #1a1a1a;
	--hw-apg-name-color-alt: #ffffff;
	--hw-apg-name-gap: 20px;

	--hw-apg-contact-color: #333333;
	--hw-apg-contact-color-alt: #f2f2f2;
	--hw-apg-contact-hover: #6aa42f;
	--hw-apg-contact-hover-alt: #8cc63f;
	--hw-apg-icon-color: #6aa42f;
	--hw-apg-icon-color-alt: #8cc63f;
	--hw-apg-icon-size: 16px;
	--hw-apg-icon-gap: 12px;
	--hw-apg-contact-gap: 12px;

	display: block;
	width: 100%;
}

.hw-apg *,
.hw-apg *::before,
.hw-apg *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   GRID
   --------------------------------------------------------------------- */

.hw-apg__grid {
	display: grid;
	column-gap: var(--hw-apg-gap-x);
	row-gap: var(--hw-apg-gap-y);
	align-items: stretch;
}

/* `min()` guards against the classic auto-fit overflow: without it a card
   whose minimum exceeds the container width forces a horizontal scrollbar. */
.hw-apg--cols-auto .hw-apg__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(var(--hw-apg-col-min), 100%), 1fr));
}

.hw-apg--cols-fixed .hw-apg__grid {
	grid-template-columns: repeat(var(--hw-apg-cols), minmax(0, 1fr));
}

/* ---------------------------------------------------------------------
   CARD — four subgridded rows: media / first text / second text / contacts
   --------------------------------------------------------------------- */

.hw-apg__card {
	grid-row: span 4;
	display: grid;
	grid-template-rows: subgrid;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
	background: var(--hw-apg-card-bg);
	border-radius: var(--hw-apg-card-radius);
	overflow: hidden;
	transition:
		transform var(--hw-apg-transition) ease,
		box-shadow var(--hw-apg-transition) ease,
		background-color var(--hw-apg-transition) ease;
}

.hw-apg__card:hover,
.hw-apg__card:focus-within {
	transform: translateY(var(--hw-apg-card-lift));
}

/* alternating colours */
.hw-apg--alternate.hw-apg--alt-even .hw-apg__card:nth-child(even),
.hw-apg--alternate.hw-apg--alt-odd  .hw-apg__card:nth-child(odd),
.hw-apg .hw-apg__card--alt {
	background: var(--hw-apg-card-bg-alt);
	--hw-apg-position-color: var(--hw-apg-position-color-alt);
	--hw-apg-name-color: var(--hw-apg-name-color-alt);
	--hw-apg-contact-color: var(--hw-apg-contact-color-alt);
	--hw-apg-contact-hover: var(--hw-apg-contact-hover-alt);
	--hw-apg-icon-color: var(--hw-apg-icon-color-alt);
}

/* explicit per-person override wins over the alternating rule */
/* `inherit` pulls the value back down from .hw-apg. `initial` would make the
   custom property guaranteed-invalid and every var() using it would collapse. */
.hw-apg .hw-apg__card--base {
	background: var(--hw-apg-card-bg);
	--hw-apg-position-color: inherit;
	--hw-apg-name-color: inherit;
	--hw-apg-contact-color: inherit;
	--hw-apg-contact-hover: inherit;
	--hw-apg-icon-color: inherit;
}

/* ---------------------------------------------------------------------
   MEDIA
   --------------------------------------------------------------------- */

.hw-apg__media {
	grid-row: 1;
	margin: 0;
	overflow: hidden;
	border-radius: var(--hw-apg-img-radius);
	background: rgba(0, 0, 0, .04);
}

.hw-apg__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--hw-apg-ratio);
	object-fit: cover;
	object-position: var(--hw-apg-img-pos);
	transition: transform var(--hw-apg-transition) ease, filter var(--hw-apg-transition) ease;
}

.hw-apg--ratio-auto .hw-apg__media img {
	height: auto;
	aspect-ratio: auto;
}

.hw-apg__media--empty { aspect-ratio: var(--hw-apg-ratio); }

.hw-apg__card:hover .hw-apg__media img,
.hw-apg__card:focus-within .hw-apg__media img {
	transform: scale(var(--hw-apg-img-zoom));
}

/* ---------------------------------------------------------------------
   TEXT ROWS
   Padding sits on the individual rows rather than on a wrapper, because a
   wrapper would collapse the four rows into one and break the subgrid.
   --------------------------------------------------------------------- */

.hw-apg__position,
.hw-apg__name,
.hw-apg__contacts {
	padding-inline: var(--hw-apg-pad-x);
	min-width: 0;
}

/* whichever text row comes first gets the top padding */
.hw-apg__card > :nth-child(2) { padding-block-start: var(--hw-apg-pad-y); }

.hw-apg__position {
	grid-row: 2;
	margin: 0 0 var(--hw-apg-position-gap);
	color: var(--hw-apg-position-color);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.hw-apg__name {
	grid-row: 3;
	margin: 0 0 var(--hw-apg-name-gap);
	color: var(--hw-apg-name-color);
	font-size: 1.375rem;
	line-height: 1.2;
	text-wrap: balance;
}

/* When name comes first the rows swap; the margins follow the visual role. */
.hw-apg__card > .hw-apg__name:nth-child(2) { grid-row: 2; margin-bottom: var(--hw-apg-position-gap); }
.hw-apg__card > .hw-apg__position:nth-child(3) { grid-row: 3; margin-bottom: var(--hw-apg-name-gap); }

.hw-apg__position--empty,
.hw-apg__name--empty { visibility: hidden; }

/* ---------------------------------------------------------------------
   CONTACTS
   --------------------------------------------------------------------- */

.hw-apg__contacts {
	grid-row: 4;
	display: flex;
	flex-direction: column;
	gap: var(--hw-apg-contact-gap);
	margin: 0;
	padding-block-end: var(--hw-apg-pad-y);
	list-style: none;
	align-content: start;
}

.hw-apg__contact {
	margin: 0;
	color: var(--hw-apg-contact-color);
	line-height: 1.4;
}

.hw-apg__contact--empty { visibility: hidden; }

.hw-apg__link {
	display: flex;
	align-items: center;
	gap: var(--hw-apg-icon-gap);
	color: inherit;
	text-decoration: none;
	transition: color var(--hw-apg-transition) ease;
	overflow-wrap: anywhere;
}

a.hw-apg__link:hover,
a.hw-apg__link:focus-visible {
	color: var(--hw-apg-contact-hover);
}

a.hw-apg__link:hover .hw-apg__icon,
a.hw-apg__link:focus-visible .hw-apg__icon {
	color: var(--hw-apg-contact-hover);
}

/* Rows without an icon keep the indent only when requested, so the text of
   every line stays flush with the lines that do have one. */
.hw-apg__icon--empty { display: none; }
.hw-apg--reserve-icons .hw-apg__icon--empty { display: inline-flex; }

.hw-apg__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hw-apg-icon-size);
	height: var(--hw-apg-icon-size);
	color: var(--hw-apg-icon-color);
	transition: color var(--hw-apg-transition) ease;
}

.hw-apg__icon i,
.hw-apg__icon svg {
	width: 1em;
	height: 1em;
	font-size: var(--hw-apg-icon-size);
	fill: currentColor;
}

.hw-apg a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.hw-apg__empty {
	padding: 24px;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	color: #64748b;
	text-align: center;
}

/* ---------------------------------------------------------------------
   FALLBACK — browsers without subgrid
   Alignment then rests on the fixed image ratio plus a contact block that
   is pushed to the bottom of each card.
   --------------------------------------------------------------------- */

@supports not (grid-template-rows: subgrid) {
	.hw-apg__card {
		grid-row: auto;
		display: flex;
		flex-direction: column;
	}
	.hw-apg__contacts { margin-top: auto; }
}

/* ---------------------------------------------------------------------
   PRINT & REDUCED MOTION
   --------------------------------------------------------------------- */

@media print {
	.hw-apg__grid { display: block; }
	.hw-apg__card { break-inside: avoid; margin-bottom: 12pt; box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.hw-apg__card,
	.hw-apg__media img,
	.hw-apg__link,
	.hw-apg__icon {
		transition: none !important;
	}
	.hw-apg__card:hover,
	.hw-apg__card:focus-within { transform: none !important; }
	.hw-apg__card:hover .hw-apg__media img,
	.hw-apg__card:focus-within .hw-apg__media img { transform: none !important; }
}