/* ==========================================================================
   Sección "Artículos" (articulos/index.html, articulos/<slug>/index.html)
   ========================================================================== */

/* ---- Hero: título/subtítulo algo más anchos que el resto de heroes
   centrados del sitio (categorias/movimientos) — sobrescrito solo aquí
   porque articles.css no se enlaza en esas otras páginas. ---- */
.hero__title {
  max-width: 32ch;
}

.hero__subtitle {
  max-width: 68ch;
}

/* ---- Cabecera de Diálogos (hero--dialogo, ver generate_dialogos_pages.py)
   — para diferenciarla a simple vista de la de Artículos (.hero, negro
   liso): imagen de fondo (dialogos/img/parallax.jpg) con un overlay oscuro
   UNIFORME por encima (no un degradado que se aclara arriba) — la imagen
   se ve así de fondo a baja opacidad en todo el hero, para que el
   contenido (eyebrow, título, subtítulo) se lea bien esté donde esté,
   sumado al efecto parallax básico con background-attachment:fixed. Solo
   lleva esta clase el hero de dialogos/index.html y dialogos/<slug>/index.html.

   El overlay es un linear-gradient con el mismo color en los dos extremos
   (truco para superponer un color plano semitransparente por delante de
   la imagen vía background-image, ya que background-color queda siempre
   DETRÁS de background-image, no delante). */
.hero--dialogo {
  background-color: #6b6465;
  background-image: linear-gradient(rgba(20, 17, 17, 0.72), rgba(20, 17, 17, 0.72)), url("../dialogos/img/parallax.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* background-attachment:fixed da problemas de soporte/rendimiento en
   móvil (Safari iOS en particular no lo respeta bien) — en móvil se
   desactiva el parallax y el fondo se comporta como uno normal. */
@media (max-width: 767px) {
  .hero--dialogo {
    background-attachment: scroll;
  }
}

/* ---- Barra de filtro por categoría (articulos/index.html) ----
   Misma idea visual que el megamenú (.category-explorer__name/.category-explorer__count,
   ver base.css) pero sin miniatura y en fila horizontal con envoltura,
   cada entrada como chip clicable. Las categorías se calculan en JS a
   partir de article.eyebrow — nada hardcodeado aquí. ---- */
.article-filter-bar {
  background-color: var(--color-surface-container-lowest);
  border-bottom: 1px solid var(--color-input-border);
  position: sticky;
  top: 72px;
  z-index: 50;
}

.article-filter-bar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  padding-inline: var(--space-margin-mobile);
}

@media (min-width: 768px) {
  .article-filter-bar__inner {
    padding-inline: var(--space-margin-desktop);
  }
}

.article-filter__item {
  display: flex;
  align-items: center;
  padding: var(--space-xs) 20px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.article-filter__item:hover {
  border-color: var(--color-outline);
}

.article-filter__item.is-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.article-filter__item.is-active .category-explorer__name,
.article-filter__item.is-active .category-explorer__count {
  color: var(--color-on-primary);
}

/* ---- Versión móvil: <select> en vez de chips (mismos datos/filtro) —
   oculto por defecto, se muestra en el media query de más abajo, que va
   DESPUÉS de las reglas base de arriba a propósito: dos reglas de igual
   especificidad para el mismo elemento se resuelven por orden de
   aparición, así que el override de móvil tiene que ir el último. ---- */
.article-filter-bar__mobile {
  display: none;
  padding-inline: var(--space-margin-mobile);
  padding-block: var(--space-sm);
}

.article-filter__select {
  width: 100%;
  height: 44px;
  padding-inline-start: var(--space-sm);
  padding-inline-end: calc(var(--space-sm) + 14px + var(--space-xs));
  border: 1px solid var(--color-input-border);
  border-radius: 50px;
  background-color: var(--color-input-fill);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-on-surface);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: 14px 14px;
}

/* En móvil no debe quedar fija, solo en escritorio/tablet; los chips se
   sustituyen por el <select> de arriba, y el texto de cada chip —por si
   se ve un instante antes de aplicar este bloque— baja de tamaño
   (reutiliza .category-explorer__name/__count, que no se tocan en general para no
   afectar al megamenú). */
@media (max-width: 767px) {
  .hero--article {
    min-height: auto;
  }

  .article-filter-bar {
    position: sticky;
    top: var(--navbar-height);
  }

  .article-filter-bar__inner {
    display: none;
  }

  .article-filter-bar__mobile {
    display: block;
  }

  .article-filter__item .category-explorer__name {
    font-size: 13px;
  }

  .article-filter__item .category-explorer__count {
    font-size: 11px;
  }
}

/* ---- Sección "Artículos relacionados" en la ficha de fotógrafo (ver
   profile.js) — mismo fondo que el resto de la página (sin degradado
   gris), a diferencia de .related-section ("Fotógrafos relacionados"),
   que mantiene su fondo tal cual. ---- */
.related-articles-section {
  padding-block: var(--space-xl);
}

@media (max-width: 767px) {
  .related-articles-section .section-title {
    text-align: center;
  }
}

/* Separador antes del título — a todo el ancho del viewport (fuera del
   .container, que va limitado a 1440px), no centrado/corto como el que
   separa proyectos. */
.related-articles-section::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-bottom: var(--space-xl);
  background-color: #e1e1e1;
}

