/* commercials-overrides.css
   Scoped Commercials-only layout overrides.
   Loaded only on the commercials page via the template's extra_head block.
*/

/* Card-flow layout: replace grid with flex-based flow (scoped) */
.media-page.commercials-page .commercials-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  width: 100% !important;
  align-items: flex-start !important;
}

/* Cards: allow flexible growth so rows fill available width */
.media-page.commercials-page .commercial-card {
  box-sizing: border-box !important;
  flex: 1 1 calc((100% - 36px) / 3) !important; /* three per row on desktop, flexible */
  max-width: none !important;
  margin: 0 !important;
  align-self: flex-start !important;
  cursor: pointer !important;
}

@media (max-width: 1024px) {
  .media-page.commercials-page .commercial-card {
    flex: 1 1 calc((100% - 18px) / 2) !important; /* two per row on tablet */
  }
}

@media (max-width: 640px) {
  .media-page.commercials-page .commercial-card {
    flex: 1 1 100% !important; /* single column on mobile */
  }
}

/* Allow cards to size by content; do not force equal heights */
.media-page.commercials-page .commercial-card .card-inner {
  height: auto !important;
}

/* Media: remove fixed height / aspect-ratio so portrait reels remain tall */
.media-page.commercials-page .commercial-media {
  aspect-ratio: unset !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 8px !important;
}

.media-page.commercials-page .commercial-media video,
.media-page.commercials-page .commercial-media iframe,
.media-page.commercials-page .commercial-media img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/* Unset previously-enforced fixed heights on direct media selectors */
.media-page.commercials-page .commercial-item video,
.media-page.commercials-page .commercial-item img,
.media-page.commercials-page .commercial-card video,
.media-page.commercials-page .commercial-card img,
.media-page.commercials-page .thumbnail-placeholder {
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* Ensure grid child width rules do not force full-width when switching to flex */
.media-page.commercials-page .commercials-grid > *,
.media-page.commercials-page .commercials-grid .collection-card {
  width: auto !important;
  max-width: none !important;
}

/* Preserve modal click behavior: keep .commercial-card clickable (cursor) */
.media-page.commercials-page .commercial-card { cursor: pointer !important; }

/* End of commercials-overrides.css */

/* COMMERCIALS: Play overlay (scoped) */
.media-page.commercials-page .commercial-thumbnail,
.media-page.commercials-page .commercial-card {
  position: relative;
}
.media-page.commercials-page .commercial-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  border: none;
  color: #fff;
  touch-action: manipulation;
}
.media-page.commercials-page .commercial-play-overlay svg { width: 28px; height: 28px; }


/* EMERGENCY FIX – prevent flex cards from stretching vertically */
.commercials-grid,
.commercials-cards,
.commercials-list {
  align-items: flex-start;
}


.commercial-card,
.collection-card {
  height: auto !important;
  align-self: flex-start;
}

/* Commercials – 3-tier header system (override, single source) */
.media-page.commercials-page .commercials-header-override {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px 40px;
}

.media-page.commercials-page .commercials-eyebrow {
  font-family: 'Satoshi', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff5b5f;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.media-page.commercials-page .commercials-eyebrow .dash {
  position: relative;
  top: -1px;
}

.media-page.commercials-page .commercials-title {
  font-family: 'Playfair Display', serif;
  font-size: 60px;
  font-weight: 400;
  color: #ffffff;
  margin: 0 0 20px;
  line-height: 1.2;
}

.media-page.commercials-page .commercials-description {
  font-family: 'Satoshi', sans-serif;
  font-size: 18px;
  color: #9ca3af;
  max-width: 700px;
  line-height: 1.6;
}


/* FINAL SAFETY GUARD – limit extreme portrait videos (Commercials only) */
.media-page.commercials-page .commercial-media video {
  max-height: 420px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Modal arrows for commercials modal (scoped) */
#videoModal {
  position: relative;
  z-index: 10002;
}

#videoModal .commercials-prev,
#videoModal .commercials-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  font-size: 32px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

#videoModal .commercials-prev { left: -60px; }
#videoModal .commercials-next { right: -60px; }

@media (max-width: 720px) {
  #videoModal .commercials-prev,
  #videoModal .commercials-next {
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    font-size: 28px;
  }


  #videoModal .commercials-prev {
    left: 12px;
  }


  #videoModal .commercials-next {
    right: 12px;
  }
}

/* Force fixed centering for the commercials modal only */
#videoModal {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 10002;
}

/* Ensure arrows render above modal content */
#videoModal {
  position: fixed !important;
}

#videoModal .modal-content {
  position: relative;
  z-index: 1;
}

#videoModal .commercials-prev,
#videoModal .commercials-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  border: none;
  color: #fff;
  font-size: 32px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

#videoModal .commercials-prev {
  left: 16px;
}

#videoModal .commercials-next {
  right: 16px;
}

/* Ensure video layer does not cover arrows */
#videoModal .video-ratio {
  position: relative;
  z-index: 1;
}

#videoModal .commercials-prev,
#videoModal .commercials-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20; /* higher than video layer */
}