/* ==========================================================================
   Warranty — Need Help
   Tinted band. Heading, supporting line and a Call Us number on the leading
   side; a response-commitment note, a divider-separated routing list and a
   closing text link on the trailing side.
   Figma: Warranty / Frame 8817 (4999:1691), 1440x400.
   Band spans y 5224-5624 on the 1440x7451 page frame.

   Measured (settings.custom.components.warranty):
     band      surface-section, pad-top 80, pad-bottom 72, gutter 72 inline
     copy      509 wide, 24 stack; heading xl/700 inside 437, body md/400
     phone     label md-base/700 ink-primary, number base/500 brand-red,
               12 between them
     detail    762 wide, offset 9 below the copy column, 24 stack
     routes    base/400 ink-secondary with a brand-red marker, 8 stack,
               1px neutral-200 rules between rows
   ========================================================================== */

.nk-warranty-support {
	/* WP core gives blocks a 24px margin-block-start; these are full-bleed panels
	   that must butt against their neighbours. */
	margin: 0;

	box-sizing: border-box;
	width: 100%;
	padding-block-start: var(--wp--preset--spacing--20);
	padding-block-end: var(--wp--custom--components--warranty--support-pad-bottom);
	background-color: var(--wp--preset--color--surface-section);
	font-family: var(--wp--preset--font-family--inter);
}

.nk-warranty-support__container {
	display: grid;
	grid-template-columns:
		var(--wp--custom--components--warranty--support-copy-width)
		minmax(0, var(--wp--custom--components--warranty--support-detail-width));
	justify-content: space-between;
	align-items: start;
	box-sizing: border-box;
	max-width: var(--wp--custom--layout--max-width);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
}

/* ---------- Leading column ---------- */

.nk-warranty-support__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
}

.nk-warranty-support__intro {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
}

.nk-warranty-support__heading {
	margin: 0;
	/* Size + case come from the shared .nk-headline--structural class (xl, sentence
	   case) — the 30 step at the mobile breakpoint below still out-ranks it, because
	   this stylesheet loads after the global styles that define it. */
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-primary);
}

.nk-warranty-support__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
}

.nk-warranty-support__phone-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
}

.nk-warranty-support__phone-label {
	font-size: var(--wp--preset--font-size--md-base);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--md);
	color: var(--wp--preset--color--ink-primary);
}

.nk-warranty-support__phone {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--brand-red);
	text-decoration: none;
}

.nk-warranty-support__phone:hover,
.nk-warranty-support__phone:focus-visible {
	color: var(--wp--preset--color--brand-red-hover);
	text-decoration: underline;
}

/* ---------- Trailing column ---------- */

.nk-warranty-support__detail {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	/* The frame drops this column 9px below the copy column's cap height. */
	margin-block-start: var(--wp--custom--components--warranty--support-detail-offset);
}

.nk-warranty-support__commitment {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.nk-warranty-support__commitment-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-primary);
	/* The frame gives this single 20px line a 41 box and sets the bullet beneath it
	   at y=53 — i.e. the box height is load-bearing, not slack. Pinned here rather
	   than faked with a 2.05 line-height, which would space the glyphs wrongly. */
	min-block-size: var(--wp--custom--components--warranty--support-commit-title-box);
}

/* ---------- Lists ---------- */

.nk-warranty-support__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nk-warranty-support__list li {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--ink-secondary);
}

/* The frame's red bullet, drawn as a marker so the text stays clean. */
.nk-warranty-support__list li::before {
	content: "\2022";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--brand-red);
}

/* Routing rows are ruled apart; the commitment note above them is not. */
.nk-warranty-support__list--routes li + li {
	border-block-start: 1px solid var(--wp--preset--color--neutral-200);
	padding-block-start: var(--wp--preset--spacing--2);
}

/* No underline: a standalone link on its own line with a trailing arrow, so colour is
   not the only thing marking it — the same reading as nk-knowledge__link and
   nk-project-testimonial__link. */
.nk-warranty-support__link {
	align-self: flex-start;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--brand-red);
	text-decoration: none;
}

/* The arrow nudges right on hover and on keyboard focus — same gesture, duration and
   distance as the theme's other red arrow links (nk-knowledge, nk-faq-also-know). */
.nk-warranty-support__arrow {
	display: inline-block;
	transition: transform 200ms ease;
}

.nk-warranty-support__link:hover .nk-warranty-support__arrow,
.nk-warranty-support__link:focus-visible .nk-warranty-support__arrow {
	transform: translateX( var(--wp--preset--spacing--1-5) );
}

@media (prefers-reduced-motion: reduce) {
	.nk-warranty-support__arrow { transition: none; }
	.nk-warranty-support__link:hover .nk-warranty-support__arrow,
	.nk-warranty-support__link:focus-visible .nk-warranty-support__arrow { transform: none; }
}

.nk-warranty-support__link:hover,
.nk-warranty-support__link:focus-visible {
	color: var(--wp--preset--color--brand-red-hover);
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
	.nk-warranty-support__container {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--12);
		padding-inline: var(--wp--preset--spacing--8);
	}

	.nk-warranty-support__detail {
		margin-block-start: 0;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.nk-warranty-support {
		padding-block: var(--wp--preset--spacing--16);
	}

	.nk-warranty-support__container {
		padding-inline: var(--wp--preset--spacing--4);
	}

	.nk-warranty-support__heading {
		font-size: var(--wp--preset--font-size--lg-xl);
	}
}