/* ==========================================================
   Roomcility 404
   Links de uitleg, rechts de planning assistent die net als
   bij een bezette zaal alternatieven voorstelt.
   ========================================================== */

.rc-nf {
	--rc-nf-bg: var(--rc-bg);
	--rc-nf-ok: #107C41;
	--rc-nf-ok-bg: #F1FAF3;
	--rc-nf-ok-line: #CDEBD6;
	--rc-nf-no: #C4314B;
	--rc-nf-pt: 110px;
	--rc-nf-pb: 130px;
	padding: var(--rc-nf-pt) 0 var(--rc-nf-pb);
	background: var(--rc-nf-bg);
	color: var(--rc-ink);
}
.rc-nf.no-pa .rc-nf__wrap { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.rc-nf.no-pa .rc-nf__wrap > div { text-align: center; }
.rc-nf.no-pa .rc-nf__hand,
.rc-nf.no-pa .rc-nf__title,
.rc-nf.no-pa .rc-nf__lead { margin-left: auto; margin-right: auto; }
.rc-nf.no-pa .rc-nf__acts { justify-content: center; }
.rc-nf__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 72px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* ── Links ── */
.rc-nf__hand { display: table; margin: 0 0 10px; font-size: 32px; color: var(--rc-ink-2); transform: rotate(-4deg); }
.rc-nf__num { position: relative; display: inline-block; margin: 0; font-size: clamp(110px, 13vw, 180px); line-height: .9; font-weight: 800; letter-spacing: -.06em; background: var(--rc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rc-nf__num .rc-pen { position: absolute; left: -8%; top: -10%; width: 122%; height: 128%; --rc-pen-width: 2.4; --rc-pen-speed: 1.1s; --rc-pen-delay: .3s; }
.rc-nf__title { margin: 34px 0 0; max-width: 16ch; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; color: var(--rc-ink); text-wrap: balance; }
.rc-nf__lead { margin: 18px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.65; color: var(--rc-ink-2); }
.rc-nf__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.rc-nf__acts .rc-btn { height: 50px; padding: 0 26px; font-size: 15px; }

/* ── Planning assistent ── */
.rc-nf__pa { overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 2px 6px rgba(28, 36, 64, .08), 0 40px 90px rgba(27, 62, 156, .18); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; transform: rotate(1.2deg); }
.rc-nf__pa-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, #2F7FDB, #1E5FC4 60%, #1B4BAE); color: #fff; }
.rc-nf__pa-logo { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: #fff; }
.rc-nf__pa-logo img { width: 26px; height: 26px; }
.rc-nf__pa-h b { display: block; font-size: 15px; font-weight: 700; }
.rc-nf__pa-h small { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }
.rc-nf__pa-b { padding: 16px 16px 18px; }

.rc-nf__miss { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #F3D3D9; border-radius: 10px; background: #FDF3F5; }
.rc-nf__miss b { position: relative; font-size: 14px; color: var(--rc-ink); }
.rc-nf__miss b .rc-pen { position: absolute; left: -4px; top: 50%; width: calc(100% + 8px); height: 12px; margin-top: -6px; --rc-pen: var(--rc-nf-no); --rc-pen-width: 2.2; --rc-pen-speed: .5s; --rc-pen-delay: 1.3s; }
.rc-nf__miss small { display: block; margin-top: 2px; font-size: 12px; color: var(--rc-ink-2); }
.rc-nf__miss em { flex-shrink: 0; padding: 4px 9px; border-radius: 999px; background: var(--rc-nf-no); font-size: 11.5px; font-style: normal; font-weight: 700; color: #fff; }

.rc-nf__alt-t { display: flex; align-items: center; gap: 6px; margin: 18px 2px 10px; font-size: 13.5px; font-weight: 700; color: var(--rc-nf-ok); }
.rc-nf__alt-t svg { width: 16px; height: 16px; }
.rc-nf__alts { display: flex; flex-direction: column; gap: 8px; }
.rc-nf__alt { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--rc-nf-ok-line); border-radius: 10px; background: var(--rc-nf-ok-bg); color: var(--rc-ink); text-decoration: none; transition: border-color .2s, background .2s, transform .2s var(--rc-ease); }
.rc-nf__alt .rc-ic { --rc-ic-size: 32px; background: #fff; color: var(--rc-nf-ok); }
.rc-nf__alt b { display: block; font-size: 14px; font-weight: 700; }
.rc-nf__alt small { display: block; margin-top: 1px; font-size: 12px; color: var(--rc-ink-2); }
.rc-nf__alt > .rc-svg { margin-left: auto; font-size: 18px; color: var(--rc-nf-ok); transition: transform .2s var(--rc-ease); }
.rc-nf__alt:hover { border-color: var(--rc-nf-ok); background: #E7F6EC; color: var(--rc-ink); transform: translateX(3px); }
.rc-nf__alt:hover > .rc-svg { transform: translateX(3px); }

/* ── Tablet en mobiel ── */
@media (max-width: 1000px) {
	.rc-nf { --rc-nf-pt: 80px; --rc-nf-pb: 90px; }
	.rc-nf__wrap { grid-template-columns: 1fr; gap: 48px; padding: 0 20px; }
	.rc-nf__pa { max-width: 480px; transform: none; }
}
@media (max-width: 600px) {
	.rc-nf { --rc-nf-pt: 64px; --rc-nf-pb: 72px; }
	.rc-nf__title { font-size: 30px; }
	.rc-nf__lead { font-size: 16px; }
	.rc-nf__acts .rc-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.rc-nf__alt, .rc-nf__alt > .rc-svg { transition: none; }
}