/**
 * Rhodes Boat — page-specific / showcase utilities.
 * Core system lives in tokens, base, typography, buttons, cards, forms, layout, animations, chrome.
 */

.rb-phase-shell {
	background: linear-gradient(160deg, var(--rb-navy) 0%, var(--rb-secondary-dark) 55%, var(--rb-dark) 100%);
	color: var(--rb-white);
	min-height: 70vh;
	display: flex;
	align-items: center;
	padding-block: var(--rb-section-y);
}

.rb-phase-shell .rb-container {
	padding-block: 0;
}

.rb-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rb-space-3);
}

.rb-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rb-space-2);
	min-width: 4.5rem;
}

.rb-swatch__chip {
	width: 3rem;
	height: 3rem;
	border-radius: var(--rb-radius-pill);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: var(--rb-shadow-sm);
}

.rb-swatch__chip--on-dark {
	border-color: rgba(255, 255, 255, 0.2);
}

.rb-swatch__label {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rb-muted);
	text-align: center;
}

.rb-phase-shell .rb-swatch__label {
	color: rgba(255, 255, 255, 0.55);
}

.rb-ds-panel {
	background: var(--rb-white);
	border: var(--rb-hairline);
	border-radius: var(--rb-radius);
	padding: var(--rb-space-5);
	box-shadow: var(--rb-shadow-sm);
}

.rb-ds-panel__title {
	font-size: var(--rb-text-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rb-muted);
	margin: 0 0 var(--rb-space-4);
}

.rb-type-sample {
	margin: 0 0 var(--rb-space-4);
	padding-bottom: var(--rb-space-3);
	border-bottom: var(--rb-hairline);
}

.rb-type-sample:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.rb-type-sample__meta {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rb-muted);
	margin-bottom: var(--rb-space-2);
}

.rb-placeholder-img {
	width: 100%;
	height: 100%;
	min-height: 12rem;
	background:
		linear-gradient(135deg, var(--rb-secondary-dark), var(--rb-navy)),
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 8px,
			rgba(214, 175, 69, 0.06) 8px,
			rgba(214, 175, 69, 0.06) 16px
		);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rb-gold);
	font-family: var(--rb-font-display);
	font-size: 1.25rem;
}