/**
 * css/components/template-awards-careers-events.css — Website 2.0
 * Awards/Careers/Events reskin (#69)
 *
 * Page-specific component CSS for pages/template-awards.php,
 * pages/template-careers.php, pages/template-events.php and their
 * blocks/{awards,careers,events}_content/* partials. Reuses the shared
 * component library wherever the shape matches exactly (`.cg-case-hero`
 * for every hero, `.cg-cardbox`/`.cg-cardrow`/`.cg-card` for the awards/
 * benefits grids, `.cg-article-card` for the events/careers listing
 * tiles, `.cg-band`/`.cg-split`/`cg_statement()` for every text split) —
 * only the shapes with no existing equivalent get new selectors here:
 * the awards badge image slot, the testimonials pull-quote carousel
 * (Slick-driven, `.slider-items3`), the benefits icon/list layout, and
 * the events tab nav.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

/* ------------------------------------------------------------------ *
 * Shared hero body copy (blocks/{awards,careers,events}_content/
 * intro.php) — optional WYSIWYG paragraph between the `.cg-case-hero__
 * title` and the banner image.
 * ------------------------------------------------------------------ */

.cg-case-hero__intro {
	max-width: 640px;
	margin-top: 28px;
}

/* ------------------------------------------------------------------ *
 * blocks/awards_content/awards.php — badge grid
 *
 * Reuses `.cg-cardbox--oncream`/`.cg-cardrow--three`/`.cg-card` (css/
 * components/cardbox.css) — this band has no eyebrow/statement header
 * above the grid (the section IS the band's only content), so the
 * shared component's default 84px `margin-top` (meant to separate the
 * grid from a header) is zeroed here.
 * ------------------------------------------------------------------ */

.cg-awardsgrid.cg-cardbox {
	margin-top: 0;
	/* Keep the top and left edges inherited from `.cg-cardbox` (width + style)
	   and `.cg-cardbox--oncream` (colour); drop the right and bottom, which the
	   cards draw for themselves now — see the AWD-1 block below. Widths only,
	   so `--cg-ink` is left alone.
	   The bottom edge in particular MUST go: it is the line that used to run
	   straight across the empty slots of a short final row, which is the defect
	   #466 exists to remove. */
	border-right-width: 0;
	border-bottom-width: 0;
}

