/* ═══════════════════════════════════════════════
   AURORA VIDAL — Mosaic Grid (mosaic.css)
   Compact brick layout matching the reference image.
   3px gap, fixed row heights, images fill cells.
═══════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────── */
.mosaic-wrap {
  display:        flex;
  flex-direction: column;
  gap:            var(--mosaic-gap);
}

/* ── Rows ────────────────────────────────────── */
.mosaic-row-1 {
  display:               grid;
  grid-template-columns: 5fr 3fr 4fr;
  gap:                   var(--mosaic-gap);
  height:                300px;
}
.mosaic-row-2 {
  display:               grid;
  grid-template-columns: 3fr 5fr 4fr;
  gap:                   var(--mosaic-gap);
  height:                280px;
}
.mosaic-row-3 {
  display:               grid;
  grid-template-columns: 6fr 3fr 3fr;
  gap:                   var(--mosaic-gap);
  height:                240px;
}

/* ── Stack (vertical split within a column) ─── */
.mosaic-stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--mosaic-gap);
  min-height:     0; /* allows flex children to shrink */
}
.mosaic-stack > * { min-height: 0; }

/* ── Serie cell (index page) ─────────────────── */
.serie-cell {
  position:   relative;
  overflow:   hidden;
  cursor:     pointer;
  display:    block;
  width:      100%;
  height:     100%;
  text-decoration: none;
  color:      inherit;
}
.serie-cell .ph,
.serie-cell img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: opacity var(--transition-mid);
}
.serie-cell:hover .ph,
.serie-cell:hover > .ph > img { opacity: .75; }

/* Hover name overlay */
.serie-overlay {
  position:       absolute;
  inset:          0;
  display:        flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:        16px 18px;
  background:     linear-gradient(
    to top,
    rgba(23, 23, 23, .45) 0%,
    transparent           55%
  );
  opacity:        0;
  transition:     opacity var(--transition-mid);
  pointer-events: none;
}
.serie-cell:hover .serie-overlay { opacity: 1; }
.serie-cell:focus .serie-overlay { opacity: 1; }

.s-name {
  font-size:      13px;
  font-weight:    500;
  color:          #fff;
  letter-spacing: .02em;
  line-height:    1.3;
}
.s-meta {
  font-size:      9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.65);
  margin-top:     3px;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .mosaic-row-1,
  .mosaic-row-2,
  .mosaic-row-3 {
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
  .mosaic-row-1 > *,
  .mosaic-row-2 > *,
  .mosaic-row-3 > * {
    min-height: 160px;
    aspect-ratio: 3 / 2;
  }
  /* Stacked columns become rows on mobile */
  .mosaic-stack { flex-direction: row; }
}
@media (max-width: 480px) {
  .mosaic-row-1,
  .mosaic-row-2,
  .mosaic-row-3 { grid-template-columns: 1fr; }
  .mosaic-stack { flex-direction: column; }
}

/* ── Series Index: 3-column uniform grid ─────── */
.series-grid-wrap {
  padding: 0 var(--page-margin, 60px);
  margin-bottom: 80px;
}
.series-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
.series-grid-cell {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  background: #E8E8E5 !important;
  text-decoration: none !important;
  color: inherit !important;
}
.series-grid-img {
  width: 100% !important;
  height: 100% !important;
}
.series-grid-img img,
.series-grid-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: opacity .3s ease, transform .4s ease !important;
}
.series-grid-cell:hover .series-grid-img img {
  opacity: 0.85 !important;
  transform: scale(1.03) !important;
}
.series-grid-cell .serie-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 18px 20px !important;
  background: linear-gradient(to top, rgba(23, 23, 23, .65) 0%, rgba(23, 23, 23, 0.2) 40%, transparent 70%) !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
  pointer-events: none !important;
}
.series-grid-cell:hover .serie-overlay {
  opacity: 1 !important;
}
@media (max-width: 960px) {
  .series-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 580px) {
  .series-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ── Single Serie: Large Photo Sizing ───────── */
.serie-photos .mosaic-wrap {
  gap: 8px !important;
}
.serie-photos .mosaic-row-1 {
  height: clamp(520px, 48vw, 700px) !important;
  gap: 8px !important;
}
.serie-photos .mosaic-row-2 {
  height: clamp(480px, 44vw, 650px) !important;
  gap: 8px !important;
}
.serie-photos .mosaic-row-3 {
  height: clamp(440px, 40vw, 600px) !important;
  gap: 8px !important;
}
.serie-photos .mosaic-stack {
  gap: 8px !important;
}
.serie-photos .mosaic-remaining-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  height: clamp(400px, 36vw, 540px) !important;
}