/* cm-team-gallery - see inc/cm-pages.php.
 *
 * Team member photo wall (single-team.php, the "<Name>'s gallery" block) and
 * its lightbox. Enqueued on singular team only.
 *
 * Namespace .cm-tg-*. The old .cm-team-gallery class is no longer printed, so
 * the grid rules for it in cm-interior.css (a hard-coded <link> printed after
 * this sheet) have nothing to match and cannot fight this one.
 *
 * Photos are never cropped. Layout is chosen in PHP from the photo count:
 *   .cm-tg--single  1 photo, framed at a sensible height
 *   .cm-tg--row     2-4 photos, one justified row (never wraps): equal heights,
 *                   each width set by the photo's own ratio (--cm-tg-r =
 *                   width / height); 3-4 split into two justified lines below
 *                   a 420px-wide block (.cm-tg--row-fold)
 *   .cm-tg--wall    5+ photos, masonry via CSS columns: 2 → 3 → 4 columns by
 *                   the block's own width (container queries), so the wall
 *                   fits the column it sits in at every viewport.
 */

/* --------------------------------------------------------------- heading */
.cm-tg-block { container-type: inline-size; }

.cm-tg-block .cm-tg-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 16px;
	margin-bottom: 18px;
}

.cm-tg-block .cm-tg-head .cm-team-block-title { margin: 0; }

.cm-tg-block .cm-tg-count {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--cm26-stone); /* 5.49:1 on paper */
}

/* ------------------------------------------------------------------ list */
.cm-tg-block .cm-tg {
	--cm-tg-gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (min-width: 560px) {
	.cm-tg-block .cm-tg {
		--cm-tg-gap: 14px;
	}
}

.cm-tg-block .cm-tg-item { margin: 0; padding: 0; }
.cm-tg-block .cm-tg-item::marker { content: none; }

/* Masonry wall. padding (not margin) carries the vertical gutter: margins are
   truncated at column breaks in some engines, padding is not. */
.cm-tg-block .cm-tg--wall {
	columns: 2;
	column-gap: var(--cm-tg-gap);
}

@container (min-width: 560px) { .cm-tg-block .cm-tg--wall { columns: 3; } }
@container (min-width: 1000px) { .cm-tg-block .cm-tg--wall { columns: 4; } }

.cm-tg-block .cm-tg--wall .cm-tg-item {
	padding-bottom: var(--cm-tg-gap);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

/* Justified row: every 2-4 set stays on ONE line at any width. Each photo
   grows from 0 in proportion to its ratio, so widths divide by ratio and all
   heights match (height = (row width - gaps) / sum of ratios). The list's own
   max-width caps that height at --cm-tg-row-max so two portraits in a wide
   column do not swell to 500px+ tall. */
.cm-tg-block .cm-tg--row {
	--cm-tg-row-max: 300px;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--cm-tg-gap);
	max-width: calc(var(--cm-tg-sum, 3) * var(--cm-tg-row-max) + (var(--cm-tg-n, 3) - 1) * var(--cm-tg-gap));
}

@container (min-width: 1000px) {
	.cm-tg-block .cm-tg--row { --cm-tg-row-max: 360px; }
}

.cm-tg-block .cm-tg--row .cm-tg-item {
	flex: var(--cm-tg-r) 1 0;
	min-width: 0;
}

.cm-tg-block .cm-tg--row .cm-tg-img { aspect-ratio: var(--cm-tg-r); }

/* 3-4 photos in a narrow column would shrink to thumbnails on one line:
   split them into two justified lines (photos 1-2, then 3-4), each still
   equal-height and full-width. A zero-height, full-width ::before ordered
   between them forces the break; row-gap is 0 so it adds no extra space,
   and the second line carries the gutter as margin-top. A lone third photo
   spans the column as a deliberate closing image, not an orphan. */
@container (max-width: 419px) {
	.cm-tg-block .cm-tg--row-fold {
		flex-wrap: wrap;
		row-gap: 0;
		max-width: none;
	}

	.cm-tg-block .cm-tg--row-fold::before {
		content: "";
		order: 2;
		flex: 0 0 100%;
		height: 0;
	}

	.cm-tg-block .cm-tg--row-fold .cm-tg-item:nth-child(-n+2) { order: 1; }

	.cm-tg-block .cm-tg--row-fold .cm-tg-item:nth-child(n+3) {
		order: 3;
		margin-top: var(--cm-tg-gap);
	}
}

/* One photo: never wider than the column, never taller than ~460px. */
.cm-tg-block .cm-tg--single .cm-tg-item {
	max-width: min(100%, calc(var(--cm-tg-r) * 460px));
}

/* ----------------------------------------------------------------- tile */
.cm-tg-block .cm-tg-figure { margin: 0; }

.cm-tg-block .cm-tg-link {
	position: relative;
	display: block;
	border-radius: var(--cm26-radius);
	color: inherit;
	text-decoration: none;
	transition: box-shadow .35s var(--cm26-ease);
}

.cm-tg-block .cm-tg-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	background: var(--cm26-sand);
}

