/**
 * css/components/work-type-blocks.css — Website 2.0 case-study reskin
 * (#64)
 *
 * Shared component CSS for the `work_type_content` flexible-content
 * block partials restyled in #64: numbers ("Some Good Results" stats),
 * violet_block ("The Brand's Good" pull-quote), image (full-bleed
 * photo band), gallery / gallery_with_video / video (the "The Work"
 * film carousel + play-pill), related_articles (section wrapper).
 * Reference: docs/Common Good website 2.0/ui_kits/website/
 * work-zespri.html.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

/* ------------------------------------------------------------------ *
 * numbers.php — "Some Good Results" stat band
 * ------------------------------------------------------------------ */

.cg-rstats-section__head {
	color: var( --cg-cream );
	font-weight: 800;
	font-family: var( --font-sans );
	font-size: clamp( 30px, 3.2vw, 55px );
	line-height: 0.96;
	letter-spacing: -1.06px;
}

.cg-rstats {
	margin: 52px 0 0;
	margin-inline: calc( -1 * var( --pad-x ) );
	border-top: var( --hairline ) solid var( --rule-on-dark );
	border-bottom: var( --hairline ) solid var( --rule-on-dark );
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
}

.cg-rstat {
	padding: 42px 44px 46px;
	border-left: var( --hairline ) solid var( --rule-on-dark );
	transition: background-color var( --fade-out ) var( --fade-ease );
}

.cg-rstat:first-child {
	border-left: 0;
	padding-left: var( --pad-x );
}

.cg-rstat:last-child {
	padding-right: var( --pad-x );
}

.cg-rstat:hover {
	background-color: var( --box-hover-ink );
}

.cg-rstat__num {
	display: block;
	font-family: var( --font-sans );
	font-weight: 800;
	font-size: clamp( 46px, 4.2vw, 72px );
	line-height: 0.9;
	letter-spacing: -1.06px;
	color: var( --cg-cream );
}

.cg-rstat__lbl {
	display: block;
	margin-top: 18px;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --cg-grey );
	max-width: 22ch;
}

@media ( max-width: 680px ) {
	.cg-rstats {
		grid-template-columns: 1fr;
	}

	.cg-rstat {
		border-left: 0;
		border-top: var( --hairline ) solid var( --rule-on-dark );
		padding-left: var( --pad-x );
		padding-right: var( --pad-x );
	}

	.cg-rstat:first-child {
		border-top: 0;
	}
}

/* ------------------------------------------------------------------ *
 * violet_block.php — "The Brand's Good" pull-quote
 * ------------------------------------------------------------------ */

.cg-violet-block__label {
	margin-bottom: 0;
}

.cg-violet-block__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 60px;
	margin-top: 38px;
}

.cg-violet-block__quote {
	margin: 0;
	font-family: var( --font-serif );
	font-weight: 300;
	font-style: italic;
	font-size: clamp( 26px, 2.55vw, 36px );
	line-height: 1.25;
	letter-spacing: -1.4px;
	color: var( --cg-cream );
	/* The design caps this at 24ch, which left the quote crunched against the
	   left edge of a 1272px band. Runs the full content width instead; the
	   flex row still holds the client logo out to the right when there is one. */
	max-width: none;
}

.cg-violet-block__quote p {
	margin: 0 0 0.6em;
}

/* The `text` field is an ACF WYSIWYG and the legacy copy is authored with
   heading tags in it (most case studies wrap the pull-quote in an <h2>).
   Without this, the bare `h2` size in css/typography.css renders the quote
   at 60px/700 instead of the designed 36px/300 — inside a 24ch column that
   roughly doubles the band's height. Companion rule per CLAUDE.md: 0,1,1
   beats the bare element selector (0,0,1) regardless of cascade order. */
.cg-violet-block__quote :is( h1, h2, h3, h4, h5, h6 ) {
	margin: 0 0 0.6em;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* `style=quote` blocks author the copy as
   `<blockquote><div><cite class="title">Name, Role</cite></div><p>…</p></blockquote>`.
   The attribution is a real <cite>, so it gets the rust eyebrow treatment
   (matching .cg-eyebrow in css/components/type.css) with the quote in
   italics below it, rather than inheriting the quote's serif and reading as
   just another line of the testimonial. The inner blockquote is stripped of
   its UA margin so the nesting is invisible. */
.cg-violet-block__quote blockquote {
	margin: 0;
	padding: 0;
}

.cg-violet-block__quote cite {
	display: block;
	margin-bottom: 26px;
	font-family: var( --font-sans );
	font-style: normal;
	font-weight: 700;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --accent );
}

.cg-violet-block__quote > :last-child {
	margin-bottom: 0;
}

