/**
 * "Why DICIT" (template-parts/components/why-dicit.php, node 197:904).
 * Rendered on the homepage and the services page from that one part.
 * Two rows: the bento and Certifications & Partners. Sizing ruling: intrinsic
 * sizing over fixed boxes; logos get height caps + object-contain.
 */

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

.why > .eyebrow,
.cp > .eyebrow {
	margin-bottom: 32px;
}

/* Copy-tuned: wrap falls after "operators" with the current EN headline.
   Measured bracket 480px ("Infrastructure operators") to 620px ("... cannot")
   shaped in Archivo 700 at 40px; 552px sits mid-bracket. Revisit for SK. */
.why__headline {
	max-width: 34.5rem; /* 552px */
}

/* Copy-tuned: wrap falls after "standard," with the current EN headline.
   Measured bracket 440px ("Certified to standard,") to 560px ("... built");
   500px sits mid-bracket. Revisit for SK. */
.cp__headline {
	max-width: 31.25rem; /* 500px */
}

/* --------------------------------------------------------------------
 * Row 1: bento
 * -------------------------------------------------------------------- */

.why__bento {
	margin-top: 64px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: stretch;
}

.why__image-card {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	padding: 64px 32px 32px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-color: var(--color-surface-darkest);
}

.why__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.why__image-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(10, 11, 13, 0.75); /* solid overlay per node, no gradient */
}

.why__image-content {
	position: relative;
	max-width: 432px;
}

/* h2-scale type on an h3 tag (the section's h2 is the row headline). */
.why__card-headline {
	font-size: var(--type-h2-size);
	line-height: var(--type-h2-line);
	letter-spacing: var(--type-h2-spacing);
	font-weight: var(--type-h2-weight);
	color: var(--color-heading-text-on-dark);
}

.why__card-text {
	margin-top: 32px;
	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-on-dark);
}

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

.why__pillar {
	background-color: var(--color-surface-card);
	border-radius: 6px;
	padding: 32px;
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

/* ~20px icons at natural aspect (SVG uploads have no bitmap dimensions). */
.why__pillar-icon {
	width: 20px;
	height: auto;
	flex-shrink: 0;
}

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

.why__pillar-body p {
	margin-top: 12px;
	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);
}

/* --------------------------------------------------------------------
 * Row 2: Certifications & Partners
 * -------------------------------------------------------------------- */

.cp {
	margin-top: 6.25rem; /* 100px gap between the two rows per spec */
}

.cp__grid {
	margin-top: 64px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 124px;
	align-items: start;
}

/* Anchor targets for the certifications and partners menu items. Landing on
   one puts the header in its SCROLLED state, so the offset clears the compact
   bar rather than the taller overlay, plus the 64px the design already puts
   above a subhead (the .cp__grid margin above). */
.cp__col {
	scroll-margin-top: calc(var(--header-bar-space) + 64px);
}

/* Shared subhead (template-parts/components/subhead.php): eyebrow label
   left, small link right, rule under. */
.subhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border-subtle);
}

.subhead__link {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
	font-family: var(--font-body);
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	font-weight: 500;
	color: var(--color-button-text-color);
	text-decoration: none;
	transition: color 150ms ease;
	/* Drives the shared arrow loop; the colour change keeps its own 150ms. */
	--on: 0;
}

.subhead__link:hover,
.subhead__link:focus-visible {
	color: var(--color-accent);
}

.subhead__link:focus-visible {
	--on: 1;
}

@media (hover: hover) {
	.subhead__link:hover {
		--on: 1;
	}
}

/* Rows: 32px rhythm with subtle rules between (the subhead rule opens the
   list; no closing rule after the last row, per node). */
.cp__row {
	display: flex;
	align-items: center;
	gap: 32px;
	padding-block: 32px;
}

.cp__row + .cp__row {
	border-top: 1px solid var(--color-border-subtle);
}

/* Cert logos: width = 48px x ratio as a FIXED flex basis. The justified-row
   grow pattern would let the text sibling starve the logo (grow-from-zero
   against shrinkable text), so the cell is rigid instead; same sizing math,
   guaranteed 48px height.
   48 RATHER THAN THE ORIGINAL 68 because the artwork changed shape, not
   because the logo was wrong. The height is the constant here and the width is
   derived, so when the certificates went from roughly square to 2.521:1 the
   same 68px height stopped being a 75px-wide mark and became a 171px-wide one
   - two and a half times the area, without a single number changing. 48px
   gives 121x48, which is 1.26x the old square's area: the same presence on the
   row rather than the same height.
   This is the number to revisit if the artwork changes shape again. Nothing
   else needs to. */
