/*
 * Photo Strip (1.0.0).
 *
 * Carousel (default): a scroll-snap row of 4:5 photo cards, each with a title and an
 * optional caption. The row bleeds to the screen edges and its side padding puts the first
 * card on the site container's content edge; view.js moves it with the arrows, counts the
 * position and adds mouse drag.
 * Grid on desktop (is-style-grid): four across inside the container, two at tablet width,
 * a sliding row with a peek on phones; no arrows, captions at body size.
 * Inside a Group band: shared.css removes the band padding and the container; this file
 * removes the bleed and sets the head as one line, a small label beside the arrows.
 *
 * Tokens only: sizes derive from the spacing unit (--gap-sm) and --control-size, so the
 * strip scales with each brand. Class rules sit inside :where(), except those that must beat
 * the theme's element resets (list padding, link and button colour, heading and paragraph
 * margins, icon size), which keep one class outside it. The --arenex-strip-* properties are
 * the layout switches that the style, the nesting and the screen size set.
 */

/* ---- Band ---- */
:where(.arenex-strip) {
	/* The row's side padding: from the screen edge to the container's content edge. */
	--arenex-strip-inset: max(var(--container-padding), calc((100% - var(--container-max-width)) / 2 + var(--container-padding)));
	--arenex-strip-card: calc(var(--gap-sm) * 24);
	padding-block: var(--section-padding);
}

/* ---- Head: the words, and on the right a link or the arrows ---- */
:where(.arenex-strip__head) {
	display: flex;
	flex-direction: var(--arenex-strip-head-direction, row);
	flex-wrap: var(--arenex-strip-head-wrap, nowrap);
	align-items: var(--arenex-strip-head-align, flex-end);
	justify-content: space-between;
	gap: var(--arenex-strip-head-gap, var(--gap-lg));
	box-sizing: border-box;
	max-width: var(--container-max-width);
	margin: 0 auto var(--arenex-strip-head-space, var(--gap-md));
	padding-inline: var(--container-padding);
}
:where(.arenex-strip__intro) {
	flex: var(--arenex-strip-intro-flex, 0 1 auto);
	min-width: 0;
	max-width: var(--head-max-width);
}
.arenex-strip__intro :is(h1, h2, h3, h4, p) {
	margin-block: 0;
}
.arenex-strip__intro .is-style-eyebrow {
	margin-block-end: 1em;
}
.arenex-strip__intro :is(h1, h2, h3, h4) + p {
	margin-block-start: var(--gap-md);
}

/* A text link beside the heading (a link field), with an arrow */
:where(.arenex-strip__link) {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--gap-sm) / 2);
	font-family: var(--font-body);
	font-size: var(--body-size);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.arenex-strip__link,
.arenex-strip__link:hover {
	color: var(--primary-color);
	text-decoration: none;
}
/* The link is one line tall: an invisible pad makes it easier to tap without moving anything. */
:where(.arenex-strip__link)::before {
	content: "";
	position: absolute;
	inset: calc(var(--gap-sm) / -2) calc(var(--gap-sm) / -4);
}
.arenex-strip__link-icon {
	flex: none;
	width: var(--gap-sm);
	height: var(--gap-sm);
	transition: transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.arenex-strip__link:hover .arenex-strip__link-icon {
	transform: translateX(0.18em);
}

/* ---- Arrows and position ---- */
:where(.arenex-strip__nav) {
	display: flex;
	align-items: center;
	gap: calc(var(--gap-sm) / 2);
}
:where(.arenex-strip__status) {
	display: flex;
	align-items: center;
	gap: calc(var(--gap-sm) * 0.75);
	margin-right: calc(var(--gap-sm) * 0.75);
	color: var(--muted-color);
	font-family: var(--font-eyebrow);
	font-size: var(--caption-size);
	letter-spacing: 0.14em;
	line-height: var(--body-line-height);
	white-space: nowrap;
}
:where(.arenex-strip__status[hidden]) {
	display: none;
}
:where(.arenex-strip__now) {
	color: var(--heading-color);
	font-weight: 400;
}
:where(.arenex-strip__bar) {
	position: relative;
	width: calc(var(--gap-sm) * 4.5);
	height: 2px;
	overflow: hidden;
	background: var(--border-color);
}
:where(.arenex-strip__fill) {
	position: absolute;
	inset: 0;
	background: var(--primary-color);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.arenex-strip__live) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
:where(.arenex-strip__button) {
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--control-size);
	height: var(--control-size);
	margin: 0;
	padding: 0;
	border: 1px solid var(--border-strong-color);
	border-radius: var(--radius);
	background: var(--surface-color);
	cursor: pointer;
	transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1), border-color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.arenex-strip__button {
	color: var(--heading-color);
}
:where(.arenex-strip__button:hover) {
	border-color: var(--heading-color);
}
:where(.arenex-strip__button:focus-visible) {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}
:where(.arenex-strip__button[aria-disabled="true"]) {
	opacity: 0.35;
	pointer-events: none;
}
.arenex-strip__button-icon {
	width: calc(var(--control-size) * 5 / 11);
	height: calc(var(--control-size) * 5 / 11);
}

