/*
 * Composites (THM4, template-parts/components/*): ProductCard + ServiceCard additions on top of the DS sheets,
 * Hero, BeforeAfter, RepairSteps, Accordion. Only --occ-* tokens.
 * Breakpoints: 52rem = DS grid collapse, 64rem = horizontal RepairSteps.
 */

@layer occ.components {
	/* ProductCard: whole card clickable via the stretched title link; image contained (V40). */
	.occ-product-card {
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.occ-product-card__media {
		padding: var(--occ-space-4);
	}

	.occ-product-card__media > img {
		object-fit: contain;
	}

	.occ-product-card__badge {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-2);
	}

	/* "Verkocht" must read on the sand media background. */
	.occ-product-card__badge .occ-badge--neutral {
		color: var(--occ-fg-inverse);
		background: var(--occ-surface-inverse);
	}

	.occ-product-card__body {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	/* DS uses --occ-fg-subtle at 10px here (3.67:1); muted at 12px keeps AA without touching tokens. */
	.occ-product-card__category {
		margin: 0;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-xs);
	}

	.occ-product-card__title {
		margin: 0;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-xl);
		font-weight: var(--occ-fw-regular);
		line-height: 1.15;
		overflow-wrap: anywhere;
	}

	.occ-product-card__link {
		color: inherit;
		text-decoration: none;
	}

	.occ-product-card__link::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: var(--occ-z-raised);
	}

	.occ-product-card__link:focus-visible {
		outline: none;
	}

	.occ-product-card:has(.occ-product-card__link:focus-visible) {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	.occ-product-card:hover .occ-product-card__link {
		text-decoration: underline;
	}

	.occ-product-card__spec {
		margin: 0;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	.occ-product-card__footer {
		flex-wrap: wrap;
		margin-top: auto;
	}

	.occ-product-card__price {
		font-size: var(--occ-text-lg);
		font-weight: var(--occ-fw-bold);
	}

	.occ-product-card__price del {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-regular);
	}

	.occ-product-card__price ins {
		text-decoration: none;
	}

	.occ-product-card__stock {
		display: inline-flex;
		align-items: center;
		gap: var(--occ-space-2);
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-xs);
	}

	.occ-product-card__stock::before {
		content: "";
		width: var(--occ-space-2);
		height: var(--occ-space-2);
		border-radius: var(--occ-radius-round);
		background: currentColor;
	}

	.occ-product-card__stock--in {
		color: var(--occ-success);
	}

	.occ-product-card__stock--out {
		color: var(--occ-danger);
	}

	.occ-product-card__action {
		position: relative;
		z-index: calc(var(--occ-z-raised) + 1);
	}

	/* Two cards per row at 320px (400% zoom): the cart button may not set the card's min width. */
	.occ-product-card {
		min-width: 0;
	}

	@media (max-width: 29.99rem) {
		.occ-product-card__action .occ-button {
			max-width: 100%;
			padding-inline: var(--occ-space-3);
		}
	}

	/* ServiceCard: title class for any heading level, action pinned to the bottom. */
	.occ-service-card {
		display: flex;
		flex-direction: column;
	}

	.occ-service-card__body {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.occ-service-card__title {
		margin: 0;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-weight: var(--occ-fw-regular);
		line-height: var(--occ-leading-heading);
	}

	.occ-service-card__icon .occ-icon {
		width: var(--occ-space-8);
		height: var(--occ-space-8);
	}

	.occ-service-card__action {
		margin-top: auto;
		padding-top: var(--occ-space-2);
	}

	/* Hero: 7/5 on desktop; on mobile the visual is a short band above the copy (redesigned, not stacked). */
	.occ-hero {
		padding-block: var(--occ-space-8) var(--occ-section-space);
	}

	.occ-hero__grid {
		align-items: center;
		row-gap: var(--occ-space-8);
	}

	.occ-hero__copy {
		display: flex;
		flex-direction: column;
		gap: var(--occ-space-6);
		min-width: 0;
	}

	.occ-hero__eyebrow,
	.occ-hero__title,
	.occ-hero__text {
		margin: 0;
	}

	.occ-hero__eyebrow {
		color: var(--occ-accent-ink);
	}

	.occ-hero__title {
		overflow-wrap: anywhere;
	}

	/* Shiny Bronze italic accent: 3.33:1, large display text only (known deviation). */
	.occ-hero__title em {
		color: var(--occ-accent-strong);
		font-style: italic;
	}

	.occ-hero__text {
		font-size: var(--occ-text-lg);
	}

	.occ-hero__visual {
		order: -1;
	}

	.occ-hero__media {
		aspect-ratio: 4 / 3;
	}

	/* Placeholder anchor until real photography: a quiet panel with the approved symbol (no decoration).
	   Desktop only: on mobile it would just repeat the header symbol right above it. */
	.occ-hero__visual:has(> .occ-hero__mark) {
		display: none;
	}

	.occ-hero__mark {
		display: grid;
		place-items: center;
		aspect-ratio: 16 / 9;
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-xl);
		background: var(--occ-bg-subtle);
	}

	.occ-hero__mark .occ-logo img {
		width: clamp(5rem, 22vw, 7rem);
	}

	@media (min-width: 52.0625rem) {
		.occ-hero {
			padding-block-start: var(--occ-space-16);
		}

		.occ-hero__copy {
			grid-column: 1 / span 7;
		}

		.occ-hero__visual,
		.occ-hero__visual:has(> .occ-hero__mark) {
			display: block;
			order: 0;
			grid-column: 8 / span 5;
		}

		.occ-hero__media,
		.occ-hero__mark {
			aspect-ratio: 4 / 5;
		}

		.occ-hero__mark .occ-logo img {
			width: clamp(7rem, 12vw, 11rem);
		}
	}

	/* BeforeAfter. No JS: two labelled figures side by side. Enhanced: overlay, after-pane clipped at --occ-ba-pos.
	   Images are never filtered, scaled or animated. Width follows the caller, capped at container-sm. */
	.occ-before-after {
		display: grid;
		gap: var(--occ-space-3);
		max-inline-size: var(--occ-container-sm);
		margin: 0;
	}

	.occ-before-after__frame {
		position: relative;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--occ-space-3);
	}

	.occ-before-after__pane {
		position: relative;
		overflow: clip;
		aspect-ratio: var(--occ-ba-ratio, 63 / 88);
		margin: 0;
		border-radius: var(--occ-radius-xl);
		background: var(--occ-bg-subtle);
	}

	.occ-before-after__pane > img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.occ-before-after__label {
		position: absolute;
		top: var(--occ-space-3);
		left: var(--occ-space-3);
		padding: var(--occ-space-1) var(--occ-space-2);
		border-radius: var(--occ-radius-xs);
		background: var(--occ-surface);
		color: var(--occ-fg);
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-bold);
		letter-spacing: var(--occ-tracking-caps);
		text-transform: uppercase;
	}

	.occ-before-after__caption {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-body);
	}

	.occ-before-after.is-enhanced .occ-before-after__frame {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		overflow: clip;
		aspect-ratio: var(--occ-ba-ratio, 63 / 88);
		border-radius: var(--occ-radius-xl);
		background: var(--occ-bg-subtle);
	}

	.occ-before-after.is-enhanced .occ-before-after__pane {
		grid-area: 1 / 1;
		aspect-ratio: auto;
		border-radius: 0;
		background: none;
	}

	.occ-before-after.is-enhanced .occ-before-after__pane--after {
		clip-path: inset(0 0 0 var(--occ-ba-pos, 50%));
	}

	.occ-before-after.is-enhanced .occ-before-after__pane--after .occ-before-after__label {
		right: var(--occ-space-3);
		left: auto;
	}

	.occ-before-after__range {
		position: absolute;
		inset: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		margin: 0;
		opacity: 0;
		cursor: ew-resize;
		touch-action: pan-y;
		-webkit-appearance: none;
		appearance: none;
	}

	.occ-before-after__handle {
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--occ-ba-pos, 50%);
		z-index: 1;
		width: var(--occ-border-width-strong);
		background: var(--occ-surface);
		box-shadow: var(--occ-shadow-xs);
		pointer-events: none;
		translate: -50% 0;
	}

	.occ-before-after__knob {
		position: absolute;
		top: 50%;
		left: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--occ-touch-min);
		height: var(--occ-touch-min);
		border: var(--occ-border-width) solid var(--occ-border-premium);
		border-radius: var(--occ-radius-round);
		background: var(--occ-surface);
		color: var(--occ-accent-ink);
		box-shadow: var(--occ-shadow-sm);
		translate: -50% -50%;
	}

	.occ-before-after__knob .occ-icon {
		width: var(--occ-space-4);
		height: var(--occ-space-4);
	}

	.occ-before-after:has(.occ-before-after__range:focus-visible) .occ-before-after__knob {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	/* RepairSteps: vertical timeline on mobile, one row of 7 from 64rem. */
	.occ-repair-steps {
		display: grid;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.occ-repair-steps__item {
		position: relative;
		display: grid;
		grid-template-columns: var(--occ-touch-min) minmax(0, 1fr);
		column-gap: var(--occ-space-4);
		padding-bottom: var(--occ-space-6);
	}

	.occ-repair-steps__item:not(:last-child)::before {
		content: "";
		position: absolute;
		top: var(--occ-touch-min);
		bottom: 0;
		left: calc(var(--occ-touch-min) / 2);
		width: var(--occ-border-width);
		background: var(--occ-border-strong);
	}

	.occ-repair-steps__item.is-complete::before {
		background: var(--occ-fg);
	}

	.occ-repair-steps__marker {
		display: grid;
		place-items: center;
		width: var(--occ-touch-min);
		height: var(--occ-touch-min);
		border: var(--occ-border-width) solid var(--occ-border-strong);
		border-radius: var(--occ-radius-round);
		background: var(--occ-surface);
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-bold);
	}

	.occ-repair-steps__marker .occ-icon {
		width: var(--occ-space-4);
		height: var(--occ-space-4);
		stroke-width: 2;
	}

	.is-complete > .occ-repair-steps__marker {
		border-color: var(--occ-surface-inverse);
		background: var(--occ-surface-inverse);
		color: var(--occ-fg-inverse);
	}

	.is-current > .occ-repair-steps__marker {
		border-color: var(--occ-accent-ink);
		background: var(--occ-accent);
		color: var(--occ-fg);
	}

	.occ-repair-steps__body {
		display: flex;
		flex-direction: column;
		gap: var(--occ-space-1);
		padding-top: var(--occ-space-3);
	}

	.occ-repair-steps__title {
		font-weight: var(--occ-fw-bold);
		line-height: var(--occ-leading-ui);
	}

	.occ-repair-steps--explainer .occ-repair-steps__title {
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-xl);
		font-weight: var(--occ-fw-regular);
	}

	.is-upcoming .occ-repair-steps__title {
		color: var(--occ-fg-muted);
		font-weight: var(--occ-fw-regular);
	}

	.occ-repair-steps__text {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-body);
	}

	@media (min-width: 64rem) {
		.occ-repair-steps {
			grid-auto-columns: minmax(0, 1fr);
			grid-auto-flow: column;
		}

		.occ-repair-steps__item {
			grid-template-columns: minmax(0, 1fr);
			row-gap: var(--occ-space-3);
			padding-right: var(--occ-space-4);
			padding-bottom: 0;
		}

		.occ-repair-steps__item:not(:last-child)::before {
			top: calc(var(--occ-touch-min) / 2);
			right: 0;
			bottom: auto;
			left: var(--occ-touch-min);
			width: auto;
			height: var(--occ-border-width);
		}

		.occ-repair-steps__body {
			padding-top: 0;
		}
	}

	/* Accordion */
	.occ-accordion {
		border-top: var(--occ-border-width) solid var(--occ-border);
	}

	.occ-accordion__item {
		border-bottom: var(--occ-border-width) solid var(--occ-border);
	}

	.occ-accordion__heading {
		margin: 0;
		font: inherit;
	}

	.occ-accordion__trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--occ-space-4);
		width: 100%;
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-4) 0;
		border: 0;
		background: none;
		color: var(--occ-fg);
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-xl);
		line-height: var(--occ-leading-heading);
		text-align: start;
		cursor: pointer;
	}

	.occ-accordion__icon {
		color: var(--occ-accent-ink);
		transition: rotate var(--occ-duration-base) var(--occ-ease-standard);
	}

	.occ-accordion__trigger[aria-expanded="true"] .occ-accordion__icon {
		rotate: 180deg;
	}

	.occ-accordion__panel {
		max-width: 68ch;
		padding-bottom: var(--occ-space-6);
		color: var(--occ-fg-muted);
		line-height: var(--occ-leading-body);
	}

	.occ-accordion__panel > :first-child {
		margin-top: 0;
	}

	.occ-accordion__panel > :last-child {
		margin-bottom: 0;
	}
}