/* Hairline drawn over the photo so light edges still read as a tile. */
.cm-tg-block .cm-tg-media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(38, 36, 35, .08);
	pointer-events: none;
}

.cm-tg-block .cm-tg-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	opacity: 1;
	object-fit: cover; /* the box already has the photo's ratio — nothing is cut */
	transition: transform .6s var(--cm26-ease);
}

/* Coral tab — the team-portrait signature — grows in on hover / focus. */
.cm-tg-block .cm-tg-link::after {
	content: "";
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 32px;
	height: 5px;
	border-bottom-left-radius: var(--cm26-radius);
	background: var(--cm26-brand);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s var(--cm26-ease);
	pointer-events: none;
}

.cm-tg-block .cm-tg-zoom {
	position: absolute;
	z-index: 2;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(251, 248, 245, .94);
	color: var(--cm26-ink);
	box-shadow: 0 4px 12px -4px rgba(38, 36, 35, .35);
	opacity: 0;
	transform: scale(.85);
	transition: opacity .25s ease, transform .35s var(--cm26-ease);
	pointer-events: none;
}

.cm-tg-block .cm-tg-link:hover,
.cm-tg-block .cm-tg-link:focus-visible { box-shadow: var(--cm26-shadow-lift); }

.cm-tg-block .cm-tg-link:hover .cm-tg-img,
.cm-tg-block .cm-tg-link:focus-visible .cm-tg-img { transform: scale(1.035); }

.cm-tg-block .cm-tg-link:hover::after,
.cm-tg-block .cm-tg-link:focus-visible::after { transform: scaleX(1); }

.cm-tg-block .cm-tg-link:hover .cm-tg-zoom,
.cm-tg-block .cm-tg-link:focus-visible .cm-tg-zoom {
	opacity: 1;
	transform: scale(1);
}

/* Focus ring drawn INSIDE the tile: column boxes clip anything that sticks
   out above a column's first photo, so an outset outline would lose its top
   edge. Brand-ink ring + paper inner ring reads on any photo (3:1+ either way). */
.cm-tg-block .cm-tg-link:focus-visible { outline: none; }

.cm-tg-block .cm-tg-link:focus-visible .cm-tg-media::after {
	z-index: 3;
	box-shadow: inset 0 0 0 3px var(--cm26-brand-ink), inset 0 0 0 5px var(--cm26-paper);
}

.cm-tg-block .cm-tg-caption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cm26-stone);
}

/* ------------------------------------------------- fold a long wall (JS) */
.cm-tg-block .cm-tg-clip { position: relative; }

.cm-tg-block .cm-tg-clip[data-collapsed] {
	max-height: var(--cm-tg-cut, 760px);
	overflow: hidden;
}