/* ---- Slider de "Artículos relacionados" (ficha de fotógrafo): 2 tarjetas
   apaisadas visibles a la vez, el resto se recorre con el slider genérico
   (flechas + dots, ver slider.js). En móvil, 1 tarjeta con "peek" de la
   siguiente, igual que el resto de sliders del sitio. ---- */
/* .slider__track tiene overflow-x:auto/overflow-y:hidden (genérico, para
   scroll horizontal sin sacar scrollbar vertical) que recorta la box-shadow
   de :hover de las tarjetas por los 4 lados — le damos más aire aquí.
   A los lados, padding + margin negativo a juego para que la tarjeta no se
   desplace visualmente (sigue empezando justo donde empezaba antes). El
   margen negativo tiene que quedarse dentro del padding-inline real de
   .container en cada breakpoint (--space-margin-mobile hasta 1024px,
   --space-margin-desktop desde ahí, ver base.css) — si lo supera, la pista
   sobresale del viewport y provoca scroll horizontal en toda la página. */
.article-card-slider .slider__track {
  padding-block: var(--space-sm) 56px;
  padding-inline: var(--space-margin-mobile);
  margin-inline: calc(-1 * var(--space-margin-mobile));
  scroll-padding-inline: var(--space-margin-mobile);
}

@media (min-width: 1024px) {
  .article-card-slider .slider__track {
    padding-inline: 24px;
    margin-inline: -24px;
    scroll-padding-inline: 24px;
  }
}

.article-card-slider .article-card {
  flex: 0 0 85%;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .article-card-slider .article-card {
    flex: 0 0 calc((100% - var(--space-sm)) / 2);
  }
}

/* ---- Slider de fotografías "featured" de los fotógrafos mencionados ----
   Reutiliza el componente genérico .slider/.slider__track de photographer.css
   (mismo usado por el slider de datos técnicos de cada proyecto); aquí solo
   se define el tamaño de cada .slide, pensado para imagen grande en vez de
   la tarjeta pequeña de datos. */
.article-slider-section {
  padding-top: var(--space-lg);
}

/* ---- Galería reubicada dentro del cuerpo del texto (Display-1, ver
   relocateGalleryIntoBody en dialogos.js) — mismo carrusel de arriba, solo
   que insertado a mitad del artículo en vez de justo bajo la cabecera. ---- */
.article-body__gallery {
  clear: both;
  margin-block: var(--space-lg);
}

.article-photo-slider .slide {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .article-photo-slider .slide {
    flex-basis: calc((100% - var(--space-sm)) / 2);
  }
}

@media (min-width: 1024px) {
  .article-photo-slider .slide {
    flex-basis: calc((100% - (var(--space-sm) * 2)) / 3);
  }
}

