/**
 * File: novedades.css
 * Path: wp-content/plugins/mjordan/assets/css/novedades.css
 *
 * Novedades: grilla del archivo y ficha de la nota.
 *
 * La card (.jm-nov-*) y la paginación (.jm-pag) ya están definidas en
 * portada.css y catalogo.css. Acá se agrega solo lo que falta:
 *   - el estado vacío de imagen
 *   - el encabezado del archivo
 *   - la nota completa (.jm-nota-*)
 *
 * .jm-nota trae sus propias variables porque el single NO carga
 * portada.css: es una página independiente, sin secciones de home.
 */

/* ============================================================
   Archivo de novedades
   ============================================================ */
.jm-section.is-nov-archivo { padding: 44px 0 72px; }

.jm-nov-head { margin-bottom: 34px; }
.jm-nov-head .jm-h2 { margin-top: 6px; }
.jm-nov-desc {
  color: var(--jm-gris, #7A6E66);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 60ch;
  margin: 14px 0 0;
}

/* Card sin imagen destacada: no debería pasar (la validación de
   acf-novedad.php lo impide), pero si una entrada vieja no tiene,
   mejor una trama que un hueco blanco. */
.jm-nov-img--empty {
  background: repeating-linear-gradient(45deg, #EDE5D7 0 14px, #e6dcca 14px 28px);
}

/* ============================================================
   Nota completa
   ============================================================ */
.jm-nota {
  --jm-bordo: #7A1619;
  --jm-verde: #3E9A54;
  --jm-oro: #D99A16;
  --jm-crema: #F6F2EA;
  --jm-crema-osc: #EDE5D7;
  --jm-tinta: #221A18;
  --jm-gris: #7A6E66;
  --jm-borde: #E9E0D2;
  display: block;
  padding: 36px 0 64px;
  background: #F7F8F8;
  font-family: "Barlow", system-ui, sans-serif;
  color: #3a322e;
}
.jm-nota * { box-sizing: border-box; }
.jm-nota .jm-wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* migas */
.jm-nota-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--jm-gris);
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.jm-nota-crumbs a { color: var(--jm-bordo); text-decoration: none; }
.jm-nota-crumbs a:hover { text-decoration: underline; }
.jm-nota-crumbs .cur {
  color: var(--jm-tinta);
  font-weight: 600;
  /* El título puede ser largo: se corta con puntos suspensivos */
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* encabezado */
.jm-nota-head { margin-bottom: 28px; }
.jm-nota-tag {
  display: inline-block;
  background: var(--jm-oro);
  color: #2C1210;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.jm-nota-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--jm-tinta);
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.02;
  margin: 0;
}
.jm-nota-fecha {
  color: var(--jm-gris);
  font-size: 14.5px;
  margin-top: 12px;
}
.jm-nota-bajada {
  font-size: 18.5px;
  line-height: 1.6;
  color: #4A403A;
  margin: 18px 0 0;
}

/* --- galería --- */
.jm-nota-gal { margin-bottom: 34px; }
.jm-nota-gal .jm-gal-main {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--jm-crema-osc);
  box-shadow: 0 12px 30px rgba(34,26,24,.10);
  aspect-ratio: 16 / 10;
}
.jm-nota-gal .jm-gal-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jm-nota-gal .jm-gal-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.jm-nota-gal .jm-gal-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  background: var(--jm-crema-osc);
  aspect-ratio: 1 / 1;
  transition: border-color .15s ease;
}
.jm-nota-gal .jm-gal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jm-nota-gal .jm-gal-thumb.is-active { border-color: var(--jm-oro); }
.jm-nota-gal .jm-gal-thumb:hover { border-color: var(--jm-bordo); }

/* --- cuerpo --- */
.jm-nota-cuerpo {
  font-size: 17px;
  line-height: 1.75;
  color: #3a322e;
}
.jm-nota-cuerpo p { margin: 0 0 18px; }
.jm-nota-cuerpo h2,
.jm-nota-cuerpo h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  color: var(--jm-tinta);
  line-height: 1.15;
  margin: 32px 0 12px;
}
.jm-nota-cuerpo h2 { font-size: 28px; }
.jm-nota-cuerpo h3 { font-size: 23px; }
.jm-nota-cuerpo ul,
.jm-nota-cuerpo ol { margin: 0 0 18px; padding-left: 22px; }
.jm-nota-cuerpo li { margin-bottom: 7px; }
.jm-nota-cuerpo a { color: var(--jm-bordo); text-underline-offset: 3px; }
.jm-nota-cuerpo img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 8px 0 18px;
}
.jm-nota-cuerpo blockquote {
  margin: 22px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--jm-oro);
  color: #4A403A;
  font-size: 18px;
}

