/*
  La carga cognitiva y lectura de datos en entornos clínicos
  Stylesheet for /articulos/carga-cognitiva-entornos-clinicos

  Every rule starts with .articulo--carga-cognitiva-entornos-clinicos, so
  nothing here can reach the rest of the site. If the slug ever changes, this
  prefix has to change with it (find and replace).

  What it does
  1. The three hand-drawn heads (one `galeria` block, three images) are stacked
     in one frame and cycle on their own, like a GIF: a hand-drawn "line boil".
     Pure CSS: no script, so there is no integrity hash to maintain.
  2. Wide screens: the head is a sticky column on the left, facing the text
     (the drawing looks to the right, so it looks INTO the article). Narrow
     screens: it sits in the flow after the pull quote, at a comfortable size.
  3. The cover (a landscape drawing) sits beside the title, anchored right and
     faded out toward the left, so the title stays crisp over the part that
     fades and the clear half of the drawing stays fully visible. On narrow
     screens it sits under the header, full width, with the same fade.
  4. The pull quote and the "¿Por qué?" heading are refined in the site's voice
     (Bodoni, gold hairline, rose accent).

  It relies on the block order given in LEEME.md: 8 blocks, the gallery being
  the 5th and the other 7 blocks making up the text column. The gallery's image
  order is the animation order; the first image is the one that stays still
  under "reduce motion".
*/

/* ---------- 0. Local settings ---------- */

.articulo--carga-cognitiva-entornos-clinicos {
  /*
    How long each of the three drawings stays on screen.
    0.18s = about 5.5 drawings per second: fast enough to read as lines being
    redrawn by hand, slow enough not to flicker or pull the eye away from the
    text (the head sits in the corner of the eye for the whole read). Livelier:
    0.12s. Calmer: 0.25s.
  */
  --paso: 0.18s;
  /* Gap between the head and the text on wide screens. */
  --canal: clamp(1.5rem, 3.5vw, 4rem);
  /*
    Width of the reading column, at every screen size: 41rem is about 70
    characters per line at the size the text is set in. The template's own
    column is wider (68ch measured in the container's smaller type, about 80
    real characters); on wide screens the room it gives up goes to the head.
  */
  --lectura: 41rem;
}

/* ---------- 1. The cover, beside the title ---------- */

/*
  The cover is a 1586x992 colour-pencil drawing, opaque, with no paper margin:
  chaotic data scribbles on the left, a clinician seen from behind in the
  middle, calm clinical icons on the right. It is the card in /articulos and
  the social image; on the page it takes part in the header.

  Its edges are never hard: a mask fades the left (so the chaos dissolves
  under the title), the top and the bottom. Multiply blends the drawing into
  the soft blooms of the page field instead of laying a rectangle over them.
  The right edge is the edge of the screen, so it stays solid.
*/
.articulo--carga-cognitiva-entornos-clinicos .articulo__portada {
  margin: var(--sp-3) 0 0;
}

.articulo--carga-cognitiva-entornos-clinicos .articulo__portada > * {
  grid-column: completo;
  justify-self: end;
  width: min(100%, 40rem);
}

.articulo--carga-cognitiva-entornos-clinicos .articulo__portada img {
  /*
    Narrow screens: the drawing sits under the header, not under the title, so
    nothing has to stay readable over it; the fade only has to hide its edges.
  */
  --izquierda: linear-gradient(
    to right,
    transparent 0%,
    rgb(0 0 0 / 0.1) 10%,
    rgb(0 0 0 / 0.35) 24%,
    rgb(0 0 0 / 0.72) 38%,
    #000 52%
  );
  --arriba-abajo: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: var(--izquierda), var(--arriba-abajo);
  mask-image: var(--izquierda), var(--arriba-abajo);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/*
  Wide screens: the cover leaves the flow and sits behind the title block,
  anchored to the right edge of the screen. Nothing else moves: the header and
  the body keep the template's spacing. The title, date and standfirst are
  painted over it, and it is click-through.
*/
@media (min-width: 56rem) {
  .articulo--carga-cognitiva-entornos-clinicos .articulo__portada {
    position: absolute;
    z-index: -1;
    top: clamp(0.5rem, 1.7vw, 2rem);
    right: 0;
    display: block;
    width: min(calc(60vw - 3rem), 62.5rem);
    margin: 0;
    pointer-events: none;
  }

  .articulo--carga-cognitiva-entornos-clinicos .articulo__portada > * {
    width: 100%;
  }

  /*
    The chaotic left third sits under the title, so it fades out completely at
    the left edge and is only half opaque around 35%; from about 58% on the
    drawing is solid. The title keeps at least 3.9:1 against the worst pixel
    (5.8:1 or better for 99% of them). The clinician sits just to the right of
    the last title line: a wider cover would put them under the letters.
  */
  .articulo--carga-cognitiva-entornos-clinicos .articulo__portada img {
    --izquierda: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 0.1) 8%,
      rgb(0 0 0 / 0.35) 20%,
      rgb(0 0 0 / 0.68) 34%,
      rgb(0 0 0 / 0.92) 48%,
      #000 58%
    );
    --arriba-abajo: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
}

