/* Stage 4 — categories, tags, archives and search */
.bn-archive {
  padding: clamp(2.25rem, 4vw, 4.75rem) 0 var(--bn-space-16);
}

.bn-archive a { text-decoration: none; }

.bn-archive-header {
  max-width: 920px;
  margin-bottom: clamp(2rem, 3vw, 3.25rem);
}

.bn-archive-header .bn-eyebrow {
  margin-bottom: .65rem;
  color: var(--bn-color-accent-600);
  font-size: var(--bn-text-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bn-archive-header h1 {
  margin-bottom: .7rem;
  font-size: clamp(2.45rem, 4.5vw, 5rem);
  letter-spacing: -.035em;
}

.bn-archive-header__count,
.bn-archive-header__description {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--bn-color-muted);
  font-size: 1.05rem;
}

.bn-archive-header__description > :last-child { margin-bottom: 0; }

.bn-archive-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.bn-archive-feed { min-width: 0; }

.bn-archive-card {
  display: grid;
  grid-template-columns: minmax(210px, 32%) minmax(0, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
  padding: 1.6rem 0;
  border-top: 1px solid var(--bn-color-border);
}

.bn-archive-card:first-child { border-top-color: var(--bn-color-ink); }
.bn-archive-card__media { min-width: 0; }
.bn-archive-card .bn-post-media { aspect-ratio: 16 / 10; }
.bn-archive-card__body { align-self: center; min-width: 0; }
.bn-archive-card .bn-story-category { margin-bottom: .45rem; }
.bn-archive-card h2 {
  margin-bottom: .7rem;
  font-size: clamp(1.4rem, 1.15rem + .65vw, 2.05rem);
  letter-spacing: -.02em;
}
.bn-archive-card h2 a:hover { color: var(--bn-color-primary-700); }
.bn-archive-card__excerpt {
  margin-bottom: .85rem;
  color: var(--bn-color-muted);
  line-height: 1.65;
}

.bn-archive-card--featured {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: 0 0 clamp(2rem, 3vw, 3rem);
  border-top: 0;
}
.bn-archive-card--featured .bn-archive-card__media { order: 1; }
.bn-archive-card--featured .bn-archive-card__body { order: 0; align-self: center; }
.bn-archive-card--featured .bn-post-media { min-height: 360px; aspect-ratio: 4 / 3; }
.bn-archive-card--featured h2 { font-size: clamp(2rem, 3vw, 3.65rem); }
.bn-archive-card--featured .bn-archive-card__excerpt { font-size: 1.05rem; }

/* Visual categories get a denser magazine grid on desktop. */
.bn-archive--visual .bn-archive-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.25rem, 2vw, 2rem);
}
.bn-archive--visual .bn-archive-card {
  display: block;
  padding: 1.5rem 0 2rem;
}
.bn-archive--visual .bn-archive-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
}
.bn-archive--visual .bn-pagination { grid-column: 1 / -1; }

/* Opinion/Editorial remain deliberately text-forward; Stage 6 enriches authors. */
.bn-archive--text .bn-archive-card {
  display: block;
  padding: clamp(1.5rem, 2.2vw, 2.35rem) 0;
}
.bn-archive--text .bn-archive-card h2 { max-width: 28ch; font-size: clamp(1.8rem, 2.5vw, 3rem); }
.bn-archive--text .bn-archive-card__excerpt { max-width: 68ch; }

.bn-archive-sidebar {
  position: sticky;
  top: 1.25rem;
  min-width: 0;
}
.bn-archive-sidebar__section {
  border-top: 2px solid var(--bn-color-ink);
  padding-top: 1rem;
}
.bn-archive-sidebar__section h2 {
  margin-bottom: 1rem;
  font-size: 1.35rem;
}
.bn-archive-sidebar__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bn-archive-sidebar__list li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .75rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--bn-color-border);
}
.bn-archive-sidebar__list li > span {
  color: var(--bn-color-accent-600);
  font-weight: 800;
}
.bn-archive-sidebar__list a { font-family: var(--bn-font-serif); font-weight: 700; line-height: 1.25; }

.bn-pagination { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 2px solid var(--bn-color-ink); }
.bn-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bn-pagination a,
.bn-pagination span {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .85rem;
  border: 1px solid var(--bn-color-border);
  font-weight: 750;
}
.bn-pagination .current {
  border-color: var(--bn-color-primary-900);
  background: var(--bn-color-primary-900);
  color: #fff;
}

