/*
 * Capa editorial: listado, archivos y articulo.
 *
 * Reglas de la hoja, iguales que en shell.css:
 *  - un solo breakpoint principal (1024px) para el layout de dos columnas;
 *  - ningun color ni medida en crudo, todo sale de tokens.css.
 *
 * Una sola hoja para todas las vistas editoriales a proposito: entre el 70 y el
 * 80% de las reglas son compartidas (tarjeta, meta, paginacion, sidebar), y
 * partirla obligaria a duplicarlas o a inventar una tercera hoja "comun".
 */

/* ===== CONTENEDOR =====
 * Astra envuelve todo en .ast-container con ancho maximo. En las vistas
 * editoriales se anula y cada seccion declara su ancho con .fz-wrap: es lo que
 * permite el hero a sangre completa sin recurrir a 100vw, que en Windows
 * desborda porque incluye el ancho de la barra de scroll.
 *
 * El overflow: visible NO es decorativo: position: sticky deja de funcionar si
 * cualquier ancestro recorta, y Astra lo hace en algunos layouts. */

body.fz-editorial-view #content,
body.fz-editorial-view #content .ast-container {
  max-width: none;
  padding-inline: 0;
  overflow: visible;
}

body.fz-editorial-view #content .ast-container {
  display: block;
}

body.fz-editorial-view #content {
  background: var(--fz-surface);
}

.fz-wrap {
  width: 100%;
  max-width: var(--fz-container);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ===== HERO ===== */

.fz-hero {
  position: relative;
  background-color: var(--fz-hero-bg);
  background-image: radial-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--fz-text-inverse);
  font-family: var(--fz-font);
  text-align: center;
}

/* Con imagen de fondo hace falta un velo o el texto deja de leerse. */
.fz-hero--has-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.fz-hero--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(12 26 44 / 65%);
}

/* Parallax: la imagen queda fija respecto a la ventana y el resto de la pagina
   se desplaza por encima. Solo en desktop con puntero fino, por dos motivos:
   iOS Safari no implementa background-attachment: fixed -- lo degrada a scroll y
   en algunas versiones deforma la imagen --, y el repintado en cada scroll es una
   fuente conocida de tirones en moviles. El velo sigue pegado al hero, asi que se
   desplaza con el: es justo lo que da la sensacion de profundidad. */
@media (min-width: 1024px) and (hover: hover) {
  .fz-hero--has-image {
    background-attachment: fixed;
  }
}

/* El parallax es movimiento: quien lo ha desactivado en su sistema no lo recibe.
   Va despues del bloque anterior a proposito, para ganar por orden. */
@media (prefers-reduced-motion: reduce) {
  .fz-hero--has-image {
    background-attachment: scroll;
  }
}

.fz-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.fz-hero__title {
  margin: 0;
  color: inherit;
  font-family: var(--fz-font);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
}

.fz-hero__description {
  max-width: 42rem;
  margin: 0.75rem auto 0;
  color: rgb(255 255 255 / 80%);
  font-size: var(--fz-font-size-sm);
  line-height: 1.6;
}

/* ===== RASTRO DE NAVEGACION =====
 * El markup lo genera Rank Math: <nav class="fz-breadcrumbs fz-wrap"><p>
 * <a>..</a><span class="separator"></span><span class="last">..</span></p></nav>.
 * De su interior solo se estilizan tres selectores: a, .separator y .last. */

.fz-breadcrumbs {
  padding-block: 0.875rem;
  font-family: var(--fz-font);
}

.fz-breadcrumbs p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: var(--fz-font-size-sm);
}

.fz-breadcrumbs a {
  color: var(--fz-text-muted);
  text-decoration: none;
  transition: color var(--fz-transition);
}

.fz-breadcrumbs a:hover {
  color: var(--fz-blue);
}

/* El primer enlace se sustituye por el icono de casa y el separador por un
   chevron. En los dos casos el texto sigue en el arbol de accesibilidad: se
   recorta con overflow mas text-indent al 100%, no con el -9999em del home. */
.fz-breadcrumbs a:first-of-type,
.fz-breadcrumbs .separator {
  display: inline-flex;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}

.fz-breadcrumbs a:first-of-type {
  background: url("../images/breadcrumb-home.svg") center / contain no-repeat;
}

.fz-breadcrumbs .separator {
  background: url("../images/breadcrumb-chevron.svg") center / contain no-repeat;
}

.fz-breadcrumbs .last {
  color: var(--fz-blue);
  font-weight: var(--fz-font-weight-semibold);
}

/* ===== DESTACADAS ===== */

.fz-featured {
  display: grid;
  gap: 1rem;
  margin-block: 2.5rem;
}

/* ===== TARJETA (base compartida por las tres variantes) ===== */

.fz-card {
  font-family: var(--fz-font);
}

.fz-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--fz-radius-lg);
  /* Sin imagen destacada queda este bloque, no un hueco roto. */
  background: var(--fz-media-placeholder);
}

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

.fz-card__date {
  margin: 0;
  color: var(--fz-text-muted);
  font-size: var(--fz-font-size-xs);
  font-style: italic;
}

.fz-card__title {
  margin: 0.35rem 0 0;
  font-family: var(--fz-font);
  font-size: var(--fz-font-size-lg);
  font-weight: 700;
  line-height: 1.35;
}

.fz-card__title a {
  color: var(--fz-text);
  text-decoration: none;
  transition: color var(--fz-transition);
}

.fz-card__title a:hover {
  color: var(--fz-blue);
}

.fz-card__excerpt {
  margin: 0.5rem 0 0;
  color: var(--fz-text-muted);
  font-size: var(--fz-font-size-sm);
  line-height: 1.6;
}

.fz-card__more {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--fz-text);
  font-size: var(--fz-font-size-sm);
  font-weight: var(--fz-font-weight-semibold);
  text-decoration: none;
  transition: color var(--fz-transition);
}

.fz-card__more:hover {
  color: var(--fz-blue);
  text-decoration: underline;
}

/* Variante lista: imagen a la izquierda, contenido a la derecha. */
.fz-card--list {
  display: grid;
  gap: 1.25rem;
}

.fz-card--list .fz-card__media {
  aspect-ratio: 16 / 10;
}

/* Variantes destacadas: la tarjeta ENTERA es la imagen, con un velo que da
   contraste al titulo sin apagar la foto. */
.fz-card--feature,
.fz-card--feature-lg {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 260px;
  border-radius: var(--fz-radius-xl);
  background: var(--fz-media-placeholder);
  color: var(--fz-text-inverse);
}

.fz-card--feature-lg {
  min-height: 340px;
}

/* El enlace ES la tarjeta: toda la superficie queda clicable de forma nativa,
   con cursor y foco propios. Antes se estiraba el ::after del titulo, pero su
   inset se resolvia contra .fz-card__body -- que esta posicionado para quedar
   sobre el velo -- y solo el bloque de texto respondia al clic. */
.fz-card--feature .fz-card__link,
.fz-card--feature-lg .fz-card__link {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
}

.fz-card--feature .fz-card__link:focus-visible,
.fz-card--feature-lg .fz-card__link:focus-visible {
  outline: 2px solid var(--fz-text-inverse);
  /* Offset negativo: con overflow hidden un contorno exterior se recortaria. */
  outline-offset: -4px;
}

.fz-card--feature .fz-card__media,
.fz-card--feature-lg .fz-card__media {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.fz-card--feature .fz-card__media img,
.fz-card--feature-lg .fz-card__media img {
  transition: transform var(--fz-transition-slow);
}

/* El velo va sobre la imagen y por debajo del texto, de abajo hacia arriba. */
.fz-card--feature .fz-card__media::after,
.fz-card--feature-lg .fz-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(12 26 44 / 88%) 0%,
    rgb(12 26 44 / 55%) 45%,
    rgb(12 26 44 / 12%) 100%
  );
}

.fz-card--feature .fz-card__body,
.fz-card--feature-lg .fz-card__body {
  position: relative;
  z-index: 1;
}

.fz-card--feature .fz-card__date,
.fz-card--feature-lg .fz-card__date {
  color: rgb(255 255 255 / 75%);
}

.fz-card--feature .fz-card__title,
.fz-card--feature-lg .fz-card__title {
  color: inherit;
  text-shadow: 0 1px 2px rgb(12 26 44 / 45%);
}

.fz-card--feature-lg .fz-card__title {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

.fz-card--feature .fz-card__link:hover .fz-card__title,
.fz-card--feature-lg .fz-card__link:hover .fz-card__title {
  text-decoration: underline;
}

.fz-card--feature .fz-card__link:hover .fz-card__media img,
.fz-card--feature-lg .fz-card__link:hover .fz-card__media img {
  transform: scale(1.04);
}

/* ===== LISTA ===== */

/* Titulo de seccion: hace de division y de etiqueta a la vez. La regla tenue
   cruza el ancho y el acento corto repite el degradado del hover del menu, para
   que la seccion hable el mismo idioma que el shell. */
.fz-section-title {
  position: relative;
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  color: var(--fz-text);
  font-family: var(--fz-font);
  font-size: var(--fz-font-size-lg);
  font-weight: 700;
}

.fz-section-title::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--fz-border);
}

.fz-section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3rem;
  height: var(--fz-hover-bar);
  border-radius: 1px;
  background: linear-gradient(90deg, var(--fz-blue), var(--fz-blue-deep));
}

.fz-list {
  display: grid;
  gap: 1.75rem;
}

.fz-list__empty {
  margin: 0;
  color: var(--fz-text-muted);
  font-family: var(--fz-font);
}

/* ===== PAGINACION ===== */

.fz-pagination {
  margin-top: 1.25rem;
}

.fz-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fz-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: 0.5rem;
  border-radius: var(--fz-radius);
  color: var(--fz-text);
  font-family: var(--fz-font);
  font-size: var(--fz-font-size-sm);
  text-decoration: none;
  transition: background-color var(--fz-transition), color var(--fz-transition);
}

.fz-pagination .page-numbers:hover {
  background: var(--fz-blue-soft);
  color: var(--fz-blue);
}

.fz-pagination .page-numbers.current {
  background: var(--fz-hero-bg);
  color: var(--fz-text-inverse);
}

.fz-pagination .page-numbers.dots:hover {
  background: none;
  color: var(--fz-text);
}

/* ===== SIDEBAR ===== */

.fz-sidebar {
  display: grid;
  gap: 1.5rem;
  font-family: var(--fz-font);
}

.fz-sidebar__box {
  padding: 1.25rem;
  border: 1px solid var(--fz-border);
  border-radius: var(--fz-radius-xl);
  background: var(--fz-surface);
}

.fz-sidebar__box--cta {
  border-color: transparent;
  background: var(--fz-blue-soft);
}

.fz-sidebar__title {
  margin: 0 0 1rem;
  color: var(--fz-text);
  font-family: var(--fz-font);
  font-size: var(--fz-font-size-lg);
  font-weight: 700;
}

.fz-sidebar__list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fz-font-size-sm);
}

.fz-sidebar__list a {
  color: var(--fz-text-muted);
  text-decoration: none;
  transition: color var(--fz-transition);
}

.fz-sidebar__list a:hover,
.fz-sidebar__list a[aria-current="page"] {
  color: var(--fz-blue);
}

.fz-sidebar__text {
  margin: 0 0 1.25rem;
  color: var(--fz-text-muted);
  font-size: var(--fz-font-size-sm);
  line-height: 1.6;
}

.fz-sidebar__cta {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: var(--fz-radius-lg);
  background: var(--fz-hero-bg);
  color: var(--fz-text-inverse);
  font-size: var(--fz-font-size-sm);
  font-weight: var(--fz-font-weight-semibold);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--fz-transition);
}

.fz-sidebar__cta:hover,
.fz-sidebar__cta:focus {
  background: var(--fz-footer-bg);
  color: var(--fz-text-inverse);
}

/* ===== ARTICULO ===== */

.fz-article {
  font-family: var(--fz-font);
}

.fz-article__title {
  margin: 0;
  color: var(--fz-text);
  font-family: var(--fz-font);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
}

/* Autor y fecha a la izquierda, compartir a la derecha; en movil se apilan. */
.fz-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}

.fz-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--fz-text-muted);
  font-size: var(--fz-font-size-sm);
}

.fz-meta__avatar {
  display: inline-flex;
  flex-shrink: 0;
}

.fz-meta__avatar img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.fz-meta__date::before {
  /* Punto separador puesto en CSS: no es contenido, es decoracion. */
  content: "·";
  margin-right: 0.5rem;
}

/* ===== COMPARTIR ===== */

.fz-share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fz-share__label {
  color: var(--fz-text-muted);
  font-size: var(--fz-font-size-sm);
}

.fz-share__list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fz-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--fz-store-surface);
  transition: transform var(--fz-transition), opacity var(--fz-transition);
}

.fz-share__link:hover {
  opacity: 0.85;
  transform: scale(1.05);
}

.fz-share__link img {
  display: block;
  width: 14px;
  height: auto;
  max-height: 14px;
}

/* ===== IMAGEN DESTACADA ===== */

.fz-article__thumbnail {
  margin: 1.75rem 0 0;
}

.fz-article__thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fz-radius-xl);
}

.fz-article__thumbnail figcaption {
  margin-top: 0.5rem;
  color: var(--fz-text-muted);
  font-size: var(--fz-font-size-xs);
}

/* ===== CONTENIDO =====
 * Lleva tambien la clase entry-content para no perder lo que Astra y los bloques
 * de Gutenberg dan por hecho; estas reglas cargan despues y ganan por orden. */

.fz-article__content {
  margin-top: 1.75rem;
  color: var(--fz-text-muted);
  font-size: var(--fz-font-size);
  line-height: 1.7;
}

.fz-article__content > * {
  margin-block: 0 1.25rem;
}

.fz-article__content > *:last-child {
  margin-bottom: 0;
}

.fz-article__content h2,
.fz-article__content h3,
.fz-article__content h4 {
  margin-block: 2rem 0.75rem;
  color: var(--fz-text);
  font-family: var(--fz-font);
  font-weight: 700;
  line-height: 1.3;
}

.fz-article__content h2 {
  font-size: 1.25rem;
}

.fz-article__content h3 {
  font-size: 1.125rem;
}

.fz-article__content h4 {
  font-size: var(--fz-font-size);
}

.fz-article__content a {
  color: var(--fz-blue);
  text-decoration: underline;
}

.fz-article__content a:hover {
  color: var(--fz-blue-hover);
}

.fz-article__content strong {
  color: var(--fz-text);
}

.fz-article__content ul,
.fz-article__content ol {
  padding-left: 1.25rem;
}

.fz-article__content li {
  margin-bottom: 0.5rem;
}

.fz-article__content img {
  height: auto;
  border-radius: var(--fz-radius-lg);
}

.fz-article__content figcaption {
  color: var(--fz-text-muted);
  font-size: var(--fz-font-size-xs);
  text-align: center;
}

.fz-article__content blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: var(--fz-hover-bar) solid var(--fz-blue);
  color: var(--fz-text);
  font-style: italic;
}

/* ===== RELACIONADOS ===== */

.fz-related {
  margin-top: 3rem;
}

/* ===== LAYOUT DE DOS COLUMNAS ===== */

.fz-editorial {
  display: grid;
  gap: var(--fz-editorial-gap);
  margin-block: 2.5rem 4rem;
}

/* min-width: 0 evita que una imagen o un titulo largo revienten la columna. */
.fz-editorial__main {
  min-width: 0;
}

/* ===== TABLET: desde 768px ===== */

@media (min-width: 768px) {
  .fz-card--list {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
  }
}

/* ===== DESKTOP: desde 1024px ===== */

@media (min-width: 1024px) {
  /* Filas de altura fija: la principal ocupa dos y las secundarias una cada una,
     asi que el widget completo mide dos filas mas el hueco. */
  .fz-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--fz-featured-row);
  }

  /* La destacada principal ocupa las dos filas de la columna izquierda. */
  .fz-card--feature-lg {
    grid-row: span 2;
  }

  .fz-editorial {
    grid-template-columns: minmax(0, 1fr) var(--fz-sidebar-width);
    align-items: start;
  }

  /*
   * El sidebar se queda fijo mientras dura la rejilla y se suelta al terminar
   * la lista, que es el comportamiento pedido. Requisitos que no se pueden
   * omitir: align-self start (por defecto la columna se estira a toda la fila y
   * entonces no hay nada que pegar) y ningun ancestro con overflow distinto de
   * visible, que es lo que resuelve el bloque de CONTENEDOR de arriba.
   */
  .fz-sidebar {
    position: sticky;
    top: calc(var(--fz-header-height) + 1.5rem);
    align-self: start;
  }
}