.article-photo-slider .slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.article-photo-slider .slide__caption {
  margin-top: var(--space-xs);
  font-size: var(--font-label-sm-size);
  font-weight: var(--font-label-sm-weight);
  letter-spacing: var(--font-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

/* ---- Cuerpo del artículo: ancho completo del container (1440), texto justificado ---- */
.article-body-section {
  padding-top: var(--space-xl);
}

.article-body {
  width: 100%;
}

.article-body p {
  font-size: var(--font-body-lg-size);
  line-height: var(--font-body-lg-line-height);
  color: var(--color-on-surface-variant);
  text-align: justify;
  hyphens: auto;
  margin-bottom: var(--space-md);
}

.article-body p:last-child {
  margin-bottom: 0;
}

/* ---- Texto destacado a mitad de artículo (ver body: [{highlight: "..."}] en
   articles-content.json) ---- */
.article-body__highlight {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-on-surface);
  text-align: center;
  margin-inline: auto;
  /* Un poco más de aire que abajo (var(--space-lg) a secas), para separarlo
     mejor del párrafo anterior cuando llega justo después de uno (como en
     Diálogos, donde ahora es siempre lo último antes de "mencionados"). */
  margin-top: calc(var(--space-lg) + var(--space-md));
  margin-bottom: var(--space-lg);
  max-width: 640px;
  padding-block: var(--space-md);
  position: relative;
  z-index: 0;
}

.article-body__highlight::before,
.article-body__highlight::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 56px;
  height: 36px;
  opacity: 0.12;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 0h8v8h-4l-4 6z'/%3E%3Cpath d='M11 0h8v8h-4l-4 6z'/%3E%3C/svg%3E");
}

.article-body__highlight::before {
  top: -20px;
  left: 0;
  transform: rotate(0deg);
}

.article-body__highlight::after {
  bottom: 5px;
  right: 0;
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .article-body__highlight {
    font-size: 18px;
    margin: var(--space-lg) auto;
    padding-inline: var(--space-md);
  }

  .article-body__highlight::before,
  .article-body__highlight::after {
    width: 36px;
    height: 28px;
  }

  .article-body__highlight::before {
    top: -4px;
    left: 4px;
  }

  .article-body__highlight::after {
    bottom: -4px;
    right: 4px;
  }
}

/* ---- Nombres de fotógrafos enlazados dentro del texto (ver buildLinkedParagraph) ---- */
.article-body p strong {
  font-weight: 700;
}

.article-body p strong a {
  color: var(--color-on-surface);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.article-body p strong a:hover {
  color: var(--color-primary);
}

/* ---- Fragmentos resaltados dentro del texto (marcador ==texto==, ver
   buildLinkedParagraph) ---- */
.article-body__mark {
  background-color: #c7c7c7;
  color: inherit;
  padding: 0.05em 0.15em;
  border-radius: 2px;
}

/* ---- Fotógrafos mencionados: miniatura circular pequeña, mismo fondo
   que el resto de la página (sin color propio). ---- */
.mentioned-photographers-section {
  padding-block: var(--space-xl);
}

/* Separador antes del título — a todo el ancho del viewport (fuera del
   .container, que va limitado a 1440px), mismo patrón que
   .related-articles-section::before. */
.mentioned-photographers-section::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: var(--space-xl);
  background-color: #e1e1e1;
}

.mentioned-photographer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md) var(--space-sm);
}

@media (min-width: 640px) {
  .mentioned-photographer-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1024px) {
  .mentioned-photographer-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}

.mentioned-photographer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
}

.mentioned-photographer__avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    135deg,
    var(--color-surface-container-high),
    var(--color-surface-container-high) 8px,
    var(--color-surface-container-highest) 8px,
    var(--color-surface-container-highest) 16px
  );
  font-size: var(--font-label-sm-size);
  font-weight: 600;
  color: var(--color-on-surface-variant);
}

