/* ZH Homes minimal visual patch.
   IMPORTANT: Add these rules to the BOTTOM of your EXISTING
   bathroom-remodel.css. Do not replace the whole stylesheet.
   No HTML, quote form, ad tracking, or image URLs are changed. */

@media (min-width: 951px) {
  /* Remove only the desktop elements requested. */
  .bathroom-page .direct-hero-eyebrow,
  .bathroom-page .hero-direct-proof,
  .bathroom-page .direct-cta-note,
  .bathroom-page .form-only-estimate-section {
    display: none !important;
  }
}

/* The existing gallery stays intact, but cards are no longer
   squeezed into three narrow side-by-side columns. */
.bathroom-page #gallery .deck-project-gallery-grid-three {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  width: min(840px, 100%);
  margin-inline: auto;
  gap: 22px;
}

.bathroom-page #gallery .deck-project-gallery-grid-three > .deck-project-gallery-card {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100%;
  min-height: 0 !important;
  aspect-ratio: 16 / 10;
}

/* Stack the original before and after photos vertically. */
.bathroom-page #gallery .bathroom-before-after-card {
  aspect-ratio: auto !important;
}

.bathroom-page #gallery .bathroom-before-after-card .before-after-split {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}

.bathroom-page #gallery .bathroom-before-after-card .before-after-panel {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.bathroom-page #gallery .bathroom-before-after-card .before-after-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hide only the orange "In Progress" and "Finish Details" chips. */
.bathroom-page #gallery .deck-project-tag {
  display: none !important;
}

/* Lighten dark overlays without changing the rest of the theme. */
.bathroom-page #gallery .deck-project-gallery-card::after {
  background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,.36) 100%) !important;
}

.bathroom-page #gallery .bathroom-before-after-card::after {
  display: none !important;
}

.bathroom-page #gallery .bathroom-before-after-card figcaption {
  position: static !important;
  padding: 14px 18px;
  background: #fff;
  color: #241b17;
}

/* Brighter rendering for existing finished photos, not AI replacements. */
.bathroom-page #gallery img[src="bathroom-after.webp"],
.bathroom-page #gallery img[src="bathroom-vanity.webp"] {
  filter: brightness(1.12) contrast(1.03) saturate(1.04);
}

/* Remove the old horizontal flip on the progress photo. */
.bathroom-page #gallery .deck-project-gallery-card.gallery-small-left > img,
.bathroom-page #gallery .deck-project-gallery-card.gallery-small-left:hover > img {
  transform: none !important;
}

@media (max-width: 767px) {
  .bathroom-page #gallery .deck-project-gallery-grid-three > .deck-project-gallery-card {
    aspect-ratio: 4 / 3;
  }

  .bathroom-page #gallery .bathroom-before-after-card {
    aspect-ratio: auto !important;
  }

  .bathroom-page #gallery .bathroom-before-after-card .before-after-panel {
    aspect-ratio: 4 / 3;
  }
}