.bn-empty-state {
  max-width: 780px;
  border-top: 3px solid var(--bn-color-ink);
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.bn-empty-state h2 { font-size: clamp(1.8rem, 3vw, 3rem); }
.bn-empty-state > p { color: var(--bn-color-muted); font-size: 1.05rem; }
.bn-archive-search-form { margin-top: 2rem; }
.bn-archive-search-form > label { display: block; margin-bottom: .6rem; font-weight: 800; }
.bn-archive-search-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 2px solid var(--bn-color-ink); }
.bn-archive-search-form input {
  width: 100%;
  min-height: 54px;
  border: 0;
  padding: .75rem .25rem;
  outline: 0;
}
.bn-archive-search-form button {
  min-height: 54px;
  border: 0;
  padding: .75rem 1.2rem;
  background: var(--bn-color-primary-900);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.bn-archive .bn-ad-slot { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.bn-archive-feed > .bn-ad-slot { grid-column: 1 / -1; }
.bn-archive-sidebar > .bn-ad-slot { margin-bottom: 1.5rem; }

@media (max-width: 1023px) {
  .bn-archive-shell { grid-template-columns: minmax(0, 1fr); }
  .bn-archive-sidebar { position: static; display: grid; grid-template-columns: minmax(0, 1fr); }
  .bn-archive-card--featured,
  .bn-archive--visual .bn-archive-card--featured { grid-template-columns: minmax(0, 1fr) minmax(240px, .75fr); }
}

@media (max-width: 767px) {
  .bn-archive { padding-top: 2rem; }
  .bn-archive-header { margin-bottom: 1.4rem; }
  .bn-archive-header h1 { font-size: clamp(2.25rem, 11vw, 3.65rem); }
  .bn-archive-shell { gap: 2.5rem; }

  .bn-archive-card,
  .bn-archive-card--featured,
  .bn-archive--visual .bn-archive-card--featured {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.2rem 0;
  }
  .bn-archive-card--featured {
    grid-template-columns: 1fr;
    padding-top: 0;
  }
  .bn-archive-card--featured .bn-archive-card__media,
  .bn-archive-card--featured .bn-archive-card__body { order: initial; }
  .bn-archive-card--featured .bn-post-media { min-height: 0; aspect-ratio: 16 / 10; }
  .bn-archive-card--featured h2 { font-size: clamp(2rem, 8vw, 3rem); }

  .bn-archive--visual .bn-archive-feed { display: block; }
  .bn-archive--visual .bn-archive-card:not(.bn-archive-card--featured) {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
  }
  .bn-archive--text .bn-archive-card { display: block; }

  .bn-archive-card .bn-story-category { margin-bottom: .25rem; }
  .bn-archive-card h2 { margin-bottom: .45rem; font-size: clamp(1.15rem, 5vw, 1.55rem); }
  .bn-archive-card__excerpt { display: none; }
  .bn-archive-card--featured .bn-archive-card__excerpt { display: block; }
  .bn-archive-card .bn-card-meta { font-size: .875rem; }

  .bn-archive-search-form > div { grid-template-columns: 1fr; border-bottom: 0; gap: .65rem; }
  .bn-archive-search-form input { border: 1px solid var(--bn-color-border); padding-inline: .85rem; }
  .bn-archive-search-form button { width: 100%; }
}

@media (max-width: 389px) {
  .bn-archive-card,
  .bn-archive--visual .bn-archive-card:not(.bn-archive-card--featured) {
    grid-template-columns: 112px minmax(0, 1fr);
  }
  .bn-archive-card h2 { font-size: 1.1rem; }
}

/* Stage 4.1 — archive media must be self-contained.
 * Home owns its own media CSS; archives cannot depend on home.css because that
 * stylesheet is intentionally loaded only on the front page. */
.bn-archive .bn-post-media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--bn-color-surface-soft);
  aspect-ratio: 16 / 10;
}

.bn-archive .bn-post-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bn-transition-base);
}

.bn-archive .bn-post-media:hover img { transform: scale(1.018); }

.bn-archive .bn-post-media__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1rem, 2vw, 2rem);
  background:
    radial-gradient(circle at 78% 22%, rgba(15,96,183,.42), transparent 26%),
    linear-gradient(145deg, var(--bn-color-primary-950), #0a4387 62%, var(--bn-color-accent-700));
  color: #fff;
}

.bn-archive .bn-post-media__fallback span {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .76;
}

