/*
 * Shared building blocks from the approved prototype (docs/elementor-removal-implementation.md §6.0a
 * item 2): section headings, the "view all" link, the affiliate disclosure, scroll-snap rows, cards,
 * chips, the copy-code coupon, gradient text and the CSS-only scroll reveals. Loaded by the templates
 * that use them (today: template-homepage.php), after css/tokens.css. Budgeted with the chrome under
 * §6.0a's "shared components" line, so it can join the chrome bundle when more pages use it.
 *
 * Elements the legacy stack styles (p, h2, a, button) use two classes on purpose, as in site-chrome.css,
 * so they outrank `.roc-kit h2/a/button` (0,1,1) and style.css's `p:last-of-type`; buttons set :focus
 * before :hover because `.roc-kit button:focus` paints focused buttons black. Where style.css uses
 * !important (link underline and box-shadow resets, the phone h2 size), these rules do too.
 */

/* ---------- Sections and headings ---------- */
.roc-section {
	padding-block: var(--roc-space-section);
}

.roc-section--tint {
	background: var(--roc-surface-alt);
	border-block: 1px solid var(--roc-border);
}

.roc-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--roc-space-4) var(--roc-space-8);
	margin-bottom: clamp(24px, 3vw, 40px);
}

.roc-eyebrow.roc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--roc-blue-700);
	font: 700 var(--roc-text-xs) / 1 var(--roc-font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* style.css sets every phone h2 to 35px/45px with !important */
.roc-section__title.roc-section__title {
	margin: 0;
	color: var(--roc-slate-900);
	font: 800 var(--roc-h2) / var(--roc-leading-tight) var(--roc-font-display) !important;
	font-variant-numeric: lining-nums;
	letter-spacing: var(--roc-tracking-display);
	text-wrap: balance;
}

.roc-section__lead.roc-section__lead {
	max-width: 60ch;
	margin: 12px 0 0;
	color: var(--roc-text-muted);
	font-size: var(--roc-text-lg);
	line-height: var(--roc-leading-body);
	text-wrap: pretty;
}

.roc-link-arrow.roc-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--roc-blue-700);
	font: 600 0.9375rem / 1 var(--roc-font-body);
	text-decoration: none;
	white-space: nowrap;
}

.roc-link-arrow.roc-link-arrow:hover {
	color: var(--roc-blue-900);
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

.roc-link-arrow .roc-icon {
	width: 18px;
	height: 18px;
}

@media (prefers-reduced-motion: no-preference) {
	.roc-link-arrow .roc-icon {
		transition: transform var(--roc-fast) var(--roc-ease);
	}

	.roc-link-arrow:hover .roc-icon {
		transform: translateX(3px);
	}
}

.roc-disclosure.roc-disclosure {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 70ch;
	margin: 12px 0 0;
	color: var(--roc-text-subtle);
	font-size: var(--roc-text-sm);
	line-height: 1.5;
}

.roc-disclosure .roc-icon {
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

/* ---------- Rows: a grid on desktop, a scroll-snap strip on smaller screens ---------- */
.roc-row {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	grid-template-columns: repeat(var(--roc-cols, 3), minmax(0, 1fr));
}

/* Wide rows (4-5 cards) scroll below 1200px instead of squeezing into narrow columns; the edges fade so
   it's clear there's more to swipe */
@media (max-width: 1199.98px) {
	.roc-row--wide {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(260px, 31%);
		margin-inline: calc(-1 * var(--roc-gutter));
		padding: 4px var(--roc-gutter) 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--roc-gutter);
		scrollbar-width: thin;
		mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 36px), transparent);
	}

	.roc-row--wide > * {
		scroll-snap-align: start;
	}
}

@media (max-width: 767.98px) {
	.roc-row {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(82%, 320px);
		margin-inline: calc(-1 * var(--roc-gutter));
		padding: 4px var(--roc-gutter) 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--roc-gutter);
		scrollbar-width: thin;
		mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 36px), transparent);
	}

	.roc-row > * {
		scroll-snap-align: start;
	}
}

/* ---------- Card: one hover language (lift, glow, cursor spotlight, media zoom) ---------- */
.roc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--roc-border);
	border-radius: var(--roc-radius-lg);
	background: var(--roc-white);
	box-shadow: var(--roc-shadow-sm);
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow 320ms var(--roc-ease-out), border-color var(--roc-base) var(--roc-ease);
}

/* Cursor spotlight (fine pointers; the page script sets --mx/--my), under the card's content */
.roc-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(59, 130, 246, 0.1), transparent 60%);
	opacity: 0;
	transition: opacity var(--roc-base) var(--roc-ease);
	pointer-events: none;
}

