/* Layout: page shell, header row, footer grid. */

.rb-shell {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: max(var(--rb-gutter), env(safe-area-inset-left, 0px)) max(var(--rb-gutter), env(safe-area-inset-right, 0px));
}

.rb-section { padding-block: clamp(32px, 5vw, 60px); }

.rb-main { display: block; min-height: 40vh; }

/* --- header --------------------------------------------------------- */
.rb-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--rb-cream) 92%, transparent);
	backdrop-filter: saturate(1.5) blur(12px);
	border-bottom: 1px solid var(--rb-line);
}

.rb-header__row {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: var(--rb-header-h);
	padding-block: 10px;
}

.rb-header__spacer { flex: 1; }

.rb-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.rb-brand { margin: 0; flex: none; font-size: inherit; }
.rb-brand__link { display: block; }
.rb-brand img { height: 46px; width: auto; }

/* --- footer --------------------------------------------------------- */
.rb-footer {
	background: var(--rb-ink);
	color: #C7D0D9;
	padding-block: 44px 24px;
	font-size: .9375rem;
}

.rb-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 30px;
}

.rb-footer__about .rb-brand img {
	height: 44px;
	background: var(--rb-white);
	border-radius: 12px;
	padding: 6px 10px;
}

.rb-footer__tagline { margin-top: 14px; max-width: 34ch; line-height: 1.65; }

.rb-footer__heading {
	color: var(--rb-white);
	font-size: 1rem;
	margin-bottom: 10px;
}

.rb-footer__list { display: grid; gap: 7px; }

/* Links inherit the footer's own light text. The global link blue does not
   have enough contrast against the dark footer. */
.rb-footer a { color: inherit; }
.rb-footer a:hover { color: var(--rb-white); text-decoration: underline; }

.rb-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .12);
	margin-top: 28px;
	padding-top: 18px;
	font-size: .8125rem;
}

.rb-pay {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 15px;
}

.rb-pay__item {
	background: rgba(255, 255, 255, .1);
	border-radius: 7px;
	padding: 5px 10px;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* --- posts fallback ------------------------------------------------- */
.rb-pagehead { margin-bottom: 24px; }
/* One column by default. The multi-column track is opt-in, so a single
   item is never stranded in a third of the row. */
.rb-posts { display: grid; gap: 20px; }
.rb-post {
	background: var(--rb-white);
	border-radius: var(--rb-r-card);
	box-shadow: var(--rb-sh-1);
	overflow: hidden;
}
.rb-post__media img { width: 100%; height: auto; }
.rb-post__body { padding: 18px 20px 22px; }
.rb-post__title { font-size: 1.25rem; }
.rb-post__excerpt { color: var(--rb-ink-soft); margin-top: 8px; }
.rb-empty { max-width: 48ch; display: grid; gap: 14px; }

@media (min-width: 720px) {
	.rb-posts--grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* Single page and post run full width of the shell. */
.rb-single { max-width: none; }
.rb-single__media { margin-block: 20px; }
.rb-single__media img { width: 100%; border-radius: var(--rb-r-tile); }
.rb-pagehead__meta { color: var(--rb-ink-soft); font-weight: 700; margin-top: 8px; }

/* --- responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
	.rb-nav { display: none; }
}

@media (max-width: 860px) {
	:root { --rb-header-h: 64px; --rb-gutter: 16px; }

	.rb-brand img { height: 38px; }
	.rb-header__row { gap: 10px; }
	.rb-footer__grid { grid-template-columns: 1fr 1fr; }

	/* Component visibility at this breakpoint lives in components.css,
	   which loads after this file and would otherwise win the cascade. */

	/* Clear the fixed tab bar. */
	body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 420px) {
	.rb-footer__grid { grid-template-columns: 1fr; }
}