/* Señal Memoria — Colecciones page
   Componentes específicos. Hereda tokens.css + home.css.
*/

/* ============ Color accents por categoría ============ */
[data-cat="historia-politica"] { --col-accent: #B91C1C; --col-accent-soft: #FEE2E2; }   /* Rojo política */
[data-cat="historia-medios"]   { --col-accent: #0079C0; --col-accent-soft: #DBEAFE; }   /* Azul medios */
[data-cat="cultura-sociedad"]  { --col-accent: #6B21A8; --col-accent-soft: #F3E8FF; }   /* Morado cultura */
[data-cat="colombia-mundo"]    { --col-accent: #2E7632; --col-accent-soft: #DBE6CD; }   /* Verde mundo */
[data-cat="archivo-ddhh"]      { --col-accent: #B8780A; --col-accent-soft: #FEF3C7; }   /* Ámbar DDHH */

/* ============ BREADCRUMB (reusa servicios.css si existiera, definimos aquí independiente) ============ */
.sm-breadcrumb {
  padding: 1.25rem 0;
  background: var(--sm-paper-050);
  border-bottom: 1px solid var(--sm-border);
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  letter-spacing: var(--sm-tracking-wider);
  text-transform: uppercase;
}
.sm-breadcrumb ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.sm-breadcrumb li + li::before {
  content: '/'; margin-right: .5rem; color: var(--sm-ink-300);
}
.sm-breadcrumb a { color: var(--sm-ink-500); }
.sm-breadcrumb a:hover { color: var(--sm-green-700); }
.sm-breadcrumb [aria-current="page"] { color: var(--sm-ink-950); font-weight: 600; }

/* ============ HERO COLECCIONES ============ */
.sm-col-hero {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--sm-paper-050);
  position: relative; overflow: hidden;
}
.sm-col-hero::before {
  content: ''; position: absolute; inset: 0;
  background: var(--sm-mesh-1);
  opacity: .65; z-index: 0;
  animation: sm-mesh-drift 24s ease-in-out infinite alternate;
}
.sm-col-hero > .container { position: relative; z-index: 1; }
.sm-col-hero-title {
  font-size: var(--sm-fs-display-1);
  font-weight: 900;
  line-height: var(--sm-leading-display);
  letter-spacing: var(--sm-tracking-tighter);
  color: var(--sm-ink-950);
  margin: 1rem 0 1.5rem;
  max-width: 16ch;
}
.sm-col-hero-title .sm-display-italic { color: var(--sm-green-700); }
.sm-col-hero-lead { max-width: 62ch; }

/* Anchors nav rápido a cada coleccion */
.sm-col-anchors {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--sm-ink-300);
}
.sm-col-chip {
  display: inline-flex; align-items: center; gap: .65rem;
  background: #fff;
  border: 2px solid var(--sm-border);
  padding: .75rem 1.25rem;
  border-radius: 999px;
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: var(--sm-fs-small);
  color: var(--sm-ink-950);
  transition: all var(--sm-dur-base) var(--sm-ease-out);
}
.sm-col-chip:hover, .sm-col-chip:focus {
  background: var(--col-accent, var(--sm-ink-950));
  border-color: var(--col-accent, var(--sm-ink-950));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sm-shadow-md);
}
.sm-col-chip-num {
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  letter-spacing: var(--sm-tracking-wider);
  color: var(--col-accent, var(--sm-green-700));
  background: var(--col-accent-soft, var(--sm-green-100));
  padding: .2rem .55rem;
  border-radius: 999px;
  transition: background var(--sm-dur-base), color var(--sm-dur-base);
}
.sm-col-chip:hover .sm-col-chip-num,
.sm-col-chip:focus .sm-col-chip-num {
  background: rgba(255,255,255,.25);
  color: #fff;
}

/* ============ SECCION COLECCION (común a las 4) ============ */
.sm-col-section {
  scroll-margin-top: 100px; /* Para anchor + sticky nav */
  border-top: 1px solid var(--sm-border);
}
.sm-col-section:nth-of-type(odd) { background: #fff; }
.sm-col-section:nth-of-type(even) { background: var(--sm-paper-050); }
.sm-col-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--col-accent, var(--sm-ink-950));
}
.sm-col-head .sm-section-num {
  align-self: start; padding-top: .5rem;
  color: var(--col-accent, var(--sm-ink-500));
}

/* ============ BUSCADOR (mostrar primero) ============ */
.sm-col-search-section { padding: 2.5rem 0 1rem; }
.sm-col-search {
  display: flex; align-items: center; gap: .75rem;
  max-width: 760px; margin: 0 auto;
  background: #fff;
  border: 2px solid var(--sm-ink-950);
  border-radius: 999px;
  padding: .5rem .5rem .5rem 1.5rem;
  box-shadow: var(--sm-shadow-md, 0 6px 24px rgba(0,0,0,.08));
}
.sm-col-search > .bi-search { font-size: 1.25rem; color: var(--sm-green-700); flex: none; }
.sm-col-search input {
  flex: 1 1 auto; border: 0; background: transparent;
  font-family: var(--sm-font-body); font-size: var(--sm-fs-body, 1rem);
  padding: .65rem .25rem; min-width: 0;
}
.sm-col-search input:focus { outline: none; }
.sm-col-search:focus-within { border-color: var(--sm-green-700); box-shadow: 0 0 0 4px rgba(46,118,50,.18); }
.sm-col-search button { flex: none; border-radius: 999px; }
.sm-col-head h2 {
  font-size: var(--sm-fs-display-2);
  font-weight: 900;
  margin: 0;
  line-height: var(--sm-leading-display);
  letter-spacing: var(--sm-tracking-tighter);
}
.sm-col-head h2 em { color: var(--col-accent, var(--sm-green-700)); font-style: italic; font-weight: 400; }
.sm-col-head .sm-section-link {
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  text-transform: uppercase;
  letter-spacing: var(--sm-tracking-wider);
  color: var(--sm-ink-950);
  display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap;
}
.sm-col-head .sm-section-link:hover { color: var(--col-accent, var(--sm-green-700)); gap: 1rem; transition: gap var(--sm-dur-base); }

/* ============ CARDS BASE ============ */
.sm-col-card {
  background: #fff;
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sm-border);
  transition: transform var(--sm-dur-base) var(--sm-ease-out),
              box-shadow var(--sm-dur-base) var(--sm-ease-out),
              border-color var(--sm-dur-base) var(--sm-ease-out);
}
.sm-col-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sm-shadow-md);
  border-color: var(--col-accent, var(--sm-ink-950));
}
.sm-col-card-link {
  display: block;
  color: inherit; text-decoration: none;
}
.sm-col-card-img {
  aspect-ratio: 16/9;
  background: var(--sm-ink-100) center/cover no-repeat;
  position: relative;
  transition: filter var(--sm-dur-slow) var(--sm-ease-out);
}
.sm-col-card:hover .sm-col-card-img { filter: brightness(0.95) saturate(1.1); }
.sm-col-card-body { padding: 1rem; }
.sm-col-date {
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  color: var(--col-accent, var(--sm-ink-500));
  letter-spacing: var(--sm-tracking-wider);
  text-transform: uppercase;
  display: block; margin-bottom: .5rem;
}
.sm-col-card h3 {
  font-size: 1rem; margin: 0 0 .4rem; line-height: 1.25;
  color: var(--sm-ink-950);
  letter-spacing: var(--sm-tracking-tight);
}
.sm-col-card p {
  font-size: .8125rem;
  color: var(--sm-ink-700); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sm-col-card-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  text-transform: uppercase; letter-spacing: var(--sm-tracking-wider);
  color: var(--col-accent, var(--sm-green-700));
  font-weight: 600;
  margin-top: .65rem;
  transition: gap var(--sm-dur-base);
}
.sm-col-card:hover .sm-col-card-cta { gap: 1rem; }

