/* ==========================================================
   Roomcility overzicht
   Vier kaarten die doorverwijzen naar de eigen pagina's.
   Icoon, pen en handschrift komen uit rc-core.css.
   ========================================================== */

.rc-ov {
	--rc-ov-bg: var(--rc-bg);
	--rc-outlook: #0F6CBD;
	--rc-ov-pt: 110px;
	--rc-ov-pb: 120px;
	--rc-ov-pt-m: 72px;
	--rc-ov-pb-m: 80px;

	padding: var(--rc-ov-pt) 0 var(--rc-ov-pb);
	background: var(--rc-ov-bg);
	color: var(--rc-ink);
}
.rc-ov__wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* ── Kop ── */
.rc-ov__kop { margin-bottom: 44px; }
.rc-ov__hand { margin: 0 0 6px; font-size: 32px; color: var(--rc-ink-2); transform: rotate(-4deg); }
.rc-ov__title { margin: 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; color: var(--rc-ink); }

/* ── Kaarten ── */
.rc-ov__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(250px, auto);
	gap: 20px;
}
.rc-ov__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 28px;
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(28, 36, 64, .04);
	color: var(--rc-ink);
	text-decoration: none;
	transition: transform .35s var(--rc-ease), box-shadow .35s;
}
a.rc-ov__card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(27, 62, 156, .12); color: var(--rc-ink); }
.rc-ov__card small { margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--rc-accent); }
.rc-ov__card h3 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 750; letter-spacing: -.02em; color: inherit; }
.rc-ov__card p { margin: 10px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.55; color: var(--rc-ink-2); }
.rc-ov__card p b,
.rc-ov__card p strong { font-weight: 650; color: var(--rc-ink); }

/* Link onderaan, de pen trekt er een streep onder bij aanwijzen */
.rc-ov__go { position: relative; align-self: flex-start; justify-self: start; width: max-content; margin-top: auto; padding-top: 22px; font-size: 15px; font-weight: 650; }
.rc-ov__go .rc-pen { position: absolute; left: -2px; bottom: -9px; width: calc(100% + 6px); height: 12px; --rc-pen-width: 2.2; }
.rc-ov__go .rc-pen path { transition: stroke-dashoffset .45s cubic-bezier(.45, .1, .3, 1); }
a.rc-ov__card:hover .rc-ov__go .rc-pen path,
a.rc-ov__card:focus-visible .rc-ov__go .rc-pen path { stroke-dashoffset: 0; }

/* Demo, groot en blauw met het logo op de achtergrond */
.rc-ov__card--demo { grid-column: span 5; grid-row: span 2; background: var(--rc-grad); color: #fff; }
a.rc-ov__card--demo:hover { color: #fff; }
.rc-ov__card--demo small { color: rgba(255, 255, 255, .75); }
.rc-ov__card--demo h3 { max-width: 12ch; margin-top: 4px; font-size: 36px; }
.rc-ov__card--demo p { max-width: 30ch; font-size: 16.5px; color: rgba(255, 255, 255, .85); }
.rc-ov__card--demo .rc-pen { --rc-pen: #fff; }
.rc-ov__card--demo > :not(.rc-ov__logo) { position: relative; z-index: 1; }
.rc-ov__logo { position: absolute; right: -70px; bottom: -60px; width: 380px; opacity: .55; mix-blend-mode: screen; pointer-events: none; transition: transform .9s var(--rc-ease), opacity .4s; }
.rc-ov__logo img { display: block; width: 100%; height: auto; }
a.rc-ov__card--demo:hover .rc-ov__logo { transform: rotate(-14deg) scale(1.04); opacity: .7; }

/* Hoe het werkt, tekst links en de ring rechts */
.rc-ov__card--hoe { grid-column: span 7; display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: 20px; align-items: center; align-content: start; }
.rc-ov__card--hoe > * { grid-column: 1; }
.rc-ov__card--hoe > .rc-ov__ring { grid-column: 2; grid-row: 1 / span 4; }
.rc-ov__ring { position: relative; width: 220px; height: 220px; margin: 16px auto 0; }
.rc-ov__ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-ov__ring > svg circle { fill: none; stroke: #C9D6EA; stroke-width: 1.4; stroke-dasharray: 3 6; }
.rc-ov__mid {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 18px;
	background: var(--rc-outlook);
	color: #fff;
	font-size: 30px;
	box-shadow: 0 12px 26px rgba(15, 108, 189, .35);
}
.rc-ov__node {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 2px solid var(--rc-accent);
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
	color: var(--rc-accent);
	font-size: 20px;
	transition: background .3s, color .3s;
}
.rc-ov__node.is-lit { background: var(--rc-accent); color: #fff; }

/* Functies */
.rc-ov__card--functies { grid-column: span 4; }
.rc-ov__card--functies h3,
.rc-ov__card--besparing h3 { font-size: 21px; }
.rc-ov__card ul { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.rc-ov__card li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.rc-ov__card li .rc-ic { --rc-ic-size: 30px; }

/* Besparing, donker met een groot getal */
.rc-ov__card--besparing { grid-column: span 3; background: var(--rc-night); color: #fff; }
a.rc-ov__card--besparing:hover { color: #fff; }
.rc-ov__card--besparing small { color: #7FB6F2; }
.rc-ov__card--besparing .rc-pen { --rc-pen: #7FB6F2; }
.rc-ov__num { align-self: flex-start; margin: 22px 0 4px 6px; }
.rc-ov__n { position: relative; display: inline-block; font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.rc-ov__loop { position: absolute; left: -16px; top: -14px; width: calc(100% + 32px); height: calc(100% + 26px); --rc-pen-width: 2.2; --rc-pen-delay: .3s; --rc-pen-speed: 1s; }
.rc-ov__unit { display: block; margin-top: 14px; font-size: 17px; font-weight: 600; line-height: 1.3; opacity: .8; }
.rc-ov__card .rc-ov__hint { margin: 10px 0 0; font-family: var(--rc-hand); font-size: 24px; font-weight: 600; color: #7FB6F2; transform: rotate(-4deg); }

/* ── Tablet en mobiel ── */
@media (max-width: 1100px) {
	.rc-ov { padding: var(--rc-ov-pt-m) 0 var(--rc-ov-pb-m); }
	.rc-ov__wrap { padding: 0 20px; }
	.rc-ov__kop { margin-bottom: 30px; }
	.rc-ov__title { font-size: 31px; }
	.rc-ov__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 14px; }
	.rc-ov__card { padding: 24px 22px; border-radius: 22px; }
	.rc-ov__card h3 { font-size: 22px; }
	.rc-ov__card--demo,
	.rc-ov__card--hoe { grid-column: 1 / -1; grid-row: auto; }
	.rc-ov__card--demo { min-height: 340px; }
	.rc-ov__card--demo h3 { font-size: 28px; }
	.rc-ov__logo { width: 230px; right: -70px; bottom: -80px; opacity: .4; }
	.rc-ov__card--hoe { grid-template-columns: 1fr; }
	.rc-ov__card--hoe > .rc-ov__ring { grid-column: 1; grid-row: auto; margin: 10px auto 6px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
	.rc-ov__card--functies,
	.rc-ov__card--besparing { grid-column: span 1; }
}
@media (max-width: 600px) {
	.rc-ov__card--functies,
	.rc-ov__card--besparing { grid-column: 1 / -1; }
}