/**
 * Horizontal Image Accordion — front-end styles.
 *
 * Every per-accordion setting arrives as a CSS custom property on the
 * .hia wrapper (see Renderer::style_vars), so this one static file
 * serves any number of differently configured accordions.
 *
 * Animation model:
 *  - Desktop/tablet: panels are flex children; opening transitions flex-grow.
 *  - Mobile (stacked): panels transition height instead.
 * Both are compositor-friendly and need no JS during the animation.
 */

.hia,
.hia *,
.hia *::before,
.hia *::after {
	box-sizing: border-box;
}

.hia {
	--hia-ease: cubic-bezier(0.45, 0, 0.15, 1);
	display: flex;
	gap: var(--hia-gap, 12px);
	width: 100%;
	height: var(--hia-h-desktop, 600px);
	max-height: var(--hia-max-h, 820px);
	/* Body copy uses a legible sans stack; the display font
	   (--hia-font) is reserved for headings and vertical titles. */
	font-family: var(--hia-font-body, inherit);
}

/* ------------------------------------------------------------------ *
 * Layout variants
 * ------------------------------------------------------------------ */

/* Full-width hero: break out of a constrained content column. */
.hia--layout-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.hia--layout-full .hia-panel {
	border-radius: 0;
}

/* When the block alignment already handles width, don't double-break. */
.alignfull .hia--layout-full,
.alignwide .hia--layout-full {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ------------------------------------------------------------------ *
 * Panel
 * ------------------------------------------------------------------ */

.hia-panel {
	position: relative;
	overflow: hidden;
	flex: 0 1 var(--hia-collapsed, 96px);
	min-width: var(--hia-collapsed, 96px);
	border-radius: var(--hia-radius, 24px);
	box-shadow: 0 12px 32px rgba(10, 14, 16, 0.16);
	background-color: #10181c;
	cursor: pointer;
	transition: flex-grow var(--hia-speed, 500ms) var(--hia-ease);
}

.hia-panel.is-open {
	flex-grow: 1;
	cursor: default;
}

/* Equal-width cards: closed panels share space evenly. */
.hia--layout-equal .hia-panel {
	flex: 1 1 0;
	min-width: 0;
}

.hia--layout-equal .hia-panel.is-open {
	flex-grow: var(--hia-expand, 6);
}

/* ------------------------------------------------------------------ *
 * Media + overlay
 * ------------------------------------------------------------------ */

.hia-panel__media {
	position: absolute;
	inset: 0;
}

.hia-panel__media img,
.hia-panel__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hia-focal, 50% 50%);
	display: block;
	transition: transform 900ms var(--hia-ease);
}

.hia--kenburns .hia-panel.is-open .hia-panel__media img,
.hia--kenburns .hia-panel.is-open .hia-panel__video {
	animation: hia-kenburns 16s ease-out forwards;
}

/* Subtle zoom on hovered collapsed strips: a quiet cue that the
   panel is interactive, before it starts expanding. */
.hia-panel:not(.is-open):hover .hia-panel__media img,
.hia-panel:not(.is-open):hover .hia-panel__video {
	transform: scale(1.06);
}

@keyframes hia-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

.hia-panel__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--hia-overlay, #0b1215);
	opacity: var(--hia-overlay-opacity, 0.45);
	transition: opacity var(--hia-speed, 500ms) var(--hia-ease);
	pointer-events: none;
}

/* Slightly stronger veil on collapsed strips keeps the title legible. */
.hia-panel:not(.is-open) .hia-panel__overlay {
	opacity: calc(var(--hia-overlay-opacity, 0.45) + 0.15);
}

/* ------------------------------------------------------------------ *
 * Tab (full-panel button) + vertical title
 * ------------------------------------------------------------------ */

.hia-panel__tab {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	cursor: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.hia-panel__tab:focus {
	outline: none;
}

.hia-panel__tab:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.95);
	outline-offset: -6px;
	border-radius: inherit;
}

.hia-panel__vtitle {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: var(--hia-vtitle, #ffffff);
	font-family: var(--hia-font, inherit);
	font-size: var(--hia-vtitle-size, 18px);
	font-weight: 500;
	letter-spacing: 0.08em;
	white-space: nowrap;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
	opacity: 1;
	transition: opacity calc(var(--hia-speed, 500ms) * 0.4) ease;
}

.hia-panel.is-open .hia-panel__vtitle {
	opacity: 0;
}

/* ------------------------------------------------------------------ *
 * Expanded content
 * ------------------------------------------------------------------ */

.hia-panel__content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 6%, 72px);
	color: var(--hia-text, #ffffff);
	/* A stable minimum width stops the copy re-wrapping on every frame
	   of the expansion; the panel simply clips it until there is room. */
	min-width: min(560px, calc(100vw - 48px));
	max-width: 820px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.12);
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	/* visibility keeps links inside collapsed panels out of the tab
	   order; its delay lets the fade-out finish before hiding. */
	visibility: hidden;
	transition:
		opacity calc(var(--hia-speed, 500ms) * 0.7) ease,
		transform calc(var(--hia-speed, 500ms) * 0.7) var(--hia-ease),
		visibility 0s linear var(--hia-speed, 500ms);
}

/* WebKit hides overlay scrollbars until the user scrolls; a styled
   scrollbar is always painted, so overflowing copy is visibly
   scrollable. Firefox gets the scrollbar-color equivalent above. */
.hia-panel__content::-webkit-scrollbar {
	width: 6px;
}

