/* ==========================================================================
   triage.css — "que significa esa mancha".

   Demuestra competencia antes de vender nada. Va sobre --chalk, el plano
   elevado: se lee como una hoja apoyada encima del hero, no como otra franja
   mas de la misma pagina.

   Peso desigual, no cuatro tarjetas iguales. La urgencia esta declarada en el
   marcado (data-urgency) y de ahi salen dos cosas: el grosor del filete
   izquierdo y el tamano del titular. Las dos entradas que no corren tienen el
   mismo peso porque de verdad tienen la misma urgencia — igualarlas es honesto,
   no perezoso. La seccion se va calmando visualmente segun se lee.

   Sin relleno, sin radio, sin sombra: no son tarjetas.
   ========================================================================== */

.triage {
  background: var(--chalk);
  padding-block: var(--section-y);
}

.triage .wrap {
  display: grid;
  gap: var(--space-7);
}

/* --- Entradilla ----------------------------------------------------------- */

.triage__intro {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.triage__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.triage__lede {
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* --- Lista --------------------------------------------------------------- */

.triage__list {
  display: grid;
  gap: var(--space-6);
}

.triage__item {
  display: grid;
  gap: var(--space-2);
  border-left-style: solid;

  /* El relleno compensa el grosor del filete para que el borde izquierdo del
     texto caiga en el mismo sitio en las cuatro entradas. */
  /* Bajan el grosor y el tono a la vez. Con --rule el filete mas ligero
     desaparecia sobre --chalk y la escala se leia como "dos tienen filete y
     dos no", que no es lo que dice el contenido. */
  border-left-width: var(--hairline);
  border-left-color: var(--rule-strong);
  padding-left: var(--space-4);
}

.triage__item[data-urgency="this-week"] {
  border-left-width: 2px;
  border-left-color: var(--slate);
  padding-left: calc(var(--space-4) - 1px);
}

.triage__item[data-urgency="tonight"] {
  border-left-width: 4px;
  border-left-color: var(--slate);
  padding-left: calc(var(--space-4) - 3px);
}

.triage__symptom {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.triage__item[data-urgency="this-week"] .triage__symptom { font-size: var(--text-xl); }
.triage__item[data-urgency="tonight"]   .triage__symptom { font-size: var(--text-2xl); }

/* El veredicto va primero y en tinta plena: la respuesta antes que el
   razonamiento. La causa, debajo y en tinta suave. */
.triage__verdict {
  color: var(--ink);
  font-weight: var(--weight-body-bold);
  max-width: var(--measure);
}

.triage__cause {
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* --- Desplegable --------------------------------------------------------- */
/* Dos frases a la vista y el resto aqui dentro. Quien esta asustado escanea;
   quien se calmo, abre.

   <details> nativo: sin JavaScript, funciona en file://, el contenido sigue
   escrito en el HTML para los rastreadores, y el estado abierto/cerrado se
   anuncia solo a un lector de pantalla. El movimiento responde a una accion del
   usuario, que es el unico movimiento que la pagina permite ademas de la linea
   de tiza. */

.triage__more > summary {
  position: relative;
  padding-left: 1.5em;
  /* Ensancha el area pulsable: a 15px la linea sola daba unos 21px de alto,
     poco para un pulgar. Con esto queda cerca de 37. */
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
  list-style: none;          /* fuera el triangulo por defecto */
  width: fit-content;
}

.triage__more > summary::-webkit-details-marker { display: none; }

/* Mas y menos dibujados, no glifos: no los lee un lector de pantalla y no
   dependen de la metrica de la fuente. El signo codifica el estado. */
.triage__more > summary::before,
.triage__more > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  background: currentColor;
}

.triage__more > summary::before {
  left: 0;
  width: 0.8em;
  height: var(--rule-weight);
  transform: translateY(-50%);
}

.triage__more > summary::after {
  left: calc(0.4em - (var(--rule-weight) / 2));
  width: var(--rule-weight);
  height: 0.8em;
  transform: translateY(-50%);
  transition: opacity var(--transition-control);
}

.triage__more[open] > summary::after { opacity: 0; }

.triage__detail {
  margin-top: var(--space-3);
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* --- Foto ---------------------------------------------------------------- */
/* Es prueba, no adorno: el pie lee la foto y dice algo que solo sabe alguien
   que ha visto muchas. */

.triage__figure {
  display: grid;
  gap: var(--space-3);
}

.triage__photo {
  width: 100%;
  /* Cuadrada, no 4/5: con los desplegables cerrados el rail quedaba mas alto que
     la lista y la foto colgaba por debajo del contenido. El recorte cuadrado
     sigue mostrando los anillos, que es lo unico que la foto tiene que probar. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.triage__caption {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 44ch;
}

/* --- Rail ---------------------------------------------------------------- */
/* Entradilla y foto forman un solo bloque, no dos celdas en filas distintas.
   Con el reparto anterior la lista abarcaba las dos filas y las estiraba
   (294 + 475 para 270 + 450 de contenido), asi que la foto quedaba flotando
   entre huecos que no habia puesto nadie y las dos columnas no terminaban
   juntas.

   El orden que sale de aqui es el correcto en las dos vistas. En movil la foto
   cae entre la entradilla y los cuatro casos: ensena a leer una mancha, asi que
   precede a los ejemplos. */

.triage__rail {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

@media (min-width: 900px) {
  .triage .wrap {
    /* 36/64 y no 32/68: a 32 el rail dejaba la entradilla en 37 caracteres por
       linea, demasiado estrecho para leer sin tropezar. */
    grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
    column-gap: var(--space-8);
    align-items: start;
  }
}