.cg-awardsgrid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* AWD-1 (#466, superseding #404 and #454) — EVERY BADGE CLOSES ITS OWN BOX,
 * AND EVERY LINE IS PAINTED EXACTLY ONCE.
 *
 * The Creative Director's r1 review (2026-09-01, About and Awards &
 * Testimonials): "remove boxes when no logo appears — Each logo needs a box vs
 * the col and row div have a border so that the last line doesn't have a bunch
 * of empty boxes." Measured on Dev 2026-09-02: this grid renders 13 badges in
 * a 3-up layout, so the last row was one badge followed by two empty bordered
 * boxes.
 *
 * THE SPLIT. Each card draws `border-right` + `border-bottom`; the container
 * (above) keeps `border-top` + `border-left` and drops the other two. Between
 * them that is all four sides of every card and all four sides of the box,
 * with no line drawn twice and no `nth-child` anywhere. A short final row ends
 * after its last badge, because the empty slots have no card to paint them.
 *
 * WHAT IT REPLACES. `.cg-cardrow--three` (cardbox.css) draws a `border-left`
 * on every card and clears it on `:first-child` only, which is correct for a
 * grid holding exactly three cards — the case every other caller has. This
 * grid holds thirteen. #404 patched that with nth-child row/column resets
 * (`:nth-child(-n + 3)`, `:nth-child(3n + 1)`) that relied on the container to
 * draw the whole outer edge, and #454 then padded the short final row with
 * empty `--filler` cells so the box's bottom-right corner wasn't left open.
 * Those empty cells are what the CD objected to.
 *
 * WHY NOT GIVE EVERY CARD ALL FOUR BORDERS. Because then the two cards either
 * side of an internal rule both draw it. Overlapping them with a negative
 * margin so they land on "the same pixel" looks like the fix and is not; it
 * was built that way first and measured on this very page:
 *
 *     working tree  row dividers (y / thickness):  301/1px  595/1px  889/2px  1184/1px
 *     main          row dividers (y / thickness):  300/1px  594/1px  889/1px  1183/1px
 *
 * The overlap is exact in CSS, but the two borders belong to two different
 * boxes and the engine snaps each to device pixels independently; where the
 * shared edge falls near a half pixel they snap to different rows and paint
 * two adjacent full-ink lines. Reproduced at 1440, 1024, 768 and 390, and at
 * DPR 2 (4px, not 2) — it does not wash out on retina. One box per line is the
 * only reliable answer.
 *
 * THE SELECTOR IS DELIBERATELY OVER-QUALIFIED. `.cg-awardsgrid.cg-cardrow`
 * rather than the bare `.cg-awardsgrid` the container also carries, to reach
 * (0,3,0) — enough to tie the strongest thing cardbox.css aims at these cards,
 * `.cg-cardrow--three .cg-card:first-child` inside its `max-width: 1024px`
 * block, which this file then wins on order (inc/scripts.php `$cg_components`:
 * `cardbox` is 9th, `template-awards-careers-events` is 42nd). At (0,2,0) it
 * did not, and the result was measured, not theorised: at 680 badge one
 * rendered `border-top-width: 0px` while the other twelve read `1px`.
 *
 * ALL FOUR SIDES ARE STATED, as longhands, because every cardbox.css rule that
 * touches these cards is a SHORTHAND (`border-left: 0`, `border-top: 0`,
 * `border-top: var( --hairline ) solid`) and a shorthand resets the sides it
 * doesn't name:
 *
 *   - `border-*-style: none` forces the USED width to zero however large the
 *     specified width is, so overriding width alone renders no border at all.
 *     That was the 680px defect above.
 *   - `border-*-color: currentcolor` displaces the `--cg-ink` that
 *     `.cg-cardbox--oncream .cg-card` sets (designer decision #204: inner
 *     dividers match the outer box) wherever the shorthand outranks it, which
 *     `:first-child` does. It renders correctly today only because this band's
 *     text colour happens to equal `--cg-ink` — #404's docblock proved this by
 *     setting a card's `color` to red and watching one rule turn red — so
 *     restating `--cg-ink` here is not redundancy, it is the guarantee.
 *
 * #404 avoided naming a colour on purpose, and was right to: its rules touched
 * only SOME sides of SOME cards, so an explicit colour risked splitting the
 * grid's dividers into two colours. This rule governs all four sides of every
 * card, so the same reasoning now points the other way. `--cg-ink` is the same
 * token `.cg-cardbox--oncream .cg-card` already resolves to; no new value.
 *
 * No media query. The scheme is breakpoint-independent by construction — that
 * is the whole advantage over the nth-child scheme it replaces, which had to
 * restate its row/column arithmetic every time `grid-template-columns` changed.
 * cardbox.css still reflows `--three` to one column at 1024px, where the cards
 * stack and each one's `border-bottom` becomes the divider below it; nothing
 * here needs to know.
 */
.cg-awardsgrid.cg-cardrow .cg-awardsgrid__item {
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: var( --hairline );
	border-bottom-width: var( --hairline );
	border-style: solid;
	border-color: var( --cg-ink );
}

.cg-awardsgrid__img {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 130px;
	margin-bottom: 22px;
}

.cg-awardsgrid__img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.cg-awardsgrid__title {
	margin: 0;
}

.cg-awardsgrid__year {
	display: block;
	margin-top: 8px;
	font-family: var( --font-sans );
	font-weight: 700;
	color: var( --cg-muted );
}

/* ------------------------------------------------------------------ *
 * blocks/awards_content/testimonials.php — pull-quote carousel
 *
 * PRESERVES the JS-coupled `.slider-items3` Slick contract exactly
 * (js/jquery.main.js `initSlick()`) — Slick manages `.slick-track`/
 * `.slick-slide`/`.slick-dots`/`.slick-arrow` itself; only those
 * generated elements + the slide content are styled here (never
 * `.slider-items3` itself, which must stay a plain flow container for
 * Slick to measure). This is the last "restyle around the JS hook" Slick
 * consumer in the `css/components/*.css` layer — work-type-blocks.css's
 * own Slick nav-arrow restyle for the old work_type_content film carousel
 * was removed in #285 when that carousel converted to the scroll-driven
 * gallery component.
 * ------------------------------------------------------------------ */

.cg-testimonials-band {
	text-align: center;
}
/* AWD-2 (#404) — keep the band's statement centred once cg-motion.js has
 * split it into lines.
 *
 * `.cg-statement` is a MASK_SELECTOR (js/cg-motion.js:66), so buildLines()
 * rewrites its innards into `.anim-line` spans, which motion.css:74-79
 * styles `display: block; width: fit-content; max-width: 100%` with no
 * inline margins. `text-align: center` above centres INLINE content inside
 * a box — it cannot centre a shrink-to-fit BLOCK box, so the heading text
 * parked itself against the band's left padding for every visitor with JS.
 * Auto inline margins centre the box itself.
 *
 * Why this was missed until now, worth recording: reading
 * `getBoundingClientRect()` on the `.cg-statement` element returns the
 * viewport centre whether the text inside it is centred or not — the
 * element is a full-width block either way. Measured at 1440 BEFORE this
 * rule: block centre 720 (looks perfect), actual TEXT centre 404, i.e. 316px
 * left of the testimonial it sits over. Measure the text, via a Range over
 * the heading or the `.anim-line` rects — never the block.
 *
 * Scoped to this band's statement: a sweep of every centred `.anim-mask`
 * heading on the site found this to be the only one affected.
 */
