/* ============================================================
   ROI PROMO — znovupoužitelné promo bloky (inc/promo/)
   Umístění: topbar · hp_band · hp_listing_card · projects · property_sidebar
   Barvy kampaně jdou přes CSS proměnné (--promo-bg / --promo-accent),
   které nastaví PHP inline (roi_promo_theme_style). Fallback = navy / gold.
   ============================================================ */

:root {
	--promo-bg: var(--base);
	--promo-accent: var(--secondary);
	--promo-text: var(--white);
	--promo-muted: rgba(255, 255, 255, 0.72);
	--roi-promo-topbar-h: 0px;
}

/* ---------- Sdílené drobnosti ---------- */

.re-promo-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--promo-accent);
	line-height: 1.2;
}
.re-promo-tag::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--promo-accent);
	flex-shrink: 0;
}
.re-promo-tag--dark { color: var(--secondary); }
.re-promo-tag--dark::before { background: var(--secondary); }

.re-promo-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1.2rem 2.4rem;
	border-radius: var(--btn-radius, 5rem);
	font-weight: 700;
	font-size: var(--text-s);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--transition);
}
.re-promo-btn--accent,
a.re-promo-btn--accent,
a.re-promo-btn--accent:visited { background: var(--promo-accent); color: var(--base); }
.re-promo-btn--accent:hover { filter: brightness(1.06); transform: translateY(-1px); }
.re-promo-btn--ghost,
a.re-promo-btn--ghost,
a.re-promo-btn--ghost:visited { background: transparent; color: var(--promo-text); border: 1.5px solid rgba(255, 255, 255, 0.55); }
.re-promo-btn--ghost:hover { border-color: var(--promo-text); background: rgba(255, 255, 255, 0.08); }
.re-promo-btn--s { padding: 0.9rem 1.8rem; font-size: var(--text-xs); }
.re-promo-ext { font-size: 0.9em; opacity: 0.8; }

.re-promo-badge {
	position: absolute;
	top: 1.2rem;
	left: 1.2rem;
	z-index: 2;
	background: var(--promo-accent);
	color: var(--base);
	border-radius: 99px;
	padding: 0.4rem 1rem;
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ============================================================
   1) TOPBAR — fixní lišta nad hlavičkou
   Hlavička je position:fixed (top: --admin-bar-offset). Lišta se vloží
   nad ni a body třída has-roi-promo-topbar posune hlavičku i obsah.
   ============================================================ */

.re-promo-topbar {
	position: fixed;
	top: var(--admin-bar-offset, 0px);
	left: 0;
	right: 0;
	z-index: 99; /* pod hlavičkou (100), aby mobilní menu overlay lištu překryl */
	background: var(--promo-bg);
	color: var(--promo-text);
	font-size: var(--text-s);
	line-height: 1.3;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
	transition: opacity 0.24s ease, transform 0.24s ease;
}
.re-promo-topbar.is-dismissing { opacity: 0; transform: translateY(-100%); }
.re-promo-topbar__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding: 0.8rem var(--gutter);
	display: flex;
	align-items: center;
	gap: 1.6rem;
	min-height: 4.4rem;
}
.re-promo-topbar__main,
a.re-promo-topbar__main,
a.re-promo-topbar__main:visited {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	color: inherit;
	text-decoration: none;
}
.re-promo-topbar__main:hover .re-promo-topbar__text { text-decoration: underline; text-underline-offset: 0.2em; }
.re-promo-topbar__logo { height: 2rem; width: auto; flex-shrink: 0; }
.re-promo-topbar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-promo-topbar__text--mobile { display: none; }
.re-promo-topbar__cta-text--mobile { display: none; }
.re-promo-topbar__cta,
a.re-promo-topbar__cta,
a.re-promo-topbar__cta:visited {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--promo-accent);
	color: var(--base);
	border-radius: 99px;
	padding: 0.6rem 1.4rem;
	font-size: var(--text-xs);
	font-weight: 700;
	text-decoration: none;
	transition: var(--transition);
}
.re-promo-topbar__cta:hover { filter: brightness(1.06); }
.re-promo-topbar__close {
	flex-shrink: 0;
	width: 2.8rem;
	height: 2.8rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: inherit;
	font-size: 1.8rem;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: var(--transition);
}
.re-promo-topbar__close:hover { background: rgba(255, 255, 255, 0.24); }
.re-promo-topbar__close:focus-visible { outline: 2px solid var(--promo-accent); outline-offset: 2px; }

