/* ==========================================================================
   HTL Villach Karten – single place for the look of both card widgets.
   Buttons: .htlv-btn from the child theme (assets/css/htlv-buttons.css).
   ========================================================================== */

/* Widgets fill the height of their column, so cards in a row are equally tall. */
.elementor-widget-htlv-infobox,
.elementor-widget-htlv-kontaktkarte { flex-grow: 1; }
/* A widget with its own width (Elementor: Breite = Benutzerdefiniert) keeps it and does not grow
   in a row, e.g. the 3rd card that wraps into the next line on tablets. */
.elementor-widget-htlv-infobox.elementor-widget__width-initial,
.elementor-widget-htlv-kontaktkarte.elementor-widget__width-initial { flex-grow: 0; }
@media (max-width: 1024px) {
	.elementor-widget-htlv-infobox.elementor-widget-tablet__width-initial,
	.elementor-widget-htlv-kontaktkarte.elementor-widget-tablet__width-initial { flex-grow: 0; }
}
@media (max-width: 767px) {
	.elementor-widget-htlv-infobox.elementor-widget-mobile__width-initial,
	.elementor-widget-htlv-kontaktkarte.elementor-widget-mobile__width-initial { flex-grow: 0; }
}
.elementor-widget-htlv-infobox > .elementor-widget-container,
.elementor-widget-htlv-kontaktkarte > .elementor-widget-container { height: 100%; }

/* A column container that only holds one card gets no default padding (Elementor: 10px),
   so the card lines up with headings and with the old container boxes. */
.e-con:has(> .elementor-widget-htlv-infobox:only-child),
.e-con:has(> .elementor-widget-htlv-kontaktkarte:only-child),
.e-con:has(> .e-con-inner > .elementor-widget-htlv-infobox:only-child),
.e-con:has(> .e-con-inner > .elementor-widget-htlv-kontaktkarte:only-child) {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

/* ---------- Shared: button group ---------- */
.htlv-k__btns {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-top: 16px;
}
.htlv-k__btns--row { flex-direction: row; flex-wrap: wrap; }

/* ---------- HTLV Infobox ---------- */
.htlv-ib {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 26px 24px;
	background: #f4f4f2;
	border-radius: 0 0 10px 10px; /* CD: only the bottom corners are rounded */
	color: var(--htlv-schwarz, #1A1814);
}
.htlv-ib--light       { background: #f9f9f9; } /* same light grey as the grey page sections (theme) */
.htlv-ib--yellow      { background: var(--htlv-gelb, #FFE843); }
.htlv-ib--department { background: var(--htlv-abteilung-hell, #f4f4f2); }
.htlv-ib--white     { background: #fff; border: 1px solid #f2f2f2; }

.htlv-ib__label {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: var(--htlv-bold, 600);
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
	color: #6b6b6b;
}
.htlv-ib--yellow .htlv-ib__label,
.htlv-ib--department .htlv-ib__label { color: var(--htlv-schwarz, #1A1814); }

.htlv-ib__headline {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 300;
	line-height: 1.3;
	color: inherit;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}
.htlv-ib__headline b,
.htlv-ib__headline strong { font-weight: var(--htlv-bold, 600); }

.htlv-ib__text {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 300; /* 1.6.0: was 400; body text weight like Kontaktkarte, accordion and theme cards */
	line-height: 1.5;
	color: inherit;
	font-variant-numeric: tabular-nums;
}

/* ---------- HTLV Kontaktkarte ---------- */
.htlv-cc {
	box-sizing: border-box;
	height: 100%;
	/* Matches the rendered B1 card (container padding + Elementor's 10px default).
	   Left: room for the pill that sticks out by 30px. */
	padding: 36px 34px 36px 50px;
	background: #fff;
	border: 1px solid #f2f2f2;
	border-radius: 0 0 10px 10px;
	color: var(--htlv-schwarz, #1A1814);
}

.htlv-cc__list { margin: 0; padding: 0; }
/* No labels: no pill indent, left padding = right padding */
.htlv-cc--plain { padding-left: 34px; }
.htlv-cc__item > .htlv-cc__content + .htlv-cc__content { margin-top: 6px; }
.htlv-cc__item + .htlv-cc__item { margin-top: 34px; }

.htlv-cc__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	box-sizing: border-box;
	min-width: 151px;
	margin: 0 0 6px -30px;
	padding: 3px 11px 3px 3px;
	border: 1px solid #f2f2f2;
	border-radius: 40px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

/* Dot: department colour from the URL, HTL yellow on general pages. */
.htlv-cc__dot {
	flex: 0 0 19px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--htlv-abteilung, var(--htlv-gelb, #FFE843));
}

.htlv-cc__content {
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.3;
	color: inherit;
	overflow-wrap: anywhere;
}

.htlv-cc .htlv-k__btns { margin-top: 42px; }

/* Kontaktkarte with photo (1.5.0): the photo sits inside the card frame, the padding moves to the body. */
.htlv-cc--photo { display: flex; padding: 0; overflow: hidden; }
.htlv-cc--photo-top { flex-direction: column; }
.htlv-cc--photo-left { flex-direction: row; }
.htlv-cc__photo { flex: 0 0 auto; margin: 0; background: #efefef; }
.htlv-cc--photo-top .htlv-cc__photo { width: 100%; aspect-ratio: 3 / 4; border-radius: 0 0 10px 10px; overflow: hidden; }
.htlv-cc--photo-left .htlv-cc__photo { width: 38%; }
/* Selector with .htlv-cc: Elementor's img { height: auto } would win otherwise (1.6.0, replaces the Customizer fix). */
.htlv-cc .htlv-cc__photo .htlv-cc__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.htlv-cc__body { flex: 1 1 auto; min-width: 0; padding: 36px 34px 36px 50px; }
.htlv-cc--plain .htlv-cc__body { padding-left: 34px; }
.htlv-cc--photo-top .htlv-cc__body { padding-top: 28px; }

@media (max-width: 767px) {
	.htlv-cc { padding: 32px 30px 32px 46px; }
	.htlv-cc--plain { padding-left: 30px; }
	.htlv-cc--photo { padding: 0; }
	.htlv-cc__body { padding: 32px 30px 32px 46px; }
	.htlv-cc--plain .htlv-cc__body { padding-left: 30px; }
	.htlv-cc--photo-top .htlv-cc__body { padding-top: 24px; }
}

/* Bold text inside contact card entries */
.htlv-cc__content b,
.htlv-cc__content strong { font-weight: var(--htlv-bold, 600); }