/* Fotos nos espaços que o build marca como pendentes.
   O componente do site desenha um SVG de água e sobrepõe um rótulo
   [data-placeholder="photo"]. Em vez de editar o build compilado (que quebra a
   hidratação do React), a foto entra por CSS no elemento PAI do rótulo, e o
   rótulo some. Assim o site continua intacto e basta trocar o arquivo quando
   chegar a fotografia real de obra. */

[data-placeholder="photo"] {
  display: none !important;
}

/* O pai do rótulo é o container da imagem: recebe a foto. */
:has(> [data-placeholder="photo"]) {
  background-image: var(--ms-foto, url("/assets/ms-soluciones/fotos/piscina-sevilla.jpg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* O SVG de água fica por baixo como leve textura, para a foto dominar. */
:has(> [data-placeholder="photo"]) > svg {
  opacity: .1;
}

/* Uma foto por tipo de espaço, escolhida pelo rótulo do próprio build. */
:has(> [data-photo-label="Piscina en Sevilla"]) {
  --ms-foto: url("/assets/ms-soluciones/fotos/piscina-sevilla.jpg");
}
:has(> [data-photo-label="Piscina de comunidad"]) {
  --ms-foto: url("/assets/ms-soluciones/fotos/piscina-comunidad.jpg");
}
:has(> [data-photo-label="Piscina de chalet"]) {
  --ms-foto: url("/assets/ms-soluciones/fotos/piscina-chalet.jpg");
}
:has(> [data-photo-label="Foto de visita"]) {
  --ms-foto: url("/assets/ms-soluciones/fotos/visita.jpg");
}
:has(> [data-photo-label^="Piscina lista"]) {
  --ms-foto: url("/assets/ms-soluciones/fotos/piscina-lista.jpg");
}