/*
 * Single Products CPT page (templates/single-product.php).
 *
 * The page is the shared Product Spotlight (product-spotlight.css), the
 * specs chart, and then Divi-authored content — so this file covers the
 * specs chart, the no-sequence fallback heading, and the two places where
 * the spotlight needs to behave differently as a page header than it does
 * as a homepage section.
 *
 * Loaded only on is_singular('seyond_product'), after global.css and
 * divi-overrides.css, so it inherits the design tokens defined there.
 */

.product-page {
	background: var(--black);
}

/* ── Spotlight as a page header ── */

/*
 * The HUD's top row ("PRODUCT SPOTLIGHT" + frame readout) is a homepage
 * flourish that labels the section among its neighbours. Here the section
 * IS the page, so the label has nothing to distinguish — and as the first
 * section it starts underneath Divi's Theme Builder header, then collides
 * with phase A's heading once scrolling clears it. Dropping the row removes
 * both problems and frees the top of the frame for the phases.
 */

.product-page .product-spotlight__hud-top {
	display: none;
}

/*
 * Pad the section rather than offsetting the HUD. The sticky stage is laid
 * out inside this padding, so at scroll 0 — the only moment Divi's Theme
 * Builder header overlays the page — the whole frame, corner brackets
 * included, starts clear of the nav. Once scrolling begins the sticky child
 * pins to top: 0 and the section goes full-bleed, which is where the header
 * has gone anyway.
 */

.product-page .product-spotlight {
	padding-top: 92px;
}

/*
 * With the readout row gone the phases can sit higher in the frame. Desktop
 * only: below 900px the component packs both phases at 14% for a layout this
 * does not apply to.
 */

@media (min-width: 901px) {
	.product-page .product-spotlight__phase--a {
		top: 12%;
	}

	.product-page .product-spotlight__phase--b {
		top: 9%;
	}
}

/*
 * Phase A opacity/transform are inline styles written by the scrub, which a
 * plain rule could not override — but CSS animations outrank inline styles,
 * so this entrance plays over them. fill-mode 'both' covers the start delay
 * (otherwise the heading flashes fully visible before animating in) and then
 * holds the end state — which is where the scrub parks phase A anyway, since
 * its reveal only ever ramps up and never back down.
 *
 * Only runs with data-phase-a-start="0" on the section, i.e. when the
 * template asked for phase A to be up on load rather than on scroll. Under
 * reduced motion the animation is skipped and the inline style shows phase A
 * immediately, which is the same end state without the movement.
 */

@media (prefers-reduced-motion: no-preference) {
	.product-page .product-spotlight[data-phase-a-start="0"] .product-spotlight__phase--a {
		animation: product-page-phase-in 900ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both;
	}
}

@keyframes product-page-phase-in {
	from {
		opacity: 0;
		transform: translateY(26px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Specs bench ── */

/*
 * A single-product reduction of the homepage's Product Breakdown. The
 * measurements — the two-column grid, the 1px range bar with its end-cap
 * indicator, the spec table's type scale — are deliberately the same, so a
 * product reads identically on both pages. What is dropped is everything
 * that only makes sense with siblings to compare: the sticky stage, the
 * scroll-synced rotation, and the active/inactive dimming (with one row
 * there is nothing to dim against, so it renders permanently "active").
 *
 * The homepage sizes its axis ticks from a JS-measured --range-w because
 * its ticks element spans both grid columns while the scale occupies only
 * the right one. Here the ticks live inside the scale, so four equal
 * intervals are just 25% and no measurement is needed.
 */

/*
 * Two columns: the description takes the smaller left column; the bench
 * (axis, range bar, spec table — stacked as one chart, not split apart)
 * takes the majority on the right. Splitting the bar and table across
 * columns, as the homepage breakdown does, only reads as tabular data when
 * there are sibling rows above and below it to align against — with one
 * product there's nothing to align against, so it just looked like two
 * unrelated columns of text. Kept together, it reads as a chart.
 *
 * The teal wash is on .product-specs__bench, not .product-specs__main,
 * so it spans both columns. On mobile the two columns stack into one, and
 * a wash confined to .product-specs__main's own grid cell stopped dead at
 * that cell's edge instead of running behind .product-specs__aside above
 * it, which read as the effect being cut off. position:relative on both
 * children (rather than z-index) is enough to paint them above the
 * absolutely-positioned wash, since it's the same stacking rule already
 * relied on for .product-specs__main here.
 */
.product-specs__bench {
	position: relative;
	margin-top: var(--section-title-gap);
	border-top: var(--hairline);
	display: grid;
	grid-template-columns: minmax(240px, 1fr) minmax(0, 58%);
	column-gap: clamp(40px, 5vw, 72px);
	align-items: start;
}

.product-specs__bench::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 5.5%, transparent), transparent 72%);
	pointer-events: none;
}

/*
 * Above 900px the two columns are usually uneven heights (the chart column
 * is taller than the description), so the wash's bottom edge lands exactly
 * on the last table row — a hard cutoff. A second, vertical layer fades
 * that edge to black instead of ending it abruptly. Layered on top of the
 * horizontal wash (first in the list paints on top) so it only softens the
 * bottom, not the sides.
 */
