/**
 * ROI RATING banner — compact informační banner s otočným odznakem.
 *
 * Layout inspirovaný .re-podp-banner: media | content | actions ve 3 sloupcích.
 * Reuse .hp7-rating__flipper kvůli sdílenému flipper JS — flipper přebije
 * velikost vlastním scoped selektorem .re-roi-banner .hp7-rating__flipper.
 */

.re-roi-banner {
	position: relative;
	display: grid;
	grid-template-columns: 8rem 1fr auto;
	gap: var(--space-l);
	align-items: center;
	padding: 1.6rem 2.4rem;
	margin-top: var(--space-l);
	margin-bottom: var(--space-l);
	background: var(--white, #FFFFFF);
	border-radius: calc(var(--radius) + 0.4rem);
	color: var(--base);
	box-shadow: 0 6px 18px rgba(14, 28, 57, 0.06);
	isolation: isolate;
}

/* ---------- Media (stejný mini badge jako na kartách nemovitostí) ---------- */
.re-roi-banner__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.re-roi-banner__badge {
	width: 7rem;
	height: auto;
	display: block;
}

/* ---------- Content ---------- */
.re-roi-banner__content {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
}

.re-roi-banner__eyebrow {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary);
}

.re-roi-banner__title {
	margin: 0;
	font-size: clamp(1.7rem, 0.6rem + 1vw, 2.1rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--base);
	text-wrap: balance;
}

.re-roi-banner__lead {
	margin: 0;
	font-size: var(--text-s);
	line-height: 1.45;
	color: color-mix(in srgb, var(--base) 75%, transparent);
	max-width: 64rem;
}

.re-roi-banner__lead b {
	color: var(--base);
	font-weight: 700;
}

/* ---------- Actions ---------- */
.re-roi-banner__actions {
	flex: 0 0 auto;
}

.re-roi-banner__cta {
	white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.re-roi-banner {
		grid-template-columns: 7rem 1fr;
		grid-template-areas:
			"media content"
			"media actions";
		gap: 1.6rem var(--space-m);
		padding: 1.4rem 1.8rem;
	}

	.re-roi-banner__media { grid-area: media; }
	.re-roi-banner__content { grid-area: content; }
	.re-roi-banner__actions { grid-area: actions; }

	.re-roi-banner__badge { width: 6rem; }
}

@media (max-width: 720px) {
	.re-roi-banner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"media"
			"content"
			"actions";
		gap: 1.4rem;
		padding: 1.8rem 1.6rem;
		text-align: center;
	}

	.re-roi-banner__badge {
		width: 7rem;
		margin-inline: auto;
	}

	.re-roi-banner__lead {
		max-width: none;
	}

	.re-roi-banner__actions {
		justify-self: center;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Sidebar variant — vertikální compact verze pro detail investiční
   nemovitosti, pod kartou makléře v úzkém sidebaru.
   ───────────────────────────────────────────────────────────────── */

.re-roi-sidebar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.8rem;
	margin-top: var(--space-m, 2rem);
	padding: 2rem 2rem 2.2rem;
	background: var(--white, #FFFFFF);
	border: 1px solid color-mix(in srgb, var(--base, #0E1C39) 8%, transparent);
	border-radius: calc(var(--radius, 1rem) + 0.4rem);
	box-shadow: 0 6px 18px rgba(14, 28, 57, 0.05);
}

.re-roi-sidebar__badge {
	width: 8.4rem;
	height: auto;
	display: block;
	margin-bottom: 0.4rem;
}

.re-roi-sidebar__eyebrow {
	font-size: var(--text-xs, 1.2rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary, #3564F2);
}

.re-roi-sidebar__title {
	margin: 0;
	font-size: 1.7rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--base, #0E1C39);
	text-wrap: balance;
}

.re-roi-sidebar__lead {
	margin: 0;
	font-size: var(--text-s, 1.4rem);
	line-height: 1.5;
	color: color-mix(in srgb, var(--base, #0E1C39) 72%, transparent);
}

.re-roi-sidebar__lead b {
	color: var(--base, #0E1C39);
	font-weight: 700;
}

.re-roi-sidebar__cta {
	margin-top: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--primary, #3564F2);
	font-size: var(--text-s, 1.4rem);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--primary, #3564F2) 35%, transparent);
	padding-bottom: 2px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.re-roi-sidebar__cta:hover,
.re-roi-sidebar__cta:focus-visible {
	color: var(--base, #0E1C39);
	border-bottom-color: var(--base, #0E1C39);
	outline: none;
}