/* ==========================================================================
   Positioning strip
   ========================================================================== */

.positioning {
	padding-block: var(--space-section);
	background-color: var(--surface);
}

/* Mobile: text first, media below. Desktop: media left, text right. */
.positioning__inner {
	display: grid;
	grid-template-areas:
		"content"
		"aside";
	gap: var(--space-7);
}

/* Same rhythm as the hero: heading and body sit close so they read as one unit. */
.positioning__content {
	grid-area: content;
	display: grid;
	justify-items: start;
}

.positioning__title {
	max-width: 20ch;
	color: var(--brand-blue);
}

.positioning__body {
	max-width: var(--measure);
	margin-top: var(--space-4);
	font-size: var(--text-lg);
}

.positioning__aside {
	grid-area: aside;
	width: 100%;
	max-width: 28rem;
}

/* Keyhole mask. The icon file is 605 x 550, so the box keeps that ratio and
   the mask stretches to fill it exactly. The keyhole cut-out in the icon
   becomes a see-through gap, as it is in the mark itself. */
.positioning__media {
	position: relative;
	width: 100%;
	aspect-ratio: 605 / 550;
	overflow: hidden;
	-webkit-mask-image: url("../images/digiholic-icon-keyhole-blue.png");
	mask-image: url("../images/digiholic-icon-keyhole-blue.png");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* <picture> is inline by default, which would stop the photo filling the slot's height. */
.positioning__media picture {
	display: block;
	height: 100%;
}

/* The photo fills the shape. Positioned so his face sits to the right of the
   keyhole cut-out rather than behind it. */
.positioning__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40% 50%;
}

.positioning__caption {
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--ink-muted);
}

@media (min-width: 48em) {
	.positioning__body {
		margin-top: var(--space-5);
	}
}

@media (min-width: 64em) {
	.positioning__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		grid-template-areas: "aside content";
		align-items: center;
		gap: var(--space-9);
	}
}