/* ─────────────────────────────────────────────────────────────────────────────
   closingPhotoSideV2 — cierre con foto al lado.
   Dos decisiones que vienen del rechazo de la v1:
   1) la PROPORCIÓN de la foto la fija esta hoja (no una clase `r*` del kit), y
      es vertical en las dos rejillas: 4/5 en escritorio y 3/4 en móvil. Así no
      hay forma de que la foto salga apaisada al apilarse.
   2) la columna de texto se estira al alto de la fila (la que manda es la foto)
      y reparte su contenido con `space-between`: las dos columnas miden lo
      mismo, con el mínimo y con el máximo de elementos.
   ───────────────────────────────────────────────────────────────────────────── */

/* la columna de la foto es la estrecha: una vertical a media página sería una
   torre de 750 px frente a un texto de 400 y la rejilla quedaría descompensada */
.g-closingPhotoSideV2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: clamp(34px, 5.4vw, 88px);
  align-items: stretch;
}

.g-closingPhotoSideV2-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(26px, 4vh, 44px);
  min-width: 0;
}
/* sólo titular y foto: el titular se centra en el alto de la foto */
.g-closingPhotoSideV2-text[data-lean="1"] { justify-content: center; }

/* el cuerpo que pide el encargo; `hyphens: manual` para que el alemán largo no
   salga partido línea sí, línea también */
.g-closingPhotoSideV2-title {
  font-size: clamp(32px, 4.4vw, 58px);
  max-width: 24ch;
  overflow-wrap: break-word;
  hyphens: manual;
}
.g-closingPhotoSideV2-lede { max-width: 48ch; }

.g-closingPhotoSideV2-foot .actions { margin-top: 0; }
.g-closingPhotoSideV2-live {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--t3);
}

.g-closingPhotoSideV2-photo {
  display: flex;
  align-items: center;
  min-width: 0;
}
.g-closingPhotoSideV2-photo > .rv { width: 100%; }
/* vertical de verdad, mande lo que mande el ancho de la columna */
.g-closingPhotoSideV2-photo .k-ph {
  width: 100%;
  aspect-ratio: 4 / 5;
}

@media (max-width: 900px) {
  .g-closingPhotoSideV2-grid { grid-template-columns: 1fr; gap: 30px; }
  /* apilado: el botón se queda pegado al texto y la foto baja al final */
  .g-closingPhotoSideV2-text { display: block; }
  .g-closingPhotoSideV2-title { max-width: none; }
  .g-closingPhotoSideV2-lede { max-width: none; }
  .g-closingPhotoSideV2-foot { margin-top: 24px; }
  .g-closingPhotoSideV2-live { margin-top: 16px; }
  /* la foto SIGUE siendo vertical al apilarse (3/4), nunca apaisada */
  .g-closingPhotoSideV2-photo .k-ph { aspect-ratio: 3 / 4; }
}

@media (prefers-reduced-motion: reduce) {
  .g-closingPhotoSideV2-photo .k-ph img { animation: none; transform: none; }
  .g-closingPhotoSideV2-photo .k-ph > i { transform: none !important; }
}