/**
 * Homepage CTA grid (block editor version of the old SiteOrigin grid)
 *
 * Markup: Group "Home Page CTA Grid" (.home_page_cta_grid, grid layout)
 *           > Group "CTA Wrapper" (.cta_wrapper) x N
 *               > Image, Heading (H2), Buttons
 *
 * - 3 per row on desktop/tablet, 1 per row below 768px
 * - If the last row has only 2 tiles they share the row 50/50
 *   (1 tile on its own fills the row)
 * - 1px rgba(0,0,0,.1) vertical rule between tiles
 * - Whole tile is clickable (uses the button's link)
 * - Corner flashes (.new_product, .save_upto_fifty, .save_upto_thirty etc)
 *   come from corner-flashes.css / master.css - this file just makes
 *   sure they sit above the image and don't block clicks.
 *
 * Loaded on the front end and in the block editor.
 */

/* ---------- Grid ---------- */
.wp-block-group.home_page_cta_grid.is-layout-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6 tracks: tiles span 2 (= 3 per row) or 3 (= 2 per row) */
	gap: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.home_page_cta_grid > .cta_wrapper {
	grid-column: span 2;
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	margin: 0 !important;
	padding: 0 0 2.5em;
	text-align: center;
}

/* Last row with 2 tiles: each takes half */
.home_page_cta_grid > .cta_wrapper:nth-child(3n+1):nth-last-child(2),
.home_page_cta_grid > .cta_wrapper:nth-child(3n+2):last-child {
	grid-column: span 3;
}

/* Last row with 1 tile: full width */
.home_page_cta_grid > .cta_wrapper:nth-child(3n+1):last-child {
	grid-column: span 6;
}

/* Vertical dividing rule - every tile except the first in each row */
.home_page_cta_grid > .cta_wrapper:not(:nth-child(3n+1)) {
	border-left: 1px solid #0000001a;
}

/* ---------- Tile contents ---------- */
.home_page_cta_grid .cta_wrapper > * {
	margin-top: 0;
	margin-bottom: 0;
}

.home_page_cta_grid .cta_wrapper .wp-block-image {
	margin: 0 !important;
	max-width: none !important;
	width: 100%;
}

.home_page_cta_grid .cta_wrapper .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

.home_page_cta_grid .cta_wrapper h2.wp-block-heading {
	margin: 0.9em 0 0.6em !important;
	padding: 0 0.5em;
	text-transform: none;
}

.home_page_cta_grid .cta_wrapper .wp-block-buttons {
	margin-top: 0 !important;
	padding: 0 0.5em;
}

/* ---------- Corner flashes ---------- */
.home_page_cta_grid .cta_wrapper::before {
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background-size: contain;
}

/* ---------- Whole tile clickable (front end only) ----------
   The button's link is stretched over the whole tile, so there is still
   only one link per tile (good for SEO and screen readers). */
.entry-content .home_page_cta_grid .cta_wrapper .wp-block-buttons,
.entry-content .home_page_cta_grid .cta_wrapper .wp-block-button,
.entry-content .home_page_cta_grid .cta_wrapper .wp-block-button__link {
	position: static;
}

.entry-content .home_page_cta_grid .cta_wrapper .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.entry-content .home_page_cta_grid .cta_wrapper:hover .wp-block-image img {
	opacity: 0.9;
}

.entry-content .home_page_cta_grid .cta_wrapper:focus-within {
	outline: 2px solid #292f57;
	outline-offset: -2px;
}

.entry-content .home_page_cta_grid .cta_wrapper .wp-block-button__link:focus {
	outline: none;
}

/* ---------- Mobile: single column below the theme's 768px breakpoint ---------- */
@media (max-width: 767px) {
	.wp-block-group.home_page_cta_grid.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.home_page_cta_grid > .cta_wrapper,
	.home_page_cta_grid > .cta_wrapper:nth-child(3n+1):nth-last-child(2),
	.home_page_cta_grid > .cta_wrapper:nth-child(3n+2):last-child,
	.home_page_cta_grid > .cta_wrapper:nth-child(3n+1):last-child {
		grid-column: 1 / -1;
	}

	.home_page_cta_grid > .cta_wrapper:not(:nth-child(3n+1)) {
		border-left: 0;
	}
}