.cg-testimonials-band .cg-statement .anim-line {
	margin-inline: auto;
}


.cg-testimonials {
	position: relative;
	max-width: 760px;
	margin: 56px auto 0;
}

.cg-testimonial {
	padding: 0 60px;
}

.cg-testimonial__mark {
	display: block;
	font-family: var( --font-serif );
	font-size: 64px;
	line-height: 1;
	color: var( --accent );
}

/* AWD-3 (#404): pull-quote set in Noe Text Italic. `--font-serif` IS Noe
   Text (tokens.css), and the italic face is already declared in
   css/fonts.css (`NoeText-RegularItalic.woff2`, weight 400, style
   italic) — so `font-style: italic` + `font-weight: 400` below resolve
   to the real cut, not a synthesised oblique. No new @font-face. */
.cg-testimonial__quote {
	margin: 8px 0 0;
	font-family: var( --font-serif );
	font-style: italic;
	font-weight: 400;
	font-size: clamp( 22px, 2.2vw, 32px );
	line-height: 1.32;
	letter-spacing: -0.4px;
	color: var( --cg-cream );
}

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

.cg-testimonial__quote p:last-child {
	margin-bottom: 0;
}

.cg-testimonial__byline {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 28px;
}

.cg-testimonial__portrait {
	width: 64px;
	height: 64px;
	margin-bottom: 14px;
	border-radius: 50%;
	overflow: hidden;
}

.cg-testimonial__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cg-testimonial__author {
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --cg-grey );
	font-style: normal;
}

.cg-testimonials .slick-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 40px;
	padding: 0;
	list-style: none;
}

.cg-testimonials .slick-dots li {
	display: flex;
}

.cg-testimonials .slick-dots li button {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 245, 245, 245, 0.4 ); /* literal cream-rgb at 40% — matches quote-carousel.css's .cg-quote__dot convention */
	font-size: 0;
	cursor: pointer;
}

.cg-testimonials .slick-dots li.slick-active button {
	background: var( --cg-cream );
}

.cg-testimonials .slick-prev,
.cg-testimonials .slick-next {
	position: absolute;
	top: -34px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: var( --hairline ) solid var( --rule-on-dark );
	background: transparent;
	font-size: 14px;
	color: var( --cg-cream );
	transform: none;
	cursor: pointer;
}

.cg-testimonials .slick-prev {
	left: -60px;
}

.cg-testimonials .slick-next {
	right: -60px;
}

.cg-testimonials .slick-prev:hover,
.cg-testimonials .slick-next:hover {
	background: var( --cg-cream );
	color: var( --cg-ink );
}

@media ( max-width: 1024px ) {
	.cg-testimonial {
		padding: 0 40px;
	}

	.cg-testimonials .slick-prev,
	.cg-testimonials .slick-next {
		top: auto;
		bottom: -70px;
		left: auto;
	}

	.cg-testimonials .slick-prev {
		right: 56px;
	}

	.cg-testimonials .slick-next {
		right: 0;
	}
}

@media ( max-width: 680px ) {
	.cg-testimonial {
		padding: 0;
	}
}

/* ------------------------------------------------------------------ *
 * blocks/careers_content/benefits.php — "Health & Happiness Perks"
 *
 * Reuses `.cg-cardbox--onink-framed`/`.cg-cardrow--three`/`.cg-card`
 * (css/components/cardbox.css) — the `ico` icon-font glyph itself is
 * left untouched (repurposing it is deferred to #75); only its wrapper
 * + the benefit list + the bottom CTA spacing are new here.
 * ------------------------------------------------------------------ */

.cg-benefitsgrid__icon {
	margin-bottom: 20px;
	font-size: 34px;
	color: var( --accent );
}

.cg-benefitsgrid__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cg-benefitsgrid__list li {
	margin-top: 10px;
}

.cg-benefitsgrid__list li:first-child {
	margin-top: 0;
}

.cg-benefitsgrid__cta {
	margin-top: 56px;
	text-align: center;
}

.cg-benefitsgrid__cta p {
	margin: 0 0 24px;
}