/* offset hlavičky + obsahu */
body.has-roi-promo-topbar { --roi-promo-topbar-h: 4.4rem; padding-top: var(--roi-promo-topbar-h); }
body.has-roi-promo-topbar .header { top: calc(var(--admin-bar-offset, 0px) + var(--roi-promo-topbar-h)); }
body.has-roi-promo-topbar .header--hidden { transform: translateY(calc(-100% - var(--roi-promo-topbar-h))); }
body.has-roi-promo-topbar.roi-promo-topbar-closed { --roi-promo-topbar-h: 0px; }

@media (max-width: 767px) {
	.re-promo-topbar__inner { gap: 1rem; padding-block: 0.7rem; }
	.re-promo-topbar__logo { display: none; }
	.re-promo-topbar__text--desktop { display: none; }
	.re-promo-topbar__text--mobile { display: block; white-space: normal; }
	.re-promo-topbar__cta { padding: 0.5rem 1.1rem; }
	.re-promo-topbar__cta-text--desktop { display: none; }
	.re-promo-topbar__cta-text--mobile { display: inline; }
}

/* ============================================================
   2) HP BAND — velký pruh na homepage
   ============================================================ */

.re-promo-band-wrap { padding-block: var(--space-xl) 0; }
.re-promo-band {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	min-height: 34rem;
	border-radius: calc(var(--radius) + 4px);
	overflow: hidden;
	background: var(--promo-bg);
	color: var(--promo-text);
	isolation: isolate;
	box-shadow: var(--box-shadow-m);
}
.re-promo-band__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -2;
}
.re-promo-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, var(--promo-bg) 40%, color-mix(in srgb, var(--promo-bg) 45%, transparent) 68%, transparent 100%);
}
.re-promo-band__content {
	position: relative;
	padding: var(--space-xl) var(--space-xl);
	display: grid;
	gap: var(--space-s);
	align-content: center;
	justify-items: start;
}
.re-promo-band__title {
	margin: 0;
	font-size: clamp(2.8rem, 3.4vw, 4.2rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--promo-text);
}
.re-promo-band__lead {
	margin: 0;
	font-size: var(--text-m);
	color: var(--promo-muted);
	max-width: 44ch;
}
.re-promo-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m) var(--space-l);
	margin: var(--space-xs) 0 var(--space-s);
}
.re-promo-facts__item { display: flex; flex-direction: column-reverse; gap: 0.2rem; }
.re-promo-facts__value { margin: 0; font-size: var(--text-xl); font-weight: 800; line-height: 1.1; color: var(--promo-text); }
.re-promo-facts__label { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--promo-muted); }
.re-promo-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

@media (max-width: 900px) {
	.re-promo-band { grid-template-columns: 1fr; min-height: 0; }
	.re-promo-band::after { background: color-mix(in srgb, var(--promo-bg) 78%, transparent); }
	.re-promo-band__content { padding: var(--space-l); }
	.re-promo-band__title { font-size: var(--text-xl); }
}

/* ============================================================
   3) HP LISTING CARD — zvýrazněná karta mezi nabídkami
   Dědí layout .hp7-listing (fotka 28rem | text), jen barvy.
   ============================================================ */

.hp7-listing.re-promo-listing {
	background: var(--promo-bg);
	color: var(--promo-text);
	border-color: var(--promo-bg);
}
.hp7-listing.re-promo-listing:hover { border-color: var(--promo-accent); }
.re-promo-listing__img { position: relative; }
.hp7-listing__body.re-promo-listing__body { justify-content: center; }
.hp7-listing__title.re-promo-listing__title { color: var(--promo-text); min-height: 0; display: block; }
.re-promo-listing__meta { margin: 0; font-size: var(--text-s); color: var(--promo-muted); line-height: 1.45; }
.hp7-listing__meta.re-promo-listing__foot { border-top: 0; margin-top: 0.6rem; padding-top: 0; }

/* ============================================================
   4) PROJECTS — široká karta na /projekty/
   ============================================================ */

