/*
Theme Name: Rocket Blocks
Template: rocket
Version: 0.1.0
Description: Block-based migration layer for the Rocket theme. Replaces ACF flexible_content with native Gutenberg blocks.
*/

/* -----------------------------------------------------------------------------
   Site banner (rb-banner) — dark, centered, single-line promo bar.
   Structure: [icon] [bold label] | [message] [chevron]. Per-page via the ACF
   "Site Banner" field group; rendered by inc/banner.php on the
   get_template_part('.../organisms/header') hook.

   Background comes from the parent theme's cb-{color}-{shade} palette
   (default cb-black-100); text color is dark/light layered on top.
   -------------------------------------------------------------------------- */

.rb-banner {
	display: block;
	width: 100%;
	padding: 0.7rem 1.25rem;
	font-size: 0.95rem;
	line-height: 1.4;
	text-decoration: none;
	box-sizing: border-box;
}

.rb-banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	margin: 0 auto;
}

.rb-banner__icon {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.rb-banner__icon-img,
.rb-banner__icon img {
	display: block;
	height: 20px;
	width: auto;
}

.rb-banner__label {
	font-weight: 700;
}

.rb-banner__divider {
	width: 1px;
	height: 18px;
	background: currentColor;
	opacity: 0.28;
	flex: none;
}

.rb-banner__message {
	font-weight: 400;
	opacity: 0.92;
}

.rb-banner__message p {
	display: inline;
	margin: 0;
}

.rb-banner__message a {
	text-decoration: underline;
}

.rb-banner__arrow {
	display: inline-flex;
	align-items: center;
	flex: none;
	opacity: 0.85;
	transition: transform 0.2s ease;
}

/* Doubled class (0,2,0) so banner text wins over the parent's
   `body .cb-white-100 { color:#646d72 }` (0,1,1) grey — keeps "black text"
   black on a white (#fff) bar, and white text on a dark bar. */
.rb-banner.rb-banner--dark { color: #1a1a1a; }
.rb-banner.rb-banner--light { color: #ffffff; }

.rb-banner--sticky {
	position: sticky;
	top: 0;
	z-index: 9999;
}

a.rb-banner {
	transition: opacity 0.2s ease;
}

a.rb-banner:hover {
	opacity: 0.95;
}

a.rb-banner:hover .rb-banner__arrow {
	transform: translateX(3px);
}

@media (max-width: 600px) {
	.rb-banner { font-size: 0.875rem; }
	.rb-banner__divider { display: none; }
}

/* -----------------------------------------------------------------------------
   Gallery (rb gallery / rocket/gallery)
   Full-bleed, horizontally-scrolling image strip. Each column ("stack") holds
   one or more images that split the row height evenly via flex + object-fit,
   so a column can be a single tall image or several stacked images.

   Seamless marquee: render.php outputs the column set TWICE and the track
   animates 0 -> -50%. Each column owns its trailing gap via margin-right (not
   flex `gap`), so one set width == exactly 50% of the track == seamless loop.
   -------------------------------------------------------------------------- */

.gal {
	position: relative;
	overflow: hidden;
	margin-top: 2.5rem;
	--gal-col-w: 320px;
	--gal-row-h: 540px;
	--gal-gap: 20px;
}

.gal__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.gal__col {
	flex: 0 0 auto;
	width: var(--gal-col-w);
	height: var(--gal-row-h);
	margin-right: var(--gal-gap);
}

.gal__stack {
	display: flex;
	flex-direction: column;
	gap: var(--gal-gap);
	height: 100%;
}

.gal__item {
	flex: 1 1 0;
	min-height: 0;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
}

.gal__item img,
.gal__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gal--scroll .gal__track {
	animation: gal-marquee var(--gal-speed, 45s) linear infinite;
}

.gal--scroll:hover .gal__track {
	animation-play-state: paused;
}

/* Non-animated galleries (autoscroll off) stay swipeable. */
.gal:not(.gal--scroll) {
	overflow-x: auto;
}

@keyframes gal-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 782px) {
	.gal {
		--gal-col-w: 240px;
		--gal-row-h: 420px;
		--gal-gap: 14px;
	}
}

/* Accessibility: no motion -> stop the marquee and let users scroll manually. */
@media (prefers-reduced-motion: reduce) {
	.gal--scroll .gal__track { animation: none; }
	.gal { overflow-x: auto; }
}