.wa-cards__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
.wa-cards__track { display: grid; gap: var(--wa-gap); grid-template-columns: repeat(var(--wa-cols, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
/* Carousel: fixed card width (360px, Figma) so the track overflows the 1400px container and the slider is always functional. */
.wa-cards--carousel .wa-cards__track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 360px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.wa-cards--carousel .wa-cards__track:active { cursor: grabbing; }
.wa-cards--carousel .wa-cards__track::-webkit-scrollbar { display: none; }
/* NMD-02b fix: .wa-card is `position:relative` but had `z-index:auto` — per spec that does NOT
   establish a new stacking context on its own. .wa-card__img/.wa-card::after (z-index:-1, below)
   therefore escaped .wa-card's own box entirely and painted behind it in the PARENT stacking
   context (ultimately behind .wa-card's own `background: var(--wa-darker)`, which paints as part
   of the card's normal in-flow box in the root stacking context) — real <img>, 200, naturalWidth
   > 0, just invisible under the card's own dark background (confirmed live, anonymous, cache-
   busted: elementFromPoint at the image's centre returned the `.wa-card__more` link, never the
   <img>). `isolation: isolate` makes .wa-card its own stacking context so the negative z-index
   children are contained and paint above the card's background, below the body text, as intended
   — no effect on layout/position, the stretched-link (`.wa-card__more::before`, z-index 3) and
   NMD-01's click-through fix are unaffected (still resolve inside this same stacking context). */
.wa-card { position: relative; isolation: isolate; height: 420px; overflow: hidden; border-radius: var(--wa-radius); scroll-snap-align: start; background: var(--wa-darker); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; box-sizing: border-box; }
/* NMD-01 (B) root cause 1/2: .wa-card__img / ::after used to be plain positioned descendants
   (z-index:auto) and .wa-card__body was given its own `position:relative;z-index:2` just to paint
   above them. That made .wa-card__body (not .wa-card) the nearest *positioned* ancestor for
   .wa-card__more's ::before overlay below, so the "clickable" pseudo only ever covered the ~92px
   text block, never the image area above it (see view.js notes for root cause 2/2 — carousel). Giving
   the image/gradient a negative z-index instead lets the body's normal in-flow text paint above them
   without being positioned itself, so .wa-card (the actual positioned ancestor) is what the overlay
   below stretches against. */
.wa-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; z-index: -1; }
.wa-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 12, 22, 0) 35%, rgba(4, 12, 22, .85) 100%); }
.wa-card__body { position: static; }
/* NMD-01 (A): Figma card eyebrow (Home 497:17592 "services", Figma Eyebrow style) is Bold (700) —
   this rule had no font-weight, so it rendered at the body default (400). Only weight changed; size/
   line-height/colour unchanged. Figma letter-spacing on this node is 1.2px (not 1.5px) — reported in
   qa/report.md only, not changed here (out of this job's scope). */
/* NMD-02 (eyebrow): letter-spacing corrected to the Figma value (1.2px, Home 497:17592) — was
   1.5px (reported only in NMD-01, fixed now). font-weight:700 (NMD-01) confirmed still correctly
   applied/rendered (self-hosted Afacad variable font covers the full 400–700 range, see qa report). */
.wa-card__eyebrow { margin: 0 0 6px; font-size: var(--wp--preset--font-size--eyebrow); line-height: 15px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wa-accent); }
.wa-card__title { margin: 0; font-size: var(--wp--preset--font-size--subheading); line-height: 1.27; font-weight: 700; }
.wa-card__text { margin: 8px 0 0; font-size: var(--wp--preset--font-size--small); line-height: 1.25; color: rgba(255, 255, 255, .8); }
.wa-card__more { display: inline-block; margin-top: 24px; font-size: var(--wp--preset--font-size--eyebrow); line-height: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, .72); text-decoration: none; }
/* NMD-01 (B): stretched-link pattern — ::before's containing block is now .wa-card (see .wa-card__body
   above), so this covers the whole card (image + text), not just the text block. One real link per
   card, the visible "Explore more" label is unchanged. */
.wa-card__more::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.wa-card:hover .wa-card__img { transform: scale(1.04); }
/* NMD-01 (B): keyboard focus ring for the whole-card link, visible even though the label itself is
   small — outline drawn on the full-card pseudo, not just the text, `outline-offset:-3px` keeps it
   inside the card's own radius/overflow:hidden. */
