/* ============================================================
   C&R — V4: V1 DARK-GLASS ON BOTH SURFACES
   Loads AFTER home-polish.css. Operator-approved direction
   after extended iteration: the V1 dark-glass band is what
   works premium for text-over-photo legibility, applied
   consistently to both service cards and recent project cards.

   Layout / photos / titles / arrows unchanged. ONLY the glass
   band recipe changes (navy tint instead of white tint,
   heavier blur, green hairline at the top edge).
   ============================================================ */


/* ---------- Services bento — image above band + continuation ----------
   Card is a flex column: image fills the area above the band edge-
   to-edge (object-fit: cover); band sits naturally below as a
   flex item. The image is ALSO set as a background-image on the
   card itself, covering the full card area — so the portion
   behind the band is the same photo continuing (not flipped, not
   duplicated visibly), blurred through the frosted glass.

   The band itself is untouched. Works in all browsers (no
   -webkit-box-reflect dependency). */
.bento-card {
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bento-card img {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: cover;
}
.bento-meta {
  position: relative;
  inset: auto;
  z-index: 2;
}

/* Per-card background-image — same photo as the foreground img,
   so the frosted glass band has the image continuing behind it. */
.bento-01 { background-image: url(/assets/images/svc-01-car-park.jpg); }
.bento-02 { background-image: url(/assets/images/svc-02-warehouse.jpg); }
.bento-03 { background-image: url(/assets/images/svc-03-road.jpg); }
.bento-04 { background-image: url(/assets/images/svc-08-sports.jpg); }
.bento-05 { background-image: url(/assets/images/svc-08-sports.jpg); }
.bento-06 { background-image: url(/assets/images/svc-06-removal.jpg); }
.bento-07 { background-image: url(/assets/images/svc-05-coatings.jpg); }
.bento-08 { background-image: url(/assets/images/svc-05-coatings.jpg); }
.bento-09 { background-image: url(/assets/images/svc-07-antiskid.jpg); }
.bento-10 { background-image: url(/assets/images/svc-05-coatings.jpg); }
.bento-11 { background-image: url(/assets/images/svc-09-jetwash.jpg); background-position: center 28%; }
.bento-11 img { object-position: center 28%; }
.bento-12 { background-image: url(/assets/images/svc-04-ev.jpg); }
.bento-13 { background-image: url(/assets/images/svc-11-consultancy.jpg); }
.bento-14 { background-image: url(/assets/images/svc-10-civils.jpg); }

/* ---------- Services bento — light glass, NAVY text ----------
   Contrast inversion. Every dark glass tint (navy / black /
   charcoal) added to the page's already-navy-heavy density or
   looked cheap. The premium move that hasn't been tried: keep
   the glass band LIGHT and flip the title text to navy. Same
   glass mechanism as the projects below, opposite direction —
   gives services a distinct visual identity (light, photo-led)
   while projects stay weightier (dark, editorial). */
.bento-meta::before {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
  backdrop-filter: blur(28px) saturate(1.55);
  border-top: 1px solid rgba(255, 255, 255, .45);
}
.bento-card:hover .bento-meta::before,
.bento-card:focus-visible .bento-meta::before {
  background: rgba(255, 255, 255, .7);
  border-top-color: var(--green);
}

/* Title flips to navy (was white in home.css) — strong contrast
   on the light frosted band. */
.bento-title {
  color: var(--navy);
  text-shadow: none;
}

/* Arrow flips to navy outline matching the title. Green-fill hover
   stays the same. */
.bento-arrow {
  border: 1.5px solid rgba(27, 20, 66, .35);
  color: var(--navy);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.bento-card:hover .bento-arrow,
.bento-card:focus-visible .bento-arrow {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy);
}

/* ---------- Recent work — V1 dark glass (same recipe) ---------- */
.recent-meta::before {
  background: rgba(14, 9, 48, .55);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  backdrop-filter: blur(28px) saturate(1.8);
  border-top: 1px solid rgba(97, 204, 107, .55);
}
.recent-card:hover .recent-meta::before {
  background: rgba(14, 9, 48, .72);
  border-top-color: var(--green);
}

/* Recent non-feature full-card frost — navy-tinted to match */
.recent-frost {
  background: rgba(14, 9, 48, .3);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
}

/* ---------- Recent work — image above band + continuation ----------
   Same recipe as the services cards above: card is a flex column,
   foreground img fills the area above the band edge-to-edge, and the
   same photo is set as the card's background-image so it continues
   behind the band (blurred through the frosted glass band).

   Grid-row clamp: home.css sets `grid-template-rows: repeat(3, 1fr)`
   on .recent-grid with `min-height: 640px`. By default `1fr` rows
   grow to the min-content of their children — and when this section
   was converted to flex-column, the img's intrinsic height became
   the min-content, blowing the rows past 213px. `minmax(0, 1fr)`
   tells the rows they're allowed to shrink to zero, so the explicit
   min-height on the grid + 1fr distribution holds the rows at the
   originally-approved heights. */
/* Fix the grid rows to a known pixel height — same approach the
   services bento uses (`grid-auto-rows: 220px`). With flex column
   on the cards + an img using `flex: 1 1 auto`, flexible rows
   would let the img's intrinsic height push the cards way past
   the 640px the operator approved. Locking the rows + clearing
   the now-redundant min-height holds the heights exactly. */
.recent-grid {
  grid-template-rows: repeat(3, 200px);
  min-height: 0;
}
.recent-card {
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 0;
}
.recent-card img {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: cover;
}
.recent-meta {
  position: relative;
  inset: auto;
  z-index: 2;
}

/* Per-card background-image — order matches the markup in indexv4.html:
   feature (Waitrose) first, then 3 side cards (Triform, S.Coast UV,
   Canary Wharf). */
.recent-grid > .recent-card:nth-child(1) { background-image: url(/assets/images/case-04-waitrose.jpg); }
.recent-grid > .recent-card:nth-child(2) { background-image: url(/assets/images/case-01-factory.jpg); }
.recent-grid > .recent-card:nth-child(3) { background-image: url(/assets/images/case-02-uv-warehouse.jpg); }
.recent-grid > .recent-card:nth-child(4) { background-image: url(/assets/images/case-03-canary-wharf.jpg); }