/* ---- The row of cards ---- */
:where(.arenex-strip__body) {
	box-sizing: border-box;
}
:where(.arenex-strip__track) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(78vw, var(--arenex-strip-card));
	gap: var(--gap-sm);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--arenex-strip-inset);
	scrollbar-width: none;
}
.arenex-strip__track {
	margin: 0;
	padding: calc(var(--gap-sm) / 2) var(--arenex-strip-inset) var(--gap-sm);
	list-style: none;
}
:where(.arenex-strip:not(.is-style-grid)) .arenex-strip__track::-webkit-scrollbar {
	display: none;
}
:where(.arenex-strip__track.is-dragging) {
	scroll-snap-type: none;
	user-select: none;
}
:where(.arenex-strip__card) {
	margin: 0;
	scroll-snap-align: start;
}
:where(.arenex-strip__img) {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--bg-alt);
	-webkit-user-drag: none;
	user-select: none;
}
:where(.arenex-strip__caption) {
	display: grid;
	gap: calc(var(--gap-sm) / 8);
	margin-top: calc(var(--gap-sm) * 0.75);
	text-wrap: balance;
}
:where(.arenex-strip__title) {
	font-family: var(--font-heading);
	font-size: var(--lead-size);
	font-weight: var(--heading-weight);
	line-height: var(--heading-line-height);
}
:where(.arenex-strip__text) {
	color: var(--muted-color);
	font-size: var(--caption-size);
	line-height: 1.5;
}

/* ---- Grid on desktop ---- */
:where(.arenex-strip.is-style-grid) {
	--arenex-strip-head-wrap: wrap;
	--arenex-strip-head-gap: var(--gap-sm) calc(var(--gap-sm) * 2);
	--arenex-strip-head-space: var(--gap-lg);
}
:where(.arenex-strip.is-style-grid .arenex-strip__body) {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}
:where(.arenex-strip.is-style-grid .arenex-strip__track) {
	grid-auto-flow: row;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: visible;
	scroll-snap-type: none;
}
:where(.arenex-strip.is-style-grid) .arenex-strip__track {
	padding: 0;
}
:where(.arenex-strip.is-style-grid .arenex-strip__nav) {
	display: none;
}
:where(.arenex-strip.is-style-grid .arenex-strip__text) {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* ---- Inside a Group band: no bleed, and a one-line head beside the arrows ---- */
.wp-block-group__inner-container > :where(.arenex-strip),
.wp-block-group :where([data-type^="arenex/"] .arenex-strip) {
	--arenex-strip-inset: 0;
	--arenex-strip-head-direction: row;
	--arenex-strip-head-align: center;
	--arenex-strip-head-gap: var(--gap-sm);
	--arenex-strip-head-space: var(--gap-sm);
}

/* ---- Screen sizes ---- */
@media (max-width: 1024px) {
	:where(.arenex-strip.is-style-grid .arenex-strip__track) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 768px) {
	:where(.arenex-strip) {
		--arenex-strip-card: calc(var(--gap-sm) * 20);
	}
	:where(.arenex-strip:not(.is-style-grid)) {
		--arenex-strip-head-direction: column;
		--arenex-strip-head-align: flex-start;
	}
}
@media (max-width: 560px) {
	:where(.arenex-strip.is-style-grid .arenex-strip__track) {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(78vw, var(--arenex-strip-card));
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
	:where(.arenex-strip.is-style-grid) .arenex-strip__track {
		padding: 0 0 calc(var(--gap-sm) / 2);
	}
	/* Inside a Group band: the label keeps the width, the count sits above the arrows. */
	.wp-block-group__inner-container > :where(.arenex-strip),
	.wp-block-group :where([data-type^="arenex/"] .arenex-strip) {
		--arenex-strip-intro-flex: 1 1 auto;
	}
	.wp-block-group__inner-container > :where(.arenex-strip) .arenex-strip__nav,
	.wp-block-group :where([data-type^="arenex/"] .arenex-strip) .arenex-strip__nav {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: end;
		justify-items: end;
	}
	.wp-block-group__inner-container > :where(.arenex-strip) .arenex-strip__status,
	.wp-block-group :where([data-type^="arenex/"] .arenex-strip) .arenex-strip__status {
		grid-column: 1 / -1;
		margin-right: 0;
	}
	.wp-block-group__inner-container > :where(.arenex-strip) .arenex-strip__bar,
	.wp-block-group :where([data-type^="arenex/"] .arenex-strip) .arenex-strip__bar {
		display: none;
	}
}
@media (hover: hover) and (pointer: fine) {
	:where(.arenex-strip:not(.is-style-grid) .arenex-strip__track) {
		cursor: grab;
	}
	:where(.arenex-strip:not(.is-style-grid) .arenex-strip__track.is-dragging) {
		cursor: grabbing;
	}
}
@media (prefers-reduced-motion: reduce) {
	:where(.arenex-strip__fill, .arenex-strip__button) {
		transition: none;
	}
	.arenex-strip__link-icon {
		transition: none;
	}
}