/*
 * Work section — homepage, between service and pricing.
 * docs/step-20-work-section.md, header measured live at 1440px against
 * https://stodio.webflow.io/. The header is a faithful reproduction; the
 * project grid below it is not — see the pattern file's own comment for the
 * full split between "reproduced" and "ours".
 */

/* ---- Section / container ----
   Rail padding for CONTAINER is a literal CSS rule reading --wp--custom--rail
   directly — the same mechanism blogs.css/pricing.css/gallery.css use.
   WRAPPER (.idia-work) is align:full with layout:constrained, so WordPress's
   has-global-padding de-dup rule would otherwise zero CONTAINER's own
   auto-applied root padding; !important wins the specificity tie against
   core's own zero-padding de-dup rule, which prints after this enqueued
   file (documented at length in pricing.css). */
.idia-work__container {
	padding-left: var(--wp--custom--rail) !important;
	padding-right: var(--wp--custom--rail) !important;
}

/* ---- Header: centred, reproduced exactly (Part 1) ----
   The owner confirmed this section's header is centred, unlike every other
   left-aligned section on the homepage — deliberate, not a mistake to fix.
   is-measure-work-intro (466px, new token — no existing measure token was
   close) caps the subheading; is-measure-hero-home (680px, existing token)
   caps the title block, matching the reference's own 680px
   .work-title-block width exactly. */
.idia-work__title-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.idia-work__subheading {
	margin-inline: auto;
}

/* ---- Project grid (Part 2 — ours, not the reference's) ----
   display:grid + repeat(2, minmax(0, 1fr)) rather than WordPress's own
   layout:grid block-support (columnCount) — the fifth card's grid-column
   span and the last-child rule below need a selector this file controls
   directly, which the generated per-instance grid-template-columns CSS the
   layout support emits does not give us cleanly. Still no fixed track
   widths (AGENTS.md ban), so the "no query loop, but still owner-editable"
   requirement holds: minmax(0,1fr) tracks reflow to whatever count of
   authored cards exists. */
.idia-work__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--32);
}

/* Only the latest 3 authored cards show. The owner's full project list stays
   in the pattern markup (removing a card here would mean re-authoring it
   later), so the earliest cards are hidden with display:none rather than
   deleted. :last-child (below) still targets whichever card is physically
   last in the markup, so the full-width span keeps landing on the true last
   project regardless of how many earlier cards are hidden this way. */
.idia-work__grid > *:nth-child(1),
.idia-work__grid > *:nth-child(2) {
	display: none;
}

/* The full-width card is whichever one is LAST in the authored list, not a
   class the owner has to remember to add or move by hand. Adding a sixth
   project: the new card becomes the last child, so it inherits the
   full-width span automatically, and the former fifth card (previously
   full-width) reverts to a normal 2-up card in the grid it now shares with
   card six — no block-editor setting to touch, no stale span left behind on
   a card that is no longer last. Removing a card: whatever is left in the
   last position takes the span the same way, including a case with an odd
   remaining count. This is the acceptance test the doc calls out. */
.idia-work__grid > *:last-child {
	grid-column: 1 / -1;
}

@media (max-width: 767px) {

	/* Single column below the desktop/tablet 2-up grid — the full-width
	   rule above is a no-op here (both tracks collapse to one), so nothing
	   needs disabling, only the track count itself. */
	.idia-work__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Card anatomy ----
   32px image radius is the 2-xl preset (steps 32/24/16/16 — see theme.json),
   reproduced exactly from the reference. */
.idia-work__card-image-wrapper {
	border-radius: var(--wp--preset--border-radius--2-xl);
	overflow: hidden;
}

/* object-fit:cover + a fixed aspect-ratio, not the reference's object-fit:
   fill (doc's explicit warning: fill only avoids distortion there because
   each card's own aspect ratio happens to match its image — in a uniform
   grid where every card is the same shape, fill would stretch every
   thumbnail). 16/9 matches the five source images' own ~1.78:1 native ratio
   (1320x741) closely enough that cover crops almost nothing at the 2-up
   card width. */
.idia-work__card-image-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

/* The full-width fifth card gets a wider ratio, not the same 16/9 stretched
   taller — a 16/9 image at roughly double the column width would read as an
   oversized version of the same shape rather than a deliberate full-width
   moment. 21/9 keeps its height close to the two stacked 2-up rows above it
   instead of the card growing tall and unbalancing the section. */
.idia-work__grid > *:last-child .idia-work__card-image-wrapper img {
	aspect-ratio: 21 / 9;
}

.idia-work__card-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--wp--preset--spacing--16);
}

