/* Full-width red container — homepage only. */

/* "TRUST" word sits first/on top; the cards row comes after it in the
   markup and is pulled UP by 25% of the word's height (negative margin-top)
   so the cards' top edge tucks over the word's bottom quarter — z-index
   keeps the cards painting in front of the word wherever they overlap.
   Card widths are fluid (flex:1, not a fixed px) down to the mobile
   breakpoint below, so the row always spans the true full width with only
   the small explicit gap between cards, instead of a fixed card size with
   the leftover space dumped into stretched gaps. */
.mm-redbox {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mm-redbox-text {
  position: relative;
  z-index: 1;
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 900;
  font-size: 360px;
  line-height: 1;
  color: #f6f6f6;
}

.mm-redbox-cards {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -90px; /* 25% of the 360px font-size above */
  display: flex;
  gap: 16px;
}

.mm-redbox-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(150deg, #1c1d16 0%, #14150F 55%, #23260f 100%);
}

/* Below this, fluid columns get too narrow to be usable video thumbnails —
   switch to a horizontally swipeable strip of fixed, touch-friendly cards
   instead of shrinking them further. */
@media screen and (max-width: 800px) {
  .mm-redbox-cards {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .mm-redbox-cards::-webkit-scrollbar { display: none; }
  .mm-redbox-card {
    flex: 0 0 auto;
    /* Sized so the row never lands on an exact whole-card fit — the next
       card is always cut off at the edge as a visible "keep scrolling"
       cue, instead of looking like a static 3-up grid. */
    width: clamp(160px, 44vw, 220px);
    scroll-snap-align: start;
  }
}

/* Single mobile step down for the word — card size is already handled by
   the scroll-strip rules above. */
@media screen and (max-width: 640px) {
  .mm-redbox { padding: 20px; }
  .mm-redbox-text { font-size: 140px; }
  .mm-redbox-cards { margin-top: -35px; }
}

.mm-redbox-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mm-redbox-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}

.mm-redbox-play,
.mm-redbox-mute {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  border: none;
  background: rgba(20, 21, 15, .8);
  color: #F5F4EE;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}
.mm-redbox-play:hover,
.mm-redbox-mute:hover { background: rgba(20, 21, 15, .95); }
.mm-redbox-play svg,
.mm-redbox-mute svg { width: 15px !important; height: 15px !important; overflow: visible !important; }
.mm-redbox-play .mm-icon-fill,
.mm-redbox-mute .mm-icon-fill { fill: #F5F4EE !important; stroke: none !important; }
.mm-redbox-mute .mm-icon-stroke { fill: none !important; stroke: #F5F4EE !important; stroke-width: 1.4 !important; stroke-linecap: round !important; }

.mm-redbox-play .mm-icon-pause,
.mm-redbox-card.is-playing .mm-redbox-play .mm-icon-play { display: none !important; }
.mm-redbox-card.is-playing .mm-redbox-play .mm-icon-pause { display: block !important; }

.mm-redbox-mute .mm-icon-vol-off,
.mm-redbox-mute[aria-pressed="true"] .mm-icon-vol-on { display: none !important; }
.mm-redbox-mute[aria-pressed="true"] .mm-icon-vol-off { display: block !important; }

.mm-redbox-volume {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.mm-redbox-card:hover .mm-redbox-volume,
.mm-redbox-card:focus-within .mm-redbox-volume,
.mm-redbox-card.is-playing .mm-redbox-volume { opacity: 1; pointer-events: auto; }

.mm-redbox-volume-slider {
  width: 60px;
  height: 3px;
  accent-color: #F5F4EE;
  cursor: pointer;
}