/*
 * The band every page opens with.
 *
 * Loaded from functions.php, after the styles core prints inline. That order
 * matters: our selectors and core's layout selectors have the same specificity,
 * so the later one wins, and every grid on the site depends on ours winning.
 */

/* -------------------------------------------------------------------- hero */

.ghizo-hero {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

/*
 * Two columns from 62rem, with the words given the larger share. Below that the
 * art goes under the words rather than beside them: a screenshot squeezed into
 * half a phone screen shows nothing.
 */
@media (min-width: 62rem) {
	.ghizo-hero {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}
}

.ghizo-hero--single {
	max-width: 46rem;
}

.ghizo-hero__title {
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--display);
	letter-spacing: -0.02em;
	line-height: 1.04;
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 24ch;
	text-wrap: balance;
}

.ghizo-hero__lead {
	color: var(--wp--preset--color--on-navy);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 46ch;
}

.ghizo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--40);
}

.ghizo-hero__note {
	color: var(--wp--preset--color--muted, var(--wp--preset--color--on-navy));
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 44ch;
	opacity: 0.85;
}

/*
 * The screenshot, tilted very slightly and cropped at the bottom so it reads as
 * a window onto the product rather than a picture pasted onto the page.
 */
.ghizo-hero__art {
	border-radius: 14px;
	box-shadow: 0 30px 60px -20px rgb(2 8 23 / 65%);
	overflow: hidden;
	position: relative;
	border: 1px solid rgb(147 197 253 / 22%);
	background: rgb(255 255 255 / 4%);
}

.ghizo-hero__art img {
	display: block;
	height: auto;
	width: 100%;
}