/* Banner Marquee — local-only
   - Manual horizontal scroll ALWAYS available
   - Autorun is implemented in JS (scrollLeft + rAF + seamless clone)
   - Reduced motion is respected in JS (autorun disabled)
*/

.bannerMarquee{
  position: relative;
  margin-top: clamp(14px, 2vw, 22px);
  overflow: hidden; /* keeps fades clean */
}

/* Soft edge fades (editorial) */
.bannerMarquee::before,
.bannerMarquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 72px;
  pointer-events:none;
  z-index: 2;
  opacity: .85;
  background: linear-gradient(to right, rgba(12,14,16,1), rgba(12,14,16,0));
}
.bannerMarquee::before{ left:0; }
.bannerMarquee::after{ right:0; transform: rotate(180deg); }

.bannerMarquee__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  padding: clamp(10px, 1.2vw, 16px) 0;
  touch-action: pan-y; /* vertical page scroll stays natural; horizontal inside still works */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bannerMarquee__viewport::-webkit-scrollbar{ display:none; }

.bannerMarquee__viewport:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 4px;
  border-radius: 18px;
}

.bannerMarquee__track{
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 1.6vw, 22px);
  width: max-content; /* important: track can be wider than viewport */
}

/* Optional: Pause hint cursor on desktop */
@media (hover:hover){
  .bannerMarquee__viewport{ cursor: grab; }
  .bannerMarquee__viewport:active{ cursor: grabbing; }
}

/* === Category banner sizing (big, frameless) === */
.bannerMarquee--cats .catCard{
  flex: 0 0 auto;
  width: clamp(340px, 74vw, 760px);
  height: clamp(220px, 42vw, 380px);
  border: 0;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.bannerMarquee--cats .catCard__media{
  position:absolute;
  inset:0;
}
.bannerMarquee--cats .catCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the card */
  display:block;
  transform: translateZ(0); /* iOS paint stability */
}

.bannerMarquee--cats .catCard__body{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(14px, 2vw, 20px);
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
}

.bannerMarquee--cats .catCard__title{
  margin: 0;
}
.bannerMarquee--cats .catCard__desc{
  margin: 6px 0 0;
  max-width: 56ch;
  opacity: .92;
}

/* === Tiles banner sizing (slow autorun recommended in HTML via data-speed) === */
.bannerMarquee--tiles .tile{
  flex: 0 0 auto;
  width: clamp(280px, 82vw, 620px);
}

/* === Media banner sizing (gallery images/videos) === */
.bannerMarquee--media .mediaCard{
  flex: 0 0 auto;
  width: clamp(280px, 78vw, 540px);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* Reduce-motion: hide fades (manual scroll stays) */
@media (prefers-reduced-motion: reduce){
  .bannerMarquee::before,
  .bannerMarquee::after{ display:none; }
}

/* Very small screens: slightly smaller cards */
@media (max-width: 380px){
  .bannerMarquee--cats .catCard{
    width: 88vw;
    height: 52vw;
  }
}