/* ==========================================================================
 * cm-team-ops.css - shared Team & Operations partial (WS22, CHG-20261005-WS22)
 * Markup: templates/cmsmart/layouts/partials/cm-team-ops.php
 * Visual language copied from views/hub/css/hub.css (expert cards, rhythm, stack), scoped to
 * .cm-teamops__*. Tokens only. Cards are inset and rounded; never full-bleed; the section
 * keeps >= --sp-48 of air above and below so it never sits on a background seam.
 * ========================================================================== */

.cm-teamops {
	--tp-y: var(--sp-48);
	padding-block: var(--tp-y);
	box-sizing: border-box;
}
.cm-teamops--full { --tp-y: var(--lx-section-y-tight, var(--sp-64)); }
.cm-teamops *, .cm-teamops *::before, .cm-teamops *::after { box-sizing: border-box; }
.cm-teamops__wrap {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad, var(--sp-16));
}
.cm-teamops__card {
	padding: clamp(var(--sp-20), 4vw, var(--sp-48));
	border: 1px solid var(--c-lx-line);
	border-radius: var(--lx-radius, var(--r-20));
	background: var(--color-surface);
	box-shadow: var(--shadow-lx-1);
}
.cm-teamops--full .cm-teamops__card { background: var(--c-lx-ivory); }
.cm-teamops__card--plain { box-shadow: none; padding-block: var(--sp-24); }
.cm-teamops ul, .cm-teamops ol { list-style: none; margin: 0; padding: 0; }
.cm-teamops li { margin: 0; }

.cm-teamops__eyebrow {
	margin: 0 0 var(--sp-8);
	font-family: var(--font-heading);
	font-size: var(--fs-13);
	font-weight: var(--fw-semibold);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-brand-600);
}

/* ---------- full ---------- */
.cm-teamops__head { max-width: var(--lx-head-max, 760px); margin: 0 auto var(--sp-32); text-align: center; }
.cm-teamops__title { margin: 0; color: var(--color-heading); text-wrap: balance; }
.cm-teamops__lede { margin: var(--sp-12) 0 0; color: var(--color-text-muted); }

.cm-teamops__roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
.cm-teamops__role {
	--pc-ink: var(--c-surface-0);
	--pc-sub: var(--c-accent-100);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--r-16);
	background: var(--c-navy-500);
	box-shadow: var(--shadow-2);
	transition: transform .25s ease, box-shadow .25s ease;
}
.cm-teamops__role:hover { transform: translateY(calc(-1 * var(--sp-4))); box-shadow: var(--shadow-3); }
.cm-teamops__role-media { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-navy-500); }
.cm-teamops__role-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; transform-origin: 50% 35%; }
.cm-teamops__role:hover .cm-teamops__role-media img { transform: scale(1.04); }
.cm-teamops__role-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 86%, var(--c-navy-500));
	pointer-events: none;
}
.cm-teamops__role-body { position: relative; flex: 1 1 auto; margin-top: calc(-1 * var(--sp-24)); padding: 0 var(--sp-12) var(--sp-12); color: var(--pc-ink); }
.cm-teamops__role-title { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--pc-ink); }
.cm-teamops__role-line { margin: var(--sp-4) 0 0; font-size: var(--fs-12); line-height: 1.45; color: var(--pc-sub); }
.cm-teamops__chips { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-12); }
.cm-teamops__chips li {
	padding: var(--sp-2) var(--sp-8);
	font-size: var(--fs-11);
	border: 1px solid var(--c-navy-300);
	border-radius: var(--r-pill);
	background: var(--c-navy-overlay-soft);
	color: var(--pc-ink);
}
.cm-teamops__chips li:nth-child(n+3) { display: none; }

.cm-teamops__label {
	margin: var(--sp-40) 0 var(--sp-16);
	font-size: var(--fs-14);
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
	text-align: center;
}
.cm-teamops__rhythm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
.cm-teamops__step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--sp-10);
	align-items: start;
	align-content: start;
	padding: var(--sp-12);
	border: 1px solid var(--c-lx-line);
	border-radius: var(--r-12);
	background: var(--color-surface);
}
.cm-teamops__num {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sp-32);
	height: var(--sp-32);
	border-radius: var(--r-circle);
	background: var(--c-navy-500);
	color: var(--c-surface-0);
	font-size: var(--fs-14);
	font-weight: var(--fw-semibold);
}
.cm-teamops__step-name { font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--color-heading); }
.cm-teamops__step-text { font-size: var(--fs-12); line-height: 1.45; color: var(--color-text-muted); }
.cm-teamops__step-text { margin-top: var(--sp-2); }

