/* ─────────────────────────────────────────────────────────────────────────────
   ctaPhotoRightSlim — texto 8/12 a la izquierda, foto 3/4 estrecha 4/12 a la
   derecha, alineada arriba. Un solo fondo (el de la página), ni cajas, ni
   filetes, ni color escrito a mano: todo sale de las variables del estilo.
   ───────────────────────────────────────────────────────────────────────────── */

/* minmax(0, …fr): la columna de la izquierda lleva titular y una palabra alemana
   larga fijaría su min-content y descuadraría la rejilla entera. */
.g-ctaPhotoRightSlim-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head media"
    "body media";
  column-gap: clamp(30px, 5vw, 76px);
  row-gap: 0;
  align-items: start;
}

.g-ctaPhotoRightSlim-head { grid-area: head; }

/* la frase, los botones y la meta bajan al pie de la columna: así la mitad
   izquierda se llena a la altura de la foto también con el mínimo de elementos */
.g-ctaPhotoRightSlim-body {
  grid-area: body;
  align-self: end;
  padding-top: clamp(26px, 3vh, 40px);
}

.g-ctaPhotoRightSlim-lede { max-width: 52ch; }

.g-ctaPhotoRightSlim-media {
  grid-area: media;
  align-self: start;
  width: 100%;
}

/* la foto va limpia: radio del estilo, sin marco, sin borde y sin caja gris detrás */
.g-ctaPhotoRightSlim-media .k-ph {
  border-radius: var(--r-photo);
  background: none;
  border: 0;
  box-shadow: none;
}

@media (max-width: 900px) {
  /* móvil: una sola columna y la foto DEBAJO del titular, a todo el ancho */
  .g-ctaPhotoRightSlim-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "head"
      "media"
      "body";
    column-gap: 0;
  }
  .g-ctaPhotoRightSlim-body {
    align-self: start;
    padding-top: 0;
  }
  .g-ctaPhotoRightSlim-media { margin: 30px 0 4px; }
  .g-ctaPhotoRightSlim-lede { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .g-ctaPhotoRightSlim-media,
  .g-ctaPhotoRightSlim-media .k-ph img {
    transition: none;
    animation: none;
  }
}