/* =========================================================================
   Výpis bytů – karty (widget „Výpis bytů – karty" / shortcode)
   Karty bytů seskupené po sekcích podle dispozice. Akcent sdílí --vmenu-accent
   s mega-menu i pluginem „Můj byt". Barvy textu dědí z theme.
   ========================================================================= */

/* Kořen výpisu — počet sloupců mřížky řídí proměnná z PHP (--vbyty-cols). */
.vbyty {
	--vbyty-cols: 2;                                   /* fallback, PHP přepisuje inline */
	--vbyty-line: color-mix(in srgb, currentColor 14%, transparent); /* jemná linka/okraj z barvy textu */
}

/* ---- Akcentní (magenta) box „Aktuálně dostupné byty" -------------------- */
.vbyty-cta {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0 0 3rem;
	padding: 2rem 2.5rem;
	background: var(--vmenu-accent, #d32a5a);          /* akcent Veleslavína (magenta/červená) */
	color: #fff;
	text-decoration: none;
	border-radius: var(--card-radius, 6px);
	transition: filter 0.18s ease, transform 0.18s ease;
}

/* Jemná odezva na hover (bez silného stínu dle pravidel). */
.vbyty-cta:hover {
	filter: brightness(0.95);
	transform: translateY(-1px);
}

.vbyty-cta__icon {
	width: 3.5rem;
	height: 3.5rem;
	flex: 0 0 auto;                                    /* ikona se nesmršťuje */
}

.vbyty-cta__text {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.vbyty-cta__nadpis {
	font-family: var(--font-heading, inherit);         /* nadpisové písmo z design tokenů */
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
}

.vbyty-cta__popis {
	font-size: 1rem;
	opacity: 0.92;                                     /* popis o něco jemnější než nadpis */
}

/* ---- Sekce (jedna dispozice) -------------------------------------------- */
.vbyty-sekce {
	margin: 0 0 3.5rem;                                /* odstup mezi skupinami bytů */
	scroll-margin-top: 6rem;                           /* aby kotva z menu neskončila pod fixní hlavičkou */
}

.vbyty-sekce__hlavicka {
	text-align: center;                                /* nadpis sekce na střed (jako Břetislavka) */
	margin: 0 0 1.75rem;
}

.vbyty-sekce__nadpis {
	text-transform: uppercase;                         /* „BYTY 1+KK …" */
	letter-spacing: 0.02em;
	margin: 0 0 0.5rem;
}

.vbyty-sekce__podnadpis {
	max-width: 46rem;
	margin: 0 auto;                                    /* vycentrovat popisek pod nadpisem */
	opacity: 0.75;                                     /* jemnější než nadpis */
	font-size: 1rem;
}

/* ---- Mřížka karet -------------------------------------------------------- */
.vbyty-grid {
	display: grid;
	grid-template-columns: repeat(var(--vbyty-cols), minmax(0, 1fr));
	gap: 1.75rem;
}

/* ---- Karta bytu ---------------------------------------------------------- */
.vbyty-karta {
	display: flex;                                     /* obrázek vlevo, obsah vpravo */
	overflow: hidden;
	border: 1px solid var(--vbyty-line);               /* okraj kolem CELÉ karty (4 strany) */
	border-radius: var(--card-radius, 6px);            /* radius z design tokenů, fallback 6px */
	background: var(--color-bg, transparent);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* Jemné zvednutí na hover (max 4–6px blur dle pravidel). */
.vbyty-karta:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}

/* Obrázek bytu — levá část karty, jednotný čtvercový formát všech náhledů. */
.vbyty-karta__obrazek {
	flex: 0 0 44%;
	align-self: flex-start;                            /* neroztahovat na výšku karty → drží čtverec */
	aspect-ratio: 1 / 1;                               /* stejná velikost u všech bytů (čtverec) */
	display: block;
	overflow: hidden;
}

.vbyty-karta__obrazek img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;                                 /* vyplnit plochu bez deformace */
}

/* Placeholder pro byt bez featured image — jednotný tvar karty, neutrální ikona. */
.vbyty-karta__obrazek--prazdny {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vbyty-line);                     /* jemné šedé pole z barvy textu */
}

.vbyty-karta__placeholder-icon {
	width: 3rem;
	height: 3rem;
	opacity: 0.45;                                     /* zdrženlivá ikona, ne křiklavá */
}

/* Tělo karty (texty + patička). */
.vbyty-karta__telo {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.5rem;
	min-width: 0;                                      /* aby dlouhý text nepřetekl flex buňku */
}

.vbyty-karta__nazev {
	margin: 0 0 0.25rem;
}

.vbyty-karta__nazev a {
	text-decoration: none;
	color: inherit;
}

/* Dispozice + plocha a podlaží — pomocné popisky. */
.vbyty-karta__dispozice,
.vbyty-karta__podlazi {
	margin: 0;
	font-size: 1rem;
	opacity: 0.8;
}

/* Stav/dostupnost z pluginu „Můj byt" — jen odsazení, vzhled řeší muj-byt.css. */
.vbyty-karta__stav {
	margin: 0.6rem 0 0;
}

/* Patička karty — cena + tlačítko, oddělené jemnou linkou nahoře (pseudo-element, ne border). */
.vbyty-karta__paticka {
	position: relative;
	margin-top: auto;                                  /* přitlačit patičku ke spodku karty */
	padding-top: 1.25rem;
}

.vbyty-karta__paticka::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--vbyty-line);                     /* oddělovač sekcí karty (povolený pseudo-element) */
}

.vbyty-karta__cena {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	font-weight: 700;                                  /* cena vizuálně dominantní */
}

/* Tlačítko „Prohlédnout" — plná akcentní barva. */
.vbyty-karta__tlacitko {
	display: inline-block;
	padding: 0.7rem 1.6rem;
	background: var(--vmenu-accent, #d32a5a);
	color: #fff;
	font-size: 1rem;
	text-decoration: none;
	border-radius: var(--button-radius, 4px);
	transition: filter 0.18s ease;
}

.vbyty-karta__tlacitko:hover {
	filter: brightness(0.92);                          /* lehké ztmavení bez stínu */
}

/* ---- Responzivita -------------------------------------------------------- */
@media (max-width: 900px) {
	.vbyty-grid {
		grid-template-columns: 1fr;                    /* jedna karta na řádek na tabletu/mobilu */
	}
}

@media (max-width: 560px) {
	/* Box na střed, ikona nad textem. */
	.vbyty-cta {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
		padding: 1.75rem;
	}

	.vbyty-cta__nadpis {
		font-size: 1.5rem;
	}

	.vbyty-karta {
		flex-direction: column;                        /* obrázek nad obsahem */
	}

	.vbyty-karta__obrazek {
		flex-basis: auto;
		align-self: stretch;                            /* na celou šířku karty ve stacku */
		aspect-ratio: 1 / 1;                            /* čtverec i na mobilu (jednotný formát) */
	}
}