`
> ``. `display:contents` on the `
`
(above) promotes the `- ` elements to sit directly in the grid, so it
is the `
- ` that receives the flow block-gap margin and the `
- ` that
`:last-child`/`:nth-child` must match below — not the card div one level
further in, which the earlier version of this rule wrongly targeted. */
.idia-projects__grid .wp-block-post {
margin-block-start: 0;
}
/* ---- A row holding a single card is centred ----
OWNER DECISION (2026-08-28), a deliberate departure from the reference.
The reference leaves a lone card hard left with the right half of its row
empty (.projects-main-block.project-page.single). That reads as a layout
error rather than a choice, so a lone card is centred instead.
NOT the homepage's mechanism. work.css:76 spans its last card full-width
(grid-column: 1 / -1), which stretches the card and its image to the full
976px. This centres instead: the card keeps the SAME 468px width and the
same image proportions as every other card on the page, and only its
horizontal position changes. Do not "align" the two by copying the
homepage's span here — the difference is intentional.
`:last-child:nth-child(odd)` matches a card that is BOTH last in its grid
and in an odd position, i.e. the left-hand card of a row with no partner.
It therefore stays correct for any number of cards: it fires for a lone
card in a block (the current third block), and stays inert whenever the
last row is full. That matters once the index becomes a query loop
(docs/step-projects-cpt.md §3) and the card count stops being fixed at
five — with 5 posts the last card is alone and centres; with 6 it is not
and this rule does nothing, no markup change either way.
grid-column: 1 / -1 makes the card own the whole row so it has room to
move; justify-self: center then places it at the row's centre at its own
width, rather than stretching it. Both are needed — the span alone would
stretch it (the homepage's look), and justify-self alone could only centre
it within the left track, which is a no-op.
The width is DERIVED, not a literal. A card is one of two equal tracks
separated by `gap`, i.e. (100% - gap) / 2 — so it resolves to exactly the
width its siblings get, with no hardcoded px and no new measure token
(AGENTS.md §8.3 bans an invented px max-width; this is the grid's own
arithmetic, not a new value). The gap steps 40 -> 20 (<=991) -> 28
(<=479), so this width needs the matching 991 override below; at 767 the
grid goes single-column and the reset below takes over before the 479 gap
step is ever reached, so no 479 width rule is needed.
Targets `.wp-block-post` (the `
- `), not `.idia-work__card`, for the
same reason as the block-gap rule above — that `
- ` is the real grid
item and the real sibling `:last-child`/`:nth-child` must evaluate
against, one level outside the card div this rule previously (and
wrongly) matched on. `width` still resolves correctly since it is set on
the `
- ` and the card div inside it is a plain flow block that fills
its parent's width by default. */
.idia-projects__grid .wp-block-post:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: calc((100% - var(--wp--preset--spacing--40)) / 2);
}
/* The lone card's derived width tracks the gap curve, so it needs the same
step at 991 that the gap takes. This block must stay ABOVE the 767 reset
below: the two rules have equal specificity and both match under 767, so
source order is what keeps the mobile full-width reset winning. */
@media (max-width: 991px) {
.idia-projects__grid .wp-block-post:last-child:nth-child(odd) {
width: calc((100% - var(--wp--preset--spacing--20)) / 2);
}
}
@media (max-width: 767px) {
/* Single column below 767 — every card is full width and a lone card is
already the only thing in its row, so the centring above must not
narrow it to half. Reset to the normal card width. */
.idia-projects__grid .wp-block-post:last-child:nth-child(odd) {
width: 100%;
}
}
/* ---- Gap curve: 40 -> 20 (<=991) -> 28 (<=479) ----
RESTORED 2026-08-28 at the owner's instruction. A prior pass flattened
this to spacing|16 on the grounds that the reference's own
.projects-main-block.project-page declares a flat 16px on both axes. That
reading of the reference is accurate, but the spacing on this page is a
deliberate departure from it that the owner had already set — the wider
card separation is the intended look here, not a transcription error.
Do not "correct" it back to the reference value again.
MEASURED RESOLVED VALUES, not the slug names. Each slug carries its own
breakpoint curve (style.css), so the effective gap is:
>991 spacing|40 -> 40px
<=991 spacing|20 -> 20px (gap--20 is flat 20 at every width)
<=479 spacing|28 -> 18px (padding--2-x steps 28 -> 24 -> 18)
So the real curve is 40 -> 20 -> 18, and it is NON-MONOTONIC in the same
way spacing|120 is (AGENTS.md §8.4 documents that as reproduced from the
reference, not a bug): the <=479 step is 2px SMALLER than the 20px above
it, not larger as the slug name "28" suggests. Verified at 390px: gap
computes to 18px. This is exactly what the pre-conversion file did — the
restoration is faithful to it, oddity included. Flagged rather than
silently "fixed": if the intent was 28px at the smallest width, this
wants spacing|28's token curve changed or a different slug, which is a
theme.json decision, not a stylesheet one. */
@media (max-width: 991px) {
.idia-projects__grid.wp-block-query {
gap: var(--wp--preset--spacing--20);
}
}
@media (max-width: 767px) {
.idia-projects__grid.wp-block-query {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 479px) {
.idia-projects__grid.wp-block-query {
gap: var(--wp--preset--spacing--28);
}
}
/* ---- Card info: row-to-column switch at <=991 ----
.idia-work__card-info (work.css) is flex row / space-between / align-
items:center at every width — correct for the homepage's own 2-up grid,
which never needed a narrower column layout of its own. This page's
reference (.projects-card-info) additionally switches to
flex-direction:column / align-items:flex-start at <=991px. Scoped under
.idia-projects so work.css's homepage section is untouched — the two
sections share the base rule, only this page adds the breakpoint. */
@media (max-width: 991px) {
.idia-projects .idia-work__card-info {
flex-direction: column;
align-items: flex-start;
}
}
/* ---- Image radius ----
Reference curve: 32px desktop -> 12px at <=767 -> 16px at <=479.
.idia-work__card-image-wrapper (work.css) already sets border-radius:
var(--wp--preset--border-radius--2-xl), i.e. --wp--custom--radius--32,
which supplies the 32px desktop value for free (shared with the
homepage's own card). But --radius--32 does NOT hold flat below that: it
steps 32 -> 24 (<=991) -> 16 (<=767) -> 16 (<=479) (style.css), and no
other token in the scale produces the reference's own 12/16 curve either
— --radius--12 is 12px at 1440/991/767 and drops to 4px only at <=479
(a different breakpoint than needed), --radius--16 is flat 16px at every
width. Composing --radius--12 for <=767 and --radius--16 for <=479 gets
the closest match without a raw px: 12px is exact, 16px is exact, and the
only deviation is that --radius--12 would otherwise still read 12px at
479 without this override — moot here since the 479 rule overrides it
explicitly. AGENTS.md §15.6 says stop and ask rather than invent a token
for a genuine gap; flagged in the report as a token curve neither preset
was built for, not resolved by adding a new one unilaterally. */
@media (max-width: 767px) {
.idia-projects .idia-work__card-image-wrapper {
border-radius: var(--wp--custom--radius--12);
}
}
@media (max-width: 479px) {
.idia-projects .idia-work__card-image-wrapper {
border-radius: var(--wp--custom--radius--16);
}
}
/* ---- Image height ----
Reference: height 100% desktop (the image fills whatever the aspect-ratio
box gives it, work.css's own object-fit:cover + aspect-ratio:16/9
mechanism already does this) -> 300px at <=991 -> 320px at <=479. These
two are literal pixel heights in the reference with no matching spacing
or measure token (they are not vertical rhythm, not a max-width) — kept
as plain CSS per AGENTS.md's own allowance for values that are genuinely
one-off, not a preset candidate. */
@media (max-width: 991px) {
.idia-projects .idia-work__card-image-wrapper img {
height: 300px;
}
}
@media (max-width: 479px) {
.idia-projects .idia-work__card-image-wrapper img {
height: 320px;
}
}