/* ===== TARJETA DE ENTRADA =====
 * Hoja compartida: la misma tarjeta se usa en la rejilla del listado y en los
 * articulos relacionados de la entrada individual, y esas dos vistas cargan
 * hojas distintas (editorial.css o single.css).
 *
 * Cada selector lleva su contenedor DOS veces, .fz-list y .fz-single, en lugar
 * de quitar el prefijo: el prefijo esta para vencer a Astra y a Elementor en la
 * cascada real, asi que retirarlo devolveria el h3 azul de 28px de Elementor.
 * Duplicarlo mantiene la especificidad exacta en las dos vistas. */

/* El position:relative va SIN prefijo y aparte a proposito: es estructura, no
 * una pelea de cascada. Sobre el se estira .fz-card__link::after para que toda
 * la tarjeta sea pulsable, asi que una vista que no lo tenga deja ese ::after
 * suelto cubriendo la pagina entera. Acotarlo por body deja ese defecto a un
 * descuido de distancia. */
.fz-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Astra añade 48px de padding, fondo y borde a .ast-article-post. Se apagan con
 * un selector acotado; la tarjeta del diseño no tiene caja propia. Aqui el
 * prefijo SI hace falta: es lo que vence a Astra. */
body:is(.home, .single-post, .page) :is(.fz-list, .fz-single, .fz-author) article.fz-card {
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fz-card__media {
  flex: none;
  overflow: hidden;
  aspect-ratio: var(--fz-card-media-ratio);
  background: var(--fz-media-placeholder);
  border-radius: var(--fz-radius-2xl);
}

.fz-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fz-card__image--empty {
  background: var(--fz-media-placeholder);
}

.fz-card__body {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--fz-card-content-gap);
  height: var(--fz-card-body-height);
  padding: var(--fz-card-padding);
  background: transparent;
}

.fz-card__tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fz-control-column-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada regla nombra las TRES vistas que montan la tarjeta: el listado, los
 * relacionados de la entrada y las entradas del autor. El prefijo no es
 * decorativo, vence al h3 del kit de Elementor (28/42px azul), asi que no se
 * puede quitar; con :is() la especificidad es la misma que con una sola clase. */
:is(.fz-list, .fz-single, .fz-author) .fz-card__tag {
  display: inline-flex;
  padding: var(--fz-chip-padding);
  border-radius: var(--fz-radius-lg);
  color: var(--fz-ink);
  font-family: var(--fz-font-body);
  font-size: var(--fz-list-label-size);
  font-weight: var(--fz-font-weight-regular);
  line-height: var(--fz-list-label-line);
}

.fz-card__tag--tone-1 {
  background: var(--fz-tag-tone-1);
}

.fz-card__tag--tone-2 {
  background: var(--fz-tag-tone-2);
}

.fz-card__tag--tone-3 {
  background: var(--fz-tag-tone-3);
}

.fz-card__tag--tone-4 {
  background: var(--fz-tag-tone-4);
}

.fz-card__tag--tone-5 {
  background: var(--fz-tag-tone-5);
}

.fz-card__tag--tone-6 {
  background: var(--fz-tag-tone-6);
}

:is(.fz-list, .fz-single, .fz-author) .fz-card__tag-link {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}

:is(.fz-list, .fz-single, .fz-author) .fz-card__tag-link:hover {
  color: inherit;
  text-decoration: underline;
}

:is(.fz-list, .fz-single, .fz-author) .fz-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  padding: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--fz-ink);
  font-family: var(--fz-font);
  font-size: var(--fz-list-copy-size);
  font-weight: var(--fz-font-weight-semibold);
  line-height: var(--fz-list-copy-line);
}

:is(.fz-list, .fz-single, .fz-author) .fz-card__link,
:is(.fz-list, .fz-single, .fz-author) .fz-card__link:hover,
:is(.fz-list, .fz-single, .fz-author) .fz-card__link:focus,
:is(.fz-list, .fz-single, .fz-author) .fz-card__link:visited {
  display: block;
  color: var(--fz-ink);
  font-family: var(--fz-font);
  font-size: var(--fz-list-copy-size);
  font-weight: var(--fz-font-weight-semibold);
  line-height: var(--fz-list-copy-line);
  text-decoration: none;
}

.fz-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.fz-card__link:focus-visible::after {
  outline: var(--fz-focus-ring) solid var(--fz-blue);
  outline-offset: var(--fz-focus-offset);
  border-radius: var(--fz-radius-2xl);
}

:is(.fz-list, .fz-single, .fz-author) .fz-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  padding: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--fz-ink-muted);
  font-family: var(--fz-font-body);
  font-size: var(--fz-list-body-size);
  font-weight: var(--fz-font-weight-regular);
  line-height: var(--fz-list-body-line);
}