/* =====================================================================
   7thbreed — Homepage uniform color system (light mode)
   One tint for every home section, one card style for every card.
   Scope: homepage only (body containing main .hero-section),
          light mode only (html:not(.dark)). Dark mode untouched.
   ===================================================================== */

html:not(.dark) body.home-page {
  --home-tint: color-mix(in oklab, var(--surface) 34%, transparent);
  --home-card-border: color-mix(in oklab, var(--primary) 10%, var(--border));
  --home-card-shadow: 0 1px 2px rgba(2, 6, 23, .04), 0 20px 44px -20px rgba(23, 78, 166, .20);
  --home-card-shadow-hover: 0 2px 4px rgba(2, 6, 23, .05), 0 30px 58px -20px rgba(23, 78, 166, .30);
  --home-card-radius: 1.25rem;
}

/* ---------- 1. Every home section shares the same container color ---------- */
html:not(.dark) body.home-page #products-preview,
html:not(.dark) body.home-page #featured-products,
html:not(.dark) body.home-page #projects,
html:not(.dark) body.home-page #home-stats,
html:not(.dark) body.home-page #faqs {
  background: var(--home-tint);
  border-color: transparent; /* drop the stats section's one-off border-y */
}

/* ---------- 2. Every card/tile/item shares one card style ---------- */
html:not(.dark) body.home-page .front-page-service-card,
html:not(.dark) body.home-page .product-card,
html:not(.dark) body.home-page .front-page-project-card,
html:not(.dark) body.home-page #home-stats .rounded-xl,
html:not(.dark) body.home-page #faqs details {
  background: var(--card);
  border: 1px solid var(--home-card-border);
  border-radius: var(--home-card-radius);
  box-shadow: var(--home-card-shadow);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
}

/* ---------- 3. Uniform hover: same lift, same glow ---------- */
html:not(.dark) body.home-page .front-page-service-card:hover,
html:not(.dark) body.home-page .product-card:hover,
html:not(.dark) body.home-page .front-page-project-card:hover,
html:not(.dark) body.home-page #home-stats .rounded-xl:hover,
html:not(.dark) body.home-page #faqs details:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
  box-shadow: var(--home-card-shadow-hover);
}

/* ---------- 4. Uniform image wells behind product/service imagery ---------- */
html:not(.dark) body.home-page .front-page-service-card [class~="bg-surface"],
html:not(.dark) body.home-page .product-card-image {
  background: var(--surface-2);
}

/* Recent Installations: replace the heavy white photo wash with a cinematic fade. */
html:not(.dark) body.home-page #projects .front-page-project-card > .absolute.inset-0.bg-gradient-to-t {
  background: linear-gradient(
    to top,
    rgba(7, 22, 45, .92) 0%,
    rgba(7, 22, 45, .62) 36%,
    rgba(7, 22, 45, .16) 68%,
    transparent 86%
  ) !important;
}
html:not(.dark) body.home-page #projects .front-page-project-card h3 {
  color: #fff !important;
}
html:not(.dark) body.home-page #projects .front-page-project-card p {
  color: rgba(255, 255, 255, .82) !important;
}
html:not(.dark) body.home-page #projects .front-page-project-card span[class*="bg-primary"] {
  background: rgba(37, 99, 235, .78) !important;
  color: #fff !important;
}
html.dark body.home-page #projects .front-page-project-card span[class*="bg-primary"] {
  position: relative;
  z-index: 2;
  background: #2563eb !important;
  color: #fff !important;
  opacity: 1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

/* ---------- 5. Details: consistent text and inner separators ---------- */
html:not(.dark) body.home-page #faqs details summary {
  font-weight: 600;
}
html:not(.dark) body.home-page #home-stats .rounded-xl {
  padding: 1.15rem;
}

/* ---------- 6. "Get in touch" CTA banner: let the photo actually show ----------
   The compiled markup stacks opacity-30 image under an 85/80% bg gradient,
   leaving ~6% image visible. Rebalance: brighter image, gradient that is
   light in the middle (photo visible) and solid at the edges (smooth joins). */
