/* Customer pages (/pages/water-for-*): installation gallery and FAQ.
   Uses the Fresca page colour variables (.h2o-fresca). */
.h2o-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.h2o-gal__slot {
  aspect-ratio: 4 / 3; border: 1px dashed rgba(141,219,245,.32); border-radius: 18px;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
  background: radial-gradient(circle at 30% 20%, rgba(61,184,245,.10), transparent 60%), rgba(255,255,255,.02);
}
.h2o-gal__slot span {
  color: var(--fr-sub, rgba(239,247,251,.72)); font-family: var(--h-display, 'Josefin Sans', sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.h2o-gal__item { margin: 0; position: relative; border-radius: 18px; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--fr-line, rgba(255,255,255,.12)); aspect-ratio: 4 / 3; background: #0b1424; }
.h2o-gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.h2o-gal__item:hover img { transform: scale(1.04); }
.h2o-gal__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; font-size: 13px; color: #fff;
  background: linear-gradient(transparent, rgba(3,6,16,.85));
}
.h2o-gal__lightbox {
  position: fixed; inset: 0; z-index: 99999; background: rgba(3,6,16,.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
}
.h2o-gal__lightbox img { max-width: 100%; max-height: 82vh; border-radius: 12px; }
.h2o-gal__lightbox p { color: #eff7fb; margin-top: 14px; font-size: 14px; }
.h2o-gal__lightbox button {
  position: absolute; top: 16px; right: 20px; background: none; border: 0; color: #fff; font-size: 40px; cursor: pointer;
}

.h2o-faq { margin-top: 32px; display: grid; gap: 12px; max-width: 900px; }
.h2o-faq details {
  border: 1px solid var(--fr-line, rgba(255,255,255,.12)); border-radius: 14px; padding: 0 22px;
  background: rgba(255,255,255,.02);
}
.h2o-faq summary {
  cursor: pointer; list-style: none; padding: 18px 28px 18px 0; position: relative; color: #fff;
  font-family: var(--h-display, 'Josefin Sans', sans-serif); font-size: 15px; font-weight: 600; letter-spacing: .03em;
}
.h2o-faq summary::-webkit-details-marker { display: none; }
.h2o-faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 22px; color: var(--fr-blue, #3db8f5); }
.h2o-faq details[open] summary::after { content: "\2212"; }
.h2o-faq details p { padding: 0 0 18px; }

@media (max-width: 860px) {
  .h2o-gal { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .h2o-gal { grid-template-columns: 1fr; }
  .h2o-gal__slot:nth-child(n+2) { display: none; }
}