/* ==========================================================================
   plg_content_emseryoutube · reproductor de YouTube con fachada (tokens de tpl_emser2026)
   El iframe se crea solo al pulsar el botón (youtube.js). Sin JS queda el enlace.
   ========================================================================== */

.em-yt { margin: 1.75em 0; max-width: 860px; }
.em-yt--short,
.em-prose .em-yt--short,
.em-read__prose figure.em-yt--short { max-width: 340px; margin-left: auto; margin-right: auto; }

.em-yt__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--em-radius, 16px);
  background: var(--em-dark, #0b2119);
  box-shadow: var(--em-shadow, 0 6px 18px rgba(18, 41, 31, .08));
}
.em-yt--short .em-yt__frame { aspect-ratio: 9 / 16; }

/* Fachada: <a> sin JS, <button> con JS (mismo aspecto, misma caja: sin CLS) */
.em-yt__facade {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
  border-radius: inherit; overflow: hidden;
  background: linear-gradient(135deg, var(--em-brand, #04693c), var(--em-teal-2, #0a5c68) 60%, var(--em-dark, #0b2119));
  color: #fff; font: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
}
.em-yt__facade.em-extlink::after { content: none; }
.em-yt__facade:focus-visible {
  outline: 3px solid var(--em-focus, #0d94a8);
  outline-offset: 3px;
  border-radius: var(--em-radius, 16px);
}
.em-yt__thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; display: block; border-radius: 0;
}
/* Velo inferior para que el título se lea sobre cualquier miniatura */
.em-yt__facade::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(11, 33, 25, .88) 0, rgba(11, 33, 25, .45) 30%, rgba(11, 33, 25, 0) 58%);
}

.em-yt__play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border-radius: var(--em-pill, 999px);
  background: var(--em-brand, #04693c); color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), var(--em-shadow-l, 0 12px 32px rgba(18, 41, 31, .16));
  transform: translate(-50%, -50%);
  transition: transform .2s var(--em-ease, ease), background-color .2s var(--em-ease, ease);
}
.em-yt__play svg { margin-left: 4px; }
.em-yt__facade:hover .em-yt__play,
.em-yt__facade:focus-visible .em-yt__play {
  background: var(--em-brand-hover, #03532f);
  transform: translate(-50%, -50%) scale(1.07);
}

.em-yt__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 14px 18px 16px;
  font-family: var(--em-font-sans, system-ui, sans-serif);
  font-size: var(--em-fs-m, 1rem); font-weight: 700; line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.em-yt__title {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.em-yt--short .em-yt__caption { font-size: var(--em-fs-base, .90625rem); padding: 12px 14px 14px; }

.em-yt__iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; border-radius: inherit;
  background: #000;
}

/* Enlace visible debajo */
.em-yt__src {
  margin-top: .65em;
  font-size: var(--em-fs-sm, .84375rem); line-height: 1.45;
  color: var(--em-ink-3, #4f6357);
  overflow-wrap: anywhere;
}
.em-yt--short .em-yt__src { text-align: center; }
.em-yt__src a { font-weight: 700; color: var(--em-brand, #04693c); text-underline-offset: .18em; }
.em-yt__src a:hover { color: var(--em-brand-hover, #03532f); }
.em-yt__url { font-weight: 600; }

@media (max-width: 639px) {
  .em-yt { margin: 1.4em 0; }
  .em-yt__play { width: 60px; height: 60px; }
  .em-yt__caption { padding: 10px 14px 12px; font-size: var(--em-fs-base, .90625rem); }
  .em-yt--short { max-width: min(340px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .em-yt__play { transition: none; }
  .em-yt__facade:hover .em-yt__play,
  .em-yt__facade:focus-visible .em-yt__play { transform: translate(-50%, -50%); }
}

@media (forced-colors: active) {
  .em-yt__play { border: 2px solid ButtonText; }
  .em-yt__facade:focus-visible { outline-color: Highlight; }
}

@media print {
  .em-yt__frame { display: none; }
}