/* ============================================================
 * .mp-social — Carrusel de publicaciones (shortcode
 * [mp_social_media]). Prefijo de clase: .mp-social — no reutilizar
 * en otro widget. Los selectores del embed de Instagram van con
 * .mp-social de prefijo + !important para pisar sus estilos
 * inline (min-width 326px reventaría un sidebar angosto).
 * ============================================================ */
.mp-social {
  --mp-navy: #1c3a8a;
  --mp-gold: #f5a623;

  box-sizing: border-box;
  width: 100%;
}
.mp-social *, .mp-social *::before, .mp-social *::after { box-sizing: inherit; }

/* --- Viewport: recorta las slides fuera de pantalla y anima la altura --- */
.mp-social .mp-social-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  transition: height 0.4s ease;
}

/* --- Track: las slides en fila, la activa define el alto --- */
.mp-social .mp-social-track {
  display: flex;
  align-items: flex-start; /* cada slide con su propio alto (IG mide distinto) */
  will-change: transform;
  transition: transform 0.45s ease;
}

.mp-social .mp-social-slide {
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
}

/* --- Iframe de Facebook: ancho adaptable al sidebar --- */
.mp-social .mp-social-slide iframe {
  display: block;
  width: 100% !important; /* el embed de FB viene fijo en 500px */
  max-width: 100%;
  border: 0;
}

/* --- Iframe de YouTube: 16:9 responsive (pisa width/height del embed) --- */
.mp-social .mp-social-embed--yt {
  height: auto;      /* pisa el atributo height=315 */
  aspect-ratio: 16 / 9;
}

/* --- Blockquote de Instagram: layout angosto --- */
.mp-social .instagram-media {
  margin: 1px auto !important;
  min-width: 0 !important;   /* el default de IG es 326px mínimos */
  width: 100% !important;
  max-width: 100% !important;
}
.mp-social .instagram-media > a {
  display: block;
  padding: 12px;
  font-size: 13px;
  color: var(--mp-navy);
  text-align: center;
}
/* Cuando embed.js ya insertó su iframe, el link de fallback no hace falta. */
.mp-social .instagram-media iframe { display: block; }

/* --- Dots de navegación --- */
.mp-social .mp-social-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}
.mp-social .mp-social-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #cfd5e6;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.mp-social .mp-social-dot:hover { background: var(--mp-navy); }
.mp-social .mp-social-dot.is-active {
  background: var(--mp-gold);
  transform: scale(1.15);
}
.mp-social .mp-social-dot:focus-visible {
  outline: 2px solid var(--mp-navy);
  outline-offset: 2px;
}

/* --- Sin movimiento reducido: sin transiciones --- */
@media (prefers-reduced-motion: reduce) {
  .mp-social .mp-social-viewport,
  .mp-social .mp-social-track,
  .mp-social .mp-social-dot { transition: none; }
}