/**
 * Oyolloo Elements — retail shop.
 *
 * Figma: node 471:1441 — 1920x597 on white.
 *   The band uses a 60px gutter rather than the standard 140, so it declares
 *   its own inner wrapper instead of reusing .oe-container.
 *   columns: 549 photo + 60px + 582 copy + 60px + 549 map
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

/* The band runs a 60px block padding, half the site default. */
.oe-retail-shop .oe-section {
	--oe-section-y: 60px;
}

.oe-retail-shop__inner {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: 60px;
}

.oe-retail-shop__grid {
	display: grid;
	grid-template-columns: 549fr 582fr 549fr;
	align-items: center;
	gap: 60px;
}

/* Copy and buttons ride together between the two photos, centred as one block
   — Figma 471:1444 centres the 270px pair, not each half separately. */
.oe-retail-shop__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--oe-space-lg);
}

.oe-retail-shop__photo,
.oe-retail-shop__map {
	margin: 0;
	border-radius: var(--oe-radius-xl);
	overflow: hidden;
	aspect-ratio: 549 / 477;
}

.oe-retail-shop__photo img,
.oe-retail-shop__map img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The live Google Map fills the same frame the map image used to. `border-radius:
   inherit` is what actually rounds it — an iframe paints on its own surface, so
   the wrapper's `overflow: hidden` does not clip it on its own in Safari. */
.oe-retail-shop__map--embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
}

/* In the editor the iframe would swallow every click meant for the widget, so
   the map goes inert there and stays live on the front end. */
.elementor-editor-active .oe-retail-shop__map--embed iframe {
	pointer-events: none;
}

.oe-retail-shop__body {
	display: flex;
	flex-direction: column;
	gap: var(--oe-space-sm);
	text-align: center;
	align-items: center;
}

.oe-retail-shop__eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.oe-retail-shop__address {
	margin: 0;
	text-transform: uppercase;
}

.oe-retail-shop__hours {
	margin: 0;
	text-transform: uppercase;
}

.oe-retail-shop__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--oe-space-sm);
}

@media (max-width: 1024px) {
	.oe-retail-shop__inner {
		padding-inline: 40px;
	}

	.oe-retail-shop__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--oe-space-lg);
		row-gap: var(--oe-space-lg);
	}

	/* Copy and its buttons span the full row above the two images. */
	.oe-retail-shop__copy {
		grid-column: 1 / -1;
		order: -1;
	}
}

@media (max-width: 767px) {
	.oe-retail-shop__inner {
		padding-inline: 24px;
	}

	.oe-retail-shop__grid {
		grid-template-columns: 1fr;
	}

	/*
	 * The map runs between the copy and the buttons here (Figma 471:4282:
	 * photo, copy, map, buttons), so the wrapper stands aside and lets its two
	 * children become grid items in their own right. `order` then lifts the map
	 * over the buttons, which is the one place source order is not the design's.
	 */
	.oe-retail-shop__copy {
		display: contents;
	}

	.oe-retail-shop__body,
	.oe-retail-shop__map,
	.oe-retail-shop__actions {
		grid-column: 1;
		order: 0;
	}

	.oe-retail-shop__actions {
		order: 1;
	}

	.oe-retail-shop .oe-section {
		--oe-section-y: var(--oe-space-3xl);
	}

	.oe-retail-shop__grid {
		gap: var(--oe-space-md);
	}

	.oe-retail-shop__photo,
	.oe-retail-shop__map {
		aspect-ratio: 345 / 300;
		border-radius: var(--oe-radius-2xl);
	}

	.oe-retail-shop__eyebrow,
	.oe-retail-shop__hours {
		font-size: var(--oe-body-sm-size);
		line-height: 20px;
	}

	.oe-retail-shop__actions {
		width: 100%;
		flex-direction: column;
	}

	.oe-retail-shop__actions .oe-btn {
		width: 100%;
	}
}