/* ==========================================================================
   SECTION BACKGROUNDS  (added on top of the original stylesheet)
   Gives every flat-colour section a real project photo behind it under a
   NEUTRAL dark scrim. The scrim used to be burgundy, which threw a heavy colour
   cast over every photo; neutral black darkens for legibility without tinting.
   Tune it by changing the two rgba() stops below.
   ========================================================================== */

:root {
  --shot-1: url('/images/proj-bluestone-steps-entry-002.webp?v=f1c6c406a2');
  --shot-2: url('/images/proj-bluestone-steps-entry-004.webp?v=f1c6c406a2');
  --shot-3: url('/images/proj-concrete-slab-covered-patio-009.webp?v=f1c6c406a2');
  --shot-4: url('/images/proj-paver-driveway-walkway-011.webp?v=f1c6c406a2');
  --shot-5: url('/images/proj-paver-driveway-walkway-012.webp?v=f1c6c406a2');
}

/* base treatment for any section that carries a flat brand colour */
section[class*="bg-[#1a040b]"],
section[class*="bg-[#2A0611]"],
section[class*="bg-[#3B0918]"],
section.bg-background {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* dark section -> darkest tint */
section[class*="bg-[#1a040b]"] {
  background-image: linear-gradient(rgba(9, 7, 8, .74), rgba(9, 7, 8, .82)), var(--shot-1);
}
section[class*="bg-[#2A0611]"] {
  background-image: linear-gradient(rgba(9, 7, 8, .74), rgba(9, 7, 8, .82)), var(--shot-2);
}
section[class*="bg-[#3B0918]"] {
  background-image: linear-gradient(rgba(9, 7, 8, .74), rgba(9, 7, 8, .82)), var(--shot-3);
}
section.bg-background {
  background-image: linear-gradient(rgba(9, 7, 8, .74), rgba(9, 7, 8, .82)), var(--shot-4);
}

/* vary the photo down the page so it never repeats back-to-back */
section:nth-of-type(5n + 2)[class*="bg-"] { background-image: linear-gradient(rgba(9, 7, 8, .74), rgba(9, 7, 8, .82)), var(--shot-2); }
section:nth-of-type(5n + 3)[class*="bg-"] { background-image: linear-gradient(rgba(9, 7, 8, .74), rgba(9, 7, 8, .82)), var(--shot-3); }
section:nth-of-type(5n + 4)[class*="bg-"] { background-image: linear-gradient(rgba(9, 7, 8, .74), rgba(9, 7, 8, .82)), var(--shot-4); }
section:nth-of-type(5n + 5)[class*="bg-"] { background-image: linear-gradient(rgba(9, 7, 8, .74), rgba(9, 7, 8, .82)), var(--shot-5); }

/* Parallax on desktop only — background-attachment:fixed is broken/janky on iOS */
@media (min-width: 1024px) and (hover: hover) {
  section[class*="bg-[#1a040b]"],
  section[class*="bg-[#2A0611]"],
  section[class*="bg-[#3B0918]"],
  section.bg-background { background-attachment: fixed; }
}

/* the footer gets the same treatment so the page never ends on flat colour */
footer {
  background-image: linear-gradient(rgba(9, 7, 8, .74), rgba(9, 7, 8, .82)), var(--shot-5);
  background-size: cover;
  background-position: center;
}