/*
  Fotografía: índice de series (/fotografia/) y página de cada serie
  (/fotografia/<serie>/). La foto manda — sin recortar en la grilla
  de la serie, sin marcos ni sombras.
*/

/* ---------- Índice: una tarjeta por serie ---------- */
.page-header .fotografia-title {
  font-family: var(--font-series);
  font-weight: 400;
  letter-spacing: 0;
}

.series-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-4) var(--space-3);
  padding: 0 var(--space-3) var(--space-5);
  max-width: var(--max-width);
  margin: 0 auto;
}

.series-card {
  display: block;
  text-decoration: none;
  color: var(--c-fg);
}

.series-card-cover {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-line);
}

.series-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.series-card:hover .series-card-cover img,
.series-card:focus-visible .series-card-cover img {
  transform: scale(1.025);
}

.series-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding-top: 0.75rem;
}

.series-card-title {
  font-family: var(--font-series);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
}

.series-card-year {
  font-style: italic;
  color: var(--c-fg-muted);
}

/* ---------- Página de serie: portada ---------- */
.series-hero {
  position: relative;
  height: calc(100svh - var(--header-h)); /* alto de pantalla menos la barra fija */
  min-height: 26rem;
  margin-bottom: var(--space-4);
  overflow: hidden;
  color: var(--c-bg);
}

.series-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* velo inferior solo para que el título se lea sobre la foto */
.series-hero-veil {
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--c-fg) 55%, transparent),
    transparent
  );
  pointer-events: none;
}

.series-hero-back {
  position: absolute;
  z-index: 1;
  top: var(--space-2);
  left: var(--space-3);
  font-style: italic;
  text-decoration: none;
  color: inherit;
}

.series-hero-text {
  position: absolute;
  z-index: 1;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
}

.series-hero h1 {
  font-family: var(--font-series);
  font-weight: 400;
  font-size: clamp(2.75rem, 10vw, 8rem);
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 0.5rem;
}

.series-hero .series-year {
  font-style: italic;
  font-size: 1.15rem;
  margin: 0;
}

@media (max-width: 640px) {
  .series-hero-back,
  .series-hero-text {
    left: var(--space-2);
    right: var(--space-2);
  }
}

/*
  Grilla justificada: cada foto crece en proporción a su formato
  (--r = ancho/alto), así las filas quedan parejas sin recortar
  ninguna foto. El ::after absorbe el espacio de la última fila
  para que no se estire.
*/
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 var(--space-3) var(--space-5);
  max-width: var(--max-width);
  margin: 0 auto;
}

.photo-grid::after {
  content: "";
  flex-grow: 1000;
}

.photo-grid a {
  /* calc(): --r viene como "ancho/alto" y flex-grow necesita un número */
  flex-grow: calc(var(--r));
  flex-basis: calc(var(--r) * 15rem);
  display: block;
  cursor: zoom-in;
  background: var(--c-line);
}

.photo-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--r);
  transition: opacity 0.3s ease;
}

.photo-grid a:hover img {
  opacity: 0.88;
}

@media (max-width: 640px) {
  .series-list,
  .photo-grid {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  /* dos fotos horizontales por fila en celular */
  .photo-grid a {
    flex-basis: calc(var(--r) * 7rem);
  }

  /* la última fila también llena el ancho, así no queda corrida a la izquierda */
  .photo-grid::after {
    content: none;
  }
}