/* Abro Proyectos — rejilla masonry a dos columnas.
   El fons y el contenedor (row) los pone el usuario con Kadence: la rejilla
   ocupa el 100% del row, sin tope propio.
   Las imágenes nunca se recortan: se conserva su ratio original.
   Color de texto: hereda de --abro-proyectos-color.

   Los estilos de las líneas "|" de los enlaces (abrir proyecto / ver todos)
   y su giro en hover viven en el style.css del tema hijo (sección "Menús i
   botons"), reutilizados aquí mediante esos mismos selectores.
*/
.abro-proyectos {
  --abro-proyectos-color: #1a1a1a;
  --abro-proyectos-item: 600px;       /* ancho máximo de cada item */
  --abro-proyectos-gap-min: clamp(2rem, 5vw, 4rem); /* gutter mínimo */
  color: var(--abro-proyectos-color);
  width: 100%;
}

/* ── Rejilla por columnas (masonry natural).
   Cada item fluye sin romperse y el navegador reparte por altura: según el
   ratio, los items se ordenan a izquierda y derecha.

   El gutter central crece para que cada columna mida exactamente el ancho
   del item (600px): así la columna izquierda queda pegada al borde izquierdo
   y la derecha al borde derecho, con el hueco grande en medio (como la
   maqueta). Si el row es más estrecho, el gutter cae al mínimo y las columnas
   se encogen conservando el ratio. ── */
.abro-proyectos__grid {
  column-count: 2;
  column-gap: max(var(--abro-proyectos-gap-min), calc(100% - var(--abro-proyectos-item) * 2));
  width: 100%;
  max-width: 100%;
}

.abro-proyectos__item {
  break-inside: avoid;
  display: block;
  max-width: var(--abro-proyectos-item);
  /* El gap vertical entre items de la misma columna. */
  margin-bottom: 80px;
}

/* ── Media: imagen entera + overlay "abrir proyecto" ── */
.abro-proyectos__media {
  position: relative;
  display: block;
  text-decoration: none;
}
.abro-proyectos__img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.35s ease;
}
.abro-proyectos__img--empty {
  aspect-ratio: 3 / 4;
  background: #e7e3dc;
}
/* Al pasar por encima del item, se oscurece la imagen y aparece el enlace. */
.abro-proyectos__media:hover .abro-proyectos__img,
.abro-proyectos__media:focus-visible .abro-proyectos__img {
  filter: brightness(0.7);
}
/* Overlay: cubre la imagen y centra el enlace. Aparece al hacer hover en
   el item (la imagen). */
.abro-proyectos__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.abro-proyectos__media:hover .abro-proyectos__overlay,
.abro-proyectos__media:focus-visible .abro-proyectos__overlay {
  opacity: 1;
}
/* El enlace en sí (solo el texto): las líneas "|" y su giro en hover vienen
   del style.css del tema hijo. El giro solo se dispara al pasar por el texto. */
.abro-proyectos__abrir {
  color: #fff;
  letter-spacing: 0.14em;
  font-size: clamp(0.7rem, 0.85vw, 0.82rem);
}

/* ── Modo "el enlace sigue al cursor" (lo activa assets/js/abro-cursor-follow.js
   solo con ratón). El cursor nativo se oculta y el enlace pasa a ser el cursor.
   El posicionamiento por --abro-cursor-x/y se aplica SIEMPRE en dispositivos
   con ratón, no solo durante .is-following: las variables persisten al salir,
   así el fundido de salida ocurre en la última posición del cursor y el enlace
   nunca se ve centrado. Sin variables aún (p. ej. foco con teclado), el
   50%/50% por defecto equivale al centrado de siempre.
   El overlay deja de capturar el puntero para que el texto pegado al cursor
   no dispare su propio :hover (las "|" giradas) en cada movimiento. ── */
@media (hover: hover) and (pointer: fine) {
  .abro-proyectos__abrir {
    position: absolute;
    left: var(--abro-cursor-x, 50%);
    top: var(--abro-cursor-y, 50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
}
.abro-proyectos__media.is-following {
  cursor: none;
}
.abro-proyectos__media.is-following .abro-proyectos__overlay {
  pointer-events: none;
}

/* ── Texto: título pequeño (h3) + extracto grande (p, titular) ── */
.abro-proyectos__content {
  margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
}
.abro-proyectos__titulo {
  /* Título pequeño en EditorialNew, sin margen del tema. */
  margin: 0 0 clamp(0.3rem, 0.8vw, 0.6rem);
  font-family: "EditorialNew", serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 12px;
  line-height: 1.3;
}
.abro-proyectos__excerpt {
  /* Titular grande con la tipografía normal del sitio. Anulamos el margen del tema. */
  margin: 0;
  font-family: var(--global-body-font-family);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.1;
   letter-spacing: -1.5px;
}

/* ── Enlace al archivo: fuera de la rejilla, abajo a la izquierda. ── */
.abro-proyectos__todos {
  margin: clamp(1.5rem, 3vw, 3rem) 0 0;

}
.abro-proyectos__todos a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.abro-proyectos__todos a:hover {
  color: var(--global-palette1);
}

.abro-proyectos__placeholder {
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* ── Responsive: una sola columna ── */
@media (max-width: 781px) {
  .abro-proyectos__grid {
    column-count: 1;
  }
  .abro-proyectos__item {
    margin-bottom: 100px;
  }
  /* En táctil no hay hover: el enlace sigue activo sobre toda la imagen, pero
     sin overlay, sin texto "abrir proyecto" y sin oscurecer. */
  .abro-proyectos__overlay,
  .abro-proyectos__media:hover .abro-proyectos__overlay,
  .abro-proyectos__media:focus-visible .abro-proyectos__overlay {
    opacity: 0;
  }
  .abro-proyectos__img,
  .abro-proyectos__media:hover .abro-proyectos__img,
  .abro-proyectos__media:focus-visible .abro-proyectos__img {
    filter: none;
  }

  .abro-proyectos__excerpt {
    font-size: 40px;
    line-height: 1;
    letter-spacing: -1.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abro-proyectos__overlay,
  .abro-proyectos__img { transition: none; }
}