/**
 * Bloki pomieszczeń — widok karty (ikona / tytuł + licznik), stany hover i focus-within.
 */

.wp-block-dom-pdd-bloki-pomieszczen.dom-pdd-bloki-pomieszczen {
	/* margin-left: 0;
	margin-right: 0; */
	--dom-pdd-kafelek-slider-slide: min(82vw, 14rem);
	--dom-pdd-kafelek-slider-gap: 0.75rem;
	--dom-pdd-kafelek-title: #101828;
	--dom-pdd-kafelek-icon-bg: #f2f3f5;
	--dom-pdd-kafelek-icon-bg-hover: #e8f1fc;
	--dom-pdd-kafelek-title-hover: #2f6feb;
	--dom-pdd-kafelek-border: #e2e4e7;
	--dom-pdd-kafelek-subtitle: #757575;
	--dom-pdd-kafelek-icon-pad-y: 1.25rem;
	--dom-pdd-kafelek-icon-pad-y-hover: 1.75rem;
}

/* Link do archiwum termu (cały kafelek). */
a.dom-pdd-pom-kafelek__term-link {
	box-sizing: border-box;
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

a.dom-pdd-pom-kafelek__term-link:hover,
a.dom-pdd-pom-kafelek__term-link:focus {
	color: inherit;
	text-decoration: none;
}

a.dom-pdd-pom-kafelek__term-link:focus-visible {
	outline: 2px solid var(--dom-pdd-kafelek-title-hover, #2f6feb);
	outline-offset: 2px;
}

.dom-pdd-bloki-pomieszczen.is-layout-grid {
	width: 100%;
}

/* Wąski ekran: poziomy slider (przewijanie lewo–prawo; overflow ukryty pionowo). */
@media (max-width: 781px) {
	.wp-block-dom-pdd-bloki-pomieszczen.dom-pdd-bloki-pomieszczen.is-layout-grid,
	.wp-block-dom-pdd-bloki-pomieszczen.dom-pdd-bloki-pomieszczen.is-layout-flex {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--style--root--padding-left, 0.75rem);
		gap: var(--wp--style--block-gap, var(--dom-pdd-kafelek-slider-gap));
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.wp-block-dom-pdd-bloki-pomieszczen.dom-pdd-bloki-pomieszczen.is-layout-grid::-webkit-scrollbar,
	.wp-block-dom-pdd-bloki-pomieszczen.dom-pdd-bloki-pomieszczen.is-layout-flex::-webkit-scrollbar {
		display: none;
	}

	.wp-block-dom-pdd-bloki-pomieszczen.dom-pdd-bloki-pomieszczen.is-layout-grid > *,
	.wp-block-dom-pdd-bloki-pomieszczen.dom-pdd-bloki-pomieszczen.is-layout-flex > * {
		flex: 0 0 var(--dom-pdd-kafelek-slider-slide);
		max-width: var(--dom-pdd-kafelek-slider-slide);
		width: var(--dom-pdd-kafelek-slider-slide);
		scroll-snap-align: start;
		scroll-snap-stop: normal;
		min-width: 0;
		box-sizing: border-box;
	}
}

/* Kafelek wypełnia komórkę siatki */
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek > .wp-block-group.dom-pdd-pom-kafelek__content,
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek .dom-pdd-pom-kafelek__content {
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
	margin: 0;
}

.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles.dom-pdd-pom-kafelek {
	box-sizing: border-box;
	cursor: pointer;
	border-radius: 10px;
	transition: box-shadow 0.2s ease;
	height: 100%;
}

.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles.dom-pdd-pom-kafelek:hover,
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles.dom-pdd-pom-kafelek:focus-within {
	box-shadow: 0 6px 20px rgba(47, 111, 235, 0.12);
}

/* Główna grupa kafla */
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles .dom-pdd-pom-kafelek__content.wp-block-group {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	min-height: 100%;
	gap: 0;
	margin: 0 !important;
	padding: 0;
	border: 1px solid var(--dom-pdd-kafelek-border);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-sizing: border-box;
}

/* Górna strefa ikony */
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles .dom-pdd-pom-kafelek__content > .wp-block-dom-pdd-ikona-pomieszczenia {
	flex: 0 0 auto;
	background-color: var(--dom-pdd-kafelek-icon-bg);
	padding: var(--dom-pdd-kafelek-icon-pad-y) 1rem;
	margin: 0 !important;
	transition: background-color 0.2s ease, padding 0.2s ease;
}

.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles:hover .dom-pdd-pom-kafelek__content > .wp-block-dom-pdd-ikona-pomieszczenia,
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles:focus-within .dom-pdd-pom-kafelek__content > .wp-block-dom-pdd-ikona-pomieszczenia {
	background-color: var(--dom-pdd-kafelek-icon-bg-hover);
	padding-top: var(--dom-pdd-kafelek-icon-pad-y-hover);
	padding-bottom: var(--dom-pdd-kafelek-icon-pad-y-hover);
}

/* Ikona na niebiesko przy hover (pojedynczy plik graficzny; nie dual-color) */
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles .dom-pdd-ikona-pomieszczenia__img {
	transition: filter 0.2s ease;
}

.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles:hover .wp-block-dom-pdd-ikona-pomieszczenia:not(.dom-pdd-ikona-pomieszczenia--dual-color) .dom-pdd-ikona-pomieszczenia__img,
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles:focus-within .wp-block-dom-pdd-ikona-pomieszczenia:not(.dom-pdd-ikona-pomieszczenia--dual-color) .dom-pdd-ikona-pomieszczenia__img {
	filter: brightness(0) saturate(100%) invert(37%) sepia(86%) saturate(1350%) hue-rotate(200deg) brightness(96%) contrast(94%);
	transition: filter 0.2s ease;
}

/* Dolna sekcja (grupa meta): tytuł + liczba */
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles .dom-pdd-pom-kafelek__meta.wp-block-group {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.35rem;
	margin: 0 !important;
	padding: 1rem 1rem 1.1rem;
	background: #fff;
	border: none;
	border-radius: 0;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles .dom-pdd-pom-kafelek__meta .wp-block-dom-pdd-tytul-pomieszczenia {
	margin: 0 !important;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.25;
	color: var(--dom-pdd-kafelek-title) !important;
	transition: color 0.2s ease;
}

.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles:hover .dom-pdd-pom-kafelek__meta .wp-block-dom-pdd-tytul-pomieszczenia,
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles:focus-within .dom-pdd-pom-kafelek__meta .wp-block-dom-pdd-tytul-pomieszczenia {
	color: var(--dom-pdd-kafelek-title-hover) !important;
}

.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles .dom-pdd-pom-kafelek__meta .wp-block-dom-pdd-liczba-elementow-pomieszczenia {
	margin: 0 !important;
	color: var(--dom-pdd-kafelek-subtitle) !important;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.3;
}

/* Stary szablon: tytuł i liczba jako bezpośrednie dzieci (bez grupy meta) */
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles .dom-pdd-pom-kafelek__content > .wp-block-dom-pdd-tytul-pomieszczenia {
	margin: 0 !important;
	font-weight: 700;
	padding: 1rem 1rem 0.15rem;
	background: #fff;
	text-align: center;
	color: var(--dom-pdd-kafelek-title) !important;
	transition: color 0.2s ease;
	font-size: 1.0625rem;
	line-height: 1.25;
}

.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles .dom-pdd-pom-kafelek__content > .wp-block-dom-pdd-liczba-elementow-pomieszczenia {
	margin: 0 !important;
	padding: 0 1rem 1rem;
	background: #fff;
	text-align: center;
	color: var(--dom-pdd-kafelek-subtitle) !important;
	font-size: 0.875rem;
	font-weight: 400;
}

.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles:hover .dom-pdd-pom-kafelek__content > .wp-block-dom-pdd-tytul-pomieszczenia,
.wp-block-dom-pdd-bloki-pomieszczen .dom-pdd-pom-kafelek--tiles:focus-within .dom-pdd-pom-kafelek__content > .wp-block-dom-pdd-tytul-pomieszczenia {
	color: var(--dom-pdd-kafelek-title-hover) !important;
}