.wa-card__more:focus-visible { outline: none; }
.wa-card__more:focus-visible::before { outline: 2px solid var(--wa-accent); outline-offset: -3px; }
.wa-cards__controls { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }
.wa-cards__dots { display: flex; gap: 8px; }
.wa-cards__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .3); cursor: pointer; }
.wa-cards__dot.is-active { background: var(--wa-accent); }
.wa-cards__arrows { display: flex; gap: 10px; }
.wa-cards__arrow { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: var(--wa-fg); cursor: pointer; }
.wa-cards__arrow[data-dir="prev"] .wa-icon { transform: rotate(180deg); }
.wa-cards__arrow:disabled { opacity: .35; cursor: default; }
.wa-bg--light .wa-cards__dot, .wa-bg--muted .wa-cards__dot { background: rgba(0, 0, 0, .2); }
.wa-bg--light .wa-cards__arrow, .wa-bg--muted .wa-cards__arrow { border-color: rgba(0, 0, 0, .3); }
/* R14 (Services feedback): this instance has no head (no eyebrow/title/link_all), so the gap to the hero above
   and to the CTA band below is only the section's own padding — Figma (530:552) measures ~182px top / ~154px
   bottom at 1920, more than the shared --wa-section-py (96px). Scoped to this instance, same placement logic.
   R15 (f2w-20261005-130654): the previous single-class selector (.wa-cards--services) has the same specificity
   (0,1,0) as the shared .wa-section rule that also sets `padding`; when the block's own style.css is enqueued
   before global.css (as ACF block styles are), the shared rule wins on source order and the gap is silently
   lost — this is the defect the job reported ("δεν εφαρμόστηκε, ούτε μετά το feedback"). Fixed by scoping both
   instance rules below to two classes (.wa-cards.wa-cards--<slug>, specificity 0,2,0) so they always win,
   regardless of enqueue order. */
.wa-cards.wa-cards--services { padding-top: 182px; padding-bottom: 154px; }
@media (max-width: 1024px) { .wa-cards.wa-cards--services { padding-top: 137px; padding-bottom: 116px; } }
@media (max-width: 768px)  { .wa-cards.wa-cards--services { padding-top: 107px; padding-bottom: 90px; } }

/* Road Freight (f2w-20261005-130654), Figma 530:1958: 120px block-top -> "Other Services" title, then the
   title's own text block is ~60px tall, ~115px cards -> block-bottom (before CTA Band).
   R16 (feedback 2026-10-05): the title->cards gap was zeroed assuming the 60px title row height already
   covered the visible gap — the dev feedback found the title touching the cards (0 visible gap) and asked
   for a visible ~35px gap measured from the text baseline to the card top, not the box height. Restored as
   an explicit margin instead of removing it entirely. */
.wa-cards.wa-cards--road-freight { padding-top: 120px; padding-bottom: 115px; }
.wa-cards--road-freight .wa-cards__head { margin-bottom: 35px; }
@media (max-width: 1024px) { .wa-cards.wa-cards--road-freight { padding-top: 90px; padding-bottom: 86px; } }
@media (max-width: 768px)  { .wa-cards.wa-cards--road-freight { padding-top: 70px; padding-bottom: 67px; } }

/* R16: Figma grey background for this page's Cards Grid (and Services) is #F5F7F6 (token gray-96), not the
   shared "muted" role (gray-50 #f9f9f9) used elsewhere (e.g. Home). Scoped to these two instances only —
   specificity (0,2,0) beats .wa-bg--muted (0,1,0) regardless of CSS source order, so Home's muted Cards Grid
   is unaffected. */
.wa-cards.wa-cards--road-freight, .wa-cards.wa-cards--services { --wa-bg: var(--wp--preset--color--gray-96); }

/* R16: Figma (530:1958) measures 30px horizontal gap between the 4 cards (card width ~326-329px filling the
   1400px container), not the shared default (16px, giving 338px cards). Scoped to this instance only —
   feedback line only checked Road Freight, Services untouched. */
.wa-cards--road-freight { --wa-gap: 30px; }
@media (max-width: 1024px) { .wa-cards { --wa-cols: 2 !important; } }
@media (max-width: 640px) {
	.wa-cards__head { flex-direction: column; align-items: flex-start; gap: 16px; }
	.wa-cards--grid .wa-cards__track { grid-template-columns: 1fr; }
	.wa-cards--carousel .wa-cards__track { grid-auto-columns: 85%; }
}

