/*
 * Apex — Gallery Tiles ([apex_gallery]).
 * Justified rows: each row is a flex line whose tiles get flex-grow = their
 * aspect ratio and flex-basis:0, so widths come out proportional to the ratio
 * and — because each tile carries its own aspect-ratio — every tile in a row
 * resolves to the SAME height (width ÷ ratio is constant across the row). Two
 * 16:9 side by side simply lower that shared height to fit; a single tile in a
 * row fills the full width. A vertical 9:16 becomes a "split" that spans two
 * rows beside a stack of companion tiles (mirrors the home bento). Tile title
 * sits top-left and description bottom-left, matching the bento cards.
 */

.apex-gallery {
  --apex-gallery-gap: clamp(0.5rem, 0.8vw, 0.875rem);
  display: flex;
  flex-direction: column;
  gap: var(--apex-gallery-gap);
  padding-block: clamp(2rem, 4vw, 4rem);
  padding-inline: clamp(1.5rem, 3.25vw, 4rem);
}

/* Embedded in a section body (e.g. the About section) it inherits the section
   gutter, so drop its own side padding to sit flush with the heading. */
.apex-section__body .apex-gallery {
  padding-inline: 0;
}

/* On a case-study (Work) page the film row replaces the placeholder band: it is
   full-bleed and carries the same vertical rhythm as the old .apex-cs-video. */
.apex-cs-gallery {
  padding-inline: 0;
  padding-block: 0;
  margin-block: clamp(1.5rem, 2.4vw, 3rem);
}

.apex-gallery__row {
  display: flex;
  gap: var(--apex-gallery-gap);
  align-items: stretch;
}

.apex-gallery__tile {
  position: relative;
  flex: var(--apex-grow, 1) 1 0;
  min-width: 0;
  aspect-ratio: var(--apex-ar, 1.7778);
  overflow: hidden;
  background: #101010;
  container-type: inline-size;
  isolation: isolate;
}

.apex-gallery__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.apex-gallery__media video,
.apex-gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--apex-ease);
}

.apex-gallery__tile:hover .apex-gallery__media video,
.apex-gallery__tile:hover .apex-gallery__media img {
  transform: scale(1.04);
}

/* Content overlay — title top-left, description bottom-left (bento card style). */
.apex-gallery__body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2vw, 2rem); /* 32px, like .apex-card */
  pointer-events: none;
}

.apex-gallery__title {
  margin: 0 0 auto; /* stay at the top; push the description to the bottom */
  font-size: 0.875rem; /* 14/23, like .apex-card__tag */
  line-height: 1.64;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
}

.apex-gallery__desc {
  margin: 0;
  max-width: 36ch;
  font-size: 0.75rem; /* 12px, like .apex-card__desc */
  font-weight: 500;
  line-height: 1.8667;
  letter-spacing: 0.042em;
  color: rgba(255, 255, 255, 0.6);
}

/* Narrow tiles drop the description, as the bento does. */
@container (max-width: 20rem) {
  .apex-gallery__desc {
    display: none;
  }
}

/* Small tiles (phone-sized rows): tighter overlay and a smaller title. */
@container (max-width: 13rem) {
  .apex-gallery__body {
    padding: 0.6rem 0.75rem;
  }

  .apex-gallery__title {
    font-size: 0.6875rem; /* 11px */
    line-height: 1.35;
  }
}

/* Tiny tiles have no room for any caption — clean video only. */
@container (max-width: 8rem) {
  .apex-gallery__title {
    display: none;
  }
}

/* ------------------------------------------------ Vertical split (2 rows) */

.apex-gallery__split {
  display: flex;
  gap: var(--apex-gallery-gap);
  align-items: stretch;
}

.apex-gallery__split-stack {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--apex-gallery-gap);
}

/* The tall 9:16 fills the height of the two-row stack beside it. 37.5% (the
   bento's 3-of-8 column) lands the tile at ≈9:16 for the usual companion mix. */
.apex-gallery__tile--tall {
  flex: 0 0 37.5%;
  align-self: stretch;
  aspect-ratio: auto;
}

/* -------------------------------------------------- Fullscreen viewer */

/* A tile with a viewer link behaves like a button. */
.apex-gallery__tile--clickable {
  cursor: pointer;
}

.apex-gallery__tile--clickable:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Viewer variant of the shared modal: a large window with a margin all around,
   so the (dimmed) home page stays visible behind it — the visitor can see they
   never left the site. */
.apex-modal--viewer {
  padding: clamp(1.25rem, 4vw, 3.5rem);
}

.apex-modal--viewer .apex-modal__backdrop {
  background: rgba(0, 0, 0, 0.55); /* lighter than the showreel modal — keep the page readable behind */
  backdrop-filter: blur(4px);
}

.apex-modal__dialog--full {
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.apex-viewer__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* The close button sits inside the fullscreen dialog, top-right. */
.apex-modal--viewer .apex-modal__close {
  top: 1rem;
  right: 1rem;
  transform: none;
  background: rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------------------------- Responsive */

/* The grid keeps its row layout at every width (client request): rows are
   proportional (flex-grow + aspect-ratio), so they simply scale down on
   mobile instead of stacking into a single column. Only the gap tightens. */
@media (max-width: 720px) {
  .apex-gallery {
    --apex-gallery-gap: 0.375rem;
  }
}