/*
 * Project Snapshots library (/project-snapshots/) — page assets.
 *
 * Enqueued for template-project-snapshots.php only (see
 * iss_enqueue_project_snapshots_hub_assets() in functions.php), declaring
 * `iss-global` as a dependency so it lands after it.
 *
 * WHAT IS HERE AND WHAT DELIBERATELY IS NOT. Only the compositions the V1
 * handoff introduces: the hero's proof chips and four-step panel, the split
 * featured card, the snapshot card grid and its filters, and the Common
 * Foundation shell. Everything the site already has a component for is reused
 * rather than redrawn — `.iss-detail-hero` (the hero ground and its full-bleed
 * geometry), `.iss-cap-nav` (the whole docked contextual shelf), `.iss-kicker`,
 * `.iss-lead`, `.iss-sec-head`, `.iss-btn*`,
 * `.iss-cta-band.iss-cta-band-split` (the closing band), `.iss-reveal`. If a rule below starts being wanted by a second page, it
 * belongs in iss-global.css instead of being copied.
 *
 * Values are the handoff's own, lifted rather than approximated: its embedded
 * stylesheet uses the same --iss-* token names this site does, so every colour
 * here resolves to the mockup's exact hex. Two deliberate divergences, both
 * site-consistency rather than taste:
 *
 *   - Content width is the site's `--iss-max` (1120px) via `.iss-wrap`, not the
 *     mockup's 1180px. Every other page on the site is 1120, and this one
 *     sitting 60px wider reads as a misalignment on any journey through it.
 *   - The hero gradient and its radial washes come from `.iss-detail-hero`
 *     rather than being restated here. Same design; see the template's note.
 *
 * Selectors carry `.iss-page` so specificity matches iss-global's and the
 * override order is the load order, not a specificity race.
 */

/* ============================================================
   §1  Hero — proof chips and the "What you'll see" panel
   ============================================================ */

/*
 * The mockup's 1.22fr/.78fr. `.iss-hero-2col` supplies the grid itself and the
 * <980px stack; this only retunes the ratio, because the right-hand panel here
 * is a four-row list rather than the taller infographic cards that column
 * usually holds.
 */
.iss-page .iss-pshub-hero-grid {
	grid-template-columns: 1.22fr .78fr;
	gap: clamp(34px, 4vw, 56px);
	align-items: center;
}

.iss-page .iss-pshub-hero .iss-lead { max-width: 720px; }
/* Cyan, per the Clean HTML — see the matching note in css/use-cases.css. */
.iss-page .iss-pshub-hero .iss-kicker { color: var(--iss-cyan); }
.iss-page .iss-pshub-hero .iss-btn-row { margin-top: 28px; }

.iss-page .iss-pshub-chips {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
	max-width: 720px;
}
.iss-page .iss-pshub-chips li {
	padding: 13px 14px;
	border: 1px solid rgba(143, 226, 245, .24);
	background: rgba(255, 255, 255, .055);
	border-radius: 14px;
	color: #e7f4fb;
	font-size: 13px;
	line-height: 1.45;
}
.iss-page .iss-pshub-chips strong {
	display: block;
	color: #fff;
	font-size: 15px;
	margin-bottom: 2px;
}

