/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	--focus-color: var(--on-blue);
	--pattern-tile: 1.75rem;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: calc(var(--header-height) + var(--space-7)) var(--space-section);
	color: var(--on-blue);
	background-color: var(--brand-blue);
}

/* Pinwheel pattern. The PNG is used as a stencil and filled with a darker
   brand blue, because the file itself is brand-blue and would vanish on this
   background. A checkerboard mask shows every other tile, staggered, since
   the pinwheel fills its whole file and would otherwise touch its neighbours.
   The file is 830 x 876, hence the 1.0554 height ratio. */
.hero::before {
	--tile-w: var(--pattern-tile);
	--tile-h: calc(var(--pattern-tile) * 1.0554);

	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--brand-blue-700);
	opacity: 0.15;

	/* Masks read alpha only, so black here means "show", not a colour. */
	-webkit-mask-image:
		url("../images/digiholic-pattern-blue.png"),
		repeating-conic-gradient(black 0 25%, transparent 0 50%);
	mask-image:
		url("../images/digiholic-pattern-blue.png"),
		repeating-conic-gradient(black 0 25%, transparent 0 50%);
	-webkit-mask-size:
		var(--tile-w) var(--tile-h),
		calc(var(--tile-w) * 2) calc(var(--tile-h) * 2);
	mask-size:
		var(--tile-w) var(--tile-h),
		calc(var(--tile-w) * 2) calc(var(--tile-h) * 2);
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.hero__inner {
	display: grid;
	align-items: center;
	gap: var(--space-7);
}

/* Headline, subline and buttons. The headline-to-subline gap is deliberately
   smaller than the subline-to-buttons gap, so headline and subline read as one unit. */
.hero__content {
	display: grid;
	justify-items: start;
}

/* About 24 characters per line, so the headline breaks into three lines on desktop. */
.hero__title {
	max-width: 24ch;
	color: var(--on-blue);
}

.hero__lede {
	/* Wide enough that "content and demand generation" sits on one desktop line. */
	max-width: 58ch;
	margin-top: var(--space-4);
	font-size: var(--text-lg);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-6);
	margin-top: var(--space-6);
}

.hero__link {
	display: inline-block;
	padding-block: var(--space-3);
	color: var(--on-blue);
	font-weight: var(--weight-semibold);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.hero__link:hover {
	color: var(--on-blue);
	text-decoration-color: var(--accent-yellow);
}

/* Reserved slot for the animated keyhole mark. Empty for now. It is sized to the
   mark's proportions (605 x 550) so nothing moves when the mark goes in.
   Phones and tablets: below the buttons, left aligned with the text.
   Desktop: its own column to the right of the text. */
.hero__mark {
	width: clamp(8rem, 40vw, 14rem);
	aspect-ratio: 605 / 550;
}

@media (min-width: 48em) {
	.hero {
		--pattern-tile: 2.25rem;
	}

	.hero__lede {
		margin-top: var(--space-5);
	}

	.hero__actions {
		margin-top: var(--space-7);
	}
}

@media (min-width: 64em) {
	.hero {
		padding-block-start: calc(var(--header-height) + var(--space-9));
	}

	/* Mark column is capped so the headline column always keeps its 24ch width. */
	.hero__inner {
		grid-template-columns: minmax(0, 1fr) clamp(12rem, 22vw, 20rem);
		gap: var(--space-6);
	}

	.hero__mark {
		width: 100%;
	}
}