/* --------------------------------------------------------------------------
 * Kuvan paikanvaraaja — näytetään kun kuvaa ei ole vielä ladattu.
 *
 * SVG piirretään taustakuvana, jotta sama tiedostopolku toimii sekä
 * julkisivulla että editorissa (WP normalisoi editorityylien url()-polut).
 *
 * Kuvasuhde ja kulmat säädetään periytyvillä tunnuksilla, ei tarkemmilla
 * valitsimilla: editorissa WP etuliittää tämän tiedoston valitsimet
 * .editor-styles-wrapperilla, jolloin lohkon oma sääntö jäisi tasapeliin ja
 * häviäisi latausjärjestyksessä.
 * ----------------------------------------------------------------------- */
.froggy-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: var(--froggy-placeholder-ratio, 350 / 315);
  background-color: var(--froggy-placeholder-bg);
  background-image: url("../images/placeholder_img.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(30%, 7rem) auto;
  border-radius: var(--froggy-placeholder-radius, var(--wp--custom--radius, 8px));
}

/* Editorin versio on painike, joka avaa mediakirjaston. */
button.froggy-placeholder {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

button.froggy-placeholder:hover,
button.froggy-placeholder:focus-visible {
  background-color: var(--froggy-placeholder-bg-hover);
}