@media (min-width: 901px) {
	.product-specs__bench::before {
		background:
			linear-gradient(to bottom, transparent 75%, var(--black) 100%),
			linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 5.5%, transparent), transparent 72%);
	}
}

.product-specs__main {
	position: relative;
}

.product-specs__axis {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: clamp(16px, 2vw, 28px);
	padding: 14px 0 18px;
	border-bottom: var(--hairline);
	font-family: var(--font);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--white--30);
}

.product-specs__axis-label {
	flex-shrink: 0;
	line-height: 1;
}

.product-specs__axis-scale {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 1em;
	line-height: 1;
}

.product-specs__axis-ticks {
	position: absolute;
	right: 0;
	bottom: -18px;
	left: 0;
	height: 6px;
	pointer-events: none;
	background-image: repeating-linear-gradient(90deg, var(--white--8) 0 1px, transparent 1px calc(100% - 1px));
	background-size: 25% 6px;
	background-position: left bottom;
	background-repeat: repeat no-repeat;
}

.product-specs__axis-scale i {
	position: absolute;
	top: 0;
	font-family: var(--font);
	font-style: normal;
	font-size: inherit;
	font-variant-numeric: tabular-nums;
	transform: translateX(-50%);
	white-space: nowrap;
}

.product-specs__axis-scale i:first-child {
	transform: none;
}

/* Range bar */

.product-specs__range {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(28px, 3vw, 40px) 0;
	border-bottom: var(--hairline);
}

.product-specs__bar {
	--indicator-size: 6px;
	position: relative;
	display: flex;
	align-items: center;
	height: 1px;
	border-left: 1px solid var(--white--30);
	/* Room for the end-cap indicator when --range is 100% */
	padding-right: calc(var(--indicator-size) / 2);
}

.product-specs__track {
	position: absolute;
	top: 0;
	right: calc(var(--indicator-size) / 2);
	bottom: 0;
	left: 0;
	background: var(--white--15);
}

.product-specs__fill {
	position: relative;
	z-index: 1;
	width: var(--range);
	max-width: 100%;
	height: 1px;
	background: var(--teal);
}

.product-specs__fill::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--indicator-size);
	height: var(--indicator-size);
	border-radius: 50%;
	background: var(--teal);
	/* Center on the fill end; padding-right on the bar keeps it on-screen at 100% */
	transform: translate(50%, -50%);
}

.product-specs__meta {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 12px;
}

.product-specs__val {
	font-family: var(--font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--teal);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Spec table */

.product-specs__table {
	position: relative;
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font);
	font-variant-numeric: tabular-nums;
}

.product-specs__table th,
.product-specs__table td {
	padding: 10px 0;
	border: none;
	border-bottom: var(--hairline);
	font-size: 13px;
	line-height: 1.45;
	letter-spacing: 0;
	text-align: left;
	vertical-align: baseline;
}

.product-specs__table th {
	width: 42%;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--white--50);
	text-transform: uppercase;
	font-size: 11px;
	background: transparent;
}

.product-specs__table td {
	font-weight: 400;
	color: var(--white--80);
}

/*
 * ── Description column ──
 *
 * The kicker, name and CTA give the first column a top and bottom to anchor
 * the paragraph between, rather than a lone block of text floating next to
 * the chart. padding-top roughly aligns the kicker with the bench's axis
 * header rather than the range bar below it.
 */

.product-specs__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 46px;
}

.product-specs__flag {
	margin-bottom: 6px;
}

/*
 * Between the kicker (meta-label, 12px) and the section title (clamp
 * 28–40px) — echoes the product name for a reader who has scrolled past
 * the spotlight above, without competing with either.
 */
.product-specs__name {
	margin-bottom: 16px;
	font-family: var(--font);
	font-size: clamp(32px, 4vw, 42px);
	line-height: 1.15;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--white);
	text-wrap: balance;
}

.product-specs__copy p {
	max-width: 42ch;
	color: var(--white--70);
	font-size: 14px;
	line-height: 1.57;
	text-wrap: balance;
}

.product-specs__cta {
	align-self: flex-start;
	margin-top: var(--space-md);
}

@media (max-width: 900px) {
	.product-specs__bench {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-md);
	}

	.product-specs__aside {
		/* Without the axis to align against, the aside is just the first
		   thing under .product-specs__bench's border-top and needs its own
		   clearance instead of butting straight up against the hairline. */
		padding-top: var(--space-sm);
	}

	.product-specs__axis-label {
		display: none;
	}
}

/* ── No-sequence fallback heading ── */

.product-page__subtitle {
	font-size: 20px;
	line-height: 1.4;
	color: var(--white--80);
	margin-top: 12px;
}

/*
 * Divi builder content is emitted edge-to-edge (its own sections carry
 * their padding), so .product-page__content adds no container of its own.
 * Plain editor content is wrapped in .section > .wrap by the template and
 * only needs vertical rhythm between blocks.
 */

.product-page__content .wrap>*+* {
	margin-top: var(--space-sm);
}