/* Klikkauksella ladattava upotus (TEEMA.md § 5.3). Sama laatikko linkille ja iframelle, joten sivu ei hyppää
   klikatessa. vertical-align: bottom poistaa fontin alapidennysraon (TEEMA.md § 10, vanhan doctypen rivikorkeus). */
.upotus, .upotus-kehys {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 16 / 9;
  vertical-align: bottom;
  border: 0;
  overflow: hidden;
  background: #1d1d1f;
  color: #fff;
}
.upotus-kartta { aspect-ratio: 4 / 3; background: #e4e7ea; color: var(--vari-teksti, #1d1d1f); }

.upotus {
  display: flex; align-items: center; justify-content: center;
  padding: var(--vali, 1rem); text-align: center; text-decoration: none; font-weight: 600;
}
.upotus img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Soittopainike CSS:llä: ei kuvaa eikä ulkoista pyyntöä */
.upotus-youtube::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4.25rem; height: 3rem; margin: -1.5rem 0 0 -2.125rem;
  border-radius: .75rem; background: #212121; opacity: .85;
}
.upotus-youtube::after {
  content: ""; position: absolute; left: 50%; top: 50%; margin: -.625rem 0 0 -.4rem;
  border-style: solid; border-width: .625rem 0 .625rem 1.1rem; border-color: transparent transparent transparent #fff;
}
.upotus-youtube:hover::before, .upotus-youtube:focus-visible::before { background: #f00; opacity: 1; }
.upotus:focus-visible { outline: 3px solid var(--vari-linkki, #0b57d0); outline-offset: 2px; }