/**
 * Homepage "What we deliver" (template-parts/home/deliver.php,
 * nodes 105:594 default / 197:824 hovered).
 *
 * Equal-header hard rule: ONE grid, 3 columns x 2 rows. Headers live in
 * row 1, so if any title wraps, all three header cells grow together.
 * Cells touch vertically (spacing lives inside the list cells as padding),
 * which keeps the 1px column separators continuous across both rows.
 *
 * Mobile-ready by structure: the responsive pass converts this same grid to
 * a horizontal scroller by giving the columns fixed widths and letting the
 * grid container overflow-x scroll (services-carousel edge behavior). No
 * DOM changes needed.
 */

.deliver {
	padding-block: var(--section-pad-y);
}

.deliver .eyebrow {
	margin-bottom: 32px;
}

.deliver__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px; /* the node's 0 gap is a Figma error, 64 is the ruling */
	align-items: end;
}

/* Type comes from the base h2 token. The max-width is COPY-TUNED so the
   natural wrap falls after "to" with the current EN headline: measured
   bracket is 420px ("From a server room to") to 460px ("... to a") shaped
   in Archivo 700 at 40px; 440px sits mid-bracket. Revisit for the SK
   translation. */
.deliver__header h2 {
	max-width: 27.5rem; /* 440px */
}

.deliver__text {
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-body-text);
}

/* --------------------------------------------------------------------
 * The table
 * -------------------------------------------------------------------- */

.deliver__grid {
	margin-top: 64px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.deliver__cell--1 {
	padding-right: 32px;
	border-right: 1px solid var(--color-border-subtle);
}

.deliver__cell--2 {
	padding-inline: 32px;
	border-right: 1px solid var(--color-border-subtle);
}

.deliver__cell--3 {
	padding-left: 32px;
}

.deliver__col-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Accent mono number, auto-generated 01/02/03 (the node's "04" is drift). */
.deliver__col-number {
	font-family: var(--font-mono);
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	font-weight: 500;
	color: var(--color-accent);
}

.deliver__col-header h4 {
	line-height: normal; /* node renders auto; base h4 token 1.3 overridden */
}

/* The under-header separator is a persistent line on the list cell (the
   hovered node keeps it even with everything expanded), drawn below the
   32px header gap. It never fades. */
.deliver__col-items {
	padding-top: 32px;
}

.deliver__col-items::before {
	content: "";
	display: block;
	border-top: 1px solid var(--color-border-subtle);
}

/* --------------------------------------------------------------------
 * Items: collapsed row -> in-place card on hover/focus
 * -------------------------------------------------------------------- */

.deliver__item {
	position: relative;
	display: block;
	padding: 16px 0;
	border-radius: 6px; /* invisible until the card background appears */
	background-color: transparent;
	text-decoration: none;
	color: inherit;
	transition:
		background-color 650ms var(--motion-ease),
		padding 650ms var(--motion-ease),
		margin 650ms var(--motion-ease);
}

/* Separators BETWEEN items, plus a closing line under the last one.
   Drawn as pseudo-elements rather than borders: the item carries the card
   state's 6px radius, and a border on the same box gets curved by it, which
   put a rounded cap on both ends of every rule. A positioned rectangle is
   unaffected by the radius and stays perfectly square. */
.deliver__item + .deliver__item::before,
.deliver__item:last-child::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--color-border-subtle);
	transition: opacity 650ms var(--motion-ease);
}

.deliver__item + .deliver__item::before {
	top: 0;
}

.deliver__item:last-child::after {
	bottom: 0;
}

.deliver__item-title {
	display: block;
	font-size: 0.875rem; /* 14px, the heading-text style */
	line-height: normal;
	font-weight: 600;
	color: var(--color-heading-text);
}

.deliver__item-short {
	display: block;
	margin-top: 6px;
	font-size: var(--type-card-body-size);
	line-height: var(--type-card-body-line);
	font-weight: var(--type-card-body-weight);
	color: var(--color-text-secondary);
}

/* Hidden block: grid-rows 0fr -> 1fr (per spec, no max-height hacks). */
.deliver__item-more {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows 650ms var(--motion-ease),
		opacity 650ms var(--motion-ease);
}

.deliver__item-more-inner {
	display: block;
	min-height: 0;
	overflow: hidden;
}

.deliver__item-long {
	display: block;
	padding-top: 16px;
	font-size: var(--type-card-body-size);
	line-height: var(--type-card-body-line);
	font-weight: var(--type-card-body-weight);
	color: var(--color-text-secondary);
}

