/* ─────────────────────────────────────────────────────────────────────────────
   servicePhotoAlternate — servicios en tiras alternas a todo el ancho.
   Rejilla de 12 columnas: la foto ocupa 7 y el texto 5, y cambian de lado en
   cada tira. Ningún fondo propio, ninguna caja, ningún filete: sólo aire.
   ───────────────────────────────────────────────────────────────────────────── */

.g-servicePhotoAlternate-head { margin-bottom: clamp(46px, 7vh, 86px); }
.g-servicePhotoAlternate-head .lede { max-width: 52ch; }

/* las 12 columnas van con minmax(0, 1fr): un nombre alemán largo del texto no
   puede fijar el min-content de su columna y descuadrar la tira entera */
.g-servicePhotoAlternate-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(24px, 3.4vw, 64px);
}
.g-servicePhotoAlternate-row + .g-servicePhotoAlternate-row { margin-top: clamp(56px, 8vh, 104px); }

.g-servicePhotoAlternate-fig { grid-column: 1 / span 7; grid-row: 1; }
.g-servicePhotoAlternate-txt { grid-column: 8 / span 5; grid-row: 1; }
.g-servicePhotoAlternate-row:nth-child(even) .g-servicePhotoAlternate-fig { grid-column: 6 / span 7; }
.g-servicePhotoAlternate-row:nth-child(even) .g-servicePhotoAlternate-txt { grid-column: 1 / span 5; }

/* las dos celdas se estiran a la misma altura (no hay media tira más corta que
   la otra) y el texto arranca 48 px por debajo del borde de la foto: el
   desplazamiento rompe la simetría sin mover la rejilla */
.g-servicePhotoAlternate-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 48px;
}

.g-servicePhotoAlternate-name {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: var(--dt);
  line-height: 1.06;
  /* a cuerpo de titular, `hyphens: auto` parte casi todas las líneas en alemán */
  hyphens: manual;
  overflow-wrap: break-word;
}
.g-servicePhotoAlternate-text {
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--t2);
  max-width: 46ch;
  margin-top: 16px;
  text-wrap: pretty;
}

/* precio y enlace se van al pie de la columna, a la altura del borde inferior
   de la foto: con un párrafo corto la tira sigue sin quedar coja */
.g-servicePhotoAlternate-foot { margin-top: auto; padding-top: clamp(20px, 3vh, 34px); }
.g-servicePhotoAlternate-price {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: var(--dt);
  line-height: 1.2;
  color: var(--a2);
  font-variant-numeric: tabular-nums;
}
.g-servicePhotoAlternate-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  transition: color .3s;
}
.g-servicePhotoAlternate-link svg { transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.g-servicePhotoAlternate-link:hover { color: var(--a2); }
.g-servicePhotoAlternate-link:hover svg { transform: translate(3px,-3px); }

@media (max-width: 900px) {
  .g-servicePhotoAlternate-head { margin-bottom: 34px; }
  .g-servicePhotoAlternate-head .lede { max-width: none; }
  .g-servicePhotoAlternate-row { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .g-servicePhotoAlternate-row + .g-servicePhotoAlternate-row { margin-top: 48px; }
  /* en móvil la foto va SIEMPRE arriba y el texto debajo, alterne o no en escritorio */
  .g-servicePhotoAlternate-fig,
  .g-servicePhotoAlternate-row:nth-child(even) .g-servicePhotoAlternate-fig { grid-column: 1; grid-row: 1; }
  .g-servicePhotoAlternate-txt,
  .g-servicePhotoAlternate-row:nth-child(even) .g-servicePhotoAlternate-txt { grid-column: 1; grid-row: 2; padding-top: 22px; }
  .g-servicePhotoAlternate-name { font-size: 25px; }
  .g-servicePhotoAlternate-text { font-size: 16px; max-width: none; }
  .g-servicePhotoAlternate-foot { padding-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-servicePhotoAlternate-link,
  .g-servicePhotoAlternate-link svg { transition: none; }
  .g-servicePhotoAlternate-link:hover svg { transform: none; }
}