/*
 * =========================================================================
   WMS BLOCK — photo cards that lift into a dialog
   =========================================================================

   The block is eight buttons with a photograph and a label. Pressing one does
   not open a window over the page: the card's own photograph leaves the grid,
   grows to the middle of the screen, slides aside and a panel with the
   description slides out from behind it — and the way back is the same movement
   reversed (assets/js/wms-cards.js).

   Everything that moves is positioned from JavaScript in viewport coordinates,
   so this file styles the two halves for their final size only; the flight
   itself is inline geometry. What is left here is the grid, the label, and the
   look of the dialog.

   The block keeps the page's own palette (style.css, 01): no new colours are
   introduced for it.
   ========================================================================= */

/* ---------------------------------------------------------- heading ---- */
.uls-wms__head {
	text-align: center;
	margin-bottom: clamp(30px, 4vw, 46px);
}

.uls-wms__head .uls-eyebrow {
	margin-bottom: 16px;
}

.uls-wms__head .uls-h2 {
	margin-bottom: 14px;
}

.uls-wms__head .uls-lead {
	max-width: 720px;
}

.uls-wms__head--compact .uls-h2 {
	margin-bottom: 0;
}

/* ------------------------------------------------------------- grid ---- */
.uls-wms-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.uls-wms-cell {
	display: flex;
	min-width: 0;
}

/* ------------------------------------------------------------- card ---- */
/*
 * A button, so the whole card is one tab stop and Enter or Space opens it —
 * and `padding: 0` because the photograph has to reach the card's rounded
 * corners instead of sitting inside a frame.
 */
.uls-wms-card {
	display: flex;
	flex-direction: column;
	/*
	 * Stated, although a flex container stretches its children by default:
	 * a browser's own stylesheet starts a button's children at `flex-start`,
	 * which would leave the photograph at zero width.
	 */
	align-items: stretch;
	width: 100%;
	padding: 0;
	overflow: hidden;
	text-align: left;
	color: inherit;
	background: #0c1125;
	border: 1px solid var(--uls-border);
	border-radius: 18px;
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.uls-wms-card:hover,
.uls-wms-card:focus-visible {
	background: #0d1329;
	border-color: rgba(111, 141, 255, 0.55);
	box-shadow: 0 18px 45px -24px rgba(43, 75, 242, 0.9);
	transform: translateY(-3px);
}

.uls-wms-card:focus-visible {
	outline: 2px solid var(--uls-blue-text);
	outline-offset: 3px;
}

.uls-wms-card__media {
	display: block;
	aspect-ratio: 1.5;
	overflow: hidden;
	background: #141c32;
}

.uls-wms-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.uls-wms-card:hover .uls-wms-card__media img {
	transform: scale(1.045);
}

.uls-wms-card__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 70px;
	padding: 18px 20px;
}

.uls-wms-card__title {
	font-family: var(--uls-font-display);
	font-size: var(--uls-fs-h5);
	font-weight: var(--uls-fw-heading);
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.uls-wms-card__arrow {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--uls-blue-text);
	transition: transform 0.25s ease;
}

.uls-wms-card:hover .uls-wms-card__arrow,
.uls-wms-card:focus-visible .uls-wms-card__arrow {
	transform: translate(2px, -2px);
}

/*
 * The description lives in the card's wrapper until the dialog takes it: it
 * belongs to this card (so it travels with it through the admin's repeater),
 * but it must not be on screen at rest.
 */
.uls-wms-card__source {
	display: none;
}

/* ----------------------------------------------------------- footnote ---- */
.uls-wms-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: clamp(24px, 3vw, 34px);
	color: var(--uls-muted-2);
	font-size: var(--uls-fs-micro);
	text-align: center;
}

.uls-wms-note::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--uls-blue-soft);
	box-shadow: 0 0 14px var(--uls-blue-soft);
}

/* ------------------------------------------------------------- modal ---- */
.uls-wms-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
}

.uls-wms-modal[hidden] {
	display: none !important;
}