/* line-height and letter-spacing have no presets of their own to pair with
   fontSize|medium (32px) — same gap gallery.css documents on
   .idia-gallery__view-all-link. Both read the h-4 custom properties
   directly, the value `medium` itself resolves its own size from, matching
   the reference's 40px exactly. Set on the paragraph itself (not just the
   link) so they govern the line box even before the anchor's own
   color/no-underline rule below applies.

   letter-spacing previously lived as a block-level style attribute
   (style.typography.letterSpacing) with the same var() value. Moved here
   because the block editor's letter-spacing control only ever writes a
   literal length, never a var() reference — Gutenberg's block-supports
   serializer escapes the `--` in any var() it finds there as `u002du002d`
   when it recomputes expected save output, which never matches what a
   hand-authored pattern actually saves. That mismatch was failing block
   validation on every page using this pattern. A theme.json custom property
   has no equivalent block-support attribute to carry it, so CSS is the
   correct home, not a workaround. */
.idia-work__card-name {
	line-height: var(--wp--custom--line-height--h-4);
	letter-spacing: var(--wp--custom--letter-spacing--h-4);
}

.idia-work__card-name a {
	color: var(--wp--preset--color--main);
	text-decoration: none;
}

/* Hover — the same image-scale gesture the blogs cards use (blogs.css),
   reused rather than inventing a fourth motion gesture on the site
   (AGENTS.md §11.1). Nothing else changes: no colour shift, no shadow. */
.idia-work__card-image-wrapper img {
	transition: transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
}

.idia-work__card:hover .idia-work__card-image-wrapper img {
	transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {

	.idia-work__card-image-wrapper img {
		transition: none;
	}
}

/* ---- Footer link ----
   Reuses .idia-gallery__view-all-link/.idia-gallery__view-all-mask
   unmodified (defined once in gallery.css) — same chassis blogs.css reuses,
   see that file's own comment. Only the wrapper's centring and margin are
   section-specific.

   !important on margin-top: WordPress's own block-gap CSS
   (`.is-layout-constrained > :where(...) { margin-block-start: var(
   --wp--style--block-gap, 24px) }`) prints as generated per-instance CSS
   in global-styles-inline-css AFTER every enqueued theme stylesheet — the
   same specificity fight documented throughout this codebase (gallery.css,
   pricing.css, marquee.css). Without it the wrapper fell back to the
   CONTAINER's own 24px block-gap instead of this section's 80px rhythm. */
.idia-work__footer-link-wrapper {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--80) !important;
}

/* Count superscript ("(05)") — the one genuinely new part of the footer
   link. A plain inline element, negative margin-top pulling it up beside
   the link's cap-height per the reference's own superscript effect.
   Reference measures -25px; the nearest token is spacing|24 (24px), 1px off
   — close enough to read identically and keeps this file free of raw
   values, so the token is used rather than the literal reference number. */
.idia-work__count {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--primary-dark);
	margin-top: calc(var(--wp--preset--spacing--24) * -1);
}

/* ---- Title + card entrance — starting state ----
   FREESTYLED, not ported from the reference: stodio's own Work section uses
   a scroll-scrubbed scale/opacity pulse on its title block (the only
   continuous SCROLLING_IN_VIEW trigger found across all nine remaining
   sections) tied to a 5-card portfolio grid that does not match this
   section's differently-structured sector-based content — see
   animation-map-remaining-sections.json, work section, for the full
   reasoning. Deliberate departure, decided with the owner: skip the
   scroll-scrub pulse entirely and use the standard "Fade In" family (blur +
   rise + fade, same mechanism as the hero and CTA) on the title, plus an
   incrementing 0/100/200/300ms stagger per card — not a literal
   reproduction of anything measured on the reference. Opt-in only: scoped to
   prefers-reduced-motion: no-preference, so a reduced-motion visitor's
   section renders complete and settled immediately — work-reveal.js
   independently checks the same media query before running these tweens.

   Scoped to `.idia-work .idia-work__card`, NOT a bare `.idia-work__card` —
   that class is also reused unmodified by patterns/projects-section.php (the
   Projects page grid) and project-detail-related.php (the single-project
   related-projects grid), neither of which sits inside `.idia-work` or
   carries `.idia-work__title-block`, and neither of which enqueues
   work-reveal.js (see maybe_enqueue_projects_page() and
   maybe_enqueue_project_detail_page() in functions.php — both pull in
   idia-work's STYLESHEET for the card chassis, never this script). A bare
   selector would have left every card on those two pages permanently
   invisible with nothing to animate them back out. */
@media (prefers-reduced-motion: no-preference) {

	.idia-work__title-block,
	.idia-work .idia-work__card {
		opacity: 0;
		transform: translateY(50px);
		filter: blur(5px);
	}
}