.hia-panel__content::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.55);
	border-radius: 3px;
}

.hia-panel__content::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.12);
}

.hia-panel.is-open .hia-panel__content {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	visibility: visible;
	transition-delay: calc(var(--hia-speed, 500ms) * 0.45);
}

/* Animation presets change how content enters. */
.hia--preset-fade .hia-panel__content {
	transform: none;
}

.hia--preset-slide .hia-panel__content {
	transform: translateX(32px);
}

.hia--preset-scale .hia-panel__content {
	transform: scale(0.94);
	transform-origin: left center;
}

.hia-panel__heading {
	margin: 0 0 0.5em;
	font-family: var(--hia-font, inherit);
	font-size: var(--hia-heading, 42px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.015em;
	color: inherit;
}

.hia-panel__icon {
	margin-right: 0.35em;
}

.hia-panel__subtitle {
	margin: 0 0 1em;
	font-size: calc(var(--hia-body, 16px) * 1.125);
	font-style: italic;
	opacity: 0.88;
}

.hia-panel__description {
	font-size: var(--hia-body, 16px);
	line-height: 1.75;
	max-width: 62ch;
}

.hia-panel__description p {
	margin: 0 0 1em;
	color: inherit;
}

.hia-panel__description ul,
.hia-panel__description ol {
	margin: 0 0 1.25em;
	padding-left: 1.3em;
	list-style-position: outside;
}

.hia-panel__description ul {
	list-style-type: circle;
}

.hia-panel__description li {
	margin-bottom: 0.6em;
	padding-left: 0.25em;
}

.hia-panel__description li:last-child {
	margin-bottom: 0;
}

.hia-panel__description a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hia-panel__actions {
	margin: 1.5em 0 0;
}

.hia-panel__button {
	display: inline-block;
	padding: 0.8em 2em;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	font-size: calc(var(--hia-body, 16px) * 0.82);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 250ms ease, color 250ms ease;
}

.hia-panel__button:hover,
.hia-panel__button:focus-visible {
	background-color: var(--hia-text, #ffffff);
	color: #14181a;
}

/* ------------------------------------------------------------------ *
 * Tablet
 * ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023px) {
	.hia {
		height: var(--hia-h-tablet, 480px);
	}

	.hia-panel {
		flex-basis: calc(var(--hia-collapsed, 96px) * 0.72);
		min-width: calc(var(--hia-collapsed, 96px) * 0.72);
	}

	.hia-panel__content {
		min-width: min(440px, calc(100vw - 40px));
	}
}

/* ------------------------------------------------------------------ *
 * Mobile: stacked accordion. Same panels, height animates instead
 * of flex-grow. Titles read horizontally on the collapsed bars.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.hia {
		flex-direction: column;
		height: auto;
		max-height: none;
	}

	.hia-panel,
	.hia--layout-equal .hia-panel {
		flex: none;
		min-width: 0;
		height: var(--hia-collapsed-m, 64px);
		transition: height var(--hia-speed, 500ms) var(--hia-ease);
	}

	/* Fallback height for no-JS; the script replaces it with an exact
	   content-hugging height, capped at --hia-h-mobile. */
	.hia-panel.is-open {
		height: var(--hia-h-mobile, 420px);
		cursor: pointer; /* tap again to close */
	}

	.hia-panel__tab {
		justify-content: flex-start;
		padding: 0 24px;
	}

	.hia-panel__vtitle {
		writing-mode: horizontal-tb;
		transform: none;
		font-size: calc(var(--hia-vtitle-size, 18px) * 0.95);
	}

	.hia-panel__media img,
	.hia-panel__video {
		object-position: var(--hia-focal-m, var(--hia-focal, 50% 50%));
	}

	/* Top-aligned so overflowing content scrolls correctly (flex-end
	   clips the top of a scroll container). The script sizes the open
	   panel to its content, so there is no slack to distribute anyway. */
	.hia-panel__content {
		min-width: 0;
		justify-content: flex-start;
		padding: 24px;
	}

	.hia-panel__heading {
		font-size: calc(var(--hia-heading, 42px) * 0.65);
	}

	/* Scroll cue: content taller than the configured maximum is capped
	   and scrolls (iOS shows no scrollbar at all), so fade the last
	   lines out until the visitor reaches the end of the copy. The
	   script sets .has-overflow / .is-scrolled-end. */
	.hia-panel.has-overflow.is-open::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 52px;
		z-index: 4;
		pointer-events: none;
		background: linear-gradient(to bottom, rgba(10, 15, 18, 0), rgba(10, 15, 18, 0.85));
		transition: opacity 250ms ease;
	}

	.hia-panel.has-overflow.is-open.is-scrolled-end::after {
		opacity: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.hia-panel,
	.hia-panel::after,
	.hia-panel__content,
	.hia-panel__overlay,
	.hia-panel__vtitle,
	.hia-panel__media img,
	.hia-panel__video {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * Per-breakpoint content variants (mobile title/description overrides).
 * Kept at the end of the file so they win the cascade at equal
 * specificity.
 * ------------------------------------------------------------------ */

.hia .hia-only-mobile {
	display: none;
}

@media (max-width: 767px) {
	.hia .hia-hide-mobile {
		display: none;
	}

	.hia .hia-only-mobile {
		display: block;
	}
}

/* Admin notice shown only to users who can manage accordions. */
.hia-missing {
	padding: 12px 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	color: #50575e;
	font-size: 14px;
}