/* ============================================================
   Breek · Magazine 2 Columnas — grilla de tarjetas (2 col) + barra lateral
   con posts destacados numerados y grilla de categorías.
   Hereda la paleta base (mismos colores del sitio): usa var(--accent),
   var(--card), var(--ink), var(--muted), el gradiente del body, etc.
   ============================================================ */

/* Ancho contenido: con 2 columnas las tarjetas ya quedan grandes. */
body.theme-breek-magazine-2 { --maxw: 1180px; }

/* ---------- Grilla principal + sidebar ---------- */
.theme-breek-magazine-2 .with-sidebar { grid-template-columns: 1fr 320px; gap: 30px; }
.mag-grid { margin: 0; }
.mag-grid .card-body { padding: 14px 16px 4px; }
.mag-grid .card-title { font-size: 1.05rem; }
/* Imágenes apaisadas (más bajas) para que las tarjetas no queden tan altas. */
.mag-grid .card-media { aspect-ratio: 16/10; }
/* Badge de categoría abajo-izquierda (conserva su color por categoría). */
.mag-grid .card-cat {
  top: auto; bottom: 12px; left: 12px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .04em; font-size: .66rem; padding: 5px 10px;
}

/* ---------- Panel lateral (gris claro, ambos bloques juntos) ---------- */
.mag-panel { background: #f4f5fa; padding: 24px 22px; }
.mag-block + .mag-block { margin-top: 0; }

/* ---------- Featured Posts (numerados) ---------- */
.feat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.feat-list li { display: flex; gap: 14px; align-items: flex-start; }
.feat-thumb {
  position: relative; flex: 0 0 66px; height: 66px; border-radius: 10px;
  background-size: cover; background-position: center; background-color: #e1e4ee;
}
.feat-num {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.feat-body { padding-top: 1px; }
.feat-title { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.feat-title:hover { color: var(--accent); }
.feat-date { display: block; color: var(--muted); font-size: .74rem; margin-top: 6px; }

/* ---------- Divisor con estrella ---------- */
.mag-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.mag-divider::before, .mag-divider::after { content: ""; flex: 1; height: 1px; background: #d9dce6; }
.mag-divider span { color: var(--ink); font-size: 1rem; line-height: 1; }

/* ---------- Explore Category (grilla 2×2) ---------- */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat-tile {
  position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background-size: cover; background-position: center; display: flex; align-items: flex-end;
}
.cat-tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .6)); }
.cat-tile-name {
  position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: .9rem;
  padding: 12px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* La sidebar pasa abajo. Hay que repetirlo acá porque la regla de arriba
     (.theme-breek-magazine-2 .with-sidebar) tiene más especificidad que la de
     base.css y, si no, seguiría mostrando las 2 columnas en móvil/tablet. */
  .theme-breek-magazine-2 .with-sidebar { grid-template-columns: 1fr; }
  .mag-grid.cols-2 { column-count: 2; }
}
@media (max-width: 720px) {
  .mag-grid.cols-2 { column-count: 1; }
}