.cg-violet-block__logo {
	flex: none;
	width: 146px;
	height: auto;
	margin-top: 6px;
}

/* Long-copy variant (see violet_block.php): a testimonial rather than a
   short pull-quote. Steps the size down so a ~400-character quote stays in
   proportion across the full content width. */
.cg-violet-block--long .cg-violet-block__quote {
	font-size: clamp( 22px, 1.9vw, 28px );
}

@media ( max-width: 1024px ) {
	.cg-violet-block__row {
		flex-direction: column;
		gap: 34px;
	}

	.cg-violet-block__logo {
		order: -1;
	}
}

/* ------------------------------------------------------------------ *
 * image.php — full-bleed photo band
 * ------------------------------------------------------------------ */

/* The design's `.photoband` is a full-bleed band at a fixed 34vw height,
   which works there because its art is pre-cropped to that shape. The real
   media library is not: these images run anywhere from 1.08 to 3.83, so a
   fixed height was cropping 39-49% away. These bands are stacked one per
   row, never side by side, so they can take their natural height without
   breaking any grid — full content width, zero crop, and the left/right
   edges now line up with the copy above and below. */
.cg-throw-banner {
	/* #442 — the gap this band owes its neighbours. Component-scoped rather
	   than a global token: the spacing-scale block in tokens.css says in so
	   many words that CG's off-grid rhythm values never round into it, and a
	   single component's seam does not earn a second `--section-pad`.

	   Flat 100px, deliberately not a clamp. The site's band rhythm
	   (`--section-pad`) is a flat 96px at every width, so a responsive value
	   here would be the only vertical gap on the page that scales — it would
	   read as a bug at 1024px, not as a system. */
	--cg-photoband-gap: 100px;
	display: block;
	width: 100%;
	padding-inline: var( --pad-x );
}

.cg-throw-banner__img {
	display: block;
	width: 100%;
	height: auto;
}

/* This band carries no vertical rhythm of its own, and it never needed to
   while every neighbour was a `.cg-band` bringing its own 96px
   `padding-block`. Three adjacencies have no `.cg-band` on either side of
   the seam, and each one collided at exactly 0px:

     1. two photo bands in a row (Tractor runs seven of them — six seams),
     2. a photo band directly above the ink "The Brand's Good" quote,
     3. the last photo band on the page, directly above the ink footer band.

   All three are the CD's 2026-08-26 markup (#442) — six of that PDF's seven
   comments are these, worded as "create 100px of white padding".

   `padding`, not `margin`: the band is transparent, so the padding shows the
   page's own cream through and cannot collapse against a neighbouring
   `.cg-band`'s padding the way a margin would. It also means the ink
   exception below only has to change one background, not unpick a margin. */
.cg-throw-banner + .cg-throw-banner {
	padding-top: var( --cg-photoband-gap );
}

.cg-throw-banner:has( + .cg-band--ink ) {
	padding-bottom: var( --cg-photoband-gap );
}

/* Case 3 needs its own selector: the ink footer band (`.cg-subscribe`) is
   rendered outside `</main>` in footer.php, so it is not a sibling of this
   band and the `:has()` rule above is blind to it. The photo band IS the
   last element child of `<main>` in that case — on all 55 published case
   studies, verified against Dev-rendered DOM, not ACF row order.

   WHY it is last, since `single-work.php` renders two more things after the
   `work_type_content` loop and the comment above would otherwise read as
   luck. Both have since changed, so this is the 2026-09-02 state:

   1. "Our latest work" now renders on ALL 55, not 0 of 55 — #470 replaced
      the same-term `tax_query` (which the July taxonomy re-cut had left
      matching nothing) with newest-featured-work plus a top-up. That band
      carries `.cg-band--ink`, so `:has( + .cg-band--ink )` above picks the
      seam up and this `:last-child` rule is simply no longer the one doing
      the work on a published case study. Nothing regressed.
   2. `universal_content` is still empty on all 55 PUBLISHED case studies,
      but no longer empty site-wide: the #467 catalogue draft
      (`/work/work-detail-example/`) carries all 16 universal modules. That
      is the case this comment predicted — a `universal_content` row makes
      this selector inert. It is harmless there because that page's last
      `work_type_content` block is `related_articles`, not a throw banner.
      Still the thing to re-check if universal rows are ever authored on a
      real case study. */
.cg-throw-banner:last-child {
	padding-bottom: var( --cg-photoband-gap );
}

/* The mirror of case 2, and the same defect the CD described as an image
   "sitting right on this black bar" — an ink band directly ABOVE a photo
   band, with nothing between them. It is one page today
   (`/work/honey-gardens/`), which is why it is not in the CD's markup;
   fixing only the downward direction would leave an identical seam live on
   a published case study.

   `:not( :has( + .cg-band--ink ) )` holds it off the sandwich below, where
   the band deliberately joins the dark run and a 100px gap would only
   loosen it. */
