/* ============================================================
   marketing-loops.css
   ------------------------------------------------------------
   Auto-scrolling marquee strips driven by js/marquee.js.

   The JS controller:
     - clones [data-marquee] children once for a seamless loop
     - drives translateX on the track itself (no @keyframes here)
     - supports drag/swipe and dot navigation

   What this CSS does:
     - layout for each [data-marquee] track (flex, no-wrap)
     - tile sizing per section
     - dot strip styling (.marquee-dots / .marquee-dot)
     - removes the previous mobile side fade-glow (user request)

   Sections covered:
     1. .reels-strip            (index — marketing reels)
     2. .rank-backdrop .rb-grid (index — #1 rank cards, mobile only)
     3. .tb-grid                (index — testimonials, mobile only)
     4. .reels-grid             (media.html — reels gallery)
     5. .accolades-grid         (media.html — press / accolades)
     6. .team-grid              (team.html — agent cards, mobile only)
   ============================================================ */

/* ----- universal flex-track override for any [data-marquee] ----- */
/* Always-on marquees (no mobile-only flag) */
[data-marquee]:not([data-marquee-mobile-only]) {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: stretch;
  flex-wrap: nowrap;
  width: max-content;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
[data-marquee]:not([data-marquee-mobile-only]) > * { flex: 0 0 auto; }

/* Mobile-only marquees — only switch to flex below 760px */
@media (max-width: 760px) {
  [data-marquee][data-marquee-mobile-only] {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch;
    flex-wrap: nowrap;
    width: max-content;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  [data-marquee][data-marquee-mobile-only] > * { flex: 0 0 auto; }
}

[data-marquee].is-dragging { cursor: grabbing; }

/* Universal: clip the marquee host so overflowing clones stay hidden.
   The track itself is width:max-content and overflows horizontally.
   The JS adds .marquee-host to the immediate parent. */
.marquee-host { overflow: hidden; position: relative; }
.marquee-host[data-marquee-clip="false"] { overflow: visible; }

/* When a mobile-only marquee is deactivated (>760px), restore normal overflow
   so neighboring layouts (3-col grids) don't get unintentionally clipped. */
@media (min-width: 761px) {
  .marquee-host:has(> [data-marquee][data-marquee-mobile-only]) { overflow: visible; }
}

/* Clones must always be visible (no reveal hide states) */
[data-marquee] > [data-marquee-clone="true"] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ----- DOT PAGINATION ----- */
.marquee-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 28px auto 0;
  padding: 0 4vw;
  flex-wrap: wrap;
  z-index: 4;
  position: relative;
}
.marquee-dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 26px;
  height: 26px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.marquee-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(31, 28, 24, 0.22);
  transition: background 240ms ease, transform 240ms ease, width 240ms ease;
}
.marquee-dot:hover::before {
  background: rgba(184, 149, 106, 0.6);
}
.marquee-dot.is-active::before {
  background: var(--bronze, #B8956A);
  width: 22px;
  border-radius: 4px;
}

/* Dots on dark backgrounds */
.rank-backdrop .marquee-dots .marquee-dot::before {
  background: rgba(220, 201, 172, 0.28);
}
.rank-backdrop .marquee-dots .marquee-dot:hover::before {
  background: rgba(220, 201, 172, 0.7);
}
.rank-backdrop .marquee-dots .marquee-dot.is-active::before {
  background: var(--bronze-soft, #DCC9AC);
}
.testimonials-backdrop .marquee-dots .marquee-dot::before {
  background: rgba(250, 247, 241, 0.28);
}
.testimonials-backdrop .marquee-dots .marquee-dot.is-active::before {
  background: var(--bronze-soft, #DCC9AC);
}

/* ----- 1. REELS STRIP (index marketing) ----- */
.reels-strip-section { overflow: hidden; position: relative; }
.reels-strip { gap: 24px; padding: 0 6vw; }
.reels-strip .reel-tile {
  width: 22vw;
  min-width: 260px;
  aspect-ratio: 9 / 14;
}
@media (max-width: 980px) {
  .reels-strip .reel-tile:nth-child(n+4) { display: block; }
}
@media (max-width: 760px) {
  .reels-strip { gap: 14px; padding: 0 4vw; }
  .reels-strip .reel-tile { width: 62vw; min-width: 0; }
}

/* ----- 2. RANK CARDS (mobile only) ----- */
@media (max-width: 760px) {
  .rank-backdrop { overflow: hidden; }
  .rank-backdrop .rb-grid {
    gap: 16px !important;
    padding: 0 4vw !important;
    margin: 0 !important;
  }
  .rank-backdrop .rank-card {
    width: 82vw;
    min-width: 280px;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ----- 3. TESTIMONIALS (mobile only) ----- */
@media (max-width: 760px) {
  .testimonials-backdrop { overflow: hidden; }
  .testimonials-backdrop .tb-grid {
    gap: 16px !important;
    padding: 0 4vw !important;
  }
  .testimonials-backdrop .tb-card {
    width: 82vw;
    min-width: 280px;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ----- 4. REELS GRID (media.html) ----- */
.reels-grid-section { overflow: hidden; position: relative; }
.reels-grid[data-marquee] {
  gap: 20px;
  padding: 0 6vw;
  max-width: none !important;
}
.reels-grid[data-marquee] .reel {
  width: 24vw;
  min-width: 280px;
  aspect-ratio: 4 / 5;
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 760px) {
  .reels-grid[data-marquee] { gap: 14px; padding: 0 4vw; }
  .reels-grid[data-marquee] .reel { width: 70vw; min-width: 0; }
}

/* ----- 5. ACCOLADES GRID (media.html — press) ----- */
.accolades { overflow: hidden; }
.accolades-grid[data-marquee] {
  gap: 12px;
  padding: 0 6vw;
}
.accolades-grid[data-marquee] .accolade {
  flex: 0 0 auto;
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 760px) {
  .accolades-grid[data-marquee] { gap: 8px; padding: 0 4vw; }
}

/* ----- 6. TEAM GRID (team.html — mobile only) ----- */
@media (max-width: 760px) {
  .team-grid[data-marquee] {
    gap: 16px !important;
    padding: 0 4vw !important;
  }
  .team-grid[data-marquee] .member {
    width: 78vw;
    min-width: 280px;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ----- Accessibility ----- */
@media (prefers-reduced-motion: reduce) {
  [data-marquee] { animation: none !important; }
}