/* ───────── Fotografía: mosaico por proyectos (la vista grande viene de ilustracion.css) ───────── */
.ph-page { overflow-x: hidden; }
body.ph-lock { overflow: hidden; }

.ph-head { max-width: calc(1240px + 2 * var(--pad-x)); margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) var(--pad-x) clamp(1.5rem, 4vw, 2.5rem); }
.ph-kicker { margin: 0 0 .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--mute); }
.ph-head h1 { margin: 0; font: 800 clamp(2rem, 5vw, 3.6rem)/1 var(--font-display); letter-spacing: -.035em; }
.ph-lead { margin: .7rem 0 0; max-width: 46ch; color: var(--mute); font-size: 1rem; text-wrap: pretty; }
.ph-loading { margin: 0; padding: 4rem 0; text-align: center; color: var(--mute); }

/* Índice: un enlace por proyecto */
.ph-index { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.ph-index a {
  padding: .4rem .85rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink); text-decoration: none; font-size: .8125rem; font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
@media (hover: hover) { .ph-index a:hover { background: var(--ink); color: var(--bg); } }
.ph-index a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Proyectos: mosaico a todo el ancho, sin huecos entre fotos */
.ph-projects { padding: 0 0 clamp(3rem, 8vw, 6rem); }
.ph-projects .ph-loading { padding: 4rem var(--pad-x); }
/* nombre y mosaico comparten la misma celda: el nombre flota encima sin empujar las fotos, pero
   conserva su altura, así que al acabar su proyecto sale empujado justo cuando entra el siguiente */
.ph-proj { display: grid; scroll-margin-top: 3.5rem; }
.ph-proj > * { grid-area: 1 / 1; min-width: 0; }

/* Nombre del proyecto encima de sus fotos: se queda fijo mientras pasan y se invierte con lo que
   tiene detrás (fusión "diferencia"), así se lee igual sobre fotos claras y oscuras. */
.ph-title {
  position: sticky; top: 4.25rem; z-index: 2; align-self: start; margin: 0;
  padding: 0 var(--pad-x); pointer-events: none;
  color: #fff; mix-blend-mode: difference;
  padding-bottom: clamp(.75rem, 2vw, 1.5rem);
  font: 800 clamp(2rem, 6vw, 5.5rem)/.95 var(--font-display); letter-spacing: -.045em; text-wrap: balance;
}
.ph-title::before { content: ""; display: block; height: clamp(1rem, 2.5vw, 2rem); }   /* separación del borde superior */

.pg-cells { columns: 4 18rem; column-gap: 0; overflow: hidden; }
/* cada foto se solapa 1 px con la de la derecha y la de abajo: con anchos de columna con decimales
   no asoma el fondo por las juntas */
.pg-cell {
  display: block; width: calc(100% + 1px); margin: 0 0 -1px; padding: 0; border: 0; border-radius: 0;
  background: var(--bg2); cursor: zoom-in; break-inside: avoid; overflow: hidden;
  opacity: 0; transition: opacity .9s ease;
}
.pg-cell.shown { opacity: 1; }   /* fundido al acercarse a la pantalla */
.pg-cell img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .25s ease; }
@media (hover: hover) { .pg-cell:hover img { transform: scale(1.03); filter: brightness(1.05); } }
.pg-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Foto en grande ── */
.ph-view { z-index: 320; }
.ph-view .iv-fig { inset: 4.25rem 4.5rem 4.5rem; }
.ph-view .iv-count {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); margin: 0;
  padding: .45rem 1rem; border-radius: var(--r-pill); font-size: .8125rem; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .pg-cells { columns: 2; }
}
@media (max-width: 640px) {
  .ph-view .iv-fig { inset: 4rem .5rem 8rem; }
  .ph-view .iv-count { bottom: 4.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-cell { opacity: 1; transition: none; }
}