/* ==========================================================================
   contact-cta.css — Genva Interior

   Ported from the mock. The navy panel that closes the front page.

   The phone icon on the button and the icon beside the shop heading were
   separate elements in the reference; both are pseudo elements here.
   ========================================================================== */

.cta {
	--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-shop: 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='M3 9.5 5 4h14l2 5.5'/%3E%3Cpath d='M4 9.5V20h16V9.5'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");

	width: 100%;
	padding-block: var(--space-4xl);
	background: var(--primary-container);
	color: var(--on-primary);
}

@media (width < 782px) {

	.cta {
		padding-block: var(--space-lg);
	}
}

.cta__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: center;
}

@media (width >= 1024px) {

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

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

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

@media (width < 782px) {

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

.cta__grid > *,
.cta__main > *,
.cta__actions > *,
.cta__hours > *,
.cta__shop > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Message
   -------------------------------------------------------------------------- */
.cta__eyebrow {
	display: block;
	color: var(--secondary-container);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}

.cta__title {
	color: var(--on-primary);
	margin-bottom: var(--space-sm);
}

/* The title is no longer resized here. Its preset is fluid in theme.json, so
   it scales on its own and the old override could not have won anyway. */

.cta__lead {
	color: var(--inverse-primary);
	margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */
.cta__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-md);
}

@media (width >= 640px) {

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

@media (width < 782px) {

	.cta__actions {
		gap: var(--space-xs);
	}
}

.cta__call {
	margin: 0;
}

/* This button takes the vivid accent rather than the theme's default button
   fill. The default is the plain accent, a brown, and these buttons sit on the
   deep navy panel: brown against navy measured 2.65:1, under the 3:1 that
   WCAG 1.4.11 asks for between a control and the surface behind it. The edge
   of the button was failing even though the label on it was fine.

   It is the same fill the dock's quote button uses, which is the intent: one
   colour for the single thing the page most wants pressed, wherever it
   appears. 3.31:1 against the panel, 5.18:1 for the label. */
.btn--hero .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: var(--space-md) var(--space-xl);
	border-radius: var(--rounded);
	background: var(--secondary-vivid);
	color: var(--on-secondary-vivid);
	box-shadow: var(--shadow-sm);
	font-family: var(--font-number);
	font-size: var(--headline-sm-size);
	line-height: var(--headline-sm-line);
	font-weight: 700;
}

/* Full width on a phone, so the number is a thumb-sized target rather than a
   short chip in the middle of the panel. The width has to go on the button
   wrapper as well: inside wp:buttons it is a flex item, and a link set to
   100% only fills a wrapper that is already as wide as the row. */
@media (width < 782px) {

	.cta__call .wp-block-button {
		width: 100%;
	}

	.btn--hero .wp-block-button__link {
		width: 100%;
		padding: var(--space-sm) var(--space-md);
	}
}

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

.cta__hours {
	display: flex;
	flex-direction: column;
	color: var(--on-primary-container);
}

.cta__hours-main {
	color: var(--inverse-primary);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Shop details

   Kept on the phone as well as the desktop. It is the only place on the front
   page that says where the shop actually is, which is what a homeowner checks
   before letting someone into the house.
   -------------------------------------------------------------------------- */
.cta__shop {
	background: var(--surface-container-lowest);
	color: var(--on-surface);
	padding: var(--space-lg);
	border-radius: var(--rounded-xl);
	box-shadow: var(--shadow-md);
}

@media (width < 782px) {

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

.cta__shop-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--space-sm);
	color: var(--on-surface);
	font-weight: 700;
}

.cta__shop-head::before {
	content: "";
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	background-color: var(--secondary);
	mask-image: var(--icon-shop);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.cta__shop-list {
	color: var(--on-surface-variant);
}

.cta__shop-list > * + * {
	margin-top: 0.5rem;
}

.cta__shop-name {
	color: var(--on-surface);
	font-weight: 700;
}

.cta__shop-caution {
	padding-top: 0.5rem;
	color: var(--on-surface-variant);
}