/* ---------- 2. The animated head (the gallery block) ---------- */

/*
  All three figures share ONE grid cell, so the frame keeps the size of a single
  image: no layout shift, and no overflow whatever the width.
*/
.articulo--carga-cognitiva-entornos-clinicos .bloque--galeria {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(100%, 23rem);
  margin: 0;
  justify-self: center;
}

.articulo--carga-cognitiva-entornos-clinicos .galeria__item {
  grid-area: 1 / 1;
  opacity: 0;
  animation: carga-cognitiva-boil calc(var(--paso) * 3) step-end infinite;
}

/* Staggered by one step each, so exactly one drawing is visible at any moment. */
.articulo--carga-cognitiva-entornos-clinicos .galeria__item:nth-child(2) {
  animation-delay: calc(var(--paso) * -2);
}

.articulo--carga-cognitiva-entornos-clinicos .galeria__item:nth-child(3) {
  animation-delay: calc(var(--paso) * -1);
}

/*
  The drawings are semi-transparent cut-outs: two on screen at once would show
  as a double line. Hence one at a time (step-end, no fading), and the share of
  each frame (33.34%) is a hair over a third so the hand-over never leaves a
  blank frame.
*/
@keyframes carga-cognitiva-boil {
  0% {
    opacity: 1;
  }
  33.34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* The template crops gallery images to 4:5; these are square and must not be cropped. */
.articulo--carga-cognitiva-entornos-clinicos .galeria__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 0;
}

/* Reduced motion: the first drawing, still. */
@media (prefers-reduced-motion: reduce) {
  .articulo--carga-cognitiva-entornos-clinicos .galeria__item {
    animation: none;
    opacity: 0;
  }

  .articulo--carga-cognitiva-entornos-clinicos .galeria__item:first-child {
    opacity: 1;
  }
}

/* ---------- 3. Layout of the body ---------- */

/*
  The template's body is one grid with named lines (completo / amplio / texto).
  This keeps those names but sets the reading column to --lectura at every
  width, so the line length is the same on a tablet as on a desktop.
*/
.articulo--carga-cognitiva-entornos-clinicos .articulo__cuerpo {
  grid-template-columns:
    [completo-start] minmax(var(--gutter), 1fr)
    [amplio-start texto-start] minmax(0, var(--lectura))
    [texto-end amplio-end] minmax(var(--gutter), 1fr)
    [completo-end];
}

/* Wide screens: the head beside the text. */
@media (min-width: 67.5rem) {
  /*
    The same named lines, now holding two columns: the head (left) and the
    reading column (right). Together they span the template's "amplio" width
    (1120px), so the head lines up with the left edge of the title.
  */
  .articulo--carga-cognitiva-entornos-clinicos .articulo__cuerpo {
    grid-template-columns:
      [completo-start] minmax(var(--gutter), 1fr)
      [amplio-start lateral-start] minmax(0, min(30vw, calc(var(--amplio) - var(--lectura) - var(--canal))))
      [lateral-end] var(--canal)
      [texto-start] minmax(0, var(--lectura))
      [texto-end amplio-end] minmax(var(--gutter), 1fr)
      [completo-end];
  }

  /*
    The head spans all seven text blocks (rows 1 to 7) and sticks to the top of
    the screen while they scroll past on the right.
  */
  .articulo--carga-cognitiva-entornos-clinicos .bloque--galeria {
    grid-column: lateral;
    grid-row: 1 / span 7;
    align-self: start;
    position: sticky;
    top: clamp(5.5rem, 14vh, 8rem);
    width: 100%;
    justify-self: stretch;
  }
}

/* ---------- 4. The pull quote ---------- */

.articulo--carga-cognitiva-entornos-clinicos .bloque--cita {
  margin-block: clamp(2.6rem, 6vw, 4.4rem);
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  border-left: 1px solid var(--oro);
}

.articulo--carga-cognitiva-entornos-clinicos .bloque--cita blockquote p {
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.75rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.015em;
  word-spacing: 0.08em;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- 5. Reading details ---------- */

/*
  The one section heading is a short question: it takes the site's rose italic
  accent. --rosa-fuerte (4.7:1 on the page ground) rather than --rosa (3.3:1),
  because this heading can land over the pale blooms of the page field.
*/
.articulo--carga-cognitiva-entornos-clinicos h2.bloque--titulo {
  font-style: italic;
  font-weight: 400;
  color: var(--rosa-fuerte);
}

.articulo--carga-cognitiva-entornos-clinicos .prosa p {
  text-wrap: pretty;
}