.cg-band--ink + .cg-throw-banner:not( :has( + .cg-band--ink ) ) {
	padding-top: var( --cg-photoband-gap );
}

/* …except when the band sits INSIDE the page's opening dark run — an ink
   band above it and another below (on Holmes Smokehouse, the "Some Good
   Results" stats and "The Brand's Good" quote). There the band's own
   `--pad-x` gutters are transparent over cream, so the dark section is cut
   in half by a pale sliver down both sides. The CD's fix, verbatim:
   "instead of whit on the sides make it #0e0e0c" — which is `--cg-ink`,
   i.e. `--surface-dark`. The ask is the token the site already has, not a
   new colour.

   `padding-bottom: 0` goes with it, and is the point rather than an
   afterthought: leaving the 100px from the rule above would paint a cream
   seam between this band and the quote below it, which is the same defect
   moved down one element.

   (0,3,0) vs the (0,2,0) it refines, so it wins on specificity and does not
   depend on source order. */
.cg-band--ink + .cg-throw-banner:has( + .cg-band--ink ) {
	background: var( --surface-dark );
	padding-bottom: 0;
}

/* …and the ink stops at the gutters. The image keeps the page's own cream
   behind it, because this field's art is author-supplied and some of it has
   an alpha channel: `/work/westerra-credit-union/` runs a palette PNG with
   `tRNS` (WesterraCreditUnion_10_financial_dadson-1.png — 2738x1404, ~15%
   fully transparent) whose whole composition is a break-the-frame cutout,
   a father and child rising out of the top edge of an opaque grey card.
   Painting ink on the section alone composites THROUGH that transparency:
   the heads land on black and a hard rectangular edge appears where the
   card starts. Found by adversarial review; the computed-style check that
   passed this file the first time reads `backgroundColor` and cannot see a
   composite.

   Setting it on the image rather than dropping the rule keeps what the CD
   asked for — no pale sliver down the sides of the dark run — while the
   artwork composites over exactly the colour it was cut out against. On
   the other three — two JPEGs and an opaque PNG (Renzos, colortype 2, no
   `tRNS`) — this is a no-op, verified as 0 differing pixels against main. */
.cg-band--ink + .cg-throw-banner:has( + .cg-band--ink ) .cg-throw-banner__img {
	background: var( --surface );
}

/* ------------------------------------------------------------------ *
 * gallery.php / gallery_with_video.php / video.php — "The Work" film box
 * + play-pill (extrapolated from the design's static `.film` box; the
 * multi-slide consumers, gallery.php (#284) and gallery_with_video.php
 * (#285), are now the scroll-driven `blocks/cg/scroll-gallery.php`
 * component instead of a Slick carousel — see gallery.php's docblock.
 * video.php/careers_content/video.php stay single-slide, `.cg-film--solo`).
 * ------------------------------------------------------------------ */

.cg-film-section {
	overflow: hidden;
}

.cg-film {
	position: relative;
	width: 100%;
	aspect-ratio: 1636 / 581;
	overflow: hidden;
	background: var( --cg-ink );
}

/* The 1636/581 crop above comes from the design's still frames, which are
   `object-fit:cover` and so fill it edge to edge. A live Vimeo embed cannot
   be cropped that way — the player letterboxes its 16:9 content inside the
   box, rendering the film ~803px wide inside a 1272px black band at 1440 and
   breaking the left/right alignment every other module holds. Video boxes
   therefore take the players' own 16:9 (all embedded films measure 1.775),
   which also restores the full-width video the old site had. (This module's
   own Slick carousel — the only consumer with more than one `.cg-film` per
   section — is gone as of #285; the gallery/gallery_with_video conversions
   to the scroll-driven gallery component now own that job, so the two
   selectors this rule used to need to outrank a Slick-carousel-scoped
   `.item` wrapper are back down to one.) */
/* `--cg-film-ratio` (#462) is set per slide by blocks/cg/scroll-gallery.php from
   the ACF `video_height` the 1.0 template used to read. This selector is NOT
   work-page-scoped — blocks/careers_content/video.php carries `.cg-film--video`
   too — but that block never sets the property, so it resolves to the 16:9
   fallback and the Careers page is byte-identical. Verified, not assumed. */
.cg-film--video {
	aspect-ratio: var( --cg-film-ratio, 16 / 9 );
}

