/*
 * Pages (THM6): front page sections, page.php / index.php content, 404. Only --occ-* tokens.
 * Section rhythm: each home section pads its END by --occ-section-space (64px at 390, ~130px at 1440,
 * 160px max), so the gap between two sections is one section-space (brief: 64–100 mobile, 120–200 desktop)
 * instead of two stacked paddings. Bands with a surface pad both ends.
 * Breakpoint 52rem = the DS grid collapse (.occ-grid-12 → 1 column).
 */

@layer occ.components {
	/* Home: rhythm ------------------------------------------------------------ */
	.occ-home-section {
		padding-block-end: var(--occ-section-space);
	}

	/* The footer adds space-24 on top; together they keep one section-space (never less than space-24). */
	.occ-home > :last-child {
		padding-block-end: max(0px, calc(var(--occ-section-space) - var(--occ-space-24)));
	}

	.occ-home-band {
		margin-block-end: var(--occ-section-space);
		padding-block: var(--occ-section-space);
		background: var(--occ-bg-subtle);
	}

	.occ-home .occ-grid-12 {
		row-gap: var(--occ-space-8);
	}

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

	.occ-home-intro {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--occ-space-6);
	}

	.occ-home .occ-button--ghost {
		padding-inline: 0;
	}

	/* Shop entry: an editorial index (numbered rows), not a card row. */
	.occ-home-index {
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: var(--occ-border-width) solid var(--occ-border-strong);
		counter-reset: occ-index;
	}

	.occ-home-index__item {
		border-bottom: var(--occ-border-width) solid var(--occ-border-strong);
		counter-increment: occ-index;
	}

	.occ-home-index__link {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--occ-touch-min);
		grid-template-areas:
			"title arrow"
			"text  arrow"
			"count arrow";
		align-items: center;
		gap: var(--occ-space-1) var(--occ-space-4);
		min-height: var(--occ-touch-min);
		padding-block: var(--occ-space-6);
		color: inherit;
		text-decoration: none;
	}

	.occ-home-index__title {
		grid-area: title;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		line-height: var(--occ-leading-heading);
		overflow-wrap: anywhere; /* "Koop-/verkoopadvies" at 320px */
	}

	.occ-home-index__title::before {
		content: counter(occ-index, decimal-leading-zero);
		margin-inline-end: var(--occ-space-3);
		color: var(--occ-accent-ink);
		font-family: var(--occ-font-sans);
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-bold);
		letter-spacing: var(--occ-tracking-caps);
		vertical-align: super;
	}

	.occ-home-index__text {
		grid-area: text;
		color: var(--occ-fg-muted);
		line-height: var(--occ-leading-body);
	}

	.occ-home-index__count {
		grid-area: count;
		color: var(--occ-fg-muted);
	}

	.occ-home-index__arrow {
		grid-area: arrow;
		justify-self: end;
		width: var(--occ-space-6);
		height: var(--occ-space-6);
		color: var(--occ-accent-ink);
		transition: translate var(--occ-duration-base) var(--occ-ease-standard);
	}

	.occ-home-index__link:hover .occ-home-index__title {
		text-decoration: underline;
		text-decoration-thickness: var(--occ-border-width);
	}

	.occ-home-index__link:hover .occ-home-index__arrow {
		translate: var(--occ-space-1) 0;
	}

	/* New in: heading + link on one line, THM5a's product grid below. */
	.occ-home-new__head {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--occ-space-4) var(--occ-space-8);
		margin-block-end: var(--occ-space-12);
	}

	/* Repair band */
	.occ-home-repair__copy {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--occ-space-6);
	}

	.occ-home-repair__copy p {
		margin: 0;
	}

	.occ-home-repair__copy .occ-body {
		font-size: var(--occ-text-lg);
	}

	.occ-home-repair__price {
		padding-inline-start: var(--occ-space-4);
		border-inline-start: var(--occ-border-width-strong) solid var(--occ-accent-strong);
		font-weight: var(--occ-fw-bold);
	}

	.occ-home-repair__steps {
		padding-block-start: var(--occ-space-8);
		border-top: var(--occ-border-width) solid var(--occ-border);
	}

	/* Requester: copy + fact sheet */
	.occ-home-facts {
		align-self: start;
		margin: 0;
		padding: var(--occ-space-2) var(--occ-space-6);
	}

	.occ-home-facts__row {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--occ-space-2) var(--occ-space-4);
		padding-block: var(--occ-space-4);
	}

	.occ-home-facts__row + .occ-home-facts__row {
		border-top: var(--occ-border-width) solid var(--occ-border);
	}

	.occ-home-facts dt {
		color: var(--occ-fg-muted);
	}

	.occ-home-facts dd {
		margin: 0;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-xl);
	}

	/* Events */
	.occ-home-events__list {
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: var(--occ-border-width) solid var(--occ-border-strong);
	}

	.occ-home-event {
		position: relative;
		display: grid;
		grid-template-columns: var(--occ-space-16) minmax(0, 1fr);
		align-items: start;
		gap: var(--occ-space-4);
		padding-block: var(--occ-space-6);
		border-bottom: var(--occ-border-width) solid var(--occ-border-strong);
	}

	.occ-home-event__date {
		display: grid;
		justify-items: start;
		gap: var(--occ-space-1);
	}

	.occ-home-event__big {
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-3xl);
		line-height: 1;
	}

	.occ-home-event__small,
	.occ-home-event__type {
		color: var(--occ-fg-muted);
	}

	.occ-home-event__body {
		display: grid;
		gap: var(--occ-space-2);
		min-width: 0;
	}

	.occ-home-event__body > * {
		margin: 0;
	}

	.occ-home-event__title {
		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;
	}

	/* Whole row is the target (≥44px); the title link stays the only link. */
	.occ-home-event__title a {
		text-decoration: none;
	}

	.occ-home-event__title a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.occ-home-event:hover .occ-home-event__title a {
		text-decoration: underline;
	}

	.occ-home-event__title a:focus-visible {
		outline: none;
	}

	.occ-home-event:has(a:focus-visible) {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	.occ-home-event__meta {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	/* Empty states (events, archives) */
	.occ-home-empty {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--occ-space-4);
		padding: var(--occ-space-6);
		color: var(--occ-fg-muted);
	}

	.occ-home-empty > p {
		flex: 1 1 16rem;
		margin: 0;
		line-height: var(--occ-leading-body);
	}

	.occ-home-empty > .occ-icon {
		width: var(--occ-space-8);
		height: var(--occ-space-8);
		color: var(--occ-accent-ink);
	}

	.occ-home-empty > .occ-search-form {
		flex: 1 1 100%;
	}

	/* Services: mobile = a swipeable row (redesigned, not a stack of four tall cards); desktop = 5/7 · 7/5 mosaic. */
	.occ-home-services__more {
		display: flex;
		align-items: flex-end;
	}

	.occ-home-services__grid {
		display: grid;
		grid-auto-columns: minmax(16rem, 82%);
		grid-auto-flow: column;
		gap: var(--occ-space-4);
		margin: 0;
		padding: 0 0 var(--occ-space-4);
		list-style: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
	}

	.occ-home-services__item {
		display: flex;
		scroll-snap-align: start;
	}

	.occ-home-services__item > .occ-service-card {
		flex: 1;
	}

	@media (min-width: 52.0625rem) {
		.occ-home-intro {
			position: sticky;
			top: var(--occ-space-24);
			align-self: start;
		}

		.occ-home-index__link {
			grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2fr) var(--occ-touch-min);
			grid-template-areas: "title text count arrow";
			column-gap: var(--occ-space-6);
			padding-block: var(--occ-space-8);
		}

		.occ-home-index__title {
			font-size: var(--occ-text-3xl);
		}

		.occ-home-index__count {
			justify-self: end;
		}

		.occ-home-repair__steps {
			margin-block-start: var(--occ-space-8);
		}

		.occ-home-event {
			grid-template-columns: var(--occ-space-24) minmax(0, 1fr);
			gap: var(--occ-space-8);
			padding-block: var(--occ-space-8);
		}

		.occ-home-event__big {
			font-size: var(--occ-text-4xl);
		}

		.occ-home-event__title {
			font-size: var(--occ-text-2xl);
		}

		.occ-home-services__more {
			justify-content: flex-end;
		}

		.occ-home-services__grid {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			grid-auto-flow: row;
			gap: var(--occ-grid-gap);
			padding: 0;
			overflow: visible;
		}

		.occ-home-services__item:nth-child(4n + 1),
		.occ-home-services__item:nth-child(4n + 4) {
			grid-column: span 5;
		}

		.occ-home-services__item:nth-child(4n + 2),
		.occ-home-services__item:nth-child(4n + 3) {
			grid-column: span 7;
		}
	}

	/* Page / post / archive ------------------------------------------------------ */
	.occ-page {
		padding-block: var(--occ-space-12) var(--occ-space-8);
	}

	.occ-page__header {
		display: grid;
		gap: var(--occ-space-4);
		max-width: var(--occ-container-md);
		margin-block-end: var(--occ-space-12);
	}

	.occ-page__title,
	.occ-page__lede,
	.occ-page__date {
		margin: 0;
	}

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

	.occ-page__date {
		color: var(--occ-fg-muted);
	}

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

	.occ-page--wide .occ-page__header {
		margin-block-end: var(--occ-space-8);
	}

	.occ-page__media {
		max-width: var(--occ-container-md);
		margin-block-end: var(--occ-space-12);
	}

	/* Editor content in a readable measure. Element rules sit in :where() (0,0,1) so any component class inside the content wins. */
	.occ-prose {
		max-width: 68ch;
		font-size: var(--occ-text-md);
		line-height: var(--occ-leading-body);
	}

	:where(.occ-prose) > * {
		margin-block: 0 var(--occ-space-6);
	}

	:where(.occ-prose) > :last-child {
		margin-block-end: 0;
	}

	:where(.occ-prose) :where(h2, h3, h4) {
		margin-block: var(--occ-space-12) var(--occ-space-4);
		font-family: var(--occ-font-display);
		font-weight: var(--occ-fw-regular);
		line-height: var(--occ-leading-heading);
	}

	:where(.occ-prose) h2 {
		font-size: var(--occ-text-3xl);
	}

	:where(.occ-prose) h3 {
		font-size: var(--occ-text-2xl);
	}

	:where(.occ-prose) h4 {
		font-size: var(--occ-text-xl);
	}

	:where(.occ-prose) :where(ul, ol) {
		padding-inline-start: var(--occ-space-6);
	}

	:where(.occ-prose) li + li {
		margin-block-start: var(--occ-space-2);
	}

	:where(.occ-prose) a {
		color: var(--occ-accent-ink);
	}

	:where(.occ-prose) blockquote {
		padding-inline-start: var(--occ-space-6);
		border-inline-start: var(--occ-border-width-strong) solid var(--occ-accent-strong);
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-xl);
		font-style: italic;
	}

	:where(.occ-prose) :where(img, figure) {
		max-width: 100%;
		height: auto;
		border-radius: var(--occ-radius-lg);
	}

	:where(.occ-prose) figcaption {
		margin-block-start: var(--occ-space-2);
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	:where(.occ-prose) table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--occ-text-sm);
	}

	:where(.occ-prose) :where(th, td) {
		padding: var(--occ-space-3);
		border-bottom: var(--occ-border-width) solid var(--occ-border);
		text-align: start;
	}

	:where(.occ-prose) hr {
		height: var(--occ-border-width);
		border: 0;
		background: var(--occ-border);
	}

	.occ-post-list {
		max-width: var(--occ-container-md);
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: var(--occ-border-width) solid var(--occ-border-strong);
	}

	.occ-post-list__item {
		display: grid;
		gap: var(--occ-space-2);
		padding-block: var(--occ-space-8);
		border-bottom: var(--occ-border-width) solid var(--occ-border-strong);
	}

	.occ-post-list__item > * {
		margin: 0;
	}

	.occ-post-list__date {
		color: var(--occ-fg-muted);
	}

	.occ-post-list__title {
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-weight: var(--occ-fw-regular);
		line-height: var(--occ-leading-heading);
		overflow-wrap: anywhere;
	}

	.occ-post-list__title a {
		display: inline-block;
		min-height: var(--occ-touch-min);
		text-decoration: none;
	}

	.occ-post-list__title a:hover {
		text-decoration: underline;
	}

	.occ-archive__empty {
		max-width: var(--occ-container-sm);
	}

	.occ-pagination {
		margin-block-start: var(--occ-space-12);
	}

	.occ-pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-2);
	}

	.occ-pagination .page-numbers {
		display: inline-grid;
		place-items: center;
		min-width: var(--occ-touch-min);
		min-height: var(--occ-touch-min);
		padding: 0 var(--occ-space-2);
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-md);
		background: var(--occ-surface);
		font-size: var(--occ-text-sm);
		text-decoration: none;
	}

	.occ-pagination .page-numbers.current {
		border-color: var(--occ-fg);
		color: var(--occ-fg-inverse);
		background: var(--occ-surface-inverse);
	}

	.occ-pagination .page-numbers .occ-icon {
		width: var(--occ-space-4);
		height: var(--occ-space-4);
	}

	/* 404: 7/5, copy + a link list */
	.occ-notfound {
		align-items: start;
		row-gap: var(--occ-space-12);
		padding-block: var(--occ-space-12) var(--occ-space-8);
	}

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

	.occ-notfound__copy > :where(p, h1) {
		margin: 0;
	}

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

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

	.occ-notfound .occ-search-form {
		max-width: var(--occ-container-sm);
	}

	.occ-notfound__links h2 {
		margin: 0 0 var(--occ-space-4);
		color: var(--occ-fg-muted);
	}

	.occ-link-list {
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: var(--occ-border-width) solid var(--occ-border-strong);
	}

	.occ-link-list a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--occ-space-4);
		min-height: var(--occ-control-lg);
		border-bottom: var(--occ-border-width) solid var(--occ-border-strong);
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-xl);
		text-decoration: none;
	}

	.occ-link-list a:hover {
		text-decoration: underline;
	}

	.occ-link-list .occ-icon {
		flex: none;
		width: var(--occ-space-4);
		height: var(--occ-space-4);
		color: var(--occ-accent-ink);
	}

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

		.occ-notfound {
			padding-block-start: var(--occ-space-24);
		}

		.occ-notfound__links {
			grid-column: 9 / span 4;
			padding-block-start: var(--occ-space-8);
		}
	}
}