/* ==========================================================
   Roomcility hero
   Kop links, rechts een video in een vorm van afgeronde blokken.
   Het beeld rechts is 760 bij 600 en wordt door rc-hero.js
   geschaald, daarom staan maten binnen .rc-hero__stage in px.
   Kaart, label, knop en pen komen uit rc-core.css.
   ========================================================== */

.rc-hero {
	--rc-hero-bg: var(--rc-bg);
	--rc-hero-media: #0F2A6E;
	--rc-hero-title: 58px;
	--rc-hero-pt: 110px;
	--rc-hero-pb: 88px;
	--rc-hero-pt-m: 84px;
	--rc-hero-pb-m: 56px;
	--rc-hero-video-x: 40%;
	--rc-hero-video-y: 50%;

	position: relative;
	overflow: hidden;
	padding: var(--rc-hero-pt) 0 var(--rc-hero-pb);
	background: var(--rc-hero-bg);
	color: var(--rc-ink);
	box-sizing: border-box;
}
.rc-hero--full { min-height: calc(100vh - var(--rc-bar-h, 84px)); display: flex; align-items: center; }

.rc-hero__wrap {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: 24px;
	align-items: center;
}

/* ── Tekst ── */
.rc-hero__title {
	margin: 0;
	font-size: clamp(40px, 4vw, var(--rc-hero-title));
	line-height: 1.03;
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--rc-ink);
	text-wrap: balance;
}
.rc-hero__hand { margin: 6px 0 0; font-size: clamp(34px, 3.2vw, 46px); }
.rc-hero__hand .rc-pen { --rc-pen-delay: .5s; }
.rc-hero__intro {
	margin: 26px 0 30px;
	max-width: 46ch;
	font-size: 17.5px;
	line-height: 1.6;
	color: var(--rc-ink-2);
}
.rc-hero__acts { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rc-hero__acts .rc-btn { height: 50px; padding: 0 26px; font-size: 15px; }

/* ── Beeld ── */
.rc-hero__box { position: relative; width: 100%; aspect-ratio: 760 / 600; }
.rc-hero__stage {
	position: absolute;
	left: 0;
	top: 0;
	width: 760px;
	height: 600px;
	transform-origin: 0 0;
	visibility: hidden;
}
.rc-hero.is-fit .rc-hero__stage { visibility: visible; }
.rc-hero__defs { position: absolute; }

.rc-hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--rc-hero-media); }
.rc-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--rc-hero-video-x) var(--rc-hero-video-y);
}

/* Kaarten over de rand van de vorm */
.rc-hero__card { position: absolute; z-index: 3; }
.rc-hero__card p { margin: 12px 0 0; }
.rc-hero__card--links { left: -34px; top: 392px; width: 270px; }
.rc-hero__card--rechts { right: -24px; top: 270px; width: 250px; }

.rc-hero__card--video {
	right: -46px;
	top: 40px;
	width: 270px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 16px;
	background: var(--rc-grad);
	box-shadow: 0 18px 40px rgba(28, 36, 64, .14);
	color: #fff;
	text-decoration: none;
	transition: transform .25s var(--rc-ease);
}
.rc-hero__card--video:hover { color: #fff; transform: translateY(-3px); }
.rc-hero__card--video b { display: block; font-size: 14px; line-height: 1.3; }
.rc-hero__thumb {
	position: relative;
	flex-shrink: 0;
	width: 80px;
	height: 70px;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
.rc-hero__thumb::before {
	content: "";
	position: absolute;
	inset: 8px 8px auto;
	height: 10px;
	border-radius: 4px;
	background: var(--rc-accent-soft);
	box-shadow: 0 16px 0 var(--rc-bg), 0 32px 0 var(--rc-bg);
}
.rc-hero__time { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 700; }
.rc-hero__time i { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.rc-hero__time i::before {
	content: "";
	margin-left: 2px;
	border-left: 7px solid var(--rc-accent);
	border-top: 4.5px solid transparent;
	border-bottom: 4.5px solid transparent;
}

/* Donker label met een staartje, handgeschreven */
.rc-hero__label {
	position: absolute;
	z-index: 3;
	left: 260px;
	bottom: 28px;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border-radius: 10px;
	background: var(--rc-night);
	color: #fff;
	font-family: var(--rc-hand);
	font-size: 24px;
	font-weight: 600;
}
.rc-hero__label::before {
	content: "";
	position: absolute;
	left: -10px;
	top: -10px;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: var(--rc-night);
}

/* Doorschijnende blokjes en lijniconen */
.rc-hero__block { position: absolute; z-index: 2; border-radius: 16px; opacity: .5; animation: rc-hero-drift 7s ease-in-out infinite alternate; }
.rc-hero__block--1 { left: 300px; top: 96px; width: 70px; height: 90px; background: #7FB6F2; }
.rc-hero__block--2 { left: 116px; top: 262px; width: 74px; height: 74px; background: #A99AF0; animation-delay: -3s; }

.rc-hero__icon { position: absolute; z-index: 1; font-size: 44px; color: #9CC0EC; line-height: 0; animation: rc-hero-drift 6s ease-in-out infinite alternate; }
.rc-hero__icon .rc-svg { stroke-width: 1.4; }
.rc-hero__icon--1 { left: 198px; top: 46px; }
.rc-hero__icon--2 { left: 96px; top: 520px; color: #C3B5F2; animation-delay: -2s; }
.rc-hero__icon--3 { right: 30px; bottom: -6px; color: #93D2B0; animation-delay: -4s; }
.rc-hero__icon--4 { left: 40px; top: 170px; animation-delay: -3s; animation-duration: 7s; }


@keyframes rc-hero-drift { to { transform: translate(6px, -8px); } }

/* ── Tablet en mobiel ── */
@media (max-width: 1100px) {
	.rc-hero { padding: var(--rc-hero-pt-m) 0 var(--rc-hero-pb-m); }
	.rc-hero--full { min-height: 0; }
	.rc-hero__wrap { grid-template-columns: 1fr; gap: 20px; padding: 0 20px; }
	.rc-hero__title { font-size: 38px; }
	.rc-hero__intro { font-size: 16px; margin: 22px 0 26px; }
	.rc-hero__acts { gap: 16px; }
	.rc-hero__box { max-width: 680px; margin: 10px auto 0; }
	.rc-hero__card--desktop { display: none; }
}

/* Telefoon. Het beeld wordt hier sterk verkleind, daarom zijn kaarten en tekst
   binnen het beeld groter gezet. */
@media (max-width: 600px) {
	.rc-hero__card.rc-card { font-size: 27px; padding: 24px 28px; border-radius: 24px; }
	.rc-hero__card .rc-tag { font-size: 20px; height: 40px; padding: 0 18px; }
	.rc-hero__card--links { left: 0; top: 330px; width: 420px; }
	.rc-hero__card--rechts { right: 0; width: 420px; }
	.rc-hero__card--video { right: 0; top: 10px; width: 440px; border-radius: 24px; padding: 16px; gap: 16px; }
	.rc-hero__card--video b { font-size: 25px; }
	.rc-hero__thumb { width: 110px; height: 96px; }
	.rc-hero__time { font-size: 21px; }
	.rc-hero__label { left: auto; right: 16px; bottom: 20px; height: 48px; font-size: 31px; }
	.rc-hero__icon--3 { display: none; }
	.rc-hero__icon { font-size: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	.rc-hero__block,
	.rc-hero__icon { animation: none; }
}