/* ─────────────────────────────────────────────────────────────────────────────
   textPhotoRightTall — texto largo a la izquierda, foto alta (3/4) pegajosa a
   la derecha. Ningún fondo propio, ninguna caja, ningún filete decorativo: sólo
   la rejilla, el ritmo del texto y el recorrido de la foto.
   ───────────────────────────────────────────────────────────────────────────── */

.g-textPhotoRightTall-grid {
  display: grid;
  /* minmax(0, …fr) obligatorio: la columna lleva titular y una palabra larga
     fijaría su min-content y descuadraría la rejilla entera */
  grid-template-columns: minmax(0, 1.26fr) minmax(0, 0.74fr);
  column-gap: clamp(36px, 5vw, 86px);
  row-gap: 0;
  align-items: start;
}

.g-textPhotoRightTall-head { grid-column: 1; grid-row: 1; }
.g-textPhotoRightTall-body { grid-column: 1; grid-row: 2; margin-top: clamp(24px, 3.2vh, 38px); }

/* la columna de la foto se estira a las dos filas de texto: sin ese alto el
   `sticky` no tendría recorrido y la mitad derecha se quedaría hueca */
.g-textPhotoRightTall-media {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
}
.g-textPhotoRightTall-media .g-textPhotoRightTall-pic {
  position: sticky;
  top: 120px;
}

/* alemán a cuerpo de titular: se deja partir la palabra, pero sin guiones
   automáticos (salían dos de cada tres líneas partidas en móvil) */
.g-textPhotoRightTall-head .g-textPhotoRightTall-title {
  overflow-wrap: break-word;
  hyphens: manual;
}

/* el párrafo llena la columna: un texto a media columna deja la página coja */
.g-textPhotoRightTall-body .g-textPhotoRightTall-lede {
  margin-top: 0;
  max-width: 62ch;
}

.g-textPhotoRightTall-body .g-textPhotoRightTall-mid {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  letter-spacing: var(--dt);
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.16;
  color: var(--text);
  margin-top: clamp(28px, 3.6vh, 42px);
}

.g-textPhotoRightTall-body .g-textPhotoRightTall-text {
  font-size: 17px;
  line-height: 1.68;
  color: var(--t2);
  max-width: 62ch;
  margin-top: 12px;
  text-wrap: pretty;
}

/* ── móvil primero: una columna y la foto justo debajo del titular ────────── */
@media (max-width: 900px) {
  .g-textPhotoRightTall-grid { grid-template-columns: 1fr; }
  .g-textPhotoRightTall-head { grid-column: 1; grid-row: 1; }
  .g-textPhotoRightTall-media { grid-column: 1; grid-row: 2; align-self: auto; margin-top: 26px; }
  .g-textPhotoRightTall-body { grid-column: 1; grid-row: 3; margin-top: 28px; }
  /* OJO: `.g-textPhotoRightTall-pic` ES la caja `.k-ph` de la foto, y `.k-ph > i` (la capa del
     paralaje) es `position: absolute`: con `static` la capa se cuelga del primer antecesor posicionado
     (la sección entera), la foto se estira a esa altura y en el recuadro sólo se ve un trozo (en el
     móvil, a un retrato se le iba la cabeza). Se quita el `sticky`, pero la caja sigue posicionada. */
  .g-textPhotoRightTall-media .g-textPhotoRightTall-pic { position: relative; top: auto; }
  .g-textPhotoRightTall-body .g-textPhotoRightTall-lede,
  .g-textPhotoRightTall-body .g-textPhotoRightTall-text { max-width: none; }
  .g-textPhotoRightTall-body .g-textPhotoRightTall-mid { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-textPhotoRightTall-media .g-textPhotoRightTall-pic { transition: none; }
}