/*============================================================================
   10-rooms-listing.css — stránka „Pronájem · výpis apartmánů"
   Zdroj designu: _Design/pronajem-vypis.html (rev. 2)

   Bloky:
     PAGE HERO        .page-hero (modulová sekce: crumb + eyebrow + H1 + lead)
     SEARCH CARD      .rooms-search → restyle [tr_search] do plovoucí karty
     TOOLBAR + DRAWER .rooms-toolbar (shortcode [nj_rooms_filterbar])
     ACTIVE CHIPS     .active-filters
     LISTING          .rooms-section → [nj_rooms_listing] (.rooms-group/.apt-card)
     MAP PROMO        .map-promo (Code modul)

   Konvence (viz 09-sections.css): cílit jen .et_pb_section a .et_pb_row.
   Responsive je v tomto souboru (sekce „RESPONSIVE" dole).
============================================================================*/

/* ==========================================================================
   PAGE HERO — modulová sekce. Na Section dej třídu `page-hero`.
   Row: TEXT modul s .crumb + Text/H1 + .lead  (nebo jeden Code modul).
   bg obrázek nastav v Divi (editovatelný); fallback = navy gradient.
   ========================================================================== */
.page-hero,
.page-hero.et_pb_section {
	background-color: var(--navy);
	background-image: linear-gradient(135deg, var(--sea, #2f8b95), var(--navy));
	background-size: cover;
	background-position: center;
	padding: 50px 0 90px !important;
	position: relative;
	z-index: 1;
	gap: 0 !important;
	column-gap: 0 !important;
	row-gap: 0 !important;
}
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 57, 88, .35) 0, rgba(20, 57, 88, .55) 100%);
	pointer-events: none;
	z-index: 0;
}
.page-hero > .et_pb_row {
	position: relative;
	z-index: 2;
	max-width: var(--container) !important;
	width: 92% !important;
	padding: 0 !important;
	margin: 0 auto !important;
}
.page-hero .crumb {
	font-size: .82rem;
	color: rgba(255, 255, 255, .75);
	margin-bottom: 1rem;
	display: flex;
	gap: .4rem;
	align-items: center;
	letter-spacing: .03em;
	flex-wrap: wrap;
}
.page-hero .crumb a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.page-hero .crumb a:hover { color: #fff; }
.page-hero .crumb .sep { opacity: .6; }
.page-hero .crumb .current { color: #fff; font-weight: 500; }
.page-hero .eyebrow { color: #ffd592; }
.page-hero h1 { color: #fff; margin-bottom: .4rem; }
.page-hero .lead {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, .92);
	max-width: 640px;
	margin: 0;
}

/* hero z více Text modulů: zrušit Divi mezeru (gap) mezi moduly + zarovnat vlevo.
   Rozestupy řeší vlastní margin tříd (.eyebrow apod.), ne Divi gap. */
.page-hero .et_pb_row,
.page-hero .et_pb_column { gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; }
/* Divi 5 sloupec je flex (column) → defaultně centruje moduly. Zarovnat vlevo. */
.page-hero .et_pb_column { align-items: flex-start !important; text-align: left !important; }
.page-hero .et_pb_module { text-align: left !important; }
.page-hero .crumb { justify-content: flex-start; }

/* ==========================================================================
   SEARCH CARD — plovoucí vyhledávací karta přes hero.
   Section.rooms-search (vytáhne se nahoru přes .page-hero) → Row →
   TEXT modul [tr_search]. Restyl .tr-search-form do bílé karty designu.
   ========================================================================== */
.rooms-search,
.rooms-search.et_pb_section {
	background: transparent !important;
	padding: 0 !important;
	margin-top: -50px !important;
	position: relative;
	z-index: 5;
	gap: 0 !important;
	column-gap: 0 !important;
	row-gap: 0 !important;
}
.rooms-search > .et_pb_row {
	max-width: var(--container) !important;
	width: 92% !important;
	padding: 0 !important;
	margin: 0 auto !important;
}
.rooms-search .tr-search-form {
	background: #fff;
	border-radius: var(--r-card);
	box-shadow: var(--shadow-deep);
	padding: 16px;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr .8fr .8fr auto;
	gap: 10px;
	align-items: end;
}
.rooms-search .tr-search-form { max-width: 100%; }
.rooms-search .tr-search-field { min-width: 0; }
.rooms-search .tr-search-field label {
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	display: block;
	margin-bottom: 6px;
}
.rooms-search .tr-search-field select,
.rooms-search .tr-search-field input {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 44px;
	box-sizing: border-box;
	border: 1px solid var(--line);
	padding: .65rem .8rem;
	border-radius: var(--r-btn);
	font-family: inherit;
	font-size: .95rem;
	color: var(--navy);
	background: #fff;
}
.rooms-search .tr-search-field select:focus,
.rooms-search .tr-search-field input:focus {
	outline: none;
	border-color: var(--accent);
}
.rooms-search .tr-btn-search {
	background: var(--accent) !important;
	color: #fff !important;
	height: 44px;
	padding: 0 1.4rem;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-btn);
	font-weight: 700;
	white-space: nowrap;
	border: none;
	font-size: .95rem;
	letter-spacing: .05em;
	box-shadow: 0 4px 10px rgba(251, 173, 36, .35);
	cursor: pointer;
	width: 100%;
	transition: background .2s;
}
.rooms-search .tr-btn-search:hover { background: var(--accent-2) !important; }
.rooms-search .tr-search-children-ages {
	grid-column: 1 / -1;
	margin-top: 4px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ==========================================================================
   TOOLBAR + FILTR DRAWER + CHIPS — shortcode [nj_rooms_filterbar]
   Sázení: Section.rooms-toolbar-section (tón .s-sand-1) → Row → TEXT modul
   [nj_rooms_filterbar]. Šířku/centrování řeší sekce+řada (jako jinde).
   ========================================================================== */
.rooms-toolbar-section,
.rooms-toolbar-section.et_pb_section {
	padding: 18px 0 16px !important;
	border-bottom: 1px solid var(--line);
	position: relative;
	z-index: 4;
	gap: 0 !important;
	column-gap: 0 !important;
	row-gap: 0 !important;
}
.rooms-toolbar-section > .et_pb_row {
	max-width: var(--container) !important;
	width: 92% !important;
	padding: 0 !important;
	margin: 0 auto !important;
}

.toolbar-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.toolbar-left { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.toolbar-right { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

.tool-btn {
	background: #fff;
	border: 1px solid var(--line-2);
	color: var(--navy);
	padding: .55rem 1rem;
	border-radius: var(--r-btn);
	font-weight: 500;
	font-size: .88rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	cursor: pointer;
	transition: border-color .15s;
	font-family: inherit;
}
.tool-btn:hover { border-color: var(--navy); }
.tool-btn .count {
	background: var(--accent);
	color: #fff;
	border-radius: var(--r-pill);
	padding: .05rem .45rem;
	font-size: .72rem;
	font-weight: 700;
	margin-left: .2rem;
	min-width: 18px;
	text-align: center;
}
.tool-result { color: var(--muted); font-size: .88rem; }
.tool-result strong { color: var(--navy); font-weight: 600; }

.view-toggle {
	display: inline-flex;
	background: #fff;
	border: 1px solid var(--line-2);
	border-radius: var(--r-btn);
	overflow: hidden;
}
.view-toggle button {
	background: transparent;
	color: var(--muted);
	padding: .5rem .8rem;
	border: none;
	border-right: 1px solid var(--line-2);
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .82rem;
	font-weight: 500;
}
.view-toggle button:last-child { border-right: none; }
.view-toggle button.active { background: var(--navy); color: #fff; }

/* ---- řadit (rozbalovací) ---- */
.tool-sort { position: relative; }
.sort-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-deep);
	list-style: none;
	margin: 0;
	padding: .35rem;
	z-index: 50;
}
.sort-menu[hidden] { display: none; }
.sort-menu li { margin: 0; }
.sort-opt {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	font-family: inherit;
	font-size: .9rem;
	color: var(--navy);
	padding: .55rem .8rem;
	border-radius: var(--r-btn);
	cursor: pointer;
}
.sort-opt:hover { background: var(--sand-1); }
.sort-opt.is-active { color: var(--accent-deep); font-weight: 600; }

/* ---- filtr drawer ---- */
.filter-drawer {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: 24px;
	margin-top: 1.2rem;
	box-shadow: var(--shadow);
}
.filter-drawer[hidden] { display: none; }
.fd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.fd-col h4 {
	margin: 0 0 .8rem;
	font-size: .95rem;
	font-family: var(--font-sans);
	color: var(--navy);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.fd-check {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem 0;
	font-size: .88rem;
	color: var(--navy);
	cursor: pointer;
}
.fd-check input { accent-color: var(--accent); }
.fd-check small { color: var(--muted); margin-left: auto; font-size: .78rem; }
.fd-range { margin-top: .5rem; }
.fd-range .rail {
	height: 4px;
	background: var(--sand-2);
	border-radius: 2px;
	position: relative;
	margin: 1.2rem 0 .4rem;
}
.fd-range .fill { position: absolute; height: 100%; background: var(--accent); border-radius: 2px; left: 20%; right: 30%; }
.fd-range .h {
	position: absolute;
	width: 14px;
	height: 14px;
	background: #fff;
	border: 2px solid var(--accent);
	border-radius: 50%;
	top: -5px;
	transform: translateX(-50%);
	cursor: pointer;
}
.fd-range .h.a { left: 20%; }
.fd-range .h.b { left: 70%; }
/* táhla jsou <button> → reset vzhledu + dotyk */
.fd-range .h { padding: 0; -webkit-appearance: none; appearance: none; touch-action: none; }
.fd-range .h:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fd-range .h:active { cursor: grabbing; }
.fd-range-vals { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); }
.fd-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

/* ---- aktivní filtry (chips) ---- */
.active-filters {
	width: 100%;
	margin: 14px 0 0;
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	align-items: center;
}
.active-filters[hidden] { display: none; }
.active-filters .label {
	font-size: .72rem;
	color: var(--muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-right: .3rem;
}
.active-filters .chips { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: #fff;
	border: 1px solid var(--line);
	padding: .32rem .35rem .32rem .7rem;
	border-radius: var(--r-btn);
	font-size: .82rem;
	color: var(--navy);
	font-weight: 500;
	line-height: 1.2;
}
.filter-chip .x {
	display: inline-flex;
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	background: var(--sand-2);
	border-radius: 3px;
	cursor: pointer;
	color: var(--muted);
	font-size: .7rem;
	font-weight: 600;
	transition: background .15s, color .15s;
	border: none;
}
.filter-chip .x:hover { background: var(--coral); color: #fff; }
.clear-all {
	font-size: .82rem;
	color: var(--accent-deep);
	font-weight: 600;
	cursor: pointer;
	border: none;
	background: transparent;
	margin-left: .4rem;
}
.clear-all:hover { text-decoration: underline; }

/* ==========================================================================
   LISTING — výpis apartmánů. Section.rooms-section (tón .s-sand-1/2/.s-white)
   → Row → TEXT modul [nj_rooms_listing]. Shortcode generuje .rooms-group bloky.
   Pro věrné střídání pozadí lze udělat víc sekcí s [nj_rooms_listing group="…"].
   ========================================================================== */
.rooms-section,
.rooms-section.et_pb_section {
	padding: 60px 0 !important;
	position: relative;
	z-index: 1;
	gap: 0 !important;
	column-gap: 0 !important;
	row-gap: 0 !important;
}
.rooms-section > .et_pb_row {
	max-width: var(--container) !important;
	width: 92% !important;
	padding: 0 !important;
	margin: 0 auto !important;
}
/* mezera mezi skupinami, když je víc v jedné sekci */
.rooms-group + .rooms-group { margin-top: 56px; }

/* ---- hlavička skupiny (rezidence) ---- */
.group-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem;
	align-items: end;
	margin-bottom: 1.6rem;
}
.group-head h2 { margin: 0; }
.group-head .desc { color: var(--muted); max-width: 680px; margin-top: .4rem; font-size: .95rem; }
.group-meta {
	display: flex;
	gap: 1rem;
	align-items: center;
	color: var(--muted);
	font-size: .85rem;
	flex-shrink: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.group-meta strong { color: var(--navy); }
.group-meta .btn-ghost.btn-small { padding: .3rem .6rem; }
.btn-small { padding: .55rem 1rem; font-size: .85rem; }

/* ---- mřížka karet ---- */
.apt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---- karta apartmánu ---- */
.apt-card {
	background: #fff;
	border-radius: var(--r-card);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: transform .25s;
	display: flex;
	flex-direction: column;
	position: relative;
}
.apt-card:hover { transform: translateY(-4px); }
.apt-card .img {
	display: block;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: var(--sand-3);
	position: relative;
}
.apt-card .body { padding: 22px; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.apt-card h3 { margin: 0; font-size: 1.4rem; }
.apt-card h3 a { color: var(--navy); text-decoration: none; }
.apt-card h3 a:hover { color: var(--accent-deep); }

.apt-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .4rem .8rem;
	font-size: .9rem;
	color: var(--muted);
}
.apt-specs span::before { content: "•"; color: var(--accent); margin-right: .4rem; font-weight: 700; }

.apt-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px dashed var(--line);
}
.apt-from { font-size: .8rem; color: var(--muted); }
.apt-price { font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; color: var(--navy); }
.apt-price small { font-family: var(--font-sans); font-size: .8rem; color: var(--muted); font-weight: 400; }

/* ---- štítky (tag-stack) ---- */
.tag-stack {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	align-items: flex-start;
	max-width: 80%;
}
.apt-tag {
	background: rgba(255, 255, 255, .94);
	color: var(--navy);
	padding: .3rem .75rem;
	border-radius: var(--r-pill);
	font-size: .75rem;
	font-weight: 600;
	backdrop-filter: blur(4px);
}
.apt-tag.sale { background: var(--coral); color: #fff; }
.apt-tag.new { background: var(--green); color: #fff; }
.apt-tag.top { background: var(--accent); color: #fff; }
.apt-tag.unavail { background: rgba(91, 102, 114, .95); color: #fff; }

/* ---- srdíčko (wishlist) ---- */
.apt-fav {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	display: grid;
	place-items: center;
	color: var(--navy);
	cursor: pointer;
	transition: color .15s, transform .15s;
	border: none;
	font-size: 1.05rem;
	line-height: 1;
	z-index: 2;
}
.apt-fav:hover { color: var(--coral); transform: scale(1.08); }
.apt-fav.active { color: var(--coral); }

/* ==========================================================================
   MAP PROMO — banner s mapou (Code modul, vlož .map-promo do řady listingu).
   ========================================================================== */
.map-promo {
	background: linear-gradient(135deg, #dde7eb 0%, #c7d4d9 100%);
	border-radius: var(--r-card);
	padding: 30px;
	margin: 2rem 0 0;
	display: grid;
	grid-template-columns: 1fr 240px;
	align-items: center;
	gap: 1.5rem;
	overflow: hidden;
	position: relative;
}
.map-promo h3 { margin: 0 0 .4rem; font-size: 1.5rem; }
.map-promo p { color: var(--muted); margin: 0 0 1rem; font-size: .95rem; max-width: 520px; }
.map-promo-img {
	height: 140px;
	background:
		radial-gradient(circle at 30% 40%, rgba(251, 173, 36, .35) 0, transparent 30%),
		radial-gradient(circle at 70% 60%, rgba(251, 173, 36, .35) 0, transparent 25%),
		radial-gradient(circle at 50% 80%, rgba(251, 173, 36, .4) 0, transparent 20%),
		linear-gradient(135deg, #a8c8d4 0%, #7fa9b8 100%);
	border-radius: var(--r-btn);
	position: relative;
	display: grid;
	place-items: center;
	color: var(--navy);
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ==========================================================================
   ZOBRAZENÍ SEZNAM (view toggle → body.nj-view-list)
   Karta se rozloží vodorovně: fotka vlevo, obsah vpravo.
   ========================================================================== */
body.nj-view-list .apt-grid { grid-template-columns: 1fr; gap: 16px; }
body.nj-view-list .apt-card { flex-direction: row; }
body.nj-view-list .apt-card .img { aspect-ratio: auto; width: 280px; flex-shrink: 0; }
body.nj-view-list .apt-card .body { padding: 20px 24px; }
body.nj-view-list .apt-specs { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
	.rooms-search .tr-search-form { grid-template-columns: repeat(3, 1fr); }
	.rooms-search .tr-btn-search { grid-column: 1 / -1; }
	.apt-grid { grid-template-columns: repeat(2, 1fr); }
	.fd-grid { grid-template-columns: repeat(2, 1fr); }
	.map-promo { grid-template-columns: 1fr; }
	.group-head { grid-template-columns: 1fr; }
	.group-meta { justify-content: flex-start; }
	body.nj-view-list .apt-card .img { width: 220px; }
}
@media (max-width: 640px) {
	.rooms-search .tr-search-form { grid-template-columns: 1fr 1fr; }
	.apt-grid { grid-template-columns: 1fr; }
	.fd-grid { grid-template-columns: 1fr; }
	.page-hero { padding: 40px 0 70px !important; }
	body.nj-view-list .apt-card { flex-direction: column; }
	body.nj-view-list .apt-card .img { width: 100%; aspect-ratio: 4 / 3; }
	body.nj-view-list .apt-specs { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   PHP ŠABLONA (page-pronajem.php) — obsah sekcí je v .container (ne .et_pb_row).
   Hero obsah musí nad overlay ::before.
   ========================================================================== */
/* .nj-listing = sdílená třída <main> obou výpisových šablon (pronájem i prodej). */
.nj-listing .page-hero .container { position: relative; z-index: 2; }
.nj-listing .rooms-search { padding-top: 0; padding-bottom: 0; }
.nj-listing section + section { margin-top: 0; }

/* Sticky toolbar — přichytí se pod plovoucí hlavičku.
   top = výška admin baru (--adminbar-offset) + výška hlavičky (--nj-header-h,
   publikuje header-sticky.js). Jen v PHP šabloně (plain <section>, ne Divi). */
.nj-listing .rooms-toolbar-section {
	position: sticky;
	/* -1px: toolbar zajede o 1px pod hlavičku (vyšší z-index ji překryje) →
	   zmizí sub-pixelová 1px mezera mezi fixní hlavičkou a sticky toolbarem. */
	top: calc(var(--adminbar-offset, 0px) + var(--nj-header-h, 82px) - 1px);
	z-index: 30;
}
@media (max-width: 640px) {
	/* na mobilu hlavička nelepí stejně → toolbar nelepíme (ať nepřekáží) */
	.nj-listing .rooms-toolbar-section { position: static; }
}

/* ==========================================================================
   PRODEJ — výpis nemovitostí. Section.sales-section (tón .s-sand-1) →
   [nj_sales_listing] generuje .sales-group bloky (hlavička + .projects-grid).
   Karty .project-card / .projects-grid jsou v 09-sections.css (sdílené s HP).
   ========================================================================== */
.sales-section,
.sales-section.et_pb_section {
	padding: 60px 0 !important;
	position: relative;
	z-index: 1;
	gap: 0 !important;
	column-gap: 0 !important;
	row-gap: 0 !important;
}
.sales-section > .et_pb_row {
	max-width: var(--container) !important;
	width: 92% !important;
	padding: 0 !important;
	margin: 0 auto !important;
}
.sales-group + .sales-group { margin-top: 56px; }

/* zobrazení seznam (view toggle) — karty prodeje vodorovně */
body.nj-view-list .sales-group .projects-grid { grid-template-columns: 1fr; gap: 16px; }
body.nj-view-list .sales-group .project-card { flex-direction: row; }
body.nj-view-list .sales-group .project-card .img { aspect-ratio: auto; width: 280px; flex-shrink: 0; }
@media (max-width: 1100px) {
	.sales-section .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.sales-section .projects-grid { grid-template-columns: 1fr; }
	body.nj-view-list .sales-group .project-card { flex-direction: column; }
	body.nj-view-list .sales-group .project-card .img { width: 100%; aspect-ratio: 5 / 4; }
}

/* ==========================================================================
   STRÁNKA OBLÍBENÉ (page-oblibene.php) — reuse .rooms-section + .apt-grid
   ========================================================================== */
.nj-fav-page .nj-fav-empty { text-align: center; padding: 30px 0 10px; color: var(--muted); }
.nj-fav-page .nj-fav-empty p { margin: 0 0 1rem; font-size: 1.05rem; }
.nj-fav-page .nj-fav-loading { color: var(--muted); padding: 10px 0; }
.nj-fav-page .apt-grid:empty { display: none; }