/* ─────────────────────────────────────────────────────────────────────────────
   textPhotoBetween — texto largo partido por una foto panorámica.
   Sin fondo propio, sin cajas, sin filetes: sólo aire, dos columnas de lectura
   y una banda de foto que separa los dos bloques. Todo el color, por variables.
   ───────────────────────────────────────────────────────────────────────────── */

/* TRAMPA YA PISADA: la medida iba en el envoltorio (`max-width: 17ch`), y ahí `ch` se mide con el
   cuerpo del texto (~16 px), no con el del titular (5.4vw ≈ 78 px a 1440). El titular de 78 px caía
   en una tira de ~90 px pegada al borde izquierdo, partía «Schnitt,» a mitad en 6 líneas y dejaba
   1.300 px vacíos a su derecha. La medida va en el propio titular y en `em`, que sí se escala con él:
   15em ≈ 30 caracteres, así el titular ocupa la banda a lo ancho y no se abre ningún hueco. */
.g-textPhotoBetween-head .display {
  max-width: 15em;
  /* el alemán trae palabras largas: se parte sólo si una palabra no cabe entera, y no se guiona sola */
  hyphens: manual;
  overflow-wrap: break-word;
}

/* ── los dos bloques de lectura: un párrafo por columna ───────────────────── */
.g-textPhotoBetween-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.2vw, 62px);
  margin-top: clamp(34px, 5vh, 58px);
}
.g-textPhotoBetween-block p {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--t2);
  max-width: 48ch;
  text-wrap: pretty;
}
/* con un solo párrafo la rejilla dejaría media página hueca: se reparte en dos columnas */
.g-textPhotoBetween-solo {
  display: block;
  columns: 2;
  column-gap: clamp(24px, 3.2vw, 62px);
}
.g-textPhotoBetween-solo p { max-width: none; }
/* sin foto, los dos bloques necesitan más aire entre ellos */
.g-textPhotoBetween-after { margin-top: clamp(44px, 6.5vh, 80px); }

/* ── la banda de foto y su pie ────────────────────────────────────────────── */
.g-textPhotoBetween-fig { margin: clamp(46px, 7vh, 90px) 0 clamp(34px, 5vh, 58px); }
.g-textPhotoBetween-cap {
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--t3);
  max-width: 54ch;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .g-textPhotoBetween-fig img { transition: none; }
}

@media (max-width: 900px) {
  /* a una columna manda el ancho de la página: el titular entra en dos líneas */
  .g-textPhotoBetween-head .display { max-width: none; }
  .g-textPhotoBetween-block { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .g-textPhotoBetween-block p { max-width: none; font-size: 16.5px; }
  .g-textPhotoBetween-solo { columns: 1; }
  .g-textPhotoBetween-after { margin-top: 34px; }
  /* a 390 px una banda 21/9 se queda en una rendija: la foto se acerca al apaisado normal */
  .g-textPhotoBetween-fig { margin: 34px 0 28px; }
  .g-textPhotoBetween-fig .k-ph { aspect-ratio: 16 / 10; }
}