/* Learn more row: 14/500 in button-text-color per the hovered node. It
   renders only for items that carry a link, and the 32px sits on the row
   itself, so an item without one simply ends after its long text (the card's
   own 16px bottom padding closes it, mirroring the long text's 16px top).
   When an item has a link but no long text the row leads the card instead,
   so it takes the long text's spacing rather than the gap meant to follow it. */
.deliver__item-cta {
	margin-top: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	font-weight: 500;
	color: var(--color-button-text-color);
}

.deliver__item-cta:first-child {
	margin-top: 16px;
}

/* Card state: only the hovered/focused item expands; neighbors shift down.
   The card replaces the item's own separators (they fade), including the
   shared line with the next sibling; all other lines stay. 8px breathing
   room per the hovered node's structure. */
.deliver__item:hover,
.deliver__item:focus-within {
	background-color: var(--color-surface-card);
	padding: 16px;
	margin-block: 8px;
}

/* The card replaces its own rules and the one it shares with the next item. */
.deliver__item:hover::before,
.deliver__item:hover::after,
.deliver__item:focus-within::before,
.deliver__item:focus-within::after,
.deliver__item:hover + .deliver__item::before,
.deliver__item:focus-within + .deliver__item::before {
	opacity: 0;
}

.deliver__item:hover .deliver__item-more,
.deliver__item:focus-within .deliver__item-more {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* Hover-less devices: every item statically expanded, but WITHOUT the card
   affordance - transparent background, default separators and padding kept.
   The surface-card background is a desktop-hover-only affordance. */
@media (hover: none) {
	.deliver__item,
	.deliver__item-more {
		transition: none;
	}

	.deliver__item-more {
		grid-template-rows: 1fr;
		opacity: 1;
	}
}

/* --------------------------------------------------------------------
 * Responsive (<=1024): the table becomes one horizontal scroller
 *
 * Items statically expanded WITHOUT the card background (that surface is a
 * desktop-hover affordance), separators kept. The grid converts by giving
 * the columns a fixed width and letting the container scroll, exactly as
 * the original build anticipated. Snap is ON: the earlier no-snap ruling
 * for this section was reversed by the designer.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.deliver__header {
		display: block;
	}

	.deliver__text {
		margin-top: 32px;
	}

	.deliver__grid {
		margin-top: 48px;
		grid-template-columns: repeat(3, 78vw);
		overflow-x: auto;
		/* The clipper must also be the containing block. Absolutely positioned
		   content inside a scroller - .sr-only text above all - otherwise
		   resolves against the PAGE and widens the document instead of being
		   clipped here. */
		position: relative;
		/* Bleeds off the right edge, with trailing space at scroll end. */
		margin-right: calc(-1 * var(--container-pad));
		padding-right: var(--container-pad);
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
		/* See the why-dicit scroller: ends the snapport 16px early so the
		   last column's end-snap is exactly max scroll. */
		scroll-padding-right: var(--container-pad);
	}

	.deliver__grid::-webkit-scrollbar {
		display: none;
	}

	/* Both cells of a column share the same x, so the six cells produce
	   three snap positions, one per column. */
	.deliver__cell {
		scroll-snap-align: start;
	}

	/* The last column is narrower than the track, so its start-snap sits past
	   max scroll; end-aligning it makes the end of the track a snap position. */
	.deliver__cell--3 {
		scroll-snap-align: end;
	}

	/* Column padding rebalanced for the narrower cells. */
	.deliver__cell--1 {
		padding-right: 24px;
	}

	.deliver__cell--2 {
		padding-inline: 24px;
	}

	.deliver__cell--3 {
		padding-left: 24px;
	}

	/* Statically expanded, transparent. The hover rules stay for pointer
	   tablets; these just set the resting state. */
	.deliver__item-more {
		grid-template-rows: 1fr;
		opacity: 1;
	}
}

/* Hover-less devices additionally lose the card affordance entirely: no
   surface, no padding shift, and every rule stays drawn. */
@media (max-width: 1024px) and (hover: none) {
	.deliver__item:hover,
	.deliver__item:focus-within {
		background-color: transparent;
		padding: 16px 0;
		margin-block: 0;
	}

	.deliver__item:hover::before,
	.deliver__item:hover::after,
	.deliver__item:focus-within::before,
	.deliver__item:focus-within::after,
	.deliver__item:hover + .deliver__item::before,
	.deliver__item:focus-within + .deliver__item::before {
		opacity: 1;
	}
}