.cm-tg-block .cm-tg-clip[data-collapsed]::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 180px;
	background: linear-gradient(to bottom, rgba(251, 248, 245, 0), var(--cm26-paper) 88%);
	pointer-events: none;
}


.cm-tg-clip + .cm-tg-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.cm-tg-clip + .cm-tg-more svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- lightbox */
html.cm-tg-locked { overflow: hidden; }

dialog.cm-tg-dialog {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cm26-dark-primary);
	overflow: hidden;
}

dialog.cm-tg-dialog::backdrop { background: rgba(30, 28, 27, .96); }

dialog.cm-tg-dialog[open] { display: block; }

.cm-tg-dialog .cm-tg-dialog-inner {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: 12px;
	height: 100%;
	padding:
		max(14px, env(safe-area-inset-top, 0px))
		var(--cm26-gutter)
		max(14px, env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
}

.cm-tg-dialog .cm-tg-bar,
.cm-tg-dialog .cm-tg-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
}

.cm-tg-dialog .cm-tg-dialog-title {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--cm26-dark-primary);
}

.cm-tg-dialog .cm-tg-stage {
	display: grid;
	place-items: center;
	min-height: 0;
	margin: 0;
	touch-action: pan-y;
}

.cm-tg-dialog .cm-tg-stage-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--cm26-radius);
	background: var(--cm26-dark-panel);
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
	object-fit: contain;
	opacity: 0;
	user-select: none;
	-webkit-user-drag: none;
}

.cm-tg-dialog .cm-tg-stage-img.is-ready { opacity: 1; }

.cm-tg-dialog .cm-tg-status {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cm26-dark-secondary); /* 7.61:1 on charcoal */
}

.cm-tg-dialog .cm-tg-num {
	display: block;
	font-weight: 600;
	color: var(--cm26-dark-primary);
}

.cm-tg-dialog .cm-tg-cap {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.cm-tg-dialog .cm-tg-cap[hidden] { display: none; }

/* Paper discs on the dark ground: 14:1 icon contrast, 48px targets. */
.cm-tg-dialog .cm-tg-btn {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cm26-paper);
	color: var(--cm26-ink);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s var(--cm26-ease);
}

.cm-tg-dialog .cm-tg-btn[hidden] { display: none; }

.cm-tg-dialog .cm-tg-btn:hover {
	background: #ffffff;
	transform: scale(1.06);
}

.cm-tg-dialog .cm-tg-btn:focus-visible {
	outline: 3px solid var(--cm26-dark-link); /* 5.40:1 on charcoal */
	outline-offset: 3px;
}

.cm-tg-dialog .cm-tg-btn svg { display: block; }

@media (prefers-reduced-motion: no-preference) {
	.cm-tg-dialog .cm-tg-stage-img { transition: opacity .25s ease; }
	dialog.cm-tg-dialog[open] { animation: cm-tg-in .22s ease-out; }
}

@keyframes cm-tg-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cm-tg-block .cm-tg-link,
	.cm-tg-block .cm-tg-img,
	.cm-tg-block .cm-tg-link::after,
	.cm-tg-block .cm-tg-zoom,
	.cm-tg-dialog .cm-tg-btn { transition: none; }

	.cm-tg-block .cm-tg-link:hover .cm-tg-img,
	.cm-tg-block .cm-tg-link:focus-visible .cm-tg-img,
	.cm-tg-dialog .cm-tg-btn:hover { transform: none; }
}

/* Touch screens have no hover: show the expand hint so the tiles read as tappable. */
@media (hover: none) {
	.cm-tg-block .cm-tg-zoom {
		width: 30px;
		height: 30px;
		opacity: .92;
		transform: none;
	}
}

/* Windows High Contrast drops box-shadows: give the tile ring back as an outline. */
@media (forced-colors: active) {
	.cm-tg-block .cm-tg-link:focus-visible {
		outline: 3px solid CanvasText;
		outline-offset: -3px;
	}
}