.bn-archive .bn-post-media__fallback strong {
  max-width: 100%;
  font-family: var(--bn-font-serif);
  font-size: clamp(1.35rem, 2.2vw, 2.35rem);
  line-height: 1.05;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.bn-archive .bn-post-media--label-medium .bn-post-media__fallback strong {
  font-size: clamp(1.15rem, 1.85vw, 1.9rem);
}

.bn-archive .bn-post-media--label-long .bn-post-media__fallback strong {
  font-size: clamp(1rem, 1.55vw, 1.55rem);
  line-height: 1.08;
}

.bn-archive .bn-post-media--cat-politica .bn-post-media__fallback,
.bn-archive .bn-post-media--cat-internacional .bn-post-media__fallback {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(145deg, #071a3e, #123b74 58%, #b40b10);
}

.bn-archive .bn-post-media--cat-economia .bn-post-media__fallback,
.bn-archive .bn-post-media--cat-actualidad .bn-post-media__fallback {
  background:
    radial-gradient(circle at 80% 18%, rgba(15,96,183,.5), transparent 27%),
    linear-gradient(145deg, #061d49, #0b4f98 64%, #b20d12);
}

.bn-archive .bn-post-media--cat-turismo .bn-post-media__fallback,
.bn-archive .bn-post-media--cat-sociales .bn-post-media__fallback {
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.13), transparent 25%),
    linear-gradient(155deg, #073064, #0f60b7 62%, #a3070a);
}

.bn-archive .bn-post-media--cat-deportes .bn-post-media__fallback,
.bn-archive .bn-post-media--cat-salud .bn-post-media__fallback {
  background:
    radial-gradient(circle at 76% 28%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(135deg, #081c42, #0d4a87 66%, #cf1014);
}

.bn-archive .bn-post-media--cat-entretenimientos .bn-post-media__fallback,
.bn-archive .bn-post-media--cat-multimedia .bn-post-media__fallback,
.bn-archive .bn-post-media--cat-especiales .bn-post-media__fallback {
  background:
    radial-gradient(circle at 20% 78%, rgba(208,14,18,.36), transparent 30%),
    linear-gradient(145deg, #071a3e, #103f7a 62%, #8d090d);
}

@media (max-width: 767px) {
  .bn-archive .bn-archive-card:not(.bn-archive-card--featured) .bn-post-media__fallback {
    padding: .65rem;
  }

  .bn-archive .bn-archive-card:not(.bn-archive-card--featured) .bn-post-media__fallback span {
    font-size: .58rem;
    letter-spacing: .08em;
  }

  .bn-archive .bn-archive-card:not(.bn-archive-card--featured) .bn-post-media__fallback strong {
    font-size: .78rem;
    line-height: 1.04;
  }

  .bn-archive .bn-archive-card:not(.bn-archive-card--featured) .bn-post-media--label-long .bn-post-media__fallback strong {
    font-size: .66rem;
  }
}

/* Stage 4.2 — final archive/search QA refinements. */
.bn-archive-header h1 {
  text-wrap: balance;
}

/* Search terms can be much longer than category names. Scale them deliberately
 * instead of letting the generic archive H1 dominate several screens. */
.bn-archive-header--search {
  max-width: 1040px;
}

.bn-archive-header--search h1 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.bn-archive-header--query-medium h1 {
  max-width: 24ch;
  font-size: clamp(2.65rem, 3.75vw, 4.35rem);
}

.bn-archive-header--query-long h1 {
  max-width: 27ch;
  font-size: clamp(2.35rem, 3.15vw, 3.65rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

/* Keep supporting columns readable when the desktop viewport is in the
 * laptop range, where 320px plus a wide gap can otherwise starve the feed. */
@media (max-width: 1199px) and (min-width: 1024px) {
  .bn-archive-shell {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 285px);
    gap: clamp(1.75rem, 3vw, 3rem);
  }

  .bn-archive-sidebar__list li {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: .55rem;
  }
}

@media (max-width: 767px) {
  .bn-archive {
    padding-bottom: clamp(3.5rem, 10vw, 5rem);
  }

  .bn-archive-header--search h1,
  .bn-archive-header--query-medium h1,
  .bn-archive-header--query-long h1 {
    max-width: 100%;
    font-size: clamp(2.05rem, 9vw, 3rem);
    line-height: 1.04;
    letter-spacing: -.025em;
  }

  .bn-archive-header__count,
  .bn-archive-header__description {
    font-size: 1rem;
  }

  .bn-archive-card--featured h2 {
    font-size: clamp(1.9rem, 7.7vw, 2.65rem);
    line-height: 1.03;
  }

  .bn-archive-card:not(.bn-archive-card--featured) h2 {
    line-height: 1.08;
  }

  .bn-archive-sidebar {
    gap: 1.25rem;
  }

  .bn-archive-sidebar__section h2 {
    font-size: 1.55rem;
  }

  .bn-archive-sidebar__list li {
    grid-template-columns: 2rem minmax(0, 1fr);
    padding: .95rem 0;
  }

  .bn-archive-sidebar__list a {
    line-height: 1.2;
  }

  .bn-pagination .page-numbers {
    gap: .4rem;
  }

  .bn-pagination a,
  .bn-pagination span {
    min-width: 44px;
    min-height: 44px;
    padding-inline: .7rem;
  }

  .bn-empty-state {
    max-width: 100%;
    padding-block: 2rem 3rem;
  }

  .bn-empty-state h2 {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    line-height: 1.05;
  }
}

@media (max-width: 389px) {
  .bn-archive-header--search h1,
  .bn-archive-header--query-medium h1,
  .bn-archive-header--query-long h1 {
    font-size: clamp(1.9rem, 9vw, 2.45rem);
  }

  .bn-archive-card,
  .bn-archive--visual .bn-archive-card:not(.bn-archive-card--featured) {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: .85rem;
  }

  .bn-archive .bn-archive-card:not(.bn-archive-card--featured) .bn-post-media__fallback {
    padding: .55rem;
  }

  .bn-archive .bn-archive-card:not(.bn-archive-card--featured) .bn-post-media__fallback strong {
    font-size: .72rem;
  }

  .bn-archive .bn-archive-card:not(.bn-archive-card--featured) .bn-post-media--label-long .bn-post-media__fallback strong {
    font-size: .58rem;
  }
}