/* ─────────────────────────────────────────────────────────────────────────────
   servicePhotoGridThree — cabecera a la izquierda y, debajo, tres columnas
   iguales de foto + texto. Ningún fondo propio, ninguna caja, ningún filete:
   el ritmo lo marcan la foto y el aire. Todo el color sale de las variables.
   ───────────────────────────────────────────────────────────────────────────── */

.g-servicePhotoGridThree-head { margin-bottom: clamp(36px, 5.5vh, 68px); }
.g-servicePhotoGridThree-head .lede { max-width: 54ch; }

/* minmax(0,…) obligatorio: los titulillos alemanes largos («Bartpflege») fijarían
   el min-content de su columna y descuadrarían la rejilla entera */
.g-servicePhotoGridThree-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 4vh, 56px) clamp(24px, 3vw, 52px);
  align-items: start;
}
.g-servicePhotoGridThree-grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-servicePhotoGridThree-grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
/* con dos columnas la foto 4/5 se iría a ~750 px de alto: se le pone techo y el
   recorte lo sigue decidiendo el punto de interés de la foto */
.g-servicePhotoGridThree-grid[data-n="2"] .k-ph { max-height: min(66vh, 620px); }
.g-servicePhotoGridThree-grid[data-n="1"] .g-servicePhotoGridThree-body { max-width: 62ch; }

.g-servicePhotoGridThree-item { display: block; }
.g-servicePhotoGridThree-media { display: block; }
.g-servicePhotoGridThree-body { margin-top: clamp(18px, 1.8vw, 24px); }

.g-servicePhotoGridThree-t {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  letter-spacing: var(--dt);
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.16;
  color: var(--text);
  /* titulillo pequeño: nunca se parte a mitad de palabra */
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.g-servicePhotoGridThree-p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--t2);
  margin-top: 11px;
  max-width: 44ch;
  text-wrap: pretty;
}

/* enlace de texto: la flecha del kit y una línea que se dibuja bajo la palabra
   al pasar el cursor (no es un filete decorativo: es el subrayado del enlace) */
.g-servicePhotoGridThree-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--t2);
  transition: color .35s cubic-bezier(.22, .61, .36, 1);
}
.g-servicePhotoGridThree-go span { position: relative; }
.g-servicePhotoGridThree-go span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.g-servicePhotoGridThree-go svg { transition: transform .4s cubic-bezier(.22, .61, .36, 1); }
.g-servicePhotoGridThree-go:hover { color: var(--a2); }
.g-servicePhotoGridThree-go:hover span::after { transform: scaleX(1); }
.g-servicePhotoGridThree-go:hover svg { transform: translate(3px, -3px); }

@media (max-width: 900px) {
  /* móvil: una sola columna, la foto a todo el ancho del contenedor */
  .g-servicePhotoGridThree-grid,
  .g-servicePhotoGridThree-grid[data-n="2"],
  .g-servicePhotoGridThree-grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .g-servicePhotoGridThree-grid[data-n="2"] .k-ph { max-height: none; }
  .g-servicePhotoGridThree-head { margin-bottom: 30px; }
  .g-servicePhotoGridThree-head .lede { max-width: none; }
  .g-servicePhotoGridThree-body { margin-top: 18px; }
  .g-servicePhotoGridThree-t { font-size: 22px; }
  .g-servicePhotoGridThree-p { font-size: 15.5px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .g-servicePhotoGridThree-go,
  .g-servicePhotoGridThree-go span::after,
  .g-servicePhotoGridThree-go svg { transition: none; }
  .g-servicePhotoGridThree-go:hover span::after { transform: scaleX(1); }
}