/* RPC ACF Gallery — frontend styles */

.rpcg-acf-gallery-widget {
	width: 100%;
}

.rpcg-acf-gallery-widget * {
	box-sizing: border-box;
}

.rpcg-acf-gallery-images {
	display: grid;
	grid-template-columns: 1.86fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
		"large small1"
		"large small2";
	gap: 16px;
	width: 100%;
	height: 520px;
}

.rpcg-acf-gallery-thumb {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	border-radius: 8px;
	overflow: hidden;
	background-color: #e5e5e5;
}

.rpcg-acf-gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.rpcg-acf-gallery-large {
	grid-area: large;
}

.rpcg-acf-gallery-small-1 {
	grid-area: small1;
}

.rpcg-acf-gallery-small-2 {
	grid-area: small2;
}

/* ---------- Button row — sits BELOW the images grid entirely (its own
   row, not stretching the large image), sharing the same column
   proportions so the button lines up under the right (small-image)
   column only. The left cell is simply left empty. ---------- */

.rpcg-acf-gallery-button-row {
	display: grid;
	grid-template-columns: 1.86fr 1fr;
	margin-top: 16px;
}

.rpcg-acf-gallery-button {
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 20px;
	background-color: #ffffff;
	color: #1a1a1a;
	text-decoration: none;
	text-align: center;
	border-radius: 4px;
	transition: background-color 250ms ease, color 250ms ease;
}

.rpcg-acf-gallery-button-text {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.rpcg-acf-gallery-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
}

.rpcg-acf-gallery-button-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.rpcg-acf-gallery-button-icon i {
	font-size: 18px;
}

/* Off-screen triggers (images beyond the first 3) that Elementor's own
   lightbox slideshow discovers by matching data-elementor-lightbox-slideshow
   — never shown, only used so the lightbox can navigate to them. */
.rpcg-acf-gallery-hidden {
	display: none;
}

.rpcg-acf-gallery-notice {
	padding: 20px;
	background-color: #fff4e5;
	border: 1px dashed #d9a15c;
	border-radius: 6px;
	color: #6b4a1e;
	font-size: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	.rpcg-acf-gallery-images {
		grid-template-columns: 1fr;
		/* Fractional, not "auto": rows fill the container's actual height
		   (set via the Grid Height control) in equal shares, matching the
		   same technique the desktop 2-column layout already uses. "auto"
		   rows would size themselves off each image's own aspect-ratio
		   instead, ignoring the container height entirely and making the
		   grid taller than intended (or shorter, and cut, depending on the
		   photos) — this is what caused the mismatch. */
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-areas:
			"large"
			"small1"
			"small2";
		gap: 10px;
	}

	.rpcg-acf-gallery-button-row {
		grid-template-columns: 1fr;
	}

	.rpcg-acf-gallery-button {
		grid-column: 1;
		padding: 14px 18px;
	}
}