/*
 * Scroll lock. The page keeps its scroll position: only the overflow changes,
 * which is why the dialog can return the visitor to the exact card they left.
 */
body.uls-wms-locked {
	overflow: hidden;
}

.uls-wms-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 6, 23, 0.72);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 0;
}

.uls-wms-modal__dialog {
	position: fixed;
	inset: 0;
	pointer-events: none;
	outline: none;
}

.uls-wms-modal__photo,
.uls-wms-modal__panel {
	position: absolute;
	pointer-events: auto;
	overflow: hidden;
	will-change: left, top, width, height, border-radius;
}

.uls-wms-modal__photo {
	z-index: 2;
	background: #182139;
	box-shadow: 0 18px 70px rgba(0, 0, 0, 0.35);
}

.uls-wms-modal__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.uls-wms-modal__panel {
	z-index: 1;
	display: flex;
	align-items: center;
	background: linear-gradient(140deg, #0d142c, #0b1023);
	border: 1px solid rgba(53, 74, 125, 0.9);
	box-shadow: 0 25px 90px rgba(0, 0, 0, 0.4);
}

.uls-wms-modal__copy {
	width: 100%;
	max-height: 100%;
	padding: clamp(26px, 3vw, 48px);
	overflow-y: auto;
	opacity: 0;
}

.uls-wms-modal__eyebrow {
	font-size: var(--uls-fs-2xs);
	letter-spacing: 0.1em;
}

.uls-wms-modal__title {
	margin: 18px 0 22px;
	font-size: var(--uls-fs-h2);
	line-height: 1.12;
	letter-spacing: -0.04em;
	overflow-wrap: anywhere;
}

.uls-wms-modal__text p {
	margin: 0 0 16px;
	color: #b8c1d6;
	font-size: var(--uls-fs-body);
	line-height: 1.7;
}

.uls-wms-modal__text p:last-child {
	margin-bottom: 0;
}

.uls-wms-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	color: #9bb0ff;
	background: #101a35;
	border: 1px solid rgba(141, 166, 255, 0.35);
	border-radius: 50%;
	opacity: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.uls-wms-modal__close:hover,
.uls-wms-modal__close:focus-visible {
	color: #ffffff;
	background: #223156;
}

.uls-wms-modal__close:focus-visible {
	outline: 2px solid var(--uls-blue-text);
	outline-offset: 3px;
}

/* -------------------------------------------------------- responsive ---- */
@media (max-width: 1200px) {
	.uls-wms-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Two columns survive on a phone: the photographs are what the block is for,
 * and one column would turn eight cards into eight screens of scrolling. The
 * label and the radius shrink instead.
 */
@media (max-width: 640px) {
	.uls-wms-grid {
		gap: 14px;
	}

	.uls-wms-card {
		border-radius: 13px;
	}

	.uls-wms-card__label {
		min-height: 64px;
		padding: 14px 12px;
	}

	.uls-wms-card__title {
		font-size: var(--uls-fs-micro);
	}

	.uls-wms-card__arrow svg {
		width: 16px;
		height: 16px;
	}

	.uls-wms-modal__copy {
		padding: 26px 24px;
	}

	.uls-wms-modal__text p {
		font-size: var(--uls-fs-xs);
		line-height: 1.65;
	}

	.uls-wms-modal__title {
		margin: 12px 0 16px;
		font-size: var(--uls-fs-h2);
	}

	.uls-wms-modal__eyebrow {
		font-size: var(--uls-fs-2xs);
	}

	.uls-wms-modal__close {
		top: 10px;
		right: 10px;
		width: 32px;
		height: 32px;
	}

	.uls-wms-note {
		font-size: var(--uls-fs-2xs);
	}
}

/*
 * The script reads this preference itself and applies the last frame of every
 * stage at once; the hover transitions are dropped here so the cards do not
 * drift under a mouse either.
 */
@media (prefers-reduced-motion: reduce) {
	.uls-wms-card,
	.uls-wms-card__media img,
	.uls-wms-card__arrow {
		transition: none;
	}
}