/**
 * Homepage CTA — Buyer / Seller / Home Valuation editorial grid.
 *
 * MAM-Homepage-CTA-Blogs-Social-Architecture.md §4-10. Three full-bleed
 * cards: a texture background + black typography at rest, swapping to a
 * grayscale photo + 80% black overlay + white typography and a revealed
 * cyan "VIEW DETAILS +" button on hover/focus — exact values (backgrounds,
 * timings, breakpoints) are locked in the spec, not eyeballed.
 */

.mainsail-cta {
	--mainsail-cta-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--mainsail-cta-button-height: max(3.625vw, 48px);
	overflow: hidden;
}

.mainsail-cta__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: max(0.188vw, 3px);
}

.mainsail-cta__item {
	position: relative;
	display: flex;
	height: max(30.563vw, 350px);
	padding: 20px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
}

/* Normal-state background — a texture, never the photographic image
   (locked, §5). --mainsail-cta-texture is set inline per card (the
   template resolves the theme asset URL; this stylesheet lives in a
   plugin and can't reach a theme-relative url() itself). */
.mainsail-cta__item::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: var(--mainsail-cta-texture);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* Hover-state photographic image — hidden (opacity:0) until hover/focus,
   grayscale, with an 80% black overlay drawn on top of it (§6). */
.mainsail-cta__image {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--mainsail-cta-transition);
}

.mainsail-cta__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
}

.mainsail-cta__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}

/* :hover is scoped to devices that actually have a hover-capable
   pointer (a mouse). Without this guard, tapping the card on a touch
   device (phone/tablet) triggers :hover and it then sticks — showing
   the dark photo overlay "stuck on" until the visitor taps elsewhere —
   since there's no mouse to move off the element and clear it.
   :focus-visible (keyboard navigation) is unaffected by this guard and
   always applies. */
@media (hover: hover) and (pointer: fine) {
	.mainsail-cta__item:hover .mainsail-cta__image {
		opacity: 1;
	}
}

.mainsail-cta__item:focus-visible .mainsail-cta__image {
	opacity: 1;
}

.mainsail-cta__info {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.mainsail-cta__heading {
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-size: max(1.4vw, 16px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #000000;
	transition: color var(--mainsail-cta-transition);
}

.mainsail-cta__text {
	margin-top: max(1.25vw, 15px);
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: max(0.875vw, 13px);
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: #000000;
	transition: color var(--mainsail-cta-transition);
}

@media (hover: hover) and (pointer: fine) {
	.mainsail-cta__item:hover .mainsail-cta__heading,
	.mainsail-cta__item:hover .mainsail-cta__text {
		color: #ffffff;
	}
}

.mainsail-cta__item:focus-visible .mainsail-cta__heading,
.mainsail-cta__item:focus-visible .mainsail-cta__text {
	color: #ffffff;
}

/* "VIEW DETAILS +" — hidden at rest (height:0 + scale(0), §8), revealed
   on hover/focus. Already cyan-filled with black text as soon as it's
   revealed — there's no further hover-on-the-button-itself state in the
   spec, since the card hover is what reveals it in that state to begin
   with. */
.mainsail-cta__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	height: 0;
	margin-top: 0;
	padding: 10px max(2.688vw, 25px);
	border: 1px solid #25c6fb;
	background: #25c6fb;
	color: #000000;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: max(0.875vw, 13px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transform: scale(0);
	transition: var(--mainsail-cta-transition);
	transition-property: height, transform, margin-top;
}

@media (hover: hover) and (pointer: fine) {
	.mainsail-cta__item:hover .mainsail-cta__link {
		height: var(--mainsail-cta-button-height);
		margin-top: max(1.875vw, 20px);
		transform: none;
	}
}

.mainsail-cta__item:focus-visible .mainsail-cta__link {
	height: var(--mainsail-cta-button-height);
	margin-top: max(1.875vw, 20px);
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-cta__image,
	.mainsail-cta__heading,
	.mainsail-cta__text,
	.mainsail-cta__link {
		transition: none;
	}
}

@media (max-width: 991px) {
	.mainsail-cta {
		padding: 50px 15px;
	}

	.mainsail-cta__container {
		max-width: 750px;
		margin: 0 auto;
	}

	.mainsail-cta__list {
		grid-template-columns: 1fr;
	}

	.mainsail-cta__item {
		height: 250px;
	}
}

/* Stays full-width/single-column (inherited from the 991px rule above —
   a 2-column grid was tried here, but with exactly 3 cards it leaves an
   ugly empty 4th cell). Instead the fixed height is cut down so two
   cards stack within one phone screen's height, rather than one
   card eating the whole screen. */
@media (max-width: 567px) {
	.mainsail-cta__item {
		height: 160px;
		padding: 15px;
	}

	.mainsail-cta__heading {
		font-size: 15px;
	}

	.mainsail-cta__text {
		margin-top: 8px;
		font-size: 12px;
		line-height: 1.6;
	}

	@media (hover: hover) and (pointer: fine) {
		.mainsail-cta__item:hover .mainsail-cta__link {
			height: 36px;
			margin-top: 10px;
			padding: 8px 14px;
			font-size: 11px;
		}
	}

	.mainsail-cta__item:focus-visible .mainsail-cta__link {
		height: 36px;
		margin-top: 10px;
		padding: 8px 14px;
		font-size: 11px;
	}
}

@media (max-width: 767px) {
	.mainsail-cta {
		padding: 15px;
	}
}