.mentioned-photographer__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mentioned-photographer__name {
  font-size: var(--font-label-sm-size);
  font-weight: 500;
  line-height: 1.3;
}

.mentioned-photographer:hover .mentioned-photographer__name {
  text-decoration: underline;
}

/* ---- Tarjeta de fotógrafo (Diálogos) — borde de 1px y esquinas
   redondeadas a juego con la variante "otro artista" de más abajo (mismo
   gris, mismo radio), para que las dos convivan como el mismo tipo de
   elemento aunque una enlace a una ficha y la otra abra un popup. Selector
   por etiqueta (<a>, no <div>) porque es justo lo que distingue a un
   fotógrafo de un "otro artista" en dialogos.js — no hace falta una clase
   nueva. ---- */
a.mentioned-photographer {
  border: 1px solid var(--color-surface-container-high);
  border-radius: 8px;
  padding: var(--space-sm);
}

/* ---- Variante "otro artista" (Diálogos): autores de otra disciplina sin
   ficha propia en el sitio (ver otherArtists en dialogos-content.json y
   dialogos.js) — foto a opacidad normal y nombre en el mismo color que los
   fotógrafos (sin gris apagado), pero con fondo gris claro y esquinas
   redondeadas en todo el bloque para marcarlo como elemento clicable: al
   pulsarlo abre el popup con su foto, resumen y enlace externo (ver
   ensureArtistPopup/openArtistPopup). ---- */
.mentioned-photographer--other {
  cursor: pointer;
  background-color: var(--color-surface-container-high);
  border-radius: 8px;
  padding: var(--space-sm);
}

/* ---- Popup de "otro artista" (Diálogos) — foto redonda, resumen y enlace
   externo (_blank), ver ensureArtistPopup/openArtistPopup en dialogos.js.
   Inyectado una sola vez en <body>, oculto con [hidden] por defecto.

   Entrada/salida animadas: el propio overlay (fondo oscuro) hace fade de
   opacidad, y la tarjeta interior además escala y sube ligeramente. La
   clase is-open la añade/quita dialogos.js (ver openArtistPopup y close
   dentro de ensureArtistPopup) — [hidden] solo se pone/quita ANTES de
   entrar o DESPUÉS de salir, nunca a la vez que is-open, para que el
   navegador llegue a pintar el estado de partida y la transición se vea. ---- */
.artist-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.artist-popup-overlay.is-open {
  opacity: 1;
}

.artist-popup-overlay[hidden] {
  display: none;
}

.artist-popup {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  text-align: center;
  transform: scale(0.94) translateY(12px);
  transition: transform 0.25s ease;
}

.artist-popup-overlay.is-open .artist-popup {
  transform: scale(1) translateY(0);
}

.artist-popup__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.artist-popup__close:hover {
  background-color: var(--color-surface-container-highest);
}

.artist-popup__avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.artist-popup__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-popup__name {
  font-size: var(--font-headline-md-size);
  font-weight: var(--font-headline-md-weight);
  margin-bottom: var(--space-xs);
}

.artist-popup__role {
  font-size: var(--font-label-sm-size);
  font-weight: var(--font-label-sm-weight);
  letter-spacing: var(--font-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-sm);
}

.artist-popup__bio {
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-md);
}