/* ============ LAYOUT MAGAZINE (1 feature + 3 stack) ============ */
.sm-col-magazine {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.sm-col-magazine-reverse { grid-template-columns: 1fr 1.5fr; }
.sm-col-magazine-reverse .sm-col-card-feature { order: 2; }
.sm-col-magazine-reverse .sm-col-list { order: 1; }
@media (max-width: 991px) {
  .sm-col-magazine, .sm-col-magazine-reverse {
    grid-template-columns: 1fr;
  }
  .sm-col-magazine-reverse .sm-col-card-feature,
  .sm-col-magazine-reverse .sm-col-list { order: 0; }
}

.sm-col-card-feature .sm-col-card-img { aspect-ratio: 16/9; }
.sm-col-card-feature .sm-col-card-body { padding: 1.25rem; }
.sm-col-card-feature h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 800;
}
.sm-col-card-feature p {
  font-size: .9rem;
  -webkit-line-clamp: 3;
}

.sm-col-list {
  display: flex; flex-direction: column; gap: 1rem;
}
.sm-col-list .sm-col-card .sm-col-card-link {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 0;
}
.sm-col-list .sm-col-card .sm-col-card-img { aspect-ratio: 1; }
.sm-col-list .sm-col-card .sm-col-card-body { padding: 1.25rem; display: flex; flex-direction: column; justify-content: center; }
.sm-col-list .sm-col-card h3 { font-size: 1.05rem; margin: 0; }
@media (max-width: 575px) {
  .sm-col-list .sm-col-card .sm-col-card-link {
    grid-template-columns: 1fr;
  }
  .sm-col-list .sm-col-card .sm-col-card-img { aspect-ratio: 16/9; }
}

