/* ==========================================================================
   Portfolio — mosaic grid of work tiles. Structural pattern (asymmetric
   grid-area layout, hover-reveal video preview, click-to-open lightbox)
   carried over from the user's own previous site build, recolored to the
   RenderMe brand and rebuilt with original naming + a lightweight custom
   lightbox instead of the old jQuery Fancybox dependency.
   ========================================================================== */

.portfolio {
  background: var(--color-bg);
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

/* Asymmetric placement: columns 1/3/4 each get one "tall" (2-row) tile at a
   different height, column 2 stays evenly split — this is what gives the
   grid its mosaic rhythm instead of a flat uniform grid. */
.portfolio__item:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.portfolio__item:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.portfolio__item:nth-child(3) { grid-area: 3 / 1 / 5 / 2; }
.portfolio__item:nth-child(4) { grid-area: 1 / 2 / 2 / 3; }
.portfolio__item:nth-child(5) { grid-area: 2 / 2 / 3 / 3; }
.portfolio__item:nth-child(6) { grid-area: 3 / 2 / 4 / 3; }
.portfolio__item:nth-child(7) { grid-area: 4 / 2 / 5 / 3; }
.portfolio__item:nth-child(8) { grid-area: 1 / 3 / 3 / 4; }
.portfolio__item:nth-child(9) { grid-area: 3 / 3 / 4 / 4; }
.portfolio__item:nth-child(10) { grid-area: 4 / 3 / 5 / 4; }
.portfolio__item:nth-child(11) { grid-area: 1 / 4 / 2 / 5; }
.portfolio__item:nth-child(12) { grid-area: 2 / 4 / 4 / 5; }
.portfolio__item:nth-child(13) { grid-area: 4 / 4 / 5 / 5; }

.portfolio__trigger {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.portfolio__trigger::before {
  content: "";
  display: block;
  padding-bottom: 56.04%;
}

/* The 3 tiles spanning 2 grid rows need double the aspect-ratio height. */
.portfolio__item:nth-child(3) .portfolio__trigger::before,
.portfolio__item:nth-child(8) .portfolio__trigger::before,
.portfolio__item:nth-child(12) .portfolio__trigger::before {
  padding-bottom: 112.08%;
}

.portfolio__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio__preview {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 950ms var(--ease-standard);
}

.portfolio__trigger:hover .portfolio__preview,
.portfolio__trigger:focus-visible .portfolio__preview {
  opacity: 1;
}

.portfolio__preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio__shade {
  position: absolute;
  inset: 0;
  background: rgba(12, 6, 18, var(--shade-a, 0.78));
}

/* .portfolio__play (+ its ::after glow and svg icon) is defined once in
   css/components.css, shared with the Portfolio archive page's identical
   .works__play. Only its hover-glow trigger stays here since it fires off
   the button itself rather than the tile (see components.css's own
   .works__trigger version for the difference). */
.portfolio__play:hover::after {
  opacity: 1;
}

/* --- Responsive: the mosaic re-flows into a smaller asymmetric grid at
   each breakpoint instead of collapsing to a plain uniform one — same
   approach as the user's own previous site build (01/Verstka/home.html:
   .products-block, re-mapping grid-area per tile at 1022px/767px and
   quietly dropping the one or two tiles that would otherwise leave an
   awkward half-empty row). The three "tall" (2-row) tiles are always
   #3/#8/#12 at every breakpoint — only where they sit moves — so the
   aspect-ratio override below never needs to change. --- */
@media (max-width: 1024px) {
  /* 3 columns x 5 rows, tile #13 dropped (13 tiles doesn't divide evenly
     into 3 columns; hiding the odd one out keeps every row full instead of
     ending on a lone half-width gap). */
  .portfolio__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }
  .portfolio__item:nth-child(1) { grid-area: 3 / 1 / 4 / 2; }
  .portfolio__item:nth-child(2) { grid-area: 4 / 1 / 5 / 2; }
  .portfolio__item:nth-child(3) { grid-area: 1 / 1 / 3 / 2; }
  .portfolio__item:nth-child(4) { grid-area: 5 / 1 / 6 / 2; }
  .portfolio__item:nth-child(5) { grid-area: 1 / 2 / 2 / 3; }
  .portfolio__item:nth-child(6) { grid-area: 2 / 2 / 3 / 3; }
  .portfolio__item:nth-child(7) { grid-area: 3 / 2 / 4 / 3; }
  .portfolio__item:nth-child(8) { grid-area: 4 / 2 / 6 / 3; }
  .portfolio__item:nth-child(9) { grid-area: 3 / 3 / 4 / 4; }
  .portfolio__item:nth-child(10) { grid-area: 4 / 3 / 5 / 4; }
  .portfolio__item:nth-child(11) { grid-area: 5 / 3 / 6 / 4; }
  .portfolio__item:nth-child(12) { grid-area: 1 / 3 / 3 / 4; }
  .portfolio__item:nth-child(13) { display: none; }
}

@media (max-width: 767px) {
  /* 2 columns x 7 rows, tiles #11 and #13 dropped for the same reason. */
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, 1fr);
  }
  .portfolio__item:nth-child(1) { grid-area: 1 / 2 / 2 / 3; }
  .portfolio__item:nth-child(2) { grid-area: 2 / 2 / 3 / 3; }
  .portfolio__item:nth-child(3) { grid-area: 1 / 1 / 3 / 2; }
  .portfolio__item:nth-child(4) { grid-area: 3 / 1 / 4 / 2; }
  .portfolio__item:nth-child(5) { grid-area: 3 / 2 / 4 / 3; }
  .portfolio__item:nth-child(6) { grid-area: 4 / 1 / 5 / 2; }
  .portfolio__item:nth-child(7) { grid-area: 5 / 1 / 6 / 2; }
  .portfolio__item:nth-child(8) { grid-area: 4 / 2 / 6 / 3; }
  .portfolio__item:nth-child(9) { grid-area: 6 / 2 / 7 / 3; }
  .portfolio__item:nth-child(10) { grid-area: 7 / 2 / 8 / 3; }
  .portfolio__item:nth-child(11) { display: none; }
  .portfolio__item:nth-child(12) { grid-area: 6 / 1 / 8 / 2; }
  .portfolio__item:nth-child(13) { display: none; }
}