/* ============================================================
 * .mp-primera-plana — Sección "Primera plana por corriente"
 * (shortcode [mp_primera_plana]). Prefijo de clase: .mp-primera-plana —
 * no reutilizar en otro widget. Todos los selectores están scoped bajo
 * .mp-primera-plana. El color de cada columna llega por la variable
 * --mp-corriente (hex validado en PHP); los defaults de corriente
 * respetan DESIGN.md (azul/bordó/verde).
 * ============================================================ */
.mp-primera-plana {
  --mp-navy-dark: #14265e;
  --mp-navy: #1c3a8a;
  --mp-border: #e7e9f0;
  --mp-text-body: #3d4560;
  --mp-text-muted: #7a8296;

  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  color: var(--mp-text-body);
  box-sizing: border-box;
  width: 100%;
}
.mp-primera-plana *, .mp-primera-plana *::before, .mp-primera-plana *::after { box-sizing: inherit; }
.mp-primera-plana a { text-decoration: none; }

/* --- Cabecera de la sección --- */
.mp-primera-plana .mp-section-head { margin-bottom: 16px; }
.mp-primera-plana .mp-section-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--mp-navy-dark);
  margin: 0;
  line-height: 1.25;
}

/* --- Grid de columnas (1 por categoría, se acomoda solo) --- */
.mp-primera-plana .mp-columns-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --- Columna --- */
.mp-primera-plana .mp-corriente-col {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mp-border);
  border-top: 4px solid var(--mp-corriente); /* color de la corriente */
  border-radius: 14px;
  padding: 16px 18px 16px;
  box-shadow: 0 2px 10px rgba(20, 38, 94, 0.05);
}

/* Cabecera: nombre + badge con el total de notas */
.mp-primera-plana .mp-corriente-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.mp-primera-plana .mp-corriente-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--mp-navy-dark);
}
.mp-primera-plana .mp-corriente-count {
  background: var(--mp-corriente);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1.4;
}

/* Lista de titulares */
.mp-primera-plana .mp-headline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mp-primera-plana .mp-headline-list li {
  padding: 13px 0;
  border-top: 1px solid var(--mp-border);
}
.mp-primera-plana .mp-headline-list li:first-child { border-top: none; }
.mp-primera-plana .mp-headline-list a {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--mp-navy-dark);
  line-height: 1.4;
}
.mp-primera-plana .mp-headline-list a:hover { color: var(--mp-navy); text-decoration: underline; }
.mp-primera-plana .mp-headline-time {
  display: block;
  font-size: 12.5px;
  color: var(--mp-text-muted);
  margin-top: 5px;
}

/* Footer: "Ver todos los titulares →" en el color de la columna */
.mp-primera-plana .mp-col-footer-link {
  display: block;
  margin-top: auto; /* pegado al fondo de la columna */
  padding-top: 14px;
  border-top: 1px solid var(--mp-border);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mp-corriente);
}
.mp-primera-plana .mp-col-footer-link:hover { text-decoration: underline; }

/* --- Responsive --- */
@media (max-width: 600px) {
  .mp-primera-plana .mp-section-title { font-size: 19px; }
  .mp-primera-plana .mp-columns-grid { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-primera-plana .mp-headline-list a,
  .mp-primera-plana .mp-col-footer-link { transition: none; }
}