/* Responsive overrides. Breakpoints stay aligned with the header and card grids.
   Laatste update: 2026-10-26 */

@media (max-width: 980px) {
	.rb-hero {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"copy"
			"media";
	}

	.rb-hero,
	.rb-split,
	.rb-price,
	.rb-page-hero--center .rb-page-hero__grid,
	.rb-reserve,
	.rb-visit,
	.rb-page-hero__grid,
	.rb-about__story,
	.rb-about__founders,
	.rb-about__founders.has-photo,
	.rb-about__people,
	.rb-founders,
	.rb-contact,
	.rb-request__grid,
	.rb-footer__grid,
	.rb-cards,
	.rb-news,
	.rb-story__nav,
	.rb-price__bands,
	.rb-process {
		grid-template-columns: 1fr;
	}

	.rb-footer__menu {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.15rem 0.45rem;
	}

	.rb-footer__menu a {
		justify-content: center;
		text-align: center;
		width: 100%;
		padding: 0.25rem 0.2rem;
		font-size: clamp(0.8rem, 2.8vw, 0.92rem);
	}

	.rb-footer__menu a::after {
		left: 18%;
		right: 18%;
		bottom: 0.4rem;
	}

	.rb-films__picks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rb-story__sibling.is-empty {
		display: none;
	}

	.rb-story__sibling,
	.rb-story__sibling--next,
	.rb-story__home {
		justify-self: stretch;
		width: 100%;
	}

	.rb-picks,
	.rb-gallery {
		grid-template-columns: 1fr 1fr;
	}

	.rb-split__sticky {
		position: static;
	}

	.rb-hero__stage {
		min-height: 22rem;
	}

	.home .rb-hero__logo {
		display: none;
	}

	.home .rb-hero__copy {
		padding-top: clamp(2rem, 5vw, 4.5rem);
	}

	html.rb-motion.is-logo-pending .rb-header .rb-brand,
	html.rb-motion.is-logo-docked .rb-header .rb-brand {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.rb-hero__video--mobile {
		display: none;
	}

	.rb-motion .rb-hero__stage.is-immersed .rb-hero__layer--water {
		inset: 6% 5% 12%;
	}

	.rb-form__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.rb-picks,
	.rb-gallery {
		grid-template-columns: 1fr;
	}

	.rb-page-banner__img,
	.rb-about__img {
		height: clamp(7.5rem, 22vh, 11rem);
	}

	.rb-about__open {
		padding-top: 1.5rem;
	}

	.rb-page-hero--after-banner,
	.rb-story--after-banner .rb-story__body {
		padding-top: 1.5rem;
	}

	.rb-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.rb-header .rb-brand {
		position: relative;
		z-index: 60;
		flex-shrink: 0;
		margin-right: auto;
	}

	.rb-header .rb-brand__logo {
		width: 56px;
		height: 56px;
	}

	.rb-nav {
		position: fixed;
		inset: 0;
		z-index: 50;
		margin: 0;
		padding: calc(var(--rb-header) + 1.5rem) 1.5rem max(2rem, env(safe-area-inset-bottom));
		background: rgba(6, 20, 12, 0.96);
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 1.25rem;
		overflow: auto;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translate3d(0, -0.85rem, 0);
	}

	.rb-nav::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
			radial-gradient(ellipse at 80% 0%, rgba(27, 156, 133, 0.22), transparent 46%),
			linear-gradient(180deg, rgba(212, 243, 215, 0.04), transparent 30%);
		pointer-events: none;
	}

	.rb-nav.is-open {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	.rb-motion .rb-nav {
		transition: opacity 0.4s var(--rb-ease), transform 0.4s var(--rb-ease), visibility 0.4s;
	}

	.rb-nav__list,
	.rb-nav .rb-langs,
	.rb-nav .rb-btn {
		position: relative;
		z-index: 1;
	}

	.rb-nav__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
		gap: 0.55rem;
		flex: 0 0 auto;
	}

	.rb-nav__list > li {
		border: 0;
		border-radius: 1rem;
		background: rgba(212, 243, 215, 0.07);
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}

	.rb-nav.is-open .rb-nav__list > li {
		opacity: 1;
		transform: none;
	}

	.rb-motion .rb-nav.is-open .rb-nav__list > li {
		transition: opacity 0.45s var(--rb-ease), transform 0.45s var(--rb-ease);
	}

	.rb-nav.is-open .rb-nav__list > li:nth-child(1) { transition-delay: 0.06s; }
	.rb-nav.is-open .rb-nav__list > li:nth-child(2) { transition-delay: 0.09s; }
	.rb-nav.is-open .rb-nav__list > li:nth-child(3) { transition-delay: 0.12s; }
	.rb-nav.is-open .rb-nav__list > li:nth-child(4) { transition-delay: 0.16s; }
	.rb-nav.is-open .rb-nav__list > li:nth-child(5) { transition-delay: 0.19s; }
	.rb-nav.is-open .rb-nav__list > li:nth-child(6) { transition-delay: 0.22s; }
	.rb-nav.is-open .rb-nav__list > li:nth-child(7) { transition-delay: 0.26s; }
	.rb-nav.is-open .rb-nav__list > li:nth-child(8) { transition-delay: 0.29s; }

	.rb-nav__list a {
		font-family: var(--rb-display);
		font-size: clamp(0.88rem, 3.4vw, 1.08rem);
		letter-spacing: -0.02em;
		justify-content: center;
		text-align: center;
		min-height: 48px;
		padding: 0.75rem 0.3rem 0.9rem;
		width: 100%;
	}

	.rb-nav__list a::after {
		left: 50%;
		right: auto;
		width: 1.15rem;
		margin-left: -0.575rem;
		bottom: 0.4rem;
	}

	.rb-nav__list .current-menu-item,
	.rb-nav__list .current_page_item {
		box-shadow: inset 0 0 0 1px rgba(212, 243, 215, 0.45);
		background: rgba(212, 243, 215, 0.12);
	}

	.rb-nav__list .sub-menu {
		display: block;
		position: static;
		background: transparent;
		padding: 0 0 0.6rem 0.75rem;
	}

	.rb-nav .rb-langs {
		justify-content: flex-start;
		gap: 0.35rem;
	}

	.rb-nav .rb-btn {
		width: 100%;
		margin-top: auto;
	}

	.rb-hero__video--desktop {
		display: none;
	}

	.rb-hero__video--mobile {
		display: block;
	}

	.rb-hero__media.has-portrait-video .rb-hero__stage {
		min-height: min(78vh, 42rem);
		aspect-ratio: 9 / 16;
		max-height: 85vh;
		width: min(100%, 24rem);
		margin-inline: auto;
	}

	.rb-hero__media.has-portrait-video .rb-hero__layer--water {
		inset: 4% 7% 8%;
	}

	.rb-hero__media.has-portrait-video .rb-hero__poster,
	.rb-hero__media.has-portrait-video .rb-hero__video,
	.rb-motion .rb-hero__media.has-portrait-video .rb-hero__stage.is-immersed .rb-hero__poster,
	.rb-motion .rb-hero__media.has-portrait-video .rb-hero__stage.is-immersed .rb-hero__video {
		object-fit: cover;
		transform: none;
	}

	.rb-film__video {
		min-height: 180px;
		max-height: 62vh;
	}

	.rb-facts {
		grid-template-columns: 1fr;
	}

	.rb-header :focus-visible {
		outline-color: var(--rb-foam);
	}

	.rb-top {
		right: 1rem;
		bottom: 1rem;
	}

	.rb-footer__bar,
	.rb-footer__meta {
		flex-direction: column;
		align-items: flex-start;
	}
}