/*
 * Landing templates (THM7): services, repair, card requester, contact. Only --occ-* tokens.
 * Builds on pages.css (THM6): .occ-home-section / .occ-home-band rhythm, .occ-home-intro, .occ-home-index,
 * .occ-home-facts, .occ-home-empty, .occ-prose. Rules THM6 scoped to .occ-home are repeated here for .occ-landing.
 * Breakpoint 52rem = the DS grid collapse; 40rem = two form columns.
 */

@layer occ.components {
	/* Shared ------------------------------------------------------------------ */
	.occ-landing .occ-grid-12 {
		row-gap: var(--occ-space-8);
	}

	/* Grid items may shrink below their content, so wide tables scroll inside .occ-table-scroll. */
	.occ-landing .occ-grid-12 > * {
		min-width: 0;
	}

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

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

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

	.occ-landing__copy p {
		margin: 0;
		font-size: var(--occ-text-lg);
	}

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

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

	/* Fact sheet values are sentences here, not single figures (home). */
	.occ-landing .occ-home-facts dd {
		font-size: var(--occ-text-lg);
		line-height: var(--occ-leading-ui);
	}

	.occ-landing__note {
		margin: var(--occ-space-4) 0 0;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-body);
	}

	/* Services index: no count column. */
	.occ-landing-index__link {
		grid-template-areas:
			"title arrow"
			"text  arrow";
	}

	/* Tables (price list, worked example, outcome) ------------------------------ */
	.occ-table-scroll {
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	.occ-table-scroll:focus-visible {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	.occ-table {
		width: 100%;
		border-collapse: collapse;
		border-top: var(--occ-border-width) solid var(--occ-border-strong);
		font-variant-numeric: tabular-nums;
	}

	.occ-table :where(th, td) {
		padding: var(--occ-space-4) var(--occ-space-3);
		border-bottom: var(--occ-border-width) solid var(--occ-border);
		text-align: start;
		vertical-align: baseline;
		line-height: var(--occ-leading-ui);
	}

	.occ-table :where(th, td):first-child {
		padding-inline-start: 0;
	}

	.occ-table :where(th, td):last-child {
		padding-inline-end: 0;
	}

	.occ-table thead th {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-semibold);
		letter-spacing: var(--occ-tracking-caps);
		text-transform: uppercase;
	}

	.occ-table tbody th {
		font-weight: var(--occ-fw-regular);
	}

	.occ-price-table__group th {
		padding-block: var(--occ-space-8) var(--occ-space-3);
		border-bottom-color: var(--occ-border-strong);
		color: var(--occ-accent-ink);
	}

	.occ-price-table tbody:first-of-type .occ-price-table__group th {
		padding-block-start: var(--occ-space-4);
	}

	.occ-price-table__name {
		display: block;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-lg);
	}

	.occ-price-table__desc {
		display: block;
		margin-block-start: var(--occ-space-1);
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-body);
	}

	.occ-price-table__price {
		font-weight: var(--occ-fw-bold);
		text-align: end;
		white-space: nowrap;
	}

	.occ-example-table {
		min-width: 34rem; /* Five money columns stay readable; the wrapper scrolls below that (layout math). */
		font-size: var(--occ-text-sm);
	}

	.occ-example-table :where(td, thead th:not(:first-child)) {
		text-align: end;
		white-space: nowrap;
	}

	.occ-example-table__pay {
		font-weight: var(--occ-fw-bold);
	}

	.occ-outcome-table {
		min-width: 26rem;
		font-size: var(--occ-text-sm);
	}

	/* Services: wel / niet ------------------------------------------------------ */
	.occ-scope {
		display: grid;
		gap: var(--occ-space-8);
	}

	.occ-scope__title {
		display: flex;
		align-items: center;
		gap: var(--occ-space-2);
		margin: 0 0 var(--occ-space-2);
		color: var(--occ-fg-muted);
	}

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

	.occ-scope__list li {
		display: flex;
		align-items: flex-start;
		gap: var(--occ-space-3);
		padding-block: var(--occ-space-4);
		border-bottom: var(--occ-border-width) solid var(--occ-border);
		line-height: var(--occ-leading-body);
	}

	.occ-scope__icon {
		flex: none;
		width: var(--occ-space-6);
		height: var(--occ-space-6);
	}

	.occ-scope__col:first-child .occ-scope__icon {
		color: var(--occ-success);
	}

	.occ-scope__col:last-child .occ-scope__icon {
		color: var(--occ-danger);
	}

	/* Closing CTA */
	.occ-landing-cta__actions {
		display: flex;
		align-items: flex-end;
	}

	/* Contact ------------------------------------------------------------------ */
	.occ-contact {
		align-items: start;
		padding-block: var(--occ-space-12) var(--occ-section-space);
	}

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

	.occ-contact__intro .occ-page__header {
		margin: 0;
	}

	.occ-contact__eyebrow {
		margin: 0;
		color: var(--occ-accent-ink);
	}

	.occ-contact__details {
		margin: 0;
		border-top: var(--occ-border-width) solid var(--occ-border-strong);
	}

	.occ-contact__row {
		display: grid;
		grid-template-columns: minmax(7rem, 2fr) minmax(0, 3fr);
		gap: var(--occ-space-4);
		padding-block: var(--occ-space-4);
		border-bottom: var(--occ-border-width) solid var(--occ-border);
	}

	.occ-contact__row dt {
		padding-block-start: var(--occ-space-1);
		color: var(--occ-fg-muted);
	}

	.occ-contact__row dd {
		margin: 0;
		line-height: var(--occ-leading-body);
		overflow-wrap: anywhere;
	}

	.occ-contact__row address {
		font-style: normal;
	}

	.occ-contact__row a {
		display: inline-flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		margin-block: calc((var(--occ-touch-min) - 1lh) / -2); /* 44px target without growing the row (layout math). */
		color: var(--occ-accent-ink);
	}

	.occ-contact__hours {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.occ-contact__main:focus {
		outline: none;
	}

	.occ-contact-form {
		display: grid;
		gap: var(--occ-space-6);
		padding: var(--occ-space-6);
	}

	.occ-contact-form__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-contact-form__grid {
		display: grid;
		gap: var(--occ-space-6) var(--occ-space-4);
	}

	.occ-contact-form__privacy {
		margin: 0;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-body);
	}

	.occ-contact-form__privacy a {
		color: var(--occ-accent-ink);
	}

	.occ-contact-form .occ-button {
		justify-self: start;
	}

	/* Notices (form result) */
	.occ-notice {
		display: flex;
		align-items: flex-start;
		gap: var(--occ-space-4);
		padding: var(--occ-space-6);
		border-inline-start: var(--occ-border-width-strong) solid currentColor;
		border-radius: var(--occ-radius-lg);
		background: var(--occ-surface);
		line-height: var(--occ-leading-body);
	}

	.occ-notice > .occ-icon {
		flex: none;
		width: var(--occ-space-6);
		height: var(--occ-space-6);
	}

	.occ-notice :where(p, ul) {
		margin: 0;
		color: var(--occ-fg);
	}

	.occ-notice ul {
		margin-block-start: var(--occ-space-2);
		padding-inline-start: var(--occ-space-4);
	}

	.occ-notice a {
		color: var(--occ-fg);
	}

	.occ-notice--success {
		color: var(--occ-success);
	}

	.occ-notice--error {
		color: var(--occ-danger);
		border: var(--occ-border-width) solid var(--occ-danger);
		border-inline-start-width: var(--occ-border-width-strong);
	}

	.occ-notice__title {
		margin: 0 0 var(--occ-space-2);
		color: var(--occ-fg);
		font-weight: var(--occ-fw-bold);
	}

	h2.occ-notice__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);
	}

	@media (min-width: 40rem) {
		.occ-contact-form__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.occ-contact-form__wide {
			grid-column: 1 / -1;
		}

		.occ-scope {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 52.0625rem) {
		.occ-landing-index__link {
			grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) var(--occ-touch-min);
			grid-template-areas: "title text arrow";
		}

		.occ-landing-cta__actions {
			justify-content: flex-end;
		}

		.occ-contact {
			padding-block-start: var(--occ-space-16);
		}

		.occ-contact__intro {
			position: sticky;
			top: var(--occ-space-24);
		}

		.occ-contact-form {
			padding: var(--occ-space-8);
		}
	}
}