.iss-page .iss-pshub-panel {
	border: 1px solid rgba(143, 226, 245, .24);
	background: rgba(255, 255, 255, .06);
	border-radius: 24px;
	padding: 22px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.iss-page .iss-pshub-panel-label {
	margin: 0 0 14px;
	color: var(--iss-sky);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.iss-page .iss-pshub-steps {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Counters are on the rendered 01…04, not on the <ol>, so the numbers are
	   the handoff's own zero-padded form rather than a browser default. */
	counter-reset: none;
}
.iss-page .iss-pshub-steps li {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 13px;
	border-radius: 14px;
	background: rgba(7, 26, 43, .44);
	border: 1px solid rgba(255, 255, 255, .08);
}
.iss-page .iss-pshub-step-n {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(57, 195, 230, .14);
	border: 1px solid rgba(57, 195, 230, .28);
	color: var(--iss-sky);
	font-family: var(--iss-mono);
	font-weight: 800;
	font-size: 12px;
}
.iss-page .iss-pshub-step-copy b { display: block; font-size: 14px; color: #fff; }
.iss-page .iss-pshub-step-copy span { display: block; color: #bcd2df; font-size: 12px; margin-top: 2px; line-height: 1.45; }

/* ============================================================
   §2  Contextual navigation — nothing but anchor offsets
   ============================================================ */

/*
 * The shelf is `.iss-cap-nav` (iss-global.css §24a), reused untouched: its white
 * card, its JS-driven fixed dock under the MEASURED global header, its scrolling
 * links row and its retire-before-the-footer behaviour. It sits where every
 * other page on the site puts it — the hero's immediate next sibling, overlapping
 * the hero's bottom edge by 36px — which is also where this handoff draws it, so
 * there is nothing to override.
 *
 * Worth knowing if you are tempted to hand-roll one: `position: sticky` does not
 * work on this site at all. `body` carries `overflow: hidden auto`, which makes
 * body the sticky containing block, so a sticky shelf silently never sticks.
 *
 * Anchored sections clear the docked shelf so a jump does not land with the
 * heading underneath it.
 */
.iss-page .iss-pshub-featured,
.iss-page .iss-pshub-gallery,
.iss-page .iss-pshub-platform,
.iss-pshub #demo { scroll-margin-top: 128px; }

/* ============================================================
   §3  Featured snapshot
   ============================================================ */

/*
 * FIRST, UNDO THE7. The handoff's anchor for this section is `#featured`, and
 * the parent theme's style.css carries a rule on that exact id:
 *
 *     #featured { position: relative; float: left; line-height: normal;
 *                 margin-left: 150px; }
 *
 * It is an ID selector, specificity (1,0,0), so it beats every class-scoped
 * rule in this file. The section floated out of the page: 1050px wide instead
 * of 1200, offset 150px right, and the gallery below it laid out beside the
 * float and ran off the right edge of the window. On a phone it looked fine,
 * because a float is irrelevant once the card is full width — so this was
 * desktop-only, and invisible to every assertion that reads text or counts
 * elements rather than measuring geometry.
 *
 * Neutralised at (1,1,0) rather than renaming the anchor: the anchor is in the
 * handoff's click-map, and the contextual shelf, the SEO trail and any link ISS
 * writes by hand all point at `#featured`.
 *
 * The general lesson, which cost an hour: THIS THEME STYLES BARE IDS. Any
 * section id that happens to match one of The7's — `featured` was the only hit
 * across both new pages, but `#content`, `#header`, `#sidebar`, `#footer` and
 * `#main` are all live in that stylesheet — silently inherits its layout. Check
 * a new anchor against the parent theme before shipping it.
 */
.iss-page .iss-pshub-featured#featured {
	float: none;
	margin-left: 0;
	line-height: inherit;
}

.iss-page .iss-pshub-feat-card {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	background: var(--iss-card);
	border: 1px solid var(--iss-line-strong);
	border-radius: 26px;
	overflow: hidden;
	box-shadow: 0 18px 45px rgba(10, 41, 64, .10);
}
.iss-page .iss-pshub-feat-visual {
	position: relative;
	overflow: hidden;
	min-height: 430px;
	padding: 34px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #fff;
	background: linear-gradient(145deg, var(--iss-navy-2), var(--iss-navy-3));
}
.iss-page .iss-pshub-feat-visual::after {
	content: "";
	position: absolute;
	right: -110px;
	bottom: -130px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 60px solid rgba(57, 195, 230, .09);
}
.iss-page .iss-pshub-feat-tag {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-self: flex-start;
	padding: 7px 10px;
	border-radius: 999px;
	background: rgba(57, 195, 230, .12);
	border: 1px solid rgba(57, 195, 230, .28);
	color: var(--iss-sky);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.iss-page .iss-pshub-feat-name { position: relative; z-index: 1; }
.iss-page .iss-pshub-feat-industry {
	color: var(--iss-cyan);
	font-weight: 700;
	font-size: 13px;
	margin: 0 0 10px;
}
.iss-page .iss-pshub-feat-name h3 {
	color: #fff;
	font-size: clamp(26px, 2.8vw, 34px);
	line-height: 1.12;
	letter-spacing: -.035em;
	margin: 0 0 13px;
}
.iss-page .iss-pshub-feat-name p { color: #cfe0ea; max-width: 390px; margin: 0; font-size: 14px; line-height: 1.55; }

.iss-page .iss-pshub-feat-content {
	padding: 38px 38px 34px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.iss-page .iss-pshub-feat-content h2 { font-size: clamp(26px, 3vw, 38px); margin: 12px 0 0; }
.iss-page .iss-pshub-feat-content .iss-lead { margin-top: 16px; color: var(--iss-muted); }

.iss-page .iss-pshub-feat-points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.iss-page .iss-pshub-feat-points li {
	padding: 14px;
	border-radius: 14px;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--iss-navy);
}

.iss-page .iss-pshub-feat-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.iss-page .iss-pshub-feat-pills li {
	display: inline-flex;
	align-items: center;
	padding: 7px 9px;
	border: 1px solid var(--iss-line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--iss-muted);
	font-size: 12px;
	font-weight: 700;
}
.iss-page .iss-pshub-feat-content .iss-btn-row { margin-top: 23px; }

/* ============================================================
   §4  Snapshot gallery — filters and cards
   ============================================================ */

/*
 * Bled to the window edges — the section carries `.iss-bleed` in the template.
 * The white ground and BOTH border rules are the point: the handoff draws this
 * band edge to edge, and a `border-block` that stops at the content column
 * reads as two stray 1120px lines rather than as the band's own edges. See the
 * fuller note in css/use-cases.css.
 */
.iss-page .iss-pshub-gallery {
	background: #fff;
	border-block: 1px solid var(--iss-line);
}

.iss-page .iss-pshub-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 26px;
}
.iss-page .iss-pshub-filter {
	border: 1px solid var(--iss-line-strong);
	background: var(--iss-bg);
	color: var(--iss-muted);
	font: 700 13px/1 var(--iss-sans);
	padding: 9px 13px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.iss-page .iss-pshub-filter:hover,
.iss-page .iss-pshub-filter.is-active {
	background: var(--iss-navy);
	border-color: var(--iss-navy);
	color: #fff;
}
/*
 * Selected state is not colour alone, per the handoff's accessibility note: the
 * active button also carries `aria-pressed="true"` for assistive tech and a
 * heavier ring here for anyone who cannot separate the navy from the grey.
 */
.iss-page .iss-pshub-filter[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(12, 115, 201, .18); }
.iss-page .iss-pshub-filter:focus-visible { outline: 2px solid var(--iss-blue); outline-offset: 2px; }

.iss-page .iss-pshub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.iss-page .iss-pshub-card {
	display: flex;
	flex-direction: column;
	min-height: 350px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line-strong);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(10, 41, 64, .075);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.iss-page .iss-pshub-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(10, 41, 64, .12);
	border-color: #b9cfdf;
}
/* A filtered-out card is hidden outright, not faded — `[hidden]` is what the
   JS toggles, and `display:none` is what keeps it out of the tab order. */
.iss-page .iss-pshub-card[hidden] { display: none; }

.iss-page .iss-pshub-card-top {
	display: block;
	height: 8px;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan));
}
.iss-page .iss-pshub-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px;
}
.iss-page .iss-pshub-card-eyebrow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--iss-blue-dark);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .09em;
	text-transform: uppercase;
}
/*
 * DELIBERATE DIVERGENCE FROM THE CLEAN HTML, and the only one on this page.
 *
 * The mockup gives this span `--iss-muted-2` (#7890a3), which on the card's
 * white ground measures 3.32:1 — under the 4.5:1 that 10px/700 text needs.
 * `--iss-muted` (#607286) is the next token up the same ramp and measures
 * 4.94:1, so it clears AA while staying inside the approved palette rather
 * than inventing a colour.
 *
 * Raised with Danny for Glenn on 2026-09-15 as a design question, since the
 * process category is the one thing on the card that names the workflow. It is
 * fixed here rather than waived because this site has already shipped a green
 * suite over text nobody could read, and `tests/project-snapshots-library.spec.js`
 * measures it. If ISS want the lighter grey back, that is their call to make
 * knowingly — it is one token.
 */
