/* ============================================================
   Portadas de álbum — mosaico editorial, no cuadrícula uniforme.
   Seis columnas y un patrón de 5 piezas que se repite: una pieza ancha, dos altas,
   dos medianas. Ningún álbum queda del mismo tamaño que su vecino, y el ritmo se
   sostiene con cualquier número de álbumes (el patrón cicla con nth-child(5n+x)).
   ============================================================ */
/* El tamaño se mide en FILAS de una altura base, no en aspect-ratio por pieza: con
   aspect-ratio, dos piezas de distinto ancho en la misma fila dan distinta altura y
   el mosaico se llena de huecos negros. Contando filas, el ciclo tesela exacto.

   Ciclo de 5 piezas sobre 6 columnas — 6x3 arriba, 6x2 abajo, cero huecos:
     A 4x3 (ancha)  B 2x3 (alta)
     C 2x2   D 2x2   E 2x2                                            */
.portafolio-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(84px, 10.5vw, 148px);
  gap: var(--space-4);
}
.portafolio-album { grid-column: span 2; grid-row: span 2; }
.portafolio-album:nth-child(5n + 1) { grid-column: span 4; grid-row: span 3; }
.portafolio-album:nth-child(5n + 2) { grid-column: span 2; grid-row: span 3; }

/* Tablet: 4 columnas. Ciclo de 3 — A 4x3, luego pares 2x2. */
@media (max-width: 900px) {
  .portafolio-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(80px, 12vw, 130px); }
  .portafolio-album,
  .portafolio-album:nth-child(5n + 2) { grid-column: span 2; grid-row: span 2; }
  .portafolio-album:nth-child(5n + 1) { grid-column: span 4; grid-row: span 3; }
}
/* Móvil: 2 columnas. La pieza que abre ciclo va a lo ancho, el resto en pares. */
@media (max-width: 560px) {
  .portafolio-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(72px, 21vw, 110px); gap: var(--space-3); }
  .portafolio-album,
  .portafolio-album:nth-child(5n + 2) { grid-column: span 1; grid-row: span 2; }
  .portafolio-album:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
}

/* El monograma apagado va de fondo del ÁLBUM, no en un div aparte: así cubre los dos
   casos con el mismo código — álbum todavía sin fotos, y portada que existe pero no
   carga (hoy hay 3 con 404 en storage). Sin esto quedan rectángulos negros mudos. */
.portafolio-album {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  background:
    url('/shared/img/favicon-512.png') no-repeat center / 34% auto,
    linear-gradient(160deg, var(--color-surface-raised), var(--color-surface-sunken));
}
.portafolio-album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-slow) var(--ease-out);
}
.portafolio-album:hover img { transform: scale(1.07); filter: saturate(1.15); }
/* El fondo del álbum ya trae el monograma; este div solo ocupa la caja. */
.portafolio-album-sinfoto { width: 100%; height: 100%; }

/* El degradado es del ÁLBUM, no de la etiqueta. Iba en la etiqueta, y como al hover
   la etiqueta sube 4px se llevaba su sombra con ella y destapaba una franja de foto
   cruda contra el borde inferior. Anclado aquí, el texto se mueve y la sombra no. */
.portafolio-album::after {
  content: '';
  position: absolute;
  inset: 40% 0 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .88));
}
.portafolio-album-label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-6) var(--space-4) var(--space-4);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  transition: transform var(--duration-base) var(--ease-out);
}
.portafolio-album-label::after {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  margin-top: var(--space-2);
  background: var(--rule-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}
.portafolio-album:hover .portafolio-album-label { transform: translateY(-4px); }
.portafolio-album:hover .portafolio-album-label::after { transform: scaleX(1); }

/* ============================================================
   Fotos dentro de un álbum — mampostería por columnas.
   Antes todas iban recortadas a 1:1: un tatuaje de antebrazo y uno de espalda
   acababan con la misma silueta y la página entera se leía como una plantilla.
   Aquí cada foto conserva su proporción real y las columnas se acomodan solas.
   ============================================================ */
.portafolio-fotos-masonry {
  columns: 4 240px;
  column-gap: var(--space-4);
}
@media (max-width: 900px) { .portafolio-fotos-masonry { columns: 3 200px; } }
@media (max-width: 560px) { .portafolio-fotos-masonry { columns: 2 140px; column-gap: var(--space-3); } }

.portafolio-foto-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  height: auto;
  /* Sin esto una foto se parte entre dos columnas a mitad de imagen. */
  break-inside: avoid;
  margin-bottom: var(--space-4);
}
@media (max-width: 560px) { .portafolio-foto-btn { margin-bottom: var(--space-3); } }
.portafolio-foto-btn img {
  width: 100%;
  height: auto;          /* proporción real de la foto, sin recorte */
  display: block;
  border-radius: var(--radius-md);
  transition: transform var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out);
}
.portafolio-foto-btn:hover img { transform: scale(1.03); filter: saturate(1.12); }

.portafolio-card-album { display: block; text-decoration: none; }

.portafolio-lightbox {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: min(90vw, 900px);
}
.portafolio-lightbox img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-md); }