/* --- videos --- */
.jm-nota-block {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid #e3d9c7;
}
.jm-nota-h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--jm-tinta);
  margin: 0 0 18px;
}
.jm-nota-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.jm-nota-videos .jm-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--jm-tinta);
  box-shadow: 0 8px 22px rgba(34,26,24,.12);
}
.jm-nota-videos .jm-video iframe,
.jm-nota-videos .jm-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Los videos de celular suelen ser verticales: contain evita
   que se recorten arriba y abajo. */
.jm-nota-videos .jm-video.is-local video {
  object-fit: contain;
  background: #000;
}

/* --- pie --- */
.jm-nota-foot {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid #e3d9c7;
}
.jm-nota-foot .jm-btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  background: transparent;
  color: var(--jm-tinta);
  text-decoration: none;
  border: 1.5px solid #d9cdb9;
  border-radius: 11px;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  font-size: 16px;
  transition: border-color .15s ease, background .15s ease;
}
.jm-nota-foot .jm-btn-back:hover { border-color: var(--jm-bordo); background: #fff; }

/* ============================================================
   Estado vacío del archivo — COPIA de catalogo.css
   El archivo de novedades no carga catalogo.css.
   ============================================================ */
.jm-vacio {
  background: #fff;
  border: 1.5px dashed var(--jm-borde, #E9E0D2);
  border-radius: 18px;
  padding: 56px 28px;
  text-align: center;
}
.jm-vacio-titulo {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--jm-tinta, #221A18);
  font-size: 26px;
  line-height: 1.1;
}
.jm-vacio-texto {
  color: var(--jm-gris, #7A6E66);
  font-size: 16px;
  line-height: 1.55;
  max-width: 46ch;
  margin: 12px auto 0;
}

/* ============================================================
   Paginación — COPIA de catalogo.css
   ============================================================ */
.jm-pag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
}
.jm-pag .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--jm-tinta, #221A18);
  text-decoration: none;
  background: #fff;
  border: 1.5px solid var(--jm-borde, #E9E0D2);
  border-radius: 10px;
  transition: background .15s, border-color .15s, color .15s;
}
.jm-pag .page-numbers:hover {
  border-color: var(--jm-verde, #3E9A54);
  color: var(--jm-verde, #3E9A54);
}
.jm-pag .page-numbers.current {
  background: var(--jm-bordo, #7A1619);
  border-color: var(--jm-bordo, #7A1619);
  color: #fff;
}
.jm-pag .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--jm-gris, #7A6E66);
  min-width: auto;
  padding: 0 4px;
}
.jm-pag .page-numbers.dots:hover { color: var(--jm-gris, #7A6E66); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 700px) {
  .jm-nota-gal .jm-gal-thumbs { grid-template-columns: repeat(4, 1fr); }
  .jm-nota-crumbs .cur { max-width: 18ch; }
}
@media (max-width: 560px) {
  .jm-nota { padding: 24px 0 48px; }
  .jm-section.is-nov-archivo { padding: 28px 0 56px; }
  .jm-nota-gal .jm-gal-main { aspect-ratio: 4 / 3; }
  .jm-nota-gal .jm-gal-thumbs { grid-template-columns: repeat(4, 1fr); }
  .jm-nota-block { margin-top: 34px; padding-top: 28px; }
}


/* ── Cargar más ───────────────────────────────────── */
.jm-nov-mas-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.jm-nov-mas {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #F6F2EA;
  background: #7A1619;
  border: 0;
  border-radius: 4px;
  padding: .85rem 2.2rem;
  cursor: pointer;
  transition: background .18s ease;
}

.jm-nov-mas:hover { background: #4E0D0F; }

.jm-nov-mas:disabled {
  opacity: .6;
  cursor: default;
}