.artist-popup__link {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid black;
  border-radius: var(--radius-full);
  color: black;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.artist-popup__link:hover {
  background-color: black;
  color: white;
}

/* ---- Imágenes flotantes junto al texto (Diálogos, experimento de
   maquetación) — intercaladas dentro de .article-body por
   renderArticlePage/buildInlineImage en dialogos.js, alternando lado; no
   sustituyen al slider de fotos de arriba (.article-slider-section), que
   se mantiene igual. En móvil dejan de flotar y ocupan todo el ancho. ---- */
.article-body__inline-image {
  /* <figure> trae un margen por defecto del navegador (1em 40px) — sin
     resetearlo a 0 aquí, el lado sin margen explícito (arriba, y el lado
     horizontal opuesto al float) se queda con ese margen del navegador en
     vez de 0, dejando la imagen visualmente descentrada dentro del hueco
     que ocupa. */
  margin: 0 0 var(--space-md);
  width: 240px;
}

.article-body__inline-image--right {
  float: right;
  margin-left: var(--space-md);
}

.article-body__inline-image--left {
  float: left;
  margin-right: var(--space-md);
}

/* Sin aspect-ratio/object-fit forzados a propósito: los retratos de cada
   fotógrafo no comparten un mismo encuadre (algunos apaisados, otros
   verticales — ver fotografos/<slug>/img/portrait.jpg), así que forzar un
   recorte 4:5 centraba la CAJA pero no necesariamente a la persona dentro
   de la foto, cortando cabezas en los retratos más anchos. Con height:auto
   se ve la fotografía entera, sin recortar, y sigue llenando el <figure>
   de borde a borde en las 4 direcciones (0 margen/padding internos). */
.article-body__inline-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

@media (max-width: 767px) {
  .article-body__inline-image {
    float: none;
    width: 60%;
    margin-inline: auto;
    margin-bottom: var(--space-md);
  }
}

/* ---- Navegación anterior/siguiente artículo: el botón "ver todos" (icono
   grid) queda siempre centrado de verdad, sin depender de si el título del
   artículo anterior/siguiente es más largo o más corto a un lado que al
   otro — se saca del flujo flex y se centra sobre el nav completo. ---- */
.article-nav {
  position: relative;
}

.article-nav__viewall {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  color: var(--color-on-surface);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.article-nav__viewall:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* En móvil, el título del artículo anterior/siguiente baja de tamaño para
   dejar sitio al botón "ver todos" centrado en medio. */
@media (max-width: 767px) {
  .article-nav .profile-nav__name {
    font-size: 12px;
  }

  .article-nav .profile-nav__link {
    max-width: 38%;
  }
}

/* ---- Listado de tarjetas del índice (articulos/index.html) ----
   1 columna a cualquier ancho, cada tarjeta con la variante apaisada
   (.article-card--horizontal, la misma de "Artículos relacionados" en la
   ficha de fotógrafo). ---- */
.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-gutter);
}

/* Imagen más pequeña que en "Artículos relacionados" — solo aquí, no la
   afecta a ella, que reutiliza la misma .article-card--horizontal.
   Selector con .article-card--horizontal incluido (en vez de solo
   .article-grid) para ganar por especificidad a esa misma regla de abajo
   sin depender del orden en el archivo. El botón "Leer más" mantiene el
   mismo estilo que .article-card__cta (sin overrides aquí). */
.article-grid .article-card--horizontal .article-card__image {
  width: 210px;
  flex-basis: 210px;
  aspect-ratio: 1 / 1;
}

@media (min-width: 640px) {
  .article-grid .article-card {
    padding-block: var(--space-sm);
  }
}

.article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-lowest);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ---- Tarjeta de diálogo (ver isDialogo en buildArticleCard/article-card.js)
   — fondo gris claro para distinguirla a simple vista de una tarjeta de
   artículo cuando ambas conviven en el mismo carrusel ("Artículos y
   diálogos" en la ficha de fotógrafo, ver profile.js). Mismo borde/radio
   que .article-card, solo cambia el relleno. ---- */
.article-card--dialogo {
  background: var(--color-surface-container-high);
}

/* display:flex de arriba gana por especificidad a la regla del navegador
   [hidden]{display:none}, así que sin esto el filtro de categorías
   marcaba las tarjetas como hidden pero seguían viéndose igual. */
.article-card[hidden] {
  display: none;
}

.article-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-outline);
}

.article-card__image {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-sm);
  background-color: var(--color-surface-container-high);
}