.iss-page .iss-pshub-card-eyebrow span:last-child { color: var(--iss-muted); text-align: right; }
.iss-page .iss-pshub-card h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 12px; }
.iss-page .iss-pshub-card p { font-size: 14px; color: var(--iss-muted); margin: 0; line-height: 1.55; }

.iss-page .iss-pshub-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 18px 0 20px;
	padding: 0;
	list-style: none;
}
.iss-page .iss-pshub-card-tags li {
	font-size: 11px;
	font-weight: 700;
	padding: 6px 8px;
	border-radius: 999px;
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	color: var(--iss-navy);
}

.iss-page .iss-pshub-card-link {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--iss-blue-dark);
	font-weight: 800;
	font-size: 13px;
	border-top: 1px solid var(--iss-line);
	padding-top: 15px;
}
.iss-page .iss-pshub-card-link .iss-arw { font-size: 18px; transition: transform .2s ease; }
.iss-page .iss-pshub-card:hover .iss-pshub-card-link .iss-arw { transform: translateX(3px); }

/* Filter result count for screen readers. Visually hidden but not
   `display:none`, which would stop it being announced at all. */
.iss-page .iss-pshub-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   §5  Common Foundation
   ============================================================ */

.iss-page .iss-pshub-platform-shell {
	display: grid;
	grid-template-columns: .82fr 1.18fr;
	gap: 34px;
	align-items: stretch;
}
.iss-page .iss-pshub-platform-copy {
	padding: 34px;
	border-radius: 22px;
	background: var(--iss-navy);
	color: #fff;
	box-shadow: 0 18px 45px rgba(10, 41, 64, .10);
}
.iss-page .iss-pshub-platform-copy h2 { color: #fff; margin: 0 0 15px; }
.iss-page .iss-pshub-platform-copy .iss-lead { color: #cee0eb; }
/* The kicker's dash follows its own label colour site-wide (iss-global §4);
   this only puts the label on the dark ground's accent. */
.iss-page .iss-pshub-platform-copy .iss-kicker { color: var(--iss-cyan); }
.iss-page .iss-pshub-platform-copy .iss-btn-row { margin-top: 22px; }

.iss-page .iss-pshub-disciplines {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.iss-page .iss-pshub-disciplines li {
	padding: 18px;
	background: #fff;
	border: 1px solid var(--iss-line-strong);
	border-radius: 16px;
}
.iss-page .iss-pshub-disciplines b { display: block; font-size: 14px; color: var(--iss-ink); }
.iss-page .iss-pshub-disciplines span { display: block; color: var(--iss-muted); font-size: 12px; margin-top: 4px; line-height: 1.45; }

/* ============================================================
   §6  Responsive
   ============================================================ */

@media (max-width: 980px) {
	.iss-page .iss-pshub-hero-grid { grid-template-columns: 1fr; }
	.iss-page .iss-pshub-panel { max-width: 680px; }
	.iss-page .iss-pshub-feat-card,
	.iss-page .iss-pshub-platform-shell { grid-template-columns: 1fr; }
	.iss-page .iss-pshub-feat-visual { min-height: 340px; }
	.iss-page .iss-pshub-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.iss-page .iss-pshub-chips,
	.iss-page .iss-pshub-grid,
	.iss-page .iss-pshub-disciplines { grid-template-columns: 1fr; }
	.iss-page .iss-pshub-feat-points { grid-template-columns: 1fr; }
	.iss-page .iss-pshub-feat-content,
	.iss-page .iss-pshub-feat-visual { padding: 26px; }
	.iss-page .iss-pshub-card { min-height: 0; }
	/*
	 * The handoff lets stacked buttons go full width but keeps the HERO's
	 * content-width, so the two CTAs there stay side by side rather than
	 * becoming a pair of full-bleed bars over the gradient.
	 */
	.iss-page .iss-pshub-platform-copy { padding: 26px; }
}