/* ============================================================
   category.css — category grid template T1 (BRIEF §5) and the
   overlay player (§6). Values from reference advertising.dc.html;
   sized in canvas px × --u so the page scales with the chrome.
   ============================================================ */

/* ---- works mosaic: aspect-true editorial rows ---- */
.works {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-width: calc(1280 * var(--u));
  margin: calc(52 * var(--u)) auto 0;
  padding: 0 calc(64 * var(--u));
}

.works__row {
  display: flex;
  align-items: flex-start;
}

.work {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  z-index: 1;
  transition: opacity 0.5s ease, filter 0.5s ease;
}

.work:hover,
.work:focus-visible {
  z-index: 2;
}

.works__row:has(.work:hover) .work:not(:hover) {
  opacity: 0.55;
  filter: saturate(0.75);
}

.work__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #161a20;
}

.work__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-filter);
  transition: transform 0.7s var(--ease-slide), opacity 0.6s ease;
}

.work__img--raw {
  filter: none;
  opacity: 0;
  pointer-events: none;
}

.work:hover .work__img,
.work:focus-visible .work__img {
  transform: scale(1.03);
}

.work:hover .work__img--raw,
.work:focus-visible .work__img--raw {
  opacity: 1;
}

/* under-tile caption: title (bright mono caps) + genre bracket.
   Metadata never truncates with ellipsis anywhere on the site —
   long captions wrap to a second line instead. */
.work__caption {
  padding: calc(9 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) 1px;
  text-align: left;
  line-height: 1.6;
}

/* desktop caption: TITLE — genre; the mobile one (CLIENT — “Title”)
   swaps in below 768px */
.work__caption-mobile {
  display: none;
}

.work__title {
  font-family: var(--font-mono);
  font-size: max(calc(10 * var(--u)), 9px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9CBC8;
}

.work__genre {
  font-family: var(--font-mono);
  font-size: max(calc(9.5 * var(--u)), 8.5px);
  letter-spacing: 0.12em;
  color: var(--secondary);
}

/* multi-asset campaigns: small mono mark, click goes to the case page */
.work__case-mark {
  font-family: var(--font-mono);
  font-size: max(calc(9 * var(--u)), 8px);
  letter-spacing: 0.14em;
  color: var(--numerals);
}

/* ============================================================
   Overlay player (BRIEF §6) — scrim INK @92%, centered 16:9
   Vimeo slot, mono caption line, PREV/NEXT, ESC/scrim close
   ============================================================ */

.player[hidden] {
  display: none;
}

.player {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(14, 17, 22, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: player-in 0.4s ease both;
}

@keyframes player-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.player__close {
  position: absolute;
  top: calc(26 * var(--u));
  right: calc(34 * var(--u));
  z-index: 2;
  padding: 8px;
  font-family: var(--font-mono);
  font-size: max(calc(10.5 * var(--u)), 9px);
  letter-spacing: var(--meta-tracking);
  color: var(--secondary);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.player__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--secondary);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.3s ease;
  user-select: none;
}

.player__arrow--prev { left: calc(26 * var(--u)); }
.player__arrow--next { right: calc(26 * var(--u)); }

.player__close:hover,
.player__close:focus-visible,
.player__arrow:hover,
.player__arrow:focus-visible {
  color: var(--paper);
}

/* aspect-true: --player-ar is set per work by overlay-player.js,
   so the frame keeps the work's native ratio, uncropped */
.player__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(calc(1160 * var(--u)), 84vw, calc((100vh - 200px) * var(--player-ar, 1.7778)));
}

/* Vimeo embed slot; aspect-ratio set per work by overlay-player.js */
.player__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #161a20;
}

.player__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* placeholder until Vimeo uploads exist (§11) */
.player__placeholder {
  position: absolute;
  inset: 0;
}

.player__placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-filter);
}

.player__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.player__play::before {
  content: "";
  width: 66px;
  height: 66px;
  border: 1px solid rgba(233, 233, 228, 0.55);
  border-radius: 50%;
  display: flex;
}

.player__play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 13px solid rgba(233, 233, 228, 0.9);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 4px;
}

.player__pending {
  position: absolute;
  left: 20px;
  bottom: 16px;
  font-family: var(--font-mono);
  font-size: max(calc(9.5 * var(--u)), 8.5px);
  letter-spacing: var(--meta-tracking);
  color: rgba(233, 233, 228, 0.75);
  pointer-events: none;
}

/* caption row: CLIENT — "Title" — year — tools · roman counter */
.player__caption-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 0 2px;
  white-space: nowrap;
}

/* metadata never truncates with ellipsis: the caption wraps */
.player__caption {
  min-width: 0;
  white-space: normal;
}

.player__client {
  font-family: var(--font-mono);
  font-size: max(calc(10 * var(--u)), 9px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9CBC8;
}

.player__rest {
  font-family: var(--font-mono);
  font-size: max(calc(9.5 * var(--u)), 8.5px);
  letter-spacing: 0.12em;
  color: var(--secondary);
}

.player__counter {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: max(calc(9.5 * var(--u)), 8.5px);
  letter-spacing: 0.2em;
  color: var(--numerals);
}

/* ---- mobile (≤768px): caption swap ---- */
@media (max-width: 768px) {
  /* CLIENT — “Title”; tools stay in the overlay caption only */
  .work__caption-desktop {
    display: none;
  }

  .work__caption-mobile {
    display: inline;
  }
}

/* ---- mobile: fullscreen player (§6) ---- */
@media (max-width: 767px) {
  .player__col {
    width: 100%;
  }

  .player__caption-row {
    padding: 0 18px;
  }

  .player__close {
    top: 18px;
    right: 18px;
  }

  .player__arrow {
    top: auto;
    bottom: 20px;
    transform: none;
  }

  .player__arrow--prev { left: 16px; }
  .player__arrow--next { right: 16px; }
}