/* ------------------------------------------------------------------ *
 * blocks/careers_content/current_positions.php + blocks/content-event.php
 * — Careers/Events listing tiles
 *
 * Reuses `.cg-article-card` (css/components/template-blog.css — hairline
 * border, hover fill) but these are horizontal LIST rows (image left,
 * text right), not the blog's vertical grid card — scoped to the
 * `--event`/`--career` modifiers (added ALONGSIDE `.cg-article-card` in
 * the markup, never replacing it) so the blog/related-articles grid
 * card (and every other `.article-item.cg-article-card` caller listed
 * in blocks/content.php's own docblock) is completely unaffected.
 * These two listings also render several `.cg-btn` action links per
 * card (Register/Add to Calendar, Listen/Watch) instead of the blog
 * card's single "Read More" link, so the `.controls` row needs its own
 * wrap/gap rule (the legacy `.article-item .controls .btn{margin-
 * bottom:10px}`, style.css, only ever targeted the retired `.btn`
 * class, not `.cg-btn`).
 * ------------------------------------------------------------------ */

.cg-careerlist-band {
	overflow: hidden;
}

.cg-article-card--event,
.cg-article-card--career {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.cg-article-card--event .box-img,
.cg-article-card--career .box-img {
	flex: none;
	width: 260px;
	aspect-ratio: 366 / 264;
	overflow: hidden;
}

.cg-article-card--event .box-img img,
.cg-article-card--career .box-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cg-article-card--event .cg-article-card__excerpt,
.cg-article-card--career .cg-article-card__excerpt {
	margin-top: 12px;
}

.cg-article-card--event .cg-article-card__controls,
.cg-article-card--career .cg-article-card__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

@media ( max-width: 767px ) {
	.cg-article-card--event,
	.cg-article-card--career {
		flex-direction: column;
	}

	.cg-article-card--event .box-img,
	.cg-article-card--career .box-img {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * pages/template-events.php — tab nav (`.tabset`/`.tab-content`)
 *
 * PRESERVES VERBATIM the `.tabset` JS contract (js/jquery.main.js
 * `Tabset`/`initTabs()`) — `li.active`/`.js-tab-hidden` are toggled by
 * that plugin, never renamed. Selectors below are qualified with the
 * added `.cg-events-tabs` class (specificity 0,3,1) so they win over
 * the legacy `.events-section .tabset a` rules (style.css, 0,2,1)
 * regardless of the fact that this file loads before style.css in the
 * cascade (docs/2.0-system-guide.md §2 companion-CSS technique).
 * ------------------------------------------------------------------ */

.events-section.cg-events-tabs .tabset {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.events-section.cg-events-tabs .tabset a {
	display: block;
	padding: 14px 26px;
	border: var( --hairline ) solid var( --rule );
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --text );
	text-decoration: none;
	transition: background-color var( --fade-out ) var( --fade-ease ), color var( --fade-out ) var( --fade-ease );
}

.events-section.cg-events-tabs .tabset a:hover {
	background-color: var( --box-hover-cream );
}

.events-section.cg-events-tabs .tabset a.active {
	background: var( --cg-ink );
	color: var( --cg-cream );
	border-color: var( --cg-ink );
}

.events-section.cg-events-tabs .tab-content {
	margin-top: 48px;
}

/* ------------------------------------------------------------------ *
 * #405 — close the gap between the Careers film and the perks heading
 *
 * Reviewer (2026-08-18, CAR-1): the space between the video and
 * "Health & Happiness Perks" is too large; reduce it by 75px.
 *
 * Measured at 1440 before the change the gap was 226px, and it is owned by
 * three rules, not one:
 *
 *     96px  .cg-film-section   padding-bottom   (--section-pad)
 *     96px  .cg-benefits-band  padding-top      (--section-pad)
 *     34px  h2.cg-statement    margin-top
 *     ----
 *     226px
 *
 * Note for anyone re-reading the issue: it points at `video-band.css` /
 * `.cg-video-band`, which owns NONE of it — `.cg-film` and every wrapper
 * down to the iframe have zero bottom spacing. Measure before editing.
 *
 * Taken entirely from `.cg-benefits-band`'s top padding: it is the space
 * immediately above the heading the comment marks up, and it is the only
 * one of the three that is not shared. `--section-pad` is a flat 96px (not
 * a responsive scale), so subtracting 75 cannot invert or collapse the gap
 * at any width — 21px remains at every breakpoint, and the film band's own
 * 96px bottom padding still sits above it. The video band's TOP spacing is
 * untouched, per the issue.
 *
 * `.cg-benefits-band` and `.cg-film-section` are Careers-only (verified
 * across every published page, including the work-type templates that also
 * load work-type-blocks.css), so this needs no page-id or body-class scope
 * and changes nothing else.
 * ------------------------------------------------------------------ */

.cg-benefits-band {
	padding-top: calc( var( --section-pad ) - 75px );
}