/*
 * Divisions archive.
 *
 * Four sections of one shape, each painted in its own division's accent. The
 * accent arrives as --sk-accent set on the section by the template, so the
 * eyebrow rule, the rule above the photograph, the product links, and the
 * button all take the division's colour without any of them knowing which
 * division they are in, and adding a fifth division needs no CSS at all.
 */

.division-feature {
	/*
	 * The tint steps in _tokens.scss are declared on :root, so they were
	 * computed there against the corporate accent and inherit down already
	 * resolved. Redeclaring the one this section uses recomputes it against the
	 * division's accent; without it the button would fill with the division
	 * colour and then darken to corporate blue on hover.
	 */

	--sk-accent-dark: color-mix(in srgb, var(--sk-accent) 82%, #000);

	/*
	 * Alternating grounds, so four sections of the same construction do not read
	 * as one long block. The wash is the same diagonal artwork the testimonial
	 * band and the pillar cards use.
	 */

	&:nth-child(even) {
		background: var(--sk-gray-light) var(--sk-angle-wash) center center / cover no-repeat;
	}
}

.division-feature__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;

	@media (min-width: 62rem) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
	 * The copy is always first in the source, so the reading order is always
	 * name then description then link. Only the painted side alternates.
	 */

.division-feature--media-start .division-feature__copy {
	@media (min-width: 62rem) {
		order: 2;
	}
}

.division-feature__title {
	margin-block: 0.75rem 0;
	font-size: clamp(2rem, 1.1rem + 3.4vw, 3.375rem);
	line-height: 1.02;
	letter-spacing: 0.5px;
}

.division-feature__deck {
	margin-block: 0.75rem 0;
	color: var(--sk-accent);
	font-family: var(--sk-font-display);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
	font-weight: 700;
	line-height: 1.35;
}

.division-feature__body {
	margin-block-start: 1.5rem;
	color: var(--sk-gray-copy);
	font-size: 0.9375rem;
	line-height: 1.7;
	text-wrap: pretty;

	> :first-child {
		margin-top: 0;
	}

	> :last-child {
		margin-bottom: 0;
	}

	p {
		margin-bottom: 1.25rem;
	}

	/* The division posts open on an italic line and label their list of
		   specialisms with a bold run-in. Both are written as ordinary emphasis
		   in the editor, so they are styled as emphasis rather than hunted for
		   by position, which would break the first time someone reorders a
		   paragraph. */

	strong {
		color: var(--sk-black);
	}
}

/*
	 * Product categories. These leave for the division's own site, so they are
	 * set as a plain list of links rather than as buttons: the one thing on the
	 * section that should look like the primary action is the button below.
	 */

.division-feature__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin-block: 1.75rem 0;
	padding: 0;
	list-style: none;
}

.division-feature__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4375rem;
	color: var(--sk-black);
	font-family: var(--sk-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;

	&::before {
		color: var(--sk-accent);
		content: "\2192";
	}

	&:hover,
	&:focus-visible {
		color: var(--sk-accent);
		text-decoration: none;
	}
}

.division-feature__cta {
	margin-block-start: 2.25rem;
}

.division-feature__media {
	position: relative;
	margin: 0;

	/* Contains the multiply blend so it cannot reach the page behind it. */
	isolation: isolate;

	/* The same rule the capabilities panels carry above their photographs,
		   in this division's colour rather than the site's. Sitting outside the
		   padding box, it is the one part of the figure the tint below does not
		   cover, so it reads as the pure accent. */

	border-top: 5px solid var(--sk-accent);

	/*
		 * The division photography is supplied as greyscale masters meant to be
		 * tinted, which is what the home page tiles do with these same four
		 * files. Left alone they would be the only black and white images on the
		 * site. Much lighter than the tiles' 0.82: nothing is set over this one,
		 * so it can stay a photograph rather than become a block of colour.
		 */

	&::after {
		position: absolute;
		inset: 0;
		background: var(--sk-accent);
		mix-blend-mode: multiply;
		opacity: 0.45;
		content: "";
		pointer-events: none;
	}
}

.division-feature__image {
	display: block;
	inline-size: 100%;
	block-size: auto;

	/*
		 * Multiply can only darken, so the darkest brand colour decides how much
		 * headroom this treatment has. Polymers' slate navy over an already dim
		 * factory frame closes up without this lift; the brighter three are
		 * unharmed by it.
		 */

	filter: brightness(1.12);
}