html:not(.dark) body.home-page .front-page-cta-banner .front-page-cta-image {
  opacity: .6;
  filter: saturate(1.08) brightness(1.04);
}
html:not(.dark) body.home-page .front-page-cta-banner .absolute.inset-0.bg-gradient-to-b {
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--background) 72%, transparent) 0%,
    color-mix(in oklab, var(--background) 34%, transparent) 38%,
    color-mix(in oklab, var(--background) 30%, transparent) 62%,
    var(--background) 96%
  );
}
/* Keep the copy crisp over the now-visible photo */
html:not(.dark) body.home-page .front-page-cta-banner .container-x {
  text-shadow: 0 1px 3px rgba(255, 255, 255, .65), 0 4px 22px rgba(255, 255, 255, .4);
}
html:not(.dark) body.home-page .front-page-cta-banner .container-x .text-muted-foreground {
  color: color-mix(in oklab, var(--muted-foreground) 78%, var(--background));
  text-shadow: 0 1px 2px rgba(255, 255, 255, .7);
}

/* ---------- 7. Reduced motion: keep colors, drop the lift ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.dark) body.home-page .front-page-service-card:hover,
  html:not(.dark) body.home-page .product-card:hover,
  html:not(.dark) body.home-page .front-page-project-card:hover,
  html:not(.dark) body.home-page #home-stats .rounded-xl:hover,
  html:not(.dark) body.home-page #faqs details:hover {
    transform: none;
  }
}

/* Recent Installations image viewer */
#projects .front-page-project-card[data-installation-gallery-index] { cursor: zoom-in; }
#projects .front-page-project-card[data-installation-gallery-index]:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 4px; }
html.installation-gallery-open { overflow: hidden; }
.installation-gallery[hidden] { display: none !important; }
.installation-gallery { position: fixed; inset: 0; z-index: 2147482600; display: grid; place-items: center; padding: 1rem; }
.installation-gallery-backdrop { position: absolute; inset: 0; background: rgba(2, 8, 23, .88); backdrop-filter: blur(12px); }
.installation-gallery-panel { position: relative; width: min(100%, 72rem); height: min(92vh, 52rem); display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; grid-template-rows: minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 1.35rem; background: #07162d; box-shadow: 0 30px 90px rgba(0,0,0,.5); color: #fff; }
.installation-gallery figure { min-width: 0; min-height: 0; height: 100%; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; border-radius: 1rem; background: #020817; }
.installation-gallery-image { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.installation-gallery figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; background: rgba(7,22,45,.96); }
.installation-gallery figcaption strong { font-size: .95rem; }
.installation-gallery figcaption span { color: rgba(255,255,255,.7); font-size: .78rem; text-align: right; }
.installation-gallery-arrow,.installation-gallery-close { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.installation-gallery-arrow { width: 2.75rem; height: 2.75rem; border-radius: 999px; font-size: 1.2rem; }
.installation-gallery-arrow:hover,.installation-gallery-close:hover { background: var(--primary); border-color: var(--primary); }
.installation-gallery-close { position: absolute; z-index: 2; top: .75rem; right: .75rem; width: 2.5rem; height: 2.5rem; border-radius: 999px; font-size: 1.55rem; line-height: 1; }
.installation-gallery-counter { grid-column: 1 / -1; text-align: center; color: rgba(255,255,255,.72); font-size: .75rem; }
.installation-gallery-thumbs { grid-column: 1 / -1; display: flex; gap: .55rem; overflow-x: auto; padding: .25rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.installation-gallery-thumbs button { flex: 0 0 4.5rem; height: 3.25rem; padding: 0; border: 2px solid transparent; border-radius: .6rem; overflow: hidden; background: #0f1d34; cursor: pointer; scroll-snap-align: center; opacity: .58; }
.installation-gallery-thumbs button.is-active { border-color: #60a5fa; opacity: 1; }
.installation-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media(max-width:640px){.installation-gallery{padding:.5rem}.installation-gallery-panel{height:min(94svh,46rem);grid-template-columns:2.5rem minmax(0,1fr) 2.5rem;padding:.65rem;gap:.4rem}.installation-gallery-arrow{width:2.35rem;height:2.35rem}.installation-gallery figcaption{display:block}.installation-gallery figcaption span{display:block;margin-top:.25rem;text-align:left}.installation-gallery-thumbs button{flex-basis:3.8rem;height:2.8rem}}