/*
 * Before & after.
 *
 * Uses the palette from theme.json when the Codigo LaVie theme is active, and
 * literal fallbacks otherwise. Logical properties only, apart from the one
 * place that cannot be — see the clip note below.
 *
 * The whole control hangs off a single custom property. `--codigo-ba-reveal` is
 * where the split sits; the clip, the rule and the grip all read it, so moving
 * the handle is one write rather than three.
 */

.codigo-ba {
	--codigo-ba-reveal: 52%;

	align-items: start;
	display: grid;
	gap: var(--wp--preset--spacing--50, 34px);
	grid-template-columns: 1.25fr 0.75fr;
}

/* The radios are inside their labels, so the label is the hit area and the
   focus ring belongs to it. Clipped rather than display:none — a hidden input
   is not focusable, and this set is the keyboard route through the galleries. */
.codigo-ba__radio {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.codigo-ba__stage {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 20px);
	grid-column: 1;
}

.codigo-ba__frame {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--cream, #fff3eb);
	border-radius: var(--wp--custom--radius--shell, 40px);
	overflow: hidden;
	position: relative;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

/* The frame is only a control once the script is on it. Until then it is a
   photograph, and a photograph that offers a resize cursor is lying. */
.codigo-ba.is-enhanced .codigo-ba__frame {
	cursor: ew-resize;
}

/* Without :has() every gallery would stack; the first one standing alone is the
   honest fallback, and the rules below take over wherever :has() is understood. */
.codigo-ba__pair {
	display: none;
	inset: 0;
	margin: 0;
	position: absolute;
}

.codigo-ba__pair:first-of-type {
	display: block;
}

.codigo-ba:has(.codigo-ba__pick input:checked) .codigo-ba__pair:first-of-type {
	display: none;
}

.codigo-ba:has(.codigo-ba__pick:nth-of-type(1) input:checked) .codigo-ba__pair:nth-of-type(1),
.codigo-ba:has(.codigo-ba__pick:nth-of-type(2) input:checked) .codigo-ba__pair:nth-of-type(2),
.codigo-ba:has(.codigo-ba__pick:nth-of-type(3) input:checked) .codigo-ba__pair:nth-of-type(3),
.codigo-ba:has(.codigo-ba__pick:nth-of-type(4) input:checked) .codigo-ba__pair:nth-of-type(4),
.codigo-ba:has(.codigo-ba__pick:nth-of-type(5) input:checked) .codigo-ba__pair:nth-of-type(5),
.codigo-ba:has(.codigo-ba__pick:nth-of-type(6) input:checked) .codigo-ba__pair:nth-of-type(6),
.codigo-ba:has(.codigo-ba__pick:nth-of-type(7) input:checked) .codigo-ba__pair:nth-of-type(7),
.codigo-ba:has(.codigo-ba__pick:nth-of-type(8) input:checked) .codigo-ba__pair:nth-of-type(8) {
	display: block;
}

.codigo-ba__shot {
	display: block;
	inset: 0;
	position: absolute;
}

.codigo-ba__shot img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
	/* The frame is the control; the photographs must never take the press
	   themselves, or the browser picks them up as a draggable image. */
	pointer-events: none;
	-webkit-user-drag: none;
}

/*
 * The one physical property in the file. clip-path has no logical form, so the
 * after photograph is clipped from the left here and from the right in the RTL
 * block at the foot — which is the same edge in both, the one the reader starts
 * from.
 */
.codigo-ba__shot--after {
	clip-path: inset(0 0 0 var(--codigo-ba-reveal));
}

.codigo-ba__tag {
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-size: 12.5px;
	font-weight: 700;
	inset-block-start: 16px;
	letter-spacing: 0.1em;
	padding: 7px 15px;
	position: absolute;
	text-transform: uppercase;
}

.codigo-ba__tag--before {
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--ink, #022253);
	inset-inline-start: 16px;
}

