/* NILA v21.63 — Mobile Home Category Marquee (true CNN-style continuous loop) */
/* Scope: mobile homepage ONLY. Touches nothing else. */

:root{
  --v63-ink:#071b31;
  --v63-green:#075f3c;
  --v63-teal:#007f78;
  --v63-blue:#176fc2;
  --v63-muted:#52677f;
}

/* Hidden by default; only switched on for mobile home below. */
.v63-marquee{ display:none; }

@media (max-width:780px){

  /* ── Max-specificity first-paint hide (outranks every legacy !important rule,
       incl. v21.42's display:flex marquee and the v55/v58 descendant rules).
       Kills the flash before JS runs; JS then holds it with inline !important. ── */
  html body.page-home .v42-services .v42-service-grid,
  html body[data-nila-page="index"] .v42-services .v42-service-grid,
  html body.page-home .v42-mobile-marquee .v42-service-grid,
  html body[data-nila-page="index"] .v42-mobile-marquee .v42-service-grid,
  html body.page-home .v42-services .v42-mobile-marquee,
  html body[data-nila-page="index"] .v42-services .v42-mobile-marquee{
    display:none !important;
  }

  /* ── Kill the static 3-card vertical grid + every older mobile strip on home ── */
  body.page-home .v42-service-grid,
  body[data-nila-page="index"] .v42-service-grid,
  body.page-home #v62MobileStrip,
  body[data-nila-page="index"] #v62MobileStrip,
  body.page-home .v42-mobile-marquee,
  body[data-nila-page="index"] .v42-mobile-marquee,
  body.page-home .v55-mobile-marquee,
  body[data-nila-page="index"] .v55-mobile-marquee,
  body.page-home .v58-home-marquee,
  body[data-nila-page="index"] .v58-home-marquee,
  body.page-home .v60-home-category-marquee,
  body[data-nila-page="index"] .v60-home-category-marquee,
  body.page-home .v61-mobile-marquee,
  body[data-nila-page="index"] .v61-mobile-marquee{
    display:none !important;
  }

  /* ── The marquee viewport ── */
  body.page-home .v63-marquee,
  body[data-nila-page="index"] .v63-marquee{
    display:block !important;
    position:relative !important;
    width:100% !important;
    margin-top:14px !important;
    padding:4px 0 10px !important;
    overflow:hidden !important;              /* clip the moving track */
    -webkit-overflow-scrolling:touch !important;
    /* CNN-ticker edge fades, left + right */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%) !important;
            mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%) !important;
  }

  /* Tiny "tap to pause" affordance */
  body.page-home .v63-marquee .v63-hint,
  body[data-nila-page="index"] .v63-marquee .v63-hint{
    display:block !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    color:var(--v63-muted) !important;
    margin:0 0 9px 2px !important;
    opacity:.8 !important;
  }
  body.page-home .v63-marquee.is-paused .v63-hint::after,
  body[data-nila-page="index"] .v63-marquee.is-paused .v63-hint::after{
    content:" — paused" !important;
    color:var(--v63-teal) !important;
  }

  /* ── The moving track ── */
  body.page-home .v63-track,
  body[data-nila-page="index"] .v63-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:14px !important;
    width:max-content !important;
    will-change:transform !important;
    animation-name:v63scroll !important;
    animation-timing-function:linear !important;
    animation-iteration-count:infinite !important;
    /* animation-duration set inline by JS based on card count */
  }

  /* Paused state — set by JS on tap/press/hover */
  body.page-home .v63-marquee.is-paused .v63-track,
  body[data-nila-page="index"] .v63-marquee.is-paused .v63-track{
    animation-play-state:paused !important;
  }

  /* Track is two identical halves; -50% lands exactly one set later → seamless */
  @keyframes v63scroll{
    from{ transform:translate3d(0,0,0); }
    to{   transform:translate3d(-50%,0,0); }
  }

  /* ── Individual category card ── */
  body.page-home .v63-card,
  body[data-nila-page="index"] .v63-card{
    flex:0 0 232px !important;
    width:232px !important;
    min-height:272px !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    border-radius:20px !important;
    background:#fff !important;
    border:1px solid rgba(7,27,49,.10) !important;
    box-shadow:0 16px 42px rgba(7,27,49,.11) !important;
    color:var(--v63-ink) !important;
    text-decoration:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  body.page-home .v63-card:active,
  body[data-nila-page="index"] .v63-card:active{
    transform:scale(.985) !important;
    transition:transform .12s ease !important;
  }

  body.page-home .v63-card-img,
  body[data-nila-page="index"] .v63-card-img{
    position:relative !important;
    height:138px !important;
    min-height:138px !important;
    overflow:hidden !important;
    background:#eef5fb !important;
  }
  body.page-home .v63-card-img img,
  body[data-nila-page="index"] .v63-card-img img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
    pointer-events:none !important;        /* drags shouldn't grab the image */
  }
  body.page-home .v63-card-img .v63-emoji,
  body[data-nila-page="index"] .v63-card-img .v63-emoji{
    position:absolute !important;
    left:10px !important;
    bottom:10px !important;
    width:34px !important;
    height:34px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:18px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 6px 16px rgba(7,27,49,.18) !important;
  }

  body.page-home .v63-card-body,
  body[data-nila-page="index"] .v63-card-body{
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    padding:13px 15px 15px !important;
  }
  body.page-home .v63-card-body h3,
  body[data-nila-page="index"] .v63-card-body h3{
    font-family:Fraunces,Georgia,serif !important;
    font-size:24px !important;
    line-height:1.04 !important;
    letter-spacing:-.03em !important;
    margin:0 0 6px !important;
    color:var(--v63-ink) !important;
  }
  body.page-home .v63-card-body p,
  body[data-nila-page="index"] .v63-card-body p{
    color:var(--v63-muted) !important;
    font-size:12.5px !important;
    line-height:1.32 !important;
    margin:0 0 11px !important;
    font-weight:700 !important;
    min-height:33px !important;
  }
  body.page-home .v63-card-body small,
  body[data-nila-page="index"] .v63-card-body small{
    margin-top:auto !important;
    color:var(--v63-blue) !important;
    font-weight:950 !important;
    font-size:12.5px !important;
  }

  /* Accessibility: if user prefers reduced motion, stop the auto-loop and
     let them swipe through manually instead. */
  @media (prefers-reduced-motion:reduce){
    body.page-home .v63-marquee,
    body[data-nila-page="index"] .v63-marquee{
      overflow-x:auto !important;
      scrollbar-width:none !important;
    }
    body.page-home .v63-marquee::-webkit-scrollbar,
    body[data-nila-page="index"] .v63-marquee::-webkit-scrollbar{ display:none !important; }
    body.page-home .v63-track,
    body[data-nila-page="index"] .v63-track{
      animation:none !important;
      transform:none !important;
    }
  }
}

/* Belt-and-braces: never show the marquee on desktop. */
@media (min-width:781px){
  .v63-marquee{ display:none !important; }
}