.cm-teamops__stack { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); }
.cm-teamops__tech {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	padding: var(--sp-8) var(--sp-12);
	border: 1px solid var(--c-lx-line);
	border-radius: var(--r-pill);
	background: var(--color-surface);
	font-size: var(--fs-13);
	font-weight: var(--fw-medium, 500);
	color: var(--color-heading);
}
.cm-teamops__tech img { display: block; width: var(--sp-24); height: var(--sp-24); object-fit: contain; }
.cm-teamops__note { margin: var(--sp-16) 0 0; font-size: var(--fs-12); text-align: center; color: var(--color-text-muted); }
.cm-teamops__stack-title { margin: 0 0 var(--sp-16); font-size: var(--fs-16); text-align: center; color: var(--color-heading); }

/* ---------- actions (shared) ---------- */
.cm-teamops__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16) var(--sp-24); }
.cm-teamops__actions--center { justify-content: center; margin-top: var(--sp-32); }
.cm-teamops__link { font-weight: var(--fw-semibold); color: var(--c-navy-500); text-decoration: none; }
.cm-teamops__link:hover { color: var(--c-brand-600); text-decoration: underline; }

/* ---------- compact ---------- */
.cm-teamops--compact .cm-teamops__wrap { container-type: inline-size; container-name: teamops; }
.cm-teamops--compact .cm-teamops__card { display: grid; gap: var(--sp-20); padding: clamp(var(--sp-16), 3vw, var(--sp-32)); }
.cm-teamops__c-title { margin: 0; font-size: var(--fs-18); line-height: 1.3; color: var(--color-heading); text-wrap: balance; }
.cm-teamops__faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
.cm-teamops__face {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--r-12);
	background: var(--c-navy-500);
	box-shadow: var(--shadow-1);
}
.cm-teamops__face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.cm-teamops__face::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 34%;
	background: linear-gradient(180deg, transparent, var(--c-navy-500));
	pointer-events: none;
}
.cm-teamops__face span {
	position: absolute;
	z-index: 1;
	left: var(--sp-8);
	right: var(--sp-8);
	bottom: var(--sp-8);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: var(--fs-12);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	color: var(--c-surface-0);
}
.cm-teamops__bullets { display: grid; gap: var(--sp-8); }
.cm-teamops__bullets li {
	position: relative;
	padding-left: var(--sp-24);
	font-size: var(--fs-14);
	line-height: 1.4;
	color: var(--color-text);
}
.cm-teamops__bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .1em;
	width: var(--sp-16);
	height: var(--sp-16);
	background: var(--c-brand-500);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@container teamops (min-width: 520px) {
	.cm-teamops__faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container teamops (min-width: 900px) {
	.cm-teamops--compact .cm-teamops__card {
		grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
		grid-template-areas: "head head" "faces side";
		column-gap: var(--sp-40);
		align-items: center;
	}
	.cm-teamops__c-head { grid-area: head; }
	.cm-teamops__faces { grid-area: faces; }
	.cm-teamops__bullets, .cm-teamops--compact .cm-teamops__actions { grid-column: 2; }
	.cm-teamops__bullets { grid-row: 2; align-self: start; gap: var(--sp-12); }
	.cm-teamops--compact .cm-teamops__actions { grid-row: 2; align-self: end; }
}

@media (min-width: 768px) {
	.cm-teamops__roles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-20); }
	.cm-teamops__role-body { padding: 0 var(--sp-16) var(--sp-16); }
	.cm-teamops__role-title { font-size: var(--fs-16); }
	.cm-teamops__role-line { font-size: var(--fs-13); }
	.cm-teamops__chips li { font-size: var(--fs-12); }
	.cm-teamops__chips li:nth-child(n+3) { display: list-item; }
	.cm-teamops__rhythm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.cm-teamops__roles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cm-teamops__rhythm { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-10); }
	.cm-teamops__step { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-8); }
	.cm-teamops__num { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.cm-teamops__role, .cm-teamops__role-media img { transition: none; }
	.cm-teamops__role:hover, .cm-teamops__role:hover .cm-teamops__role-media img { transform: none; }
}