/* ============ LAYOUT GRID (denso: más cantidad, menor tamaño) ============ */
.sm-col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 991px) { .sm-col-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sm-col-grid { grid-template-columns: 1fr; } }

/* ============ LAYOUT ROW 4 (cards verticales) ============ */
.sm-col-row4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 991px) { .sm-col-row4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sm-col-row4 { grid-template-columns: 1fr; } }

.sm-col-card-vertical .sm-col-card-img { aspect-ratio: 16/9; }
.sm-col-card-vertical .sm-col-card-body { padding: .9rem; }
.sm-col-card-vertical h3 { font-size: .95rem; }

/* ============ DDHH BOX (especial) ============ */
.sm-col-ddhh {
  background: var(--sm-ink-950);
  color: #fff;
  position: relative; overflow: hidden;
}
.sm-col-ddhh::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(at 80% 30%, rgba(184,120,10,0.18) 0px, transparent 50%),
              radial-gradient(at 20% 80%, rgba(185,28,28,0.15) 0px, transparent 50%);
}
.sm-col-ddhh > .container { position: relative; z-index: 1; }
.sm-ddhh-box {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
}
@media (max-width: 767px) { .sm-ddhh-box { grid-template-columns: 1fr; gap: 2.5rem; } }
.sm-ddhh-box h2 {
  color: #fff;
  font-size: var(--sm-fs-display-2);
  font-weight: 900; line-height: var(--sm-leading-display);
  letter-spacing: var(--sm-tracking-tighter);
  margin: 1rem 0 1.5rem;
}
.sm-ddhh-box h2 em { color: #FBBF24; }
.sm-ddhh-box .sm-lead { color: rgba(255,255,255,.85); }
.sm-ddhh-box .sm-eyebrow { color: #FBBF24; }
.sm-ddhh-note {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(184,120,10,0.18);
  border-left: 3px solid #FBBF24;
  border-radius: 8px;
  font-size: var(--sm-fs-small);
  color: rgba(255,255,255,.9);
}
.sm-ddhh-note i { color: #FBBF24; font-size: 1.25rem; flex: none; }

.sm-ddhh-visual {
  position: relative;
  aspect-ratio: 1;
  max-width: 320px; margin: 0 auto;
  display: grid; place-items: center;
}
.sm-ddhh-visual > i {
  font-size: clamp(4rem, 8vw, 7rem);
  color: #FBBF24;
  z-index: 1;
}
.sm-ddhh-pulse {
  position: absolute;
  width: 220px; height: 220px;
  border: 2px solid rgba(251,191,36,.4);
  border-radius: 50%;
  animation: sm-pulse 2.5s ease-out infinite;
}
.sm-ddhh-pulse::before, .sm-ddhh-pulse::after {
  content: ''; position: absolute; inset: 0;
  border: 2px solid rgba(251,191,36,.3);
  border-radius: 50%;
  animation: sm-pulse 2.5s ease-out infinite;
}
.sm-ddhh-pulse::before { animation-delay: .5s; }
.sm-ddhh-pulse::after  { animation-delay: 1s; }
@keyframes sm-pulse {
  0%   { transform: scale(.8); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.sm-ddhh-box .sm-cta-primary {
  background: #FBBF24; color: var(--sm-ink-950);
}
.sm-ddhh-box .sm-cta-primary:hover { background: #fff; }

/* ============ CTA CATÁLOGO ============ */
.sm-col-catalogo { background: var(--sm-green-050); padding: clamp(2.25rem, 4vw, 3.25rem) 0; }
.sm-catalogo-box {
  display: grid; grid-template-columns: 1.5fr auto; gap: 3rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--sm-border);
  border-left: 6px solid var(--sm-green-700);
  border-radius: var(--bs-border-radius-lg);
  padding: clamp(2.5rem, 4vw, 3.5rem);
  box-shadow: var(--sm-shadow-sm);
}
@media (max-width: 767px) { .sm-catalogo-box { grid-template-columns: 1fr; gap: 1.5rem; } }
.sm-catalogo-box h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  line-height: var(--sm-leading-display);
  letter-spacing: var(--sm-tracking-tighter);
  margin: 1rem 0;
}
.sm-catalogo-box h2 em { color: var(--sm-green-700); }
.sm-cta-large {
  padding: 1.25rem 2rem !important;
  font-size: 1.1rem !important;
  white-space: nowrap;
}

/* ============ SM-CTA-PRIMARY (reusa pattern de servicios.css por si no se cargó) ============ */
.sm-cta-primary {
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--sm-ink-950); color: #fff;
  padding: .9rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--sm-dur-base) var(--sm-ease-out);
}
.sm-cta-primary:hover { background: var(--sm-green-700); color: #fff; transform: translateY(-2px); gap: 1rem; }

/* ============ FASE 4 — imagen de campo en card de colección (vista articulos) ============ */
.sm-col-card-img { position: relative; overflow: hidden; }
.sm-col-card-img > .field, .sm-col-card-img > .field .field__item { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm-col-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-col-section .views-exposed-form, .sm-col-section .view-header, .sm-col-section .pager { display: none !important; }
.sm-col-section .view .sm-col-grid { margin: 0; }
.sm-col-section nav.pager, .sm-col-section .pager, .sm-col-section ul.js-pager__items { display: none !important; }

/* ============ Página standalone de una colección (vista articulos como page) ============ */
/* Hero más sobrio que el de /colecciones: título a escala H1, con back link. */
.sm-col-hero--page { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.sm-col-hero--page .sm-col-hero-title {
  font-size: var(--sm-fs-h1);
  font-weight: 800;
  letter-spacing: var(--sm-tracking-tight);
  max-width: 24ch;
  margin: .5rem 0 0;
}
.sm-col-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--sm-font-display);
  font-size: var(--sm-fs-small);
  font-weight: 600;
  color: var(--sm-ink-700);
  text-decoration: none;
  margin-bottom: var(--sm-sp-3);
  transition: gap .15s ease, color .15s ease;
}
.sm-col-back:hover { color: var(--sm-green-700); gap: .7rem; }

/* Contenedor de la grilla en la página */
.sm-col-page-view { padding-top: var(--sm-sp-4); padding-bottom: var(--sm-sp-7); }
.sm-col-page-view .view-content.row { margin: 0; }

/* Paginador estilo marca (igual criterio que la página de búsqueda) */
.sm-col-page-view .pagination,
.sm-col-page-view nav.pager ul,
.sm-col-page-view ul.js-pager__items {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; padding: 0;
  margin: var(--sm-sp-5) 0 0; justify-content: center;
}
.sm-col-page-view .page-link,
.sm-col-page-view .pager__item a {
  display: inline-block; min-width: 2.5rem; text-align: center;
  border: 1px solid var(--sm-border); border-radius: 999px;
  color: var(--sm-ink-900); background: var(--sm-paper-000);
  padding: .5rem .85rem; font-weight: 600; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sm-col-page-view .page-link:hover,
.sm-col-page-view .pager__item a:hover {
  background: var(--sm-green-050); border-color: var(--sm-green-300); color: var(--sm-green-700);
}
.sm-col-page-view .page-item.active .page-link,
.sm-col-page-view .pager__item.is-active a,
.sm-col-page-view .pager__item--current a {
  background: var(--sm-green-700); border-color: var(--sm-green-700); color: var(--sm-paper-000);
}

/* ============ Magazine card: fecha + título + extracto + link ============ */
/* Extracto y CTA "Leer artículo" — solo en el feature (en la lista se ocultan). */
.sm-col-excerpt {
  color: var(--sm-ink-700);
  font-size: .95rem;
  line-height: var(--sm-leading-base);
  margin: .5rem 0 .9rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sm-col-magazine .sm-col-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--sm-font-display);
  font-size: var(--sm-fs-tag);
  font-weight: 700;
  letter-spacing: var(--sm-tracking-wider);
  text-transform: uppercase;
  color: var(--col-accent, var(--sm-green-700));
}
.sm-col-card-feature h3 { margin: .25rem 0 .5rem; }

/* En la lista (3 de la derecha): solo fecha + título. */
.sm-col-list .sm-col-card .sm-col-excerpt,
.sm-col-list .sm-col-card .sm-col-card-cta { display: none; }