/* DJ gallery mosaic, built from Chule Bernardo's gallery (the visual reference).
   Every profile uses the same box: 4 columns (1.66/.95/.82/1.02), 2 rows, 2.18:1,
   up to 1160px wide. Cells a–f are placed by grid areas; galleries with fewer than
   six cells merge cells of the same grid (`p` variants favour portrait photos, `l`
   variants landscape ones). Tablets and phones follow Chule's responsive rules. */

html body #galeria .gallery-grid.dj-mosaic {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(100%, 1160px);
  max-width: none;
  margin: 34px auto 0;
  gap: 12px;
  grid-template-columns: minmax(0, 1.66fr) minmax(0, .95fr) minmax(0, .82fr) minmax(0, 1.02fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  grid-auto-flow: row;
  aspect-ratio: 2.18 / 1;
  height: auto;
  /* Without it the photos' natural size can stretch the box beyond 2.18:1. */
  min-height: 0;
}
html body #galeria .dj-mosaic.mosaic-6  { grid-template-areas: "a b b c" "a d e f"; }
html body #galeria .dj-mosaic.mosaic-5l { grid-template-areas: "a b b c" "a d e e"; }
html body #galeria .dj-mosaic.mosaic-5p { grid-template-areas: "a b b c" "a d e c"; }
html body #galeria .dj-mosaic.mosaic-4l { grid-template-areas: "a b b c" "a d d c"; }
html body #galeria .dj-mosaic.mosaic-4p { grid-template-areas: "a b b c" "a b b d"; }
html body #galeria .dj-mosaic.mosaic-3l { grid-template-areas: "a b b b" "a c c c"; }
html body #galeria .dj-mosaic.mosaic-3p { grid-template-areas: "a b b c" "a b b c"; }
html body #galeria .dj-mosaic.mosaic-2  { grid-template-areas: "a a b b" "a a b b"; }
html body #galeria .dj-mosaic.mosaic-1  { grid-template-areas: "a a a a" "a a a a"; }

html body #galeria .dj-mosaic > .m-a { grid-area: a; }
html body #galeria .dj-mosaic > .m-b { grid-area: b; }
html body #galeria .dj-mosaic > .m-c { grid-area: c; }
html body #galeria .dj-mosaic > .m-d { grid-area: d; }
html body #galeria .dj-mosaic > .m-e { grid-area: e; }
html body #galeria .dj-mosaic > .m-f { grid-area: f; }

html body #galeria .dj-mosaic > .gallery-item,
html body #galeria .dj-mosaic > .gallery-more,
html body #galeria .dj-mosaic > .gallery-more-m {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: auto;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  background: #050505;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .34);
  transform: none;
}
html body #galeria .dj-mosaic > .gallery-item { cursor: zoom-in; }
html body #galeria .dj-mosaic > .gallery-item > img,
html body #galeria .dj-mosaic > .gallery-more > img,
html body #galeria .dj-mosaic > .gallery-more-m > img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 42%);
}
html body #galeria .dj-mosaic > .gallery-item > img {
  filter: saturate(1.03) contrast(1.04) brightness(.94);
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), filter .35s ease;
}
html body #galeria .dj-mosaic > .gallery-item:hover > img {
  transform: scale(1.025);
  filter: saturate(1.06) contrast(1.05) brightness(1);
}

/* "+ N fotos" tile, as in Chule. */
html body #galeria .dj-mosaic > .gallery-more,
html body #galeria .dj-mosaic > .gallery-more-m {
  grid-area: f;
  color: #fff;
  cursor: pointer;
  font: inherit;
  isolation: isolate;
}
html body #galeria .dj-mosaic > .gallery-more::before,
html body #galeria .dj-mosaic > .gallery-more-m::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(145deg, rgba(0,212,255,.20), rgba(107,47,255,.24) 48%, rgba(204,0,255,.18)), rgba(0,0,0,.62);
  transition: background .3s ease;
}
html body #galeria .dj-mosaic > .gallery-more > img,
html body #galeria .dj-mosaic > .gallery-more-m > img {
  filter: saturate(.78) brightness(.52);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}
