/* ===== CONFIGURACIÓN GENERAL ===== */
.mc-bw-grid {
  --mc-gap: 56px;
  --mc-sep-color: #1a1a1a;
  --mc-sep-opacity: .25;
}

/* ===== GRID ===== */
.mc-bw-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mc-gap);
  position: relative;
}

/* separadores centrados */
.mc-bw-rows::before,
.mc-bw-rows::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--mc-sep-color);
  opacity: var(--mc-sep-opacity);
  pointer-events: none;
}
.mc-bw-rows::before {
  left: calc(((100% - (2 * var(--mc-gap))) / 3) + (var(--mc-gap) / 2));
}
.mc-bw-rows::after {
  left: calc((2 * ((100% - (2 * var(--mc-gap))) / 3)) + (3 * var(--mc-gap) / 2));
}

/* ===== TARJETA ===== */
.mc-bw-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
	text-decoration: none !important;
	padding: 20px 0;
}
/*.mc-bw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}*/

/* ===== IMAGEN 9:6 – con fallback sin “huecos grises” ===== */
/* Imagen 9:6 que SIEMPRE cubre el hueco, sin bandas */
.mc-bw-thumb{
  position: relative;
  width: 100%;
  height: 0;                 /* el alto lo da el padding-top */
  padding-top: 66.6667%;     /* 6/9 -> relación 9:6 */
  overflow: hidden;
  background: transparent;   /* sin gris por si no carga */
  line-height: 0;            /* elimina gap de imágenes inline */
}

.mc-bw-thumb img{
  position: absolute;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  width: 100% !important;    /* pisa height:auto de WP */
  height: 100% !important;
  object-fit: cover;         /* CUBRE el área */
  object-position: center;
  display: block;
	transition: transform 0.5s ease-in-out; /* <-- transición suave */
  transform: scale(1); /* estado base */
}

/* Fallback para cuando aspect-ratio no se respeta correctamente */
@supports not (aspect-ratio: 1 / 1) {
  .mc-bw-thumb {
    height: 0;
    padding-top: 66.6667%;          /* 6/9 */
  }
  .mc-bw-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.mc-bw-card:hover .mc-bw-thumb img {
  transform: scale(1.05);
}

/* ===== TEXTOS ===== */
.mc-bw-title {
  font-size: 16px;
  line-height: 1.25;
  margin: 15px 0 20px 0;
  font-weight: 600;
}
.mc-bw-date {
  font-size: 14px;
  letter-spacing: .2px;
}

/* ===== BOTÓN CARGAR MÁS ===== */
.mc-bw-more { text-align:center; margin: 40px 0px;  }
.mc-bw-btn {
  appearance: none; border: 0; padding:10px 16px;
  background: #E2211C; color:#fff; font-size: 14px; font-weight:700;
  border-radius: 0px; cursor:pointer; transition: background .2s ease;
}
.mc-bw-btn:hover { background:#B40600; }
.mc-bw-btn[disabled]{ background-color: #f2f2f2;       /* gris claro */
  color: #999;                     /* texto gris */
  cursor: not-allowed;
  box-shadow: none;
  border: 1px solid #ddd; opacity: .6 !important;}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .mc-bw-rows {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  .mc-bw-rows::before,
  .mc-bw-rows::after { display:none; }
}
@media (max-width: 640px) {
  .mc-bw-rows { grid-template-columns: 1fr; gap: 28px; }
}