.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Etiqueta "Artículos"/"Diálogos" sobre la miniatura (typeLabel en
   buildArticleCard) — solo se pinta cuando se pasa esa opción, pensada
   para cuando ambos tipos conviven en el mismo carrusel ("Artículos y
   diálogos" en la ficha de fotógrafo, ver profile.js). ---- */
.article-card__type-badge {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 1;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-on-surface);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-card__image--placeholder {
  background: repeating-linear-gradient(
    135deg,
    var(--color-surface-container-high),
    var(--color-surface-container-high) 8px,
    var(--color-surface-container-highest) 8px,
    var(--color-surface-container-highest) 16px
  );
}

.article-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Variante apaisada: imagen a la izquierda, texto + botón a la derecha
   (sección "Artículos relacionados" de la ficha de fotógrafo, ver
   profile.js). La vertical (por defecto, índice de artículos) no cambia. ---- */
.article-card--horizontal {
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-md);
  /* .article-card (base) fija height:100% para el grid vertical del hub;
     aquí hace falta anularlo a "auto" para que el slider (.slider__track,
     display:flex) pueda estirar todas las tarjetas a la altura de la más
     alta — con height:100% cada tarjeta calculaba su propia altura por
     separado y salían descuadradas entre sí. */
  height: auto;
}

.article-card--horizontal .article-card__image {
  width: 180px;
  flex-basis: 180px;
  aspect-ratio: auto;
  height: auto;
  margin-bottom: 0;
}

.article-card--horizontal .article-card__body {
  justify-content: center;
}

.article-card--horizontal .article-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card--horizontal .article-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card--horizontal .article-card__cta-wrap {
  justify-content: flex-start;
}

@media (max-width: 639px) {
  .article-card--horizontal {
    flex-direction: column;
    height: auto;
  }

  .article-card--horizontal .article-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .article-card--horizontal .article-card__cta-wrap {
    justify-content: center;
  }

  /* Índice de artículos: en móvil se mantiene en fila (nowrap) en vez de
     apilarse en columna como "Artículos relacionados", con la imagen al
     mismo tamaño que en escritorio (no se reduce más), el título más
     pequeño y sin el botón "Leer más" (la tarjeta entera ya es el enlace). */
  .article-grid .article-card--horizontal {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  /* Tope de ancho: en fila estrecha el texto envuelve en más líneas y la
     tarjeta crece de alto; align-self:flex-start saca la imagen del
     estirado (align-items:stretch) para que mantenga su aspect-ratio en
     vez de deformarse a la altura de la tarjeta. */
  .article-grid .article-card--horizontal .article-card__image {
    width: 120px;
    max-width: 120px;
    align-self: flex-start;
  }

  .article-grid .article-card--horizontal .article-card__eyebrow {
    font-size: 10px;
  }

  .article-grid .article-card--horizontal .article-card__title {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    font-size: 16px;
  }

  .article-grid {
    gap: 14px;
  }

  .article-grid .article-card--horizontal .article-card__excerpt {
    display: none;
  }

  .article-grid .article-card--horizontal .article-card__cta-wrap {
    display: none;
  }
}

.article-card__eyebrow {
  font-size: var(--font-label-sm-size);
  font-weight: var(--font-label-sm-weight);
  letter-spacing: var(--font-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-xs);
}

.article-card__title {
  font-size: var(--font-headline-md-size);
  font-weight: var(--font-headline-md-weight);
  line-height: var(--font-headline-md-line-height);
  margin-bottom: var(--space-xs);
}

.article-card__excerpt {
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  color: var(--color-on-surface-variant);
}

.article-card__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: var(--space-md);
}

.article-card__cta {
  display: inline-block;
  pointer-events: none;
  background-color: white;
  color: black;
  padding: 12px 24px;
  border-radius: 50px;
  border: 2px solid black;
  transition: 0.3s;
}

.article-card__cta:hover {
  pointer-events: none;
  background-color: black;
  color: white;
  border: 2px solid black;
}

/* .article-card__cta tiene pointer-events:none (es decorativo — el enlace
   real es la tarjeta entera), así que nunca puede recibir su propio :hover;
   este selector por ancestro es el que de verdad dispara el cambio de color
   al pasar el ratón por cualquier punto de la tarjeta. */
.article-card:hover .article-card__cta {
  background-color: black;
  color: white;
}