/* Image slides keep their own proportions for the same reason — the box
   ratio above was cropping ~51% off gallery stills (natural ~1.39-1.5 into
   2.82). Only one slide shows at a time (video.php/careers_content/video.php
   are both `.cg-film--solo`), so a natural height costs nothing; video
   slides keep the fixed 16/9 box above because a player needs one. */
.cg-film:not( .cg-film--video ) {
	aspect-ratio: auto;
}

.cg-film__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Video slides — the `.video-block`/`.bg-video[data-video]` mechanism
   fills the box (see hero.css `.cg-hero--video .cg-hero__media .bg-video`
   for the same full-fill pattern). */
.cg-film__video,
.cg-film__video .bg-video,
.cg-film__video .fluid-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.cg-film__video .fluid-video::before {
	display: none; /* the fixed aspect-ratio box above replaces the fluid-video ::before spacer hack for this full-bleed placement */
}

/* Video slides show a live Vimeo player, which draws its own poster, its own
   gradient behind the control bar and its own buttons. The theme's scrim and
   play pill only sat on top of all that — the scrim dulling the picture, the
   pill stacking in the same corner as Vimeo's own button once that button is
   moved down (theme.js adds `play_button_position=bottom`, which puts play at
   the bottom-left and leaves pause/scrub/volume/fullscreen native). Both are
   stood down here; the pill markup stays because the bundled BgVideo plugin
   binds to it. Image slides are unaffected — they never had either. */
.cg-film--video::after {
	content: none;
}

/* Vimeo draws its own play button, so the theme's pill never shows. The
   markup stays only because `BgVideo()` binds its click handler to it. */
.cg-film__video .bg-video .cg-film__play.btn-play {
	display: none;
}

/*
 * DELETED (#296): a `.cg-film--video.is-playing` rule that set `opacity:0;
 * pointer-events:none` on the pill "once playing".
 *
 * Dead twice over. Nothing in the theme has ever applied `is-playing` —
 * `BgVideo` applies `playing`, no `is-` prefix, and to the `.bg-video` holder
 * rather than to `.cg-film--video` — and even had it been applied, the rule
 * directly above already takes that element out of the layout with
 * `display:none`, so fading something invisible changed nothing.
 *
 * Recorded rather than silently dropped because the alternative was live:
 * this file could have made the class real by applying it from the
 * controller. That was rejected — it would add state-tracking machinery whose
 * only job is to hide an element that is already hidden.
 */

.cg-film__play .icon-play {
	font-size: 14px;
	color: var( --cg-cream );
}

.filmnav {
	position: absolute;
	z-index: 2;
	right: 18px;
	bottom: 18px;
	width: 50px;
	height: 50px;
	border: var( --hairline ) solid var( --cg-cream );
	background: rgba( 14, 14, 12, 0.35 );
	color: var( --cg-cream );
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var( --fade-out ) var( --fade-ease ), color var( --fade-out ) var( --fade-ease );
	top: auto;
	left: auto;
	margin: 0;
	padding: 0;
	border-radius: 0;
	transform: none;
}

/* ------------------------------------------------------------------ *
 * related_articles.php — section wrapper (card grid stays the shared
 * blocks/content.php partial, unchanged — see docblock).
 * ------------------------------------------------------------------ */

.cg-related-articles__grid {
	margin-top: 44px;
}

/* ─── #485 · mobile tracking ───────────────────────────────────────────
 * Same defect as `.cg-statement` (css/components/type.css): a flat
 * negative px tracking tuned against a desktop size, applied unchanged
 * at the clamp floor a phone renders.
 *
 * `.cg-violet-block__quote` — -1.4px on a 26px floor is -5.38% of the em
 * at 390 against -3.89% at 1440, the worst ratio in the audit, on the
 * italic pull-quote of every case study (20 of the 56 sitemap pages).
 * Measured on /work/ace-cider/ at 390: 68 of 112 adjacent character
 * pairs render as touching ink, 32 with the tracking at zero. The
 * residue is joins Noe Text Italic makes at any tracking — it is 54 of
 * 113 at 1440 with the tracking untouched.
 *
 * Not in #485's audit list, which came from a grep that missed this
 * file. Found by the adversarial review of PR #496.
 *
 * `.cg-rstats-section__head` (:20, -1.06px on a 30px floor) was audited
 * at the same time and deliberately LEFT ALONE. It is -3.53% of the em
 * at 390 — worse on that ratio than the headline the CD photographed —
 * but its content is "Some Good Results" on 6 case studies and it
 * renders 0 of 12 touching pairs at 390. The ratio is a proxy; the ink
 * is the defect, and there is no defect here.
 * ─────────────────────────────────────────────────────────────────────── */
@media ( max-width: 680px ) {
	.cg-violet-block__quote {
		letter-spacing: 0;
	}
}