/* MZK Facebook — karuzela postów i rolek. Kolory i font jak w skórce RealHomes Modern. */

.mzk-fb,
.mzk-fb-modal {
	--mzk-fb-primary: #0054a6;
	--mzk-fb-accent: #1cb2ff;
	--mzk-fb-heading: #1a1a1a;
	--mzk-fb-text: #808080;
}

.mzk-fb {
	--mzk-fb-height: 470px;
	--mzk-fb-gap: 24px;

	position: relative;
	font-family: Rubik, sans-serif;
}

.mzk-fb__track {
	display: flex;
	gap: var(--mzk-fb-gap);
	margin: 0;
	padding: 6px 2px 18px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.mzk-fb__track::-webkit-scrollbar {
	display: none;
}

.mzk-fb__card {
	flex: 0 0 auto;
	height: var(--mzk-fb-height);
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
	overflow: hidden;
}

.mzk-fb__card--post {
	width: 300px;
}

/* Rolka: proporcje 9:16 przy wysokości karty. */
.mzk-fb__card--reel {
	width: calc(var(--mzk-fb-height) * 9 / 16);
	background: #1a1a1a;
}

/* ── Post ─────────────────────────────────────────────────────────────────── */

.mzk-fb__post {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mzk-fb__media {
	flex: 0 0 225px;
	overflow: hidden;
}

.mzk-fb__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.mzk-fb__post:hover .mzk-fb__media img {
	transform: scale(1.04);
}

.mzk-fb__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	padding: 20px 22px 22px;
}

.mzk-fb__date {
	color: var(--mzk-fb-text);
	font-size: 13px;
}

.mzk-fb__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
	color: var(--mzk-fb-heading);
	font-size: 15px;
	line-height: 1.55;
}

.mzk-fb__card--post:not(:has(.mzk-fb__media)) .mzk-fb__text {
	-webkit-line-clamp: 12;
	font-size: 17px;
}

.mzk-fb__more {
	margin-top: auto;
	color: var(--mzk-fb-primary);
	font-size: 14px;
	font-weight: 500;
}

.mzk-fb__post:hover .mzk-fb__more {
	color: var(--mzk-fb-accent);
}

/* ── Rolka ────────────────────────────────────────────────────────────────── */

.mzk-fb__reel {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	text-align: left;
	cursor: pointer;
}

.mzk-fb__reel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.mzk-fb__reel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .75) 100%);
}

.mzk-fb__reel:hover img {
	transform: scale(1.04);
}

.mzk-fb__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--mzk-fb-accent);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
}

.mzk-fb__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	transform: translate(-50%, -50%);
	transition: transform .25s ease, background-color .25s ease;
}

.mzk-fb__play svg {
	width: 26px;
	height: 26px;
	margin-left: 4px;
	fill: var(--mzk-fb-primary);
}

.mzk-fb__reel:hover .mzk-fb__play,
.mzk-fb__reel:focus-visible .mzk-fb__play {
	background: #fff;
	transform: translate(-50%, -50%) scale(1.1);
}

.mzk-fb__caption {
	position: absolute;
	right: 16px;
	bottom: 16px;
	left: 16px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	line-height: 1.45;
}

.mzk-fb__caption time {
	opacity: .8;
	font-size: 12px;
}

/* ── Strzałki ─────────────────────────────────────────────────────────────── */

.mzk-fb__nav {
	position: absolute;
	top: calc(50% - 6px);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
	color: var(--mzk-fb-primary);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}

.mzk-fb__nav svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mzk-fb__nav:hover {
	background: var(--mzk-fb-primary);
	color: #fff;
}

.mzk-fb__nav--prev {
	left: -23px;
}

.mzk-fb__nav--next {
	right: -23px;
}

.mzk-fb__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.mzk-fb__reel:focus-visible,
.mzk-fb__post:focus-visible,
.mzk-fb__nav:focus-visible {
	outline: 3px solid var(--mzk-fb-accent);
	outline-offset: -3px;
}

/* ── Okno z rolką ─────────────────────────────────────────────────────────── */

.mzk-fb-modal {
	/* Skórka zeruje marginesy — jawne wyśrodkowanie okna. */
	position: fixed;
	inset: 0;
	width: min(400px, 92vw);
	height: fit-content;
	margin: auto;
	max-height: 96vh;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	overflow: visible;
}

.mzk-fb-modal::backdrop {
	background: rgba(10, 20, 35, .82);
}

.mzk-fb-modal[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.mzk-fb-modal__player {
	width: 100%;
	aspect-ratio: 9 / 16;
	max-height: calc(96vh - 80px);
	border-radius: 8px;
	background: #000;
	overflow: hidden;
}

.mzk-fb-modal__player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.mzk-fb-modal__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 4px;
	background: var(--mzk-fb-primary);
	color: #fff;
	font-family: Rubik, sans-serif;
	font-size: 15px;
	text-decoration: none;
	transition: background-color .2s ease;
}

.mzk-fb-modal__link:hover,
.mzk-fb-modal__link:focus-visible {
	background: var(--mzk-fb-accent);
	color: #fff;
}

.mzk-fb-modal__link svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mzk-fb-modal__close {
	position: absolute;
	top: -6px;
	right: -54px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
}

.mzk-fb-modal__close:hover {
	background: rgba(255, 255, 255, .3);
}

.mzk-fb-modal__close svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

body.mzk-fb-modal-open {
	overflow: hidden;
}

.mzk-fb-empty {
	padding: 18px 22px;
	border: 1px dashed var(--mzk-fb-primary, #0054a6);
	border-radius: 6px;
	text-align: center;
}

/* ── Telefon ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.mzk-fb {
		--mzk-fb-height: 420px;
		--mzk-fb-gap: 16px;
	}

	.mzk-fb__card--post {
		width: 78vw;
		max-width: 300px;
	}

	.mzk-fb__media {
		flex-basis: 200px;
	}

	.mzk-fb__nav {
		display: none;
	}

	.mzk-fb-modal__close {
		top: -52px;
		right: 0;
	}

	.mzk-fb-modal__player {
		max-height: calc(96vh - 150px);
	}
}