.mmz-featured-v2 {
  width: 100%;
  position: relative;
}

/* Padding interno lateral para que las flechas queden en los extremos,
   sin superponerse sobre el contenido */
.mmz-featured-v2__pad {
  padding-left: 3.25rem;
  padding-right: 3.25rem;
}

/* Título */
.mmz-featured-v2__title {
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 0.6rem;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
}

/* Extracto (dejamos más aire; el texto ya lo alargamos en PHP) */
.mmz-featured-v2__excerpt {
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.mmz-featured-v2__btn {
  display: inline-block;
  text-decoration: none;
}

/* Categoría: NO definimos estilo propio.
   La idea es que herede el mismo estilo que tus tags, porque usamos
   la misma estructura/clases field--name-field-tags. */
.mmz-featured-v2__category-wrap {
  margin-bottom: 0.5rem;
}

/* Imagen 2:3 */
.mmz-featured-v2__media {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0.75rem;
}

.mmz-featured-v2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Si no hay imagen */
.mmz-featured-v2__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.55);
  font-size: 0.95rem;
}

/* Controles del carrusel: colocados en los laterales del bloque */
.mmz-featured-v2__control.carousel-control-prev,
.mmz-featured-v2__control.carousel-control-next {
  width: 3.25rem;
  opacity: 1;
}

.mmz-featured-v2__control.carousel-control-prev {
  left: 0;
}

.mmz-featured-v2__control.carousel-control-next {
  right: 0;
}

/* Icono: pastilla gris semitransparente + borde para verse en fondos claros/oscuros */
.mmz-featured-v2__icon.carousel-control-prev-icon,
.mmz-featured-v2__icon.carousel-control-next-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background-color: rgba(80, 80, 80, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  background-size: 1rem 1rem;
}

/* Reemplazamos el SVG de Bootstrap por uno blanco (más legible) */
.mmz-featured-v2__icon.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.mmz-featured-v2__icon.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
