/* =============================================================
   BrandRocks Hover Card – v1.3.0
   ============================================================= */

/* ─── Wrapper (siatka kart) ──────────────────────────────────── */
.brhc-wrapper {
	display: flex;
	flex-wrap: wrap;        /* JS nadpisuje na nowrap dla expand-width */
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}

/* ─── Karta – podstawa ───────────────────────────────────────── */
.brhc-card {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	cursor: pointer;
	flex: 1 1 auto;
	min-width: 0;

	/*
	 * Animacja OUT (opuszczanie hover) – tylko height dla expand-height.
	 * Szerokość (flex-basis) jest zarządzana przez hover-card.js,
	 * który ustala jawne wartości px i samodzielnie ustawia transition.
	 */
	transition-property: height;
	transition-duration: var(--brhc-out-duration, 300ms);
	transition-timing-function: var(--brhc-out-easing, ease);
}

/* Animacja IN (wejście w hover) */
.brhc-card:hover {
	transition-duration: var(--brhc-in-duration, 400ms);
	transition-timing-function: var(--brhc-in-easing, ease-in-out);
}

/* ─── Rozwinięcie pionowe ─────────────────────────────────────── */
.brhc-expand-height:hover {
	height: var(--brhc-hover-size, 480px) !important;
}

/* ─── Rozwinięcie poziome ────────────────────────────────────── */
/*
 * Nie ustawiamy już width: min-content ani hover flex – to robi JS.
 * Zostawiamy tylko flex: 1 1 auto żeby karty dzieliły przestrzeń
 * równomiernie zanim JS przejmie kontrolę.
 */
.brhc-expand-width {
	/* flex: 1 1 auto – dziedziczone z .brhc-card */
}

/* ─── Overlay ────────────────────────────────────────────────── */
.brhc-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* OUT */
	transition-property: background-color, opacity;
	transition-duration: var(--brhc-out-duration, 300ms);
	transition-timing-function: var(--brhc-out-easing, ease);
}

.brhc-card:hover .brhc-overlay {
	/* IN */
	transition-duration: var(--brhc-in-duration, 400ms);
	transition-timing-function: var(--brhc-in-easing, ease-in-out);
}

/* ─── Obszar treści ──────────────────────────────────────────── */
.brhc-content {
	position: relative;
	z-index: 2;
	width: 100%;
	box-sizing: border-box;
}

/* ─── Wiersz tytułu (tytuł + opcjonalna ikona inline) ────────── */
.brhc-title-row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
}

/* ─── Tytuł ──────────────────────────────────────────────────── */
.brhc-title {
	margin: 0;
	padding: 0;
	line-height: 1.3;
	flex: 1 1 auto;
	/* OUT */
	transition-property: color, font-size;
	transition-duration: var(--brhc-out-duration, 300ms);
	transition-timing-function: var(--brhc-out-easing, ease);
}

.brhc-card:hover .brhc-title {
	/* IN */
	transition-duration: var(--brhc-in-duration, 400ms);
	transition-timing-function: var(--brhc-in-easing, ease-in-out);
}

/* ─── Treść hover (opis + ikona) – domyślnie ukryta ─────────── */
.brhc-hover-content {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	/* OUT */
	transition-property: max-height, opacity, margin-top;
	transition-duration: var(--brhc-out-duration, 300ms);
	transition-timing-function: var(--brhc-out-easing, ease);
}

.brhc-card:hover .brhc-hover-content {
	max-height: 500px;
	opacity: 1;
	margin-top: 12px;
	/* IN */
	transition-duration: var(--brhc-in-duration, 400ms);
	transition-timing-function: var(--brhc-in-easing, ease-in-out);
}

/* ─── Ikona nad tytułem (above_title) ───────────────────────── */
.brhc-icon-above-title {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-bottom: 0;
	/* OUT */
	transition-property: max-height, opacity, margin-bottom;
	transition-duration: var(--brhc-out-duration, 300ms);
	transition-timing-function: var(--brhc-out-easing, ease);
}

.brhc-card:hover .brhc-icon-above-title {
	max-height: 80px;
	opacity: 1;
	margin-bottom: 8px;
	/* IN */
	transition-duration: var(--brhc-in-duration, 400ms);
	transition-timing-function: var(--brhc-in-easing, ease-in-out);
}