html body #galeria .dj-mosaic .gallery-more-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 3px 22px rgba(0,0,0,.82);
}
html body #galeria .dj-mosaic .gallery-more-plus {
  font-family: "Oswald", sans-serif;
  font-size: clamp(58px, 6vw, 84px);
  font-weight: 300;
  line-height: .82;
  background: linear-gradient(135deg, #00d4ff, #8b5cff 52%, #e04bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html body #galeria .dj-mosaic .gallery-more-label {
  margin-top: 14px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(18px, 1.8vw, 25px);
  font-weight: 600;
  letter-spacing: .08em;
}
html body #galeria .dj-mosaic > .gallery-more:hover::before,
html body #galeria .dj-mosaic > .gallery-more-m:hover::before {
  background: linear-gradient(145deg, rgba(0,212,255,.26), rgba(107,47,255,.30) 48%, rgba(204,0,255,.24)), rgba(0,0,0,.54);
}
html body #galeria .dj-mosaic > .gallery-more:hover > img { transform: scale(1.035); filter: saturate(.88) brightness(.58); }
html body #galeria .dj-mosaic > .gallery-more-m:focus-visible,
html body #galeria .dj-mosaic > .gallery-more:focus-visible { outline: 3px solid rgba(0,212,255,.92); outline-offset: 4px; }

html body #galeria .dj-mosaic > .gallery-more-m { display: none; }

/* Tablets: Chule's two columns and three fixed-height rows. */
@media (max-width: 1024px) {
  html body #galeria .gallery-grid.dj-mosaic {
    width: min(100%, 780px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: clamp(230px, 32vw, 300px) repeat(2, clamp(360px, 48vw, 460px));
    aspect-ratio: auto;
  }
  html body #galeria .dj-mosaic.mosaic-6  { grid-template-areas: "b c" "a d" "e f"; }
  html body #galeria .dj-mosaic.mosaic-5l,
  html body #galeria .dj-mosaic.mosaic-5p { grid-template-areas: "b c" "a d" "e e"; }
  html body #galeria .dj-mosaic.mosaic-4l { grid-template-areas: "b b" "a c" "a d"; }
  html body #galeria .dj-mosaic.mosaic-4p { grid-template-areas: "c d" "a b" "a b"; }
  html body #galeria .dj-mosaic.mosaic-3l { grid-template-areas: "b b" "a c" "a c"; }
  html body #galeria .dj-mosaic.mosaic-3p { grid-template-areas: "a b" "a b" "a c"; }
  html body #galeria .dj-mosaic.mosaic-2  { grid-template-areas: "a b" "a b" "a b"; }
  html body #galeria .dj-mosaic.mosaic-1  { grid-template-areas: "a a" "a a" "a a"; }
}

/* Phones: compact two-column mosaic, same height for every profile at a given width
   (1:1.02). Up to four cells: short landscape cells on top, the protagonist and a
   fourth cell (photo or "+N fotos") below, as in Chule's tablet grid; mm-4p keeps
   the four cells equal for mostly portrait galleries. Figures carry
   ms-a…ms-d for their phone cell; the phone-only tile counts the photos it hides. */
@media (max-width: 600px) {
  html body #galeria .gallery-grid.dj-mosaic {
    width: 100%;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 1 / 1.02;
    min-height: 0;
  }
  html body #galeria .dj-mosaic.mm-4  { grid-template-rows: minmax(0, .62fr) minmax(0, 1.38fr); grid-template-areas: "b c" "a d"; }
  html body #galeria .dj-mosaic.mm-4p { grid-template-areas: "b c" "a d"; }
  html body #galeria .dj-mosaic.mm-3p { grid-template-areas: "a b" "a c"; }
  html body #galeria .dj-mosaic.mm-3l { grid-template-areas: "b b" "a c"; }
  html body #galeria .dj-mosaic.mm-2c { grid-template-areas: "a b" "a b"; }
  html body #galeria .dj-mosaic.mm-2r { grid-template-areas: "a a" "b b"; }
  html body #galeria .dj-mosaic.mm-1  { grid-template-areas: "a a" "a a"; }
  html body #galeria .dj-mosaic > .gallery-item,
  html body #galeria .dj-mosaic > .gallery-more { display: none; }
  html body #galeria .dj-mosaic > .gallery-item.ms-a { display: block; grid-area: a; }
  html body #galeria .dj-mosaic > .gallery-item.ms-b { display: block; grid-area: b; }
  html body #galeria .dj-mosaic > .gallery-item.ms-c { display: block; grid-area: c; }
  html body #galeria .dj-mosaic > .gallery-item.ms-d { display: block; grid-area: d; }
  html body #galeria .dj-mosaic > .gallery-more-m { display: block; grid-area: d; }
  html body #galeria .dj-mosaic .gallery-more-plus { font-size: 46px; }
  html body #galeria .dj-mosaic .gallery-more-label { margin-top: 8px; font-size: 16px; }
}

/* Photos beyond the mosaic stay available to the enlarged gallery only. */
html body #galeria .dj-mosaic > .gallery-item.gallery-lightbox-only { display: none; }