/* ===========================================================================
   Iris: lenguaje de marca

   Una sola pieza, y aparece en todas las vistas: LA FRANJA, los ocho colores
   de la brocha en bloques planos y en su orden. Bajo el hero, sobre el borde
   inferior del pie, entre la foto y el texto de una tarjeta, como subrayado de
   un titular y como raya bajo cada dato de la ficha.

   Son ocho <span> (iris_franja() en inc/template-tags.php) y no un degradado:
   en el manual los bloques tienen el corte limpio, y un linear-gradient de
   paradas duras se emborrona en algunos navegadores al escalar.
   ======================================================================== */

.iris-franja {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  block-size: var(--franja-alto);
  inline-size: 100%;
}

.iris-franja__turquesa { background: var(--iris-turquesa); }
.iris-franja__azul     { background: var(--iris-azul); }
.iris-franja__jade     { background: var(--iris-jade); }
.iris-franja__verde    { background: var(--iris-verde); }
.iris-franja__lima     { background: var(--iris-lima); }
.iris-franja__amarillo { background: var(--iris-amarillo); }
.iris-franja__naranja  { background: var(--iris-naranja); }
.iris-franja__rojo     { background: var(--iris-rojo); }

/* Bajo una foto de tarjeta: 8 px. */
.iris-franja--fina {
  block-size: var(--franja-fina);
}

/* El subrayado de «Que se nota» y de los titulares de sección: 300 px, 6 px. */
.iris-franja--subrayado {
  block-size: 0.375rem;
  inline-size: min(100%, 18.75rem);
  margin-block-start: var(--space-4);
}

/* Al pie de la página: la última línea del sitio. */
.iris-franja--pie {
  block-size: clamp(0.75rem, 0.5rem + 0.6vw, 1.125rem);
}

/*
 * VERTICAL: la costura entre el texto y la foto de los bloques de la portada,
 * y el borde de las tarjetas de color de Noticias. De arriba abajo, el orden
 * es el mismo que de izquierda a derecha.
 */
.iris-franja--vertical {
  grid-template-columns: none;
  grid-template-rows: repeat(8, 1fr);
  block-size: 100%;
  inline-size: 0.75rem;
}

/* Al revés —del rojo al turquesa, de arriba abajo— como la brocha tumbada del
   logo horizontal, que es como se ve en la maqueta junto al texto. */
.iris-franja--invertida {
  direction: rtl;
}

.iris-franja--vertical.iris-franja--invertida > :nth-child(1) { order: 8; }
.iris-franja--vertical.iris-franja--invertida > :nth-child(2) { order: 7; }
.iris-franja--vertical.iris-franja--invertida > :nth-child(3) { order: 6; }
.iris-franja--vertical.iris-franja--invertida > :nth-child(4) { order: 5; }
.iris-franja--vertical.iris-franja--invertida > :nth-child(5) { order: 4; }
.iris-franja--vertical.iris-franja--invertida > :nth-child(6) { order: 3; }
.iris-franja--vertical.iris-franja--invertida > :nth-child(7) { order: 2; }
.iris-franja--vertical.iris-franja--invertida > :nth-child(8) { order: 1; }

/* La de «Tres soluciones»: vertical y gruesa, 20 px, entre el titular y la
   bajada. */
.iris-franja--columna {
  inline-size: 1.25rem;
  block-size: auto;
  min-block-size: 12rem;
}

/* ---------------------------------------------------------------------------
   La línea arcoíris bajo cada fila de «Datos principales»: 2 px. Va como
   fondo y no con ocho spans por fila, que serían ochenta elementos para una
   tabla de diez filas. Aquí sí es un degradado, y a 2 px no se nota el borde.
--------------------------------------------------------------------------- */
.iris-raya-arcoiris {
  background-image: linear-gradient(
    to right,
    var(--iris-rojo) 0 12.5%,
    var(--iris-naranja) 12.5% 25%,
    var(--iris-amarillo) 25% 37.5%,
    var(--iris-lima) 37.5% 50%,
    var(--iris-verde) 50% 62.5%,
    var(--iris-jade) 62.5% 75%,
    var(--iris-azul) 75% 87.5%,
    var(--iris-turquesa) 87.5% 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: bottom;
}