/* ─── Ikona inline w wierszu tytułu (title_left / title_right) ─ */
.brhc-title-row .brhc-icon {
	flex-shrink: 0;
	opacity: 0;
	/* OUT */
	transition-property: opacity, transform;
	transition-duration: var(--brhc-out-duration, 300ms);
	transition-timing-function: var(--brhc-out-easing, ease);
}

/* Ikona z lewej – wchodzi z lewej */
.brhc-icon-pos-title_left .brhc-title-row .brhc-icon {
	transform: translateX(-8px);
}

/* Ikona z prawej – wchodzi z prawej */
.brhc-icon-pos-title_right .brhc-title-row .brhc-icon {
	transform: translateX(8px);
}

/* Obie: widoczne po hover */
.brhc-card:hover .brhc-title-row .brhc-icon {
	opacity: 1;
	transform: translateX(0);
	/* IN */
	transition-duration: var(--brhc-in-duration, 400ms);
	transition-timing-function: var(--brhc-in-easing, ease-in-out);
}

/* ─── Ikona (ogólnie) ────────────────────────────────────────── */
.brhc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	line-height: 1;
	/* OUT */
	transition-property: color;
	transition-duration: var(--brhc-out-duration, 300ms);
	transition-timing-function: var(--brhc-out-easing, ease);
}

/* Ikona w hover-content ma dodatkowy margines */
.brhc-hover-content .brhc-icon {
	margin-bottom: 8px;
}

.brhc-card:hover .brhc-icon {
	/* IN */
	transition-duration: var(--brhc-in-duration, 400ms);
	transition-timing-function: var(--brhc-in-easing, ease-in-out);
}

/* ─── Opis ───────────────────────────────────────────────────── */
.brhc-description {
	margin: 0;
	padding: 0;
	line-height: 1.6;
	/* OUT */
	transition-property: color, font-size;
	transition-duration: var(--brhc-out-duration, 300ms);
	transition-timing-function: var(--brhc-out-easing, ease);
}

.brhc-card:hover .brhc-description {
	/* IN */
	transition-duration: var(--brhc-in-duration, 400ms);
	transition-timing-function: var(--brhc-in-easing, ease-in-out);
}

/* ─── Przycisk-link w hover-content ─────────────────────────── */
.brhc-link-btn {
	display: inline-block;
	margin-top: 14px;
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	/* OUT */
	transition-property: opacity;
	transition-duration: var(--brhc-out-duration, 300ms);
	transition-timing-function: var(--brhc-out-easing, ease);
}

.brhc-card:hover .brhc-link-btn {
	/* IN */
	transition-duration: var(--brhc-in-duration, 400ms);
	transition-timing-function: var(--brhc-in-easing, ease-in-out);
}

.brhc-link-btn:hover {
	opacity: 0.75;
}

/* ─── MOBILE – układ akordeonowy ────────────────────────────── */
@media (max-width: 767px) {

	/* Pionowy stos */
	.brhc-wrapper {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.brhc-card {
		flex: 0 0 auto !important;
		width: 100% !important;
	}

	/* Zablokuj rozwinięcie przez :hover (na dotyku "przyklejone") */
	.brhc-expand-height:hover {
		height: initial !important;
	}

	/* ─── Stan aktywny (akordeon) ─── */
	.brhc-card.brhc-is-active {
		height: var(--brhc-hover-size, 480px) !important;
		transition-duration: var(--brhc-in-duration, 400ms);
		transition-timing-function: var(--brhc-in-easing, ease-in-out);
	}

	.brhc-card.brhc-is-active .brhc-hover-content {
		max-height: 500px;
		opacity: 1;
		margin-top: 12px;
		transition-duration: var(--brhc-in-duration, 400ms);
		transition-timing-function: var(--brhc-in-easing, ease-in-out);
	}

	.brhc-card.brhc-is-active .brhc-icon-above-title {
		max-height: 80px;
		opacity: 1;
		margin-bottom: 8px;
		transition-duration: var(--brhc-in-duration, 400ms);
		transition-timing-function: var(--brhc-in-easing, ease-in-out);
	}

	.brhc-card.brhc-is-active .brhc-title-row .brhc-icon {
		opacity: 1;
		transform: translateX(0);
		transition-duration: var(--brhc-in-duration, 400ms);
		transition-timing-function: var(--brhc-in-easing, ease-in-out);
	}
}