/* f2w-20261006-100409 (About, Team): 2-column head (label+title left, paragraph right, Figma 509:786/791)
   and "plain" card style (image on top, name/role below, no dark overlay — Figma 509:957). Opt-in via
   head_text/card_style fields, default "overlay" head/card unchanged on every other page. */
.wa-cards__head--split { align-items: flex-start; gap: max(32px, 2vw); }
.wa-cards__head--split > div:first-child { flex: 0 0 auto; max-width: 565px; }
.wa-cards__head-text { flex: 1 1 420px; max-width: 717px; margin: 0; font-size: var(--wp--preset--font-size--body); line-height: 1.3; color: var(--wa-fg); }
.wa-bg--light .wa-cards__head-text, .wa-bg--muted .wa-cards__head-text { color: var(--wa-text); }

.wa-cards--plain .wa-card { height: auto; background: none; color: var(--wa-text); padding: 0; display: block; border-radius: 0; }
.wa-cards--plain .wa-card__img { position: static; width: 100%; height: 513px; border-radius: var(--wa-radius); }
.wa-cards--plain .wa-card::after { content: none; }
.wa-cards--plain .wa-card__body { margin-top: 24px; }
.wa-cards--plain .wa-card__title { color: var(--wa-text); font-size: var(--wp--preset--font-size--subheading); }
.wa-cards--plain .wa-card__text { color: var(--wa-text-muted); margin-top: 4px; }
.wa-cards--plain .wa-card__more::before { content: none; }
@media (max-width: 640px) { .wa-cards--plain .wa-card__img { height: 380px; } }

/* About · Team (f2w-20261006-100409), Figma 509:957: 3 cards 446px, 30px gap. Column-gap kept >= 2vw per
   build_notes (responsive safety), Figma's 30px is the floor at narrow desktop widths. */
.wa-cards.wa-cards--team { --wa-gap: max(30px, 2vw); }

/* About feedback (f2w-20261006-104233), node 509:784 — scoped to this instance only. */
.wa-cards--team .wa-cards__head { align-items: flex-end; gap: 117px; }
.wa-cards--team .wa-cards__head > div:first-child .wa-eyebrow { font-size: 16px; line-height: 16.5px; letter-spacing: 1.32px; color: var(--wp--preset--color--teal-500); }
.wa-cards--team .wa-cards__head > div:first-child .wa-title { font-weight: 700; font-size: 46px; line-height: 39.6px; letter-spacing: -.72px; max-width: 480px; color: var(--wp--preset--color--navy-900); }
.wa-cards--team .wa-cards__head-text { max-width: 717px; font-size: 18px; line-height: 26px; color: var(--wp--preset--color--navy-900); }
.wa-cards--team .wa-card__title { font-size: 28px; line-height: 28px; font-weight: 700; color: var(--wp--preset--color--navy-900); }
.wa-cards--team .wa-card__text { font-size: 18px; line-height: 20px; font-weight: 500; color: var(--wp--preset--color--teal-500); margin-top: 8px; }
.wa-cards--team .wa-card__img { height: 513.3px; border-radius: var(--wa-radius); background: var(--wp--preset--color--gray-96); }
.wa-cards--team li:first-child .wa-card__img { border-radius: 0; }
.wa-cards--team li:nth-child(3) .wa-card__img { height: 508px; }
@media (max-width: 1024px) {
	.wa-cards--team .wa-cards__head { gap: max(32px, 2vw); }
}
@media (max-width: 640px) {
	.wa-cards--team .wa-card__img { height: 380px; }
	.wa-cards--team li:nth-child(3) .wa-card__img { height: 380px; }
}

/* FIX-01 / R2 (About re-check, placed last in the file so it wins the cascade over the
   unguarded `.wa-cards__head-text { flex: 1 1 420px; }` above, same selector/specificity):
   that rule's 420px flex-basis is a WIDTH hint for the desktop row layout. Once
   `.wa-cards__head` switches to flex-direction:column at ≤640 (first @media block above), the
   very same flex-basis is read as a HEIGHT basis instead — the paragraph box stayed ~420px tall
   with only ~220px of real text, leaving a ~200px blank gap before the next element. Reproduced
   live (visitor conditions: lazy-load on, normal scroll, /about/ "Our Team" intro → first
   photo, 375/390/414). Reset to auto only in the stacked state. */
@media (max-width: 640px) {
	.wa-cards__head-text { flex-basis: auto; }
}