.re-promo-project {
	grid-column: 1 / -1; /* v .projects-grid zabere celou šířku */
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	background: var(--white);
	border-radius: calc(var(--radius) + 2px);
	overflow: hidden;
	box-shadow: var(--box-shadow-m);
	border: 1px solid color-mix(in srgb, var(--base) 8%, transparent);
}
.re-promo-project__media {
	position: relative;
	display: block;
	min-height: 30rem;
	background: var(--cream);
}
.re-promo-project__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.re-promo-project:hover .re-promo-project__media img { transform: scale(1.03); }
.re-promo-status {
	position: absolute;
	top: 1.4rem;
	left: 1.4rem;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--white);
	color: var(--base);
	border-radius: 99px;
	padding: 0.5rem 1.2rem;
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(14, 28, 57, 0.15);
}
.re-promo-status::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #2fa46b; }
.re-promo-project__body {
	padding: var(--space-xl);
	display: grid;
	gap: var(--space-s);
	align-content: center;
	justify-items: start;
}
.re-promo-project__title { margin: 0; font-size: clamp(2.6rem, 3vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: var(--base); }
.re-promo-project__lead { margin: 0; font-size: var(--text-m); color: color-mix(in srgb, var(--base) 75%, transparent); line-height: 1.5; }
.re-promo-project__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.8rem;
	width: 100%;
	margin: var(--space-xs) 0 var(--space-s);
}
.re-promo-project__fact { display: flex; flex-direction: column-reverse; gap: 0.2rem; background: var(--cream); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.re-promo-project__fact dd { margin: 0; font-size: var(--text-l); font-weight: 800; line-height: 1.1; color: var(--base); }
.re-promo-project__fact dt { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--base) 60%, transparent); }

@media (max-width: 860px) {
	.re-promo-project { grid-template-columns: 1fr; }
	.re-promo-project__media { min-height: 22rem; }
	.re-promo-project__body { padding: var(--space-l); }
	.re-promo-project__title { font-size: var(--text-xl); }
}
@media (max-width: 480px) {
	.re-promo-project__facts { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   5) PROPERTY SIDEBAR — box v detailu nemovitosti
   ============================================================ */

.re-promo-side,
a.re-promo-side,
a.re-promo-side:visited {
	display: block;
	border-radius: calc(var(--radius) + 2px);
	overflow: hidden;
	background: var(--promo-bg);
	color: var(--promo-text);
	text-decoration: none;
	transition: var(--transition);
}
.re-promo-side:hover { box-shadow: var(--box-shadow-m); transform: translateY(-2px); }
.re-promo-side__img { display: block; width: 100%; height: 20rem; object-fit: cover; }
.re-promo-side__body { display: grid; gap: 0.5rem; padding: var(--space-m) var(--space-l) var(--space-l); justify-items: start; }
.re-promo-side__title { font-size: var(--text-l); font-weight: 800; line-height: 1.15; color: var(--promo-text); }
.re-promo-side__text { font-size: var(--text-s); color: var(--promo-muted); line-height: 1.4; }
.re-promo-side .re-promo-btn { margin-top: 0.6rem; }

/* ============================================================
   6) CATALOG CARD — první karta v gridu katalogu (/prodeje/)
   Dědí .kn-property (flex column, media 4:3; split layout = row).
   ============================================================ */

.pcv2 .kn-property.re-promo-catalog,
.pcv2 a.kn-property.re-promo-catalog,
.pcv2 a.kn-property.re-promo-catalog:visited {
	background: var(--promo-bg);
	color: var(--promo-text);
	text-decoration: none;
}
.re-promo-catalog__media { position: relative; }
.re-promo-catalog__media > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
@media (hover: hover) {
	.pcv2 .re-promo-catalog:hover .re-promo-catalog__media > img { transform: scale(1.05); }
}
.re-promo-catalog__body {
	display: grid;
	gap: 0.6rem;
	padding: var(--space-m) var(--space-l) var(--space-l);
	justify-items: start;
	align-content: center;
	flex: 1;
	min-width: 0;
}
.re-promo-catalog__title { margin: 0; font-size: var(--text-l); font-weight: 800; line-height: 1.15; color: var(--promo-text); }
.re-promo-catalog__text { margin: 0; font-size: var(--text-s); color: var(--promo-muted); line-height: 1.45; }
.re-promo-catalog .re-promo-btn { margin-top: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
	.re-promo-topbar, .re-promo-btn, .re-promo-side, .re-promo-project__media img { transition: none; }
}