.cp__cert-cell {
	flex: 0 0 calc(48px * var(--ratio, 1));
	min-width: 0;
}

.cp__cert-logo {
	display: block;
	width: 100%;
	height: auto;
}

.cp__cert-text {
	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);
}

.cp__term {
	flex: 0 0 140px; /* wide enough for IT HARDWARE on one line */
	white-space: nowrap;
	color: var(--color-text-tertiary);
}

/* Justified row: one line, one shared height. flex-basis 0 with grow
   proportional to each logo's aspect ratio distributes widths so rendered
   heights equalize; the max-width cap freezes each logo at its 40px-height
   width when the row has slack. Few logos: all exactly 40px tall at natural
   width, left-aligned. Crowded row: everything scales down together, no
   wrap, no individual squeezing. Ratios come from PHP (--ratio inline,
   attachment meta for rasters, the viewBox pipeline for SVGs). */
.cp__logos {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 32px;
	align-items: center;
}

.cp__logo-cell {
	flex: var(--ratio, 1) 1 0px;
	max-width: calc(40px * var(--ratio, 1));
	min-width: 0;
}

.cp__partner-logo {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------
 * Responsive (<=1024)
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Bento: the image card goes full width, the three icon cards below it
	   become a scroller so the next always peeks. */
	/* Row gap moves onto the track itself so the dots, which land in a third
	   grid row, are spaced by their own margin rather than the bento gap. */
	.why__bento {
		margin-top: 48px;
		grid-template-columns: 1fr;
		gap: 0;
	}

	.why__pillars {
		margin-top: 32px;
	}

	.why__image-card {
		padding: 48px 24px 24px;
		min-height: 60vh;
	}

	.why__pillars {
		flex-direction: row;
		flex-wrap: nowrap;
		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;
		gap: 16px;
		margin-right: calc(-1 * var(--container-pad));
		padding-right: var(--container-pad);
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
		/* Ends the snapport 16px early so the LAST card's end-snap lands
		   exactly on max scroll, with the same trailing space every other
		   scroller has. No scroll-padding-left: the track already starts on
		   the content line, so padding there would push items past it. */
		scroll-padding-right: var(--container-pad);
	}

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

	.why__pillar {
		flex: 0 0 85%;
		padding: 24px;
		scroll-snap-align: start;
	}

	/* A card narrower than the track can never have its START aligned at max
	   scroll, so the last one would have no reachable snap position and the
	   browser would fall back to resting at the extreme. Aligning its END
	   instead makes that resting place a real snap position. */
	.why__pillar:last-child {
		scroll-snap-align: end;
	}

	/* Certifications, then partners. */
	.cp {
		margin-top: 4rem;
	}

	.cp__grid {
		margin-top: 48px;
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.cp__row {
		padding-block: 24px;
		gap: 16px;
	}

	/* THE CERT CELL'S STEP-DOWN IS GONE, not moved. It existed to take a 68px
	   logo down to 48px here, because at the old near-square ratio 68px was
	   only 75px wide on desktop but the row is far narrower on a phone. Now
	   that the base rule is 48px the override would restate the value it
	   already inherits - and that is worse than redundant: the next person to
	   change the desktop height would find mobile silently pinned to 48 by a
	   rule that looks like it is doing something.
	   The logo is therefore one size at every width. At 390 that is 121px of a
	   358px row, leaving 221px for the title, which wraps rather than
	   overflowing - which the min-width below is what makes possible, and is
	   why this block still exists at all. (Why the cert row stays horizontal
	   while the partner row does not is on the .cp__row--partner rule.) */
	.cp__cert-text {
		min-width: 0;
	}

	/* The 140px term column plus a logo row does not fit a phone, so the
	   label sits above its logos instead. PARTNER rows only: certification
	   rows must stay a row, because the cert cell's flex-basis sizes the
	   logo on the main axis and turning the row into a column would let the
	   image fall back to its natural width. */
	.cp__row--partner {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.cp__term {
		flex: 0 0 auto;
	}

	.cp__logos {
		width: 100%;
	}

	/* Subhead link keeps a 44px target. */
	.subhead__link {
		min-height: 44px;
	}

	/* The label plus the link do not fit on one line at 320 (the mono label
	   carries 0.22em tracking, so it is wide). Wrapping only engages when
	   they genuinely collide, so 375 and up keep the single row. */
	.subhead {
		flex-wrap: wrap;
		row-gap: 8px;
	}
}