.roc-card:hover,
.roc-card:focus-within {
	border-color: var(--roc-blue-200);
	box-shadow: var(--roc-shadow-glow);
}

.roc-card:hover::before {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.roc-card {
		transition: box-shadow 320ms var(--roc-ease-out), border-color var(--roc-base) var(--roc-ease),
			transform 320ms var(--roc-ease-out);
	}

	.roc-card:hover,
	.roc-card:focus-within {
		transform: translateY(-4px);
	}

	.roc-card:active {
		transform: translateY(-1px) scale(0.99);
		transition-duration: 90ms;
	}

	.roc-card__media img {
		transition: scale 700ms var(--roc-ease-out);
	}

	.roc-card:hover .roc-card__media img,
	.roc-card:focus-within .roc-card__media img {
		scale: 1.045;
	}

	.roc-card__cta .roc-icon,
	.roc-card__foot > .roc-icon {
		transition: translate var(--roc-base) var(--roc-ease-out);
	}

	.roc-card:hover :is(.roc-card__cta .roc-icon, .roc-card__foot > .roc-icon),
	.roc-card:focus-within :is(.roc-card__cta .roc-icon, .roc-card__foot > .roc-icon) {
		translate: 4px 0;
	}
}

.roc-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.roc-card__cta .roc-icon {
	width: 16px;
	height: 16px;
}

.roc-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--roc-slate-100);
	overflow: hidden;
}

.roc-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.roc-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 20px;
}

.roc-card__meta.roc-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 1em 0;
	color: var(--roc-text-subtle);
	font: 500 var(--roc-text-xs) / 1.2 var(--roc-font-body);
	letter-spacing: 0.02em;
}

.roc-card__meta .roc-icon {
	width: 14px;
	height: 14px;
	margin-right: 2px;
}

.roc-card__title {
	margin: 0;
	color: var(--roc-slate-900);
	font: 700 var(--roc-h4) / var(--roc-leading-snug) var(--roc-font-body);
	text-wrap: pretty;
}

/* The whole card is clickable through the title link */
.roc-card__link.roc-card__link {
	color: inherit;
	text-decoration: none;
}

.roc-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.roc-card:hover .roc-card__link.roc-card__link {
	color: var(--roc-blue-700);
}

.roc-card:has(.roc-card__link:focus-visible) {
	border-color: var(--roc-blue-600);
}

.roc-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--roc-blue-700);
	font: 600 var(--roc-text-sm) / 1.2 var(--roc-font-body);
}

/* ---------- Chips ---------- */
.roc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: var(--roc-radius-pill);
	background: var(--roc-blue-50);
	color: var(--roc-blue-800);
	font: 600 var(--roc-text-xs) / 1 var(--roc-font-body);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.roc-chip--neutral {
	background: var(--roc-slate-100);
	color: var(--roc-slate-700);
}

.roc-chip--solid {
	background: var(--roc-blue-600);
	color: var(--roc-white);
}

.roc-chip .roc-icon {
	width: 14px;
	height: 14px;
}

/* ---------- Gradient text (forced colours get plain text) ---------- */
.roc-text-gradient {
	background: var(--roc-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

@media (forced-colors: active) {
	.roc-text-gradient {
		background: none;
		color: CanvasText;
	}
}

/* ---------- Scroll reveals: CSS only, so nothing waits on JavaScript ----------
 * They move content into place but never fade it, so text keeps full contrast. Each starts as its
 * element begins to enter the viewport and fills forwards only, so the offset is applied off-screen.
 * Browsers without scroll-driven animations, reduced-motion users and print see everything static. */
@keyframes roc-reveal {
	from {
		translate: 0 32px;
		scale: 0.97;
	}

	to {
		translate: none;
		scale: none;
	}
}

@keyframes roc-reveal-text {
	from {
		translate: 0 22px;
	}

	to {
		translate: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.roc-reveal {
			animation: roc-reveal-text linear forwards;
			animation-timeline: view();
			animation-range: entry 0% cover 26%;
		}

		/* A row reveals its cards on the row's own timeline (this works inside scrolling rows too). All
		   start as the row enters; later cards take longer, so they land one after another. */
		.roc-stagger {
			view-timeline: --roc-row block;
		}

		.roc-stagger > * {
			animation: roc-reveal linear forwards;
			animation-timeline: --roc-row;
			animation-range: entry 0% cover calc(22% + var(--i, 0) * 5%);
		}
	}
}

@media print {
	.roc-reveal,
	.roc-stagger > * {
		animation: none !important;
		translate: none !important;
		scale: none !important;
	}
}