.codigo-ba__tag--after {
	background: var(--wp--preset--color--ink, #022253);
	color: var(--wp--preset--color--base, #fff);
	inset-inline-end: 16px;
}

.codigo-ba__handle {
	align-items: center;
	background: var(--wp--preset--color--base, #fff);
	display: flex;
	inline-size: 2px;
	inset-block: 0;
	inset-inline-start: var(--codigo-ba-reveal);
	justify-content: center;
	pointer-events: none;
	position: absolute;
}

.codigo-ba__grip {
	align-items: center;
	background: var(--wp--preset--color--base, #fff);
	block-size: 46px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	box-shadow: var(--wp--preset--shadow--md, 0 10px 26px -14px rgba(2, 34, 83, 0.22));
	color: var(--wp--preset--color--ink, #022253);
	display: flex;
	flex-shrink: 0;
	inline-size: 46px;
	justify-content: center;
}

.codigo-ba__slider {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* The design draws the compare control as a bare range input, which the
   browser lays out 16px tall — a real control under the 44px floor, and the one
   on this page a thumb is most likely to miss. The box is opened to 44 and the
   track is drawn at the height the design gives it, so the target grows and
   nothing about the drawing changes. */
.codigo-ba__range {
	accent-color: var(--wp--preset--color--aqua, #76dedf);
	background: transparent;
	inline-size: 100%;
	min-block-size: 44px;
}

.codigo-ba__range::-webkit-slider-runnable-track {
	block-size: 16px;
}

.codigo-ba__range::-moz-range-track {
	block-size: 16px;
}

/* ink--soft rather than the design's lighter grey: this is a 13px uppercase
   label and small text needs 4.5:1, which 0.55 opacity on white misses. */
.codigo-ba__label {
	color: var(--wp--custom--ink--soft, rgba(2, 34, 83, 0.62));
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ── Gallery picker ──────────────────────────────────────────────────────── */
.codigo-ba__picker {
	display: flex;
	flex-direction: column;
	gap: 12px;
	grid-column: 2;
}

.codigo-ba__pick {
	background: var(--wp--preset--color--cream, #fff3eb);
	border-radius: var(--wp--custom--radius--lg, 28px);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 18px 20px;
	transition: background 0.16s, color 0.16s;
}

.codigo-ba__pick:has(input:checked) {
	background: var(--wp--preset--color--ink, #022253);
	color: var(--wp--preset--color--base, #fff);
}

.codigo-ba__pick:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--spring, #0abc8a);
	outline-offset: 2px;
}

.codigo-ba__pick-title {
	font-size: 16.5px;
	font-weight: 700;
}

.codigo-ba__pick-meta {
	font-size: 14px;
	line-height: 1.45;
	opacity: 0.68;
}

/* Full opacity on the selected card: 0.68 white on the navy fill is fine, but
   0.68 ink on cream is not, and the same rule has to serve both. */
.codigo-ba__pick:has(input:checked) .codigo-ba__pick-meta {
	opacity: 0.8;
}

.codigo-ba__note {
	color: var(--wp--custom--ink--soft, rgba(2, 34, 83, 0.62));
	font-size: 13.5px;
	line-height: 1.55;
	margin-block: var(--wp--preset--spacing--20, 15px) 0;
}

/* ── Paired strip ────────────────────────────────────────────────────────── */
.codigo-ba-strip {
	display: grid;
	gap: var(--wp--preset--spacing--20, 15px);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.codigo-ba-strip__item {
	display: flex;
	margin: 0;
}

.codigo-ba-strip__card {
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 12px;
	inline-size: 100%;
	text-decoration: none;
}

.codigo-ba-strip__media {
	background: var(--wp--preset--color--cream, #fff3eb);
	border-radius: var(--wp--custom--radius--lg, 28px);
	display: grid;
	gap: 4px;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	transition: transform 0.18s, box-shadow 0.18s;
}

a.codigo-ba-strip__card:hover .codigo-ba-strip__media,
a.codigo-ba-strip__card:focus-visible .codigo-ba-strip__media {
	box-shadow: var(--wp--preset--shadow--md, 0 10px 26px -14px rgba(2, 34, 83, 0.22));
	transform: translateY(-4px);
}

.codigo-ba-strip__shot {
	aspect-ratio: 3 / 4;
	display: block;
	position: relative;
}

.codigo-ba-strip__shot img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.codigo-ba-strip__name {
	font-size: 16.5px;
	font-weight: 700;
}

.codigo-ba-strip__meta {
	color: var(--wp--custom--ink--soft, rgba(2, 34, 83, 0.62));
	font-size: 14px;
}

/* ── Visually hidden ─────────────────────────────────────────────────────
   Declared here rather than borrowed from the theme: the plugin has to render
   correctly under any theme, and the caption on each pair is the only thing
   naming it for a screen reader. */
.codigo-ba .screen-reader-text {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.codigo-ba {
		grid-template-columns: 1fr;
	}

	.codigo-ba__stage,
	.codigo-ba__picker {
		grid-column: 1;
	}

	.codigo-ba-strip {
		-webkit-overflow-scrolling: touch;
		display: flex;
		margin-inline: calc(-1 * var(--wp--custom--shell-pad, 34px));
		overflow-x: auto;
		/* `overflow-x: auto` makes the block axis a scroll container too, which
		   would clip the card's hover lift and its shadow. The design leaves the
		   room for both. */
		padding-block: 2px 10px;
		padding-inline: var(--wp--custom--shell-pad, 34px);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.codigo-ba-strip::-webkit-scrollbar {
		display: none;
	}

	.codigo-ba-strip__item {
		flex: 0 0 46%;
		scroll-snap-align: start;
	}
}

@media (max-width: 640px) {
	.codigo-ba__frame {
		aspect-ratio: 3 / 4;
	}

	.codigo-ba-strip__item {
		flex: 0 0 84%;
	}
}

/* ── RTL ─────────────────────────────────────────────────────────────────── */
[dir="rtl"] .codigo-ba__shot--after {
	clip-path: inset(0 var(--codigo-ba-reveal) 0 0);
}

/* Motion preference: the transitions here are colour and lift, both of which
   the site drops wholesale, but the block has to hold that on its own under a
   theme that does not. */
@media (prefers-reduced-motion: reduce) {
	.codigo-ba__pick,
	.codigo-ba-strip__media {
		transition: none;
	}

	a.codigo-ba-strip__card:hover .codigo-ba-strip__media,
	a.codigo-ba-strip__card:focus-visible .codigo-ba-strip__media {
		transform: none;
	}
}