/*
 * Front page hero, restyled after the .pl landing page
 * (tocopyshop/page-templates/home.php + assets/scss/styles.scss → .home1 / .sliderbutton).
 *
 * Height and headline size live in the GenerateBlocks block attributes so they stay
 * editable in the admin; only what GenerateBlocks cannot express is here.
 */

.home .gb-container-d24537ad {
	display: flex;
	align-items: center;
}

/*
 * The photo is bright on the left, where the copy sits, and GenerateBlocks' own overlay is
 * a light wash that does not help. Scrim from the left only, so the landscape stays visible.
 * GenerateBlocks already uses ::before and ::after on the hero itself for the photo and
 * that overlay, hence hanging this on the inner container.
 */
.home .gb-container-6d9ee7ab::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	/* The inner container is capped at 1400px; the hero is full-bleed, so is the scrim. */
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: linear-gradient(90deg, rgba(0, 40, 70, 0.62) 0%, rgba(0, 40, 70, 0.4) 40%, rgba(0, 40, 70, 0) 72%);
	pointer-events: none;
}

.home .gb-container-6d9ee7ab > * {
	position: relative;
	z-index: 1;
}

/* .pl runs the headline at line-height 1; GeneratePress inherits 1.3 from the body. */
.home .gb-headline-04a9e313 {
	line-height: 1;
	margin-bottom: 20px;
}

.home .gb-headline-6111eb54 {
	line-height: 26px;
	font-weight: 300;
	max-width: 34em;
}

/* .sliderbutton: outlined instead of the solid accent fill this site uses elsewhere. */
.home .gb-container-394c8ccd .gb-button {
	font-size: 18px;
	font-weight: 400;
	color: #fff;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 8px !important;
	padding: 15px 30px;
	margin-top: 35px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.home .gb-container-394c8ccd .gb-button:hover,
.home .gb-container-394c8ccd .gb-button:focus-visible {
	background: #fff;
	color: var(--contrast-3, #004272);
}

@media (max-width: 1024px) {
	.home .gb-headline-04a9e313 {
		font-size: 42px;
	}
}

@media (max-width: 768px) {
	.home .gb-container-d24537ad {
		min-height: 520px;
	}

	.home .gb-headline-04a9e313 {
		font-size: 34px;
	}

	.home .gb-container-394c8ccd .gb-button {
		margin-top: 25px;
	}
}