/* Commercials page — reuses the color/font tokens defined in style.css.
   Same uniform-grid approach as credits.css, but tiles are 16:9 (video
   thumbnails, not posters) and clicking one opens a Vimeo player modal
   instead of navigating away — same modal pattern as music.css's mv-modal. */

.commercials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  padding: 12vh 5vw 10vh;
}

.cm-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #141412;
  cursor: pointer;
}

.cm-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.5s ease;
  filter: grayscale(0.06);
}
.cm-tile img.loaded { opacity: 1; transform: scale(1); }
.cm-tile:hover img { transform: scale(1.04); filter: grayscale(0) contrast(1.03); }

.cm-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  background: linear-gradient(180deg, rgba(6,6,5,0) 45%, rgba(6,6,5,0.92) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.cm-tile:hover .cm-overlay { opacity: 1; }

.cm-campaign {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.3;
  margin: 0 0 0.3em;
  color: var(--fg);
}
.cm-brand {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.cm-duration {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 7px;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--fg);
  background: rgba(6, 6, 5, 0.6);
  pointer-events: none;
}

.cm-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11,11,10,0.55);
  border: 1px solid rgba(243,241,236,0.5);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.cm-tile:hover .cm-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cm-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--fg);
  transform: translate(-40%, -50%);
}

@media (max-width: 640px) {
  .commercials-grid { grid-template-columns: 1fr; gap: 12px; padding: 12vh 5vw 8vh; }

  /* No real hover on touch — always show the caption instead of only on hover. */
  .cm-overlay { opacity: 1; background: linear-gradient(180deg, rgba(6,6,5,0) 55%, rgba(6,6,5,0.92) 100%); }
  .cm-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Video modal — identical mechanics to .mv-modal in music.css */
.cm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 5, 0.85);
}
.cm-modal.open { display: flex; }
.cm-modal-inner {
  width: min(88vw, 1100px);
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
}
.cm-modal-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.cm-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}
.cm-close:hover { opacity: 1; }