/*
 * AH Photo Mosaic: an editorial grid of real photos (first one large) or a sideways strip.
 * Captions sit on the photo as dark pills. Links open the full image (lightbox with JS).
 */

.ah-mosaic {
	position: relative;
	font-family: var(--ah-f-body);
}
.ah-mosaic .ah-mosaic__list { margin: 0; padding: 0; list-style: none; }
.ah-mosaic .ah-mosaic__item { min-width: 0; }
.ah-mosaic .ah-mosaic__fig {
	position: relative;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--ah-line);
	border-radius: 18px;
	background: var(--ah-navy);
	box-shadow: 0 30px 60px -48px rgba(9, 18, 42, .7);
}
.ah-mosaic.ah-on-dark .ah-mosaic__fig { border-color: var(--ah-line-navy); }
.ah-mosaic .ah-mosaic__a { display: block; height: 100%; color: inherit; }
.ah-mosaic .ah-mosaic__a:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: -4px; border-radius: 18px; }
.ah-mosaic .ah-mosaic__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
	border-radius: 0;
	transition: transform 1.1s var(--ah-ease), filter .6s var(--ah-ease);
}
.ah-mosaic .ah-mosaic__a:hover .ah-mosaic__img,
.ah-mosaic .ah-mosaic__a:focus-visible .ah-mosaic__img { transform: scale(1.05); }
.ah-mosaic .ah-mosaic__cap {
	position: absolute;
	bottom: 12px;
	inset-inline-start: 12px;
	max-width: calc(100% - 24px);
	overflow: hidden;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(9, 18, 42, .86);
	color: var(--ah-on-navy);
	font-size: .8rem;
	line-height: 1.6;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
}
.ah-mosaic .ah-mosaic__note {
	position: absolute;
	z-index: 2;
	top: -26px;
	inset-inline-end: 4%;
	margin: 0;
	color: var(--ah-ink-gold);
	font-size: 1.35rem;
	transform: rotate(-3deg);
}
.ah-mosaic.ah-on-dark .ah-mosaic__note { color: var(--ah-gold-hi); }
.ah-mosaic .ah-mosaic__empty { padding: 24px; border: 1px dashed var(--ah-line); border-radius: 14px; color: var(--ah-muted); text-align: center; }

/* ---------- mosaic: 4 columns, first photo 2×2, dense packing ---------- */
.ah-mosaic--mosaic .ah-mosaic__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(150px, 15vw, 220px);
	grid-auto-flow: dense;
	gap: 14px;
}
.ah-mosaic--mosaic .ah-mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
.ah-mosaic--mosaic .ah-mosaic__item:nth-child(6n + 4) { grid-row: span 2; }
.ah-mosaic--mosaic .ah-mosaic__item:nth-child(6n + 5) { grid-column: span 2; }
/* small sets keep their rows full */
.ah-mosaic--n1 .ah-mosaic__list { grid-template-columns: minmax(0, 1fr); grid-auto-rows: clamp(240px, 36vw, 460px); }
.ah-mosaic--n2 .ah-mosaic__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 26vw, 360px); }
.ah-mosaic--n2 .ah-mosaic__item:first-child { grid-column: auto; grid-row: auto; }
.ah-mosaic--n3 .ah-mosaic__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ah-mosaic--n3 .ah-mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
.ah-mosaic--n3 .ah-mosaic__item:not(:first-child) { grid-column: span 1; grid-row: span 1; }

/* ---------- strip: sideways, snap, the page never scrolls ---------- */
.ah-mosaic--strip .ah-mosaic__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(220px, 24vw, 320px);
	gap: 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-block-end: 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--ah-gold) transparent;
}
.ah-mosaic--strip .ah-mosaic__list:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 6px; border-radius: 10px; }
.ah-mosaic--strip .ah-mosaic__item { aspect-ratio: 4 / 5; scroll-snap-align: start; }

/* ---------- reveal stagger ---------- */
.ah-motion .ah-mosaic .ah-mosaic__item.ah-rv--up { transition-delay: calc(min(var(--i, 0), 8) * 70ms); }

@media (max-width: 1024px) {
	.ah-mosaic--mosaic .ah-mosaic__list { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 22vw, 200px); }
	.ah-mosaic--mosaic .ah-mosaic__item:nth-child(6n + 5) { grid-column: span 1; }
}
@media (max-width: 767px) {
	.ah-mosaic--mosaic .ah-mosaic__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
	.ah-mosaic--mosaic .ah-mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
	.ah-mosaic--mosaic .ah-mosaic__item:nth-child(6n + 4) { grid-row: span 1; }
	.ah-mosaic--n1 .ah-mosaic__list, .ah-mosaic--n2 .ah-mosaic__list { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
	.ah-mosaic--strip .ah-mosaic__list { grid-auto-columns: 72%; }
	.ah-mosaic .ah-mosaic__note { position: static; display: block; margin-block-end: 8px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ah-mosaic .ah-mosaic__img { transition: none; }
	.ah-mosaic .ah-mosaic__a:hover .ah-mosaic__img { transform: none; }
}