/* ==========================================================================
   hero.css — Genva Interior

   Ported from the mock.

   Two elements of the reference carry no content at all: the scrim that darkens
   the foot of the photo, and the glow behind it. Both are pseudo elements here
   rather than markup. Putting decoration in wp:html would sandbox it in an
   iframe in the site editor, where the theme's own CSS never reaches it.

   Icons are masks on ::before for the same reason as the header: the
   paragraphs stay plain core blocks with nothing extra inside them.
   ========================================================================== */

.hero {
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 7'/%3E%3C/svg%3E");
	--icon-verified: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--icon-call: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");

	position: relative;
	width: 100%;
	background: var(--surface);
	overflow: hidden;
	/* The same 4.5rem a section carries, on both sides. The head used to be
	   2rem against a 4.5rem foot, and the photograph read as shoved up under
	   the header: the bar sits directly on top of it, so a short head has
	   nothing to breathe against and the difference is plain to see. */
	padding-block: var(--space-3xl);
}

@media (width < 782px) {

	.hero {
		padding-top: var(--space-md);
		padding-bottom: var(--space-lg);
	}
}

/* --------------------------------------------------------------------------
   Grid

   Twelve columns from 1024px up, so the text keeps a comfortable measure while
   the photo stays tall enough to read as a portrait.
   -------------------------------------------------------------------------- */
.hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: center;
}

@media (width >= 1024px) {

	.hero__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.hero__text {
		grid-column: span 7 / span 7;
	}

	.hero__visual {
		grid-column: span 5 / span 5;
	}
}

@media (width < 782px) {

	.hero__grid {
		gap: var(--space-md);
	}
}

.hero__grid > .hero__text,
.hero__grid > .hero__visual {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Text column

   The spacing between these blocks is set here rather than left to blockGap,
   because the badge, the heading and the lead each need a different step.
   -------------------------------------------------------------------------- */
.hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	z-index: 10;
}

.hero__text > * {
	margin-block-start: 0;
	margin-block-end: 0;
	max-width: 100%;
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem;
	background: var(--secondary-fixed);
	color: var(--on-secondary-fixed);
	border-radius: var(--rounded);
	box-shadow: var(--shadow-sm);
	margin-bottom: var(--space-md);
}

.hero__badge::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentColor;
	mask-image: var(--icon-verified);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.hero__title {
	color: var(--on-surface);
	margin-bottom: var(--space-md);
}

/* The heading used to be shrunk here with a media query. It could not win:
   core writes the preset class with !important, so the size stayed at 48px
   while this file's line height applied, and the rows overlapped. The preset
   itself is fluid now, so there is nothing left to override. */

.hero__lead {
	color: var(--on-surface-variant);
	max-width: 42rem;
	margin-bottom: var(--space-xl);
}

@media (width < 782px) {

	.hero__lead {
		margin-bottom: var(--space-md);
		font-size: var(--body-md-size);
		line-height: var(--body-md-line);
	}
}

/* --------------------------------------------------------------------------
   Phone card

   The number and the button say the same thing twice on purpose. On a desktop
   the number is what gets read; on a phone the button is what gets tapped.
   -------------------------------------------------------------------------- */
.hero-card {
	width: 100%;
	max-width: 36rem;
	background: var(--surface-container-lowest);
	padding: var(--space-lg);
	border-radius: var(--rounded);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--space-md);
}

@media (width >= 640px) {

	.hero-card {
		flex-direction: row;
		align-items: center;
	}
}

@media (width < 782px) {

	.hero-card {
		padding: var(--space-md);
	}
}

.hero-card > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

:root :where(.is-layout-flex).hero-card__tel {
	gap: 0.125rem;
}

.hero-card__hours {
	color: var(--on-surface-variant);
}

.hero-card__number {
	font-family: var(--font-number);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* This is the telephone number on a site built to be telephoned. It measured
   36px tall, which clears the 24px minimum but not the 44px the rest of the
   theme holds to, and it is the last thing that should be fiddly to hit. */
.hero-card__number a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	gap: 0.25rem;
	color: var(--on-surface);
	text-decoration: none;
	transition: color 150ms ease;
}

.hero-card__number a::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--secondary);
	mask-image: var(--icon-call);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.hero-card__number a:hover {
	color: var(--secondary);
}

.hero-card__action {
	flex: none;
}

/* The vivid accent, the same fill the closing call-to-action and the dock's
   quote button carry. On the default button brown this sat at 2.43:1 against
   the card behind it in dark mode — the weakest edge of any button in the
   theme, on the button the whole page is built to get pressed. */
.btn--wide .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--rounded);
	background: var(--secondary-vivid);
	color: var(--on-secondary-vivid);
	box-shadow: var(--shadow-sm);
}

/* This button dials, so it carries the handset. Before the icon moved off
   `.btn`, it inherited the envelope from the header's quote button. */
.btn--wide .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	mask-image: var(--icon-call);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.btn--wide .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	mask-image: var(--icon-arrow);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

/* --------------------------------------------------------------------------
   Proof line
   -------------------------------------------------------------------------- */
.hero__proof {
	margin-top: var(--space-md);
	color: var(--on-surface-variant);
}

:root :where(.is-layout-flex).hero__proof {
	gap: var(--space-md);
}

@media (width < 782px) {

	:root :where(.is-layout-flex).hero__proof {
		gap: var(--space-xs) var(--space-sm);
	}
}

.hero__proof p {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
}

.hero__proof p::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: var(--secondary);
	mask-image: var(--icon-check);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

/* --------------------------------------------------------------------------
   Photo

   The glow is a pseudo element on the column, behind the frame. The scrim is
   one on the frame, above the photo but below the caption.
   -------------------------------------------------------------------------- */
.hero__visual {
	position: relative;
}

.hero__visual::before {
	content: "";
	position: absolute;
	bottom: -1.5rem;
	left: -1.5rem;
	width: 8rem;
	height: 8rem;
	background: rgba(254, 147, 44, 0.2);
	border-radius: var(--rounded-full);
	filter: blur(40px);
	pointer-events: none;
}

/* The photo, the stamp and the caption share one grid cell. `position` is kept
   for the scrim, which is a pseudo element on this box and therefore safe, but
   the two blocks stacked on top are placed by the grid — the site editor's own
   wrappers cannot take their anchor away. */
.hero__frame {
	position: relative;
	display: grid;
	grid-template-areas: "stack";
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--rounded-xl);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	background: var(--surface-container);
}

.hero__frame > * {
	grid-area: stack;
}

/* A 4:5 portrait is only right while the photo sits in its own column. The
   moment the grid drops to one column the frame is as wide as the page, and
   a portrait would fill a tablet screen with one photo. So this tracks the
   grid breakpoint at 1024px, not the phone one. */
@media (width < 1024px) {

	.hero__frame {
		aspect-ratio: 16 / 10;
	}
}

.hero__photo {
	margin: 0;
	width: 100%;
	height: 100%;
}

.hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%, transparent);
	pointer-events: none;
}

.hero__stamp {
	align-self: start;
	justify-self: end;
	z-index: 2;
	margin: 0;
	transform: translate(-1rem, 1rem);
	display: flex;
	align-items: center;
	gap: 0.375rem;
	background: var(--film-stamp);
	backdrop-filter: blur(4px);
	color: var(--on-surface);
	padding: 0.375rem 0.75rem;
	border-radius: var(--rounded);
	box-shadow: var(--shadow-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hero__stamp::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--rounded-full);
	background: var(--secondary);
}

.hero__caption {
	align-self: end;
	justify-self: stretch;
	margin: 0;
	padding: 1.5rem;
	z-index: 2;
	color: var(--on-primary);
}

@media (width < 782px) {

	.hero__caption {
		bottom: var(--space-md);
		left: var(--space-md);
		right: var(--space-md);
	}
}

.hero__caption > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.hero__caption-label {
	display: block;
	color: var(--secondary-fixed);
	letter-spacing: 0.1em;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.hero__caption p:last-child {
	font-weight: 700;
	line-height: 1.25;
}

/* Cleared for the same reason as the tag in works.css: the editor's block gap
   lands on whatever is not the first child, which pushed the call button below
   the number it is supposed to line up with, and the stamp and caption down
   from the corners they sit in. */
.hero-card__tel.hero-card__tel,
.hero-card__action.hero-card__action,
.hero__stamp.hero__stamp,
.hero__caption.hero__caption {
	margin-block: 0;
}