/* Shower page video cards (client 80392363).

   Elementor renders its play affordance as <i class="eicon-play">, a glyph from
   the eicons webfont. That font is not loaded on this page, so the button was
   invisible and the videos read as plain photos. Everything below draws the
   button in pure CSS with no font dependency.

   Positioning note, learned the hard way: Elementor centres .elementor-custom-embed-play
   with `position:absolute; inset-block-start:50%; inset-inline-start:50%` plus a
   transform that multiplies by --direction-multiplier. Overriding `position` to
   relative drops it into normal flow at the top of the card, where
   .elementor-widget-video .elementor-widget-container {overflow:hidden} clips it
   away entirely. Keep it absolute, neutralise the logical inset with a physical
   one, and own the transform so the hover scale can compose with the centring. */

.gaz-video .elementor-wrapper {
  position: relative;
}

/* Scrim so the button and the duration stay legible on bright bathroom photos. */
.gaz-video .elementor-custom-embed-image-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0) 62%);
  pointer-events: none;
}

.gaz-video .elementor-custom-embed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 2;
  direction: ltr;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

/* Replace the webfont glyph with a pure-CSS triangle. */
.gaz-video .elementor-custom-embed-play i,
.gaz-video .elementor-custom-embed-play svg {
  display: none !important;
}

.gaz-video .elementor-custom-embed-play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #53A2D8;
  margin-left: 6px;
}

.gaz-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play {
  transform: translate(-50%, -50%) scale(1.08);
  background-color: #ffffff;
}

/* Duration badge. The per-video class supplies the text; this rule only
   positions it, so a card without a duration class renders nothing at all. */
.gaz-video .elementor-custom-embed-image-overlay::after {
  position: absolute;
  bottom: 10px;
  left: 10px;/* physical, not logical: LTR digits, bottom-left in both directions */
  z-index: 2;
  direction: ltr;
  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;
  font-family: "Noto Sans H", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  pointer-events: none;
}

.gaz-dur-59 .elementor-custom-embed-image-overlay::after { content: "0:59"; }
.gaz-dur-41 .elementor-custom-embed-image-overlay::after { content: "0:41"; }
.gaz-dur-34 .elementor-custom-embed-image-overlay::after { content: "0:34"; }
.gaz-dur-21 .elementor-custom-embed-image-overlay::after { content: "0:21"; }

@media (max-width: 767px) {
  .gaz-video .elementor-custom-embed-play {
    width: 60px;
    height: 60px;
  }
  .gaz-video .elementor-custom-embed-play::after {
    border-width: 12px 0 12px 18px;
    margin-left: 5px;
  }
}

/* "Why choose us" cards: fixed 3 per row on desktop so the six items read as
   two clean rows, rather than the 4+2 an auto-fit grid produced. */
.gaz-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  font-family: "Noto Sans H", sans-serif;
}

@media (max-width: 1024px) {
  .gaz-why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .gaz-why-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .gaz-video .elementor-custom-embed-play {
    transition: none;
  }
  .gaz-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play {
    transform: translate(-50%, -50%);
  }
}