/*
 * Écfrasis — capa editable de gradientes
 *
 * Este archivo se carga después de style.css y approved-visuals.css.
 * Cada bloque conserva la geometría propia de su superficie.
 * Para experimentar, reemplaza únicamente background-color,
 * background-image y, cuando esté indicado, las propiedades de extensión.
 * No usar !important: esta capa ya ocupa la posición final de la cascada.
 */

/* ==========================================================
   ARCHIVOS — HEADERS DE SECCIÓN
   Superficie: headers de archivos y páginas de sección.
   Extensión: altura natural del contenedor.
   Editable: background-color, background-image.
   ========================================================== */
.section-header,
.page-header,
.archive-header {
  background-color: var(--paper);
  background-image: linear-gradient(
    180deg,
    var(--section, var(--green)) 0%,
    var(--section, var(--green)) 74%,
    var(--section-fade, var(--ec-green-light)) 100%
  );
}

/* ==========================================================
   ARCHIVOS — GRILLAS
   Superficie: fondo de las grillas de archivo.
   Extensión: min(24vw, 260px) en el eje vertical del gradiente.
   Editable: background-color, background-image,
   background-size y background-position.
   ========================================================== */
.archive-grid,
.archive-grid-edicion {
  background-color: var(--paper);
  background-image: linear-gradient(
    180deg,
    var(--section-fade, var(--ec-green-light)) 0%,
    var(--paper) min(24vw, 260px)
  );
}

/* ==========================================================
   ARCHIVOS / PÁGINAS — CUERPOS
   Superficie: cuerpo de archivos y páginas de sección.
   Extensión: min(24vw, 260px) en el eje vertical del gradiente.
   Editable: background-color, background-image,
   background-size y background-position.
   ========================================================== */
.section-body,
.page-body {
  background-color: var(--paper);
  background-image: linear-gradient(
    180deg,
    var(--section-fade, var(--ec-green-light)) 0%,
    var(--paper) min(24vw, 260px)
  );
}

/* ==========================================================
   EDICIONES — FICHA
   Superficie: cabecera de la ficha individual.
   Extensión: altura natural del hero; el gradiente termina al
   100% del contenedor.
   Nota: --archive-header-background puede aportar una composición
   inline por entrada y conserva prioridad sobre esta regla.
   Editable: background-color, background-image.
   ========================================================== */
.edicion-hero {
  background-color: var(--paper);
  background-image: linear-gradient(
    180deg,
    var(--section) 0%,
    var(--section) 50%,
    var(--paper) 100%
  );
}

/* ==========================================================
   REVISTA / PROGRAMACIÓN / AUTORES — FICHAS
   Superficie: hero de fichas individuales que no son Ediciones.
   Extensión: altura natural del hero; transición completa al 100%.
   Editable: background-color, background-image.
   ========================================================== */
.entry-hero:not(.edicion-hero) {
  background-color: var(--paper);
  background-image: linear-gradient(
    180deg,
    var(--section) 0%,
    var(--section) 50%,
    var(--section-fade) 100%
  );
}

/* ==========================================================
   REVISTA / PROGRAMACIÓN / AUTORES — CUERPOS
   Superficie: transición superior del cuerpo editorial.
   Extensión: min(24vw, 260px) en el eje vertical.
   Editable: background-color, background-image,
   background-size y background-position.
   ========================================================== */
.entry-body:not(.edicion-body) {
  background-color: var(--paper);
  background-image: linear-gradient(
    180deg,
    var(--section-fade) 0%,
    var(--paper) min(24vw, 260px)
  );
}

/* ==========================================================
   HOME — DESTACADO PRINCIPAL
   Superficie: bloque editorial destacado.
   Extensión: altura natural/min-height del bloque; diagonal completa.
   Editable: background-color, background-image.
   ========================================================== */
.home-featured {
  background-color: var(--paper);
  background-image: linear-gradient(
    135deg,
    var(--ec-mint) 0%,
    var(--ec-sky) 58%,
    var(--paper) 100%
  );
}

/* ==========================================================
   HOME — ACCESOS PRINCIPALES
   Superficie: accesos grandes a Ediciones, Revista y Programación.
   Extensión: altura natural/min-height de cada acceso.
   Editable: background-color, background-image.
   ========================================================== */
.home-gateway-edicion {
  background-color: var(--ec-sky);
  background-image: linear-gradient(150deg, var(--ec-mint), var(--ec-sky));
}

.home-gateway-revista {
  background-color: var(--ec-mint);
  background-image: linear-gradient(150deg, var(--ec-sky), var(--ec-mint));
}

.home-gateway-programa_publico {
  background-color: var(--ec-coral);
  background-image: linear-gradient(150deg, var(--ec-gold), var(--ec-coral));
}

/* ==========================================================
   HOME — RECURSOS
   Superficie: calugas de herramientas/accesos.
   Extensión: altura natural/min-height de cada caluga.
   Editable: background-color, background-image.
   ========================================================== */
.home-resource-tile {
  background-color: var(--ec-sky);
  background-image: linear-gradient(145deg, var(--ec-mint), var(--ec-sky));
}

.home-resource-tile:nth-child(2n) {
  background-color: var(--ec-coral);
  background-image: linear-gradient(145deg, var(--ec-gold), var(--ec-coral));
}

/* ==========================================================
   HOME — AHORA EN ÉCFRASIS
   Superficie: constelación editorial.
   Extensión: altura natural del bloque; dos radiales cubren el área.
   Editable: background-color, background-image,
   background-size y background-position.
   ========================================================== */
.home-constellation {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 20%, var(--ec-mint), transparent 46%),
    radial-gradient(circle at 80% 70%, var(--ec-sky), transparent 48%);
}

/* ==========================================================
   AUTORES — CARDS
   Superficie: atmósfera hover de cards de Autores.
   Extensión: pseudo-elemento absoluto; inset y forma propios por
   variante nth-child.
   Editable: background-color, background-image, inset,
   border-radius, filter y opacity del pseudo-elemento.
   ========================================================== */
.archive-grid-autor .archive-card::before {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 30% 45%, rgb(167 252 205 / 88%), transparent 48%),
    radial-gradient(circle at 72% 55%, rgb(255 138 101 / 78%), transparent 52%),
    radial-gradient(circle at 52% 12%, rgb(160 181 235 / 72%), transparent 54%);
}

.archive-grid-autor .archive-card:nth-child(4n + 2)::before {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 70% 35%, rgb(160 181 235 / 86%), transparent 48%),
    radial-gradient(circle at 30% 68%, rgb(236 218 152 / 76%), transparent 54%);
}

.archive-grid-autor .archive-card:nth-child(4n + 3)::before {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 28% 38%, rgb(255 138 101 / 82%), transparent 46%),
    radial-gradient(circle at 68% 66%, rgb(167 252 205 / 84%), transparent 56%);
}

.archive-grid-autor .archive-card:nth-child(4n + 4)::before {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 50% 78%, rgb(236 218 152 / 86%), transparent 46%),
    radial-gradient(circle at 78% 20%, rgb(160 181 235 / 78%), transparent 54%),
    radial-gradient(circle at 18% 32%, rgb(255 138 101 / 60%), transparent 48%);
}

/* ==========================================================
   CONTENIDOS ASOCIADOS — TÍTULOS
   Superficie: atmósfera hover detrás de títulos asociados.
   Extensión: pseudo-elemento ajustado al ancho del título.
   Editable: background-color, background-image, inset,
   border-radius, filter y opacity del pseudo-elemento.
   ========================================================== */
.edicion-related-editions a > span::before,
.edicion-related-magazine article h3::before,
.author-related-ediciones .author-links a > span::before,
.author-related-revista .author-links a > span::before {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 28% 42%, rgb(167 252 205 / 78%), transparent 50%),
    radial-gradient(circle at 74% 58%, rgb(255 138 101 / 68%), transparent 54%);
}

.edicion-related-editions a:nth-child(4n + 2) > span::before,
.author-related-ediciones .author-links a:nth-child(4n + 2) > span::before {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 70% 35%, rgb(160 181 235 / 80%), transparent 48%),
    radial-gradient(circle at 30% 68%, rgb(236 218 152 / 70%), transparent 54%);
}

.edicion-related-magazine article:nth-child(2n) h3::before,
.author-related-revista .author-links a:nth-child(2n) > span::before {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 28% 38%, rgb(255 138 101 / 76%), transparent 46%),
    radial-gradient(circle at 68% 66%, rgb(167 252 205 / 78%), transparent 56%);
}

/* ==========================================================
   TIMELINE — INTRO / CAMPO CROMÁTICO
   Superficie: header, introducción y transición inicial.
   Extensión: altura natural de .timeline-intro; no se extiende
   sobre .timeline ni depende de la altura total de la cronología.
   Editable: background-color, background-image,
   background-size y background-position.
   MOBILE OVERRIDE: composición sky + mint + gold, sin coral.
   ========================================================== */
.timeline-resource .timeline-intro {
  background-color: var(--paper);
  background-image:
    radial-gradient(
      ellipse 88% 64% at 8% 4%,
      color-mix(in srgb, var(--ec-sky) 42%, transparent) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 76% 58% at 92% 18%,
      color-mix(in srgb, var(--ec-mint) 36%, transparent) 0%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 64% 50% at 66% 82%,
      color-mix(in srgb, var(--ec-gold) 22%, transparent) 0%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 54% 44% at 12% 92%,
      color-mix(in srgb, var(--ec-coral) 16%, transparent) 0%,
      transparent 82%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ==========================================================
   TIMELINE — NAVEGACIÓN STICKY
   Superficie: navegación por décadas cuando queda fija.
   Extensión: altura natural de .timeline-decades; el gradiente
   sólo existe con .is-sticky y termina en el borde del elemento.
   Estado normal: var(--paper), sin imagen de fondo.
   Editable: background-color, background-image,
   background-size y background-position.
   MOBILE OVERRIDE: la regla histórica aplica la composición móvil
   al elemento de décadas dentro del breakpoint de 768px.
   ========================================================== */
.timeline-decades {
  background-color: var(--paper);
  background-image: none;
}

.timeline-decades.is-sticky {
  background-color: var(--paper);
  background-image:
    radial-gradient(
      ellipse 88% 64% at 8% 4%,
      color-mix(in srgb, var(--ec-sky) 42%, transparent) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 76% 58% at 92% 18%,
      color-mix(in srgb, var(--ec-mint) 36%, transparent) 0%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 64% 50% at 66% 82%,
      color-mix(in srgb, var(--ec-gold) 22%, transparent) 0%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 54% 44% at 12% 92%,
      color-mix(in srgb, var(--ec-coral) 16%, transparent) 0%,
      transparent 82%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@media (max-width: 768px) {
  /* MOBILE OVERRIDE — Timeline intro y navegación */
  .timeline-resource .timeline-intro,
  .timeline-resource .timeline-decades {
    background-color: var(--paper);
    background-image:
      radial-gradient(
        ellipse 105% 48% at 0% 4%,
        color-mix(in srgb, var(--ec-sky) 34%, transparent) 0%,
        transparent 72%
      ),
      radial-gradient(
        ellipse 92% 44% at 100% 20%,
        color-mix(in srgb, var(--ec-mint) 28%, transparent) 0%,
        transparent 74%
      ),
      radial-gradient(
        ellipse 74% 38% at 64% 76%,
        color-mix(in srgb, var(--ec-gold) 15%, transparent) 0%,
        transparent 80%
      );
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}