/* =========================================================
   2A Service Gallery — animated infinite-scroll partial.
   Mirrors Vercel `ServiceGallery.tsx`:
     - Desktop (≥1280px): two stacked columns (col1 up, col2 down)
       auto-scrolling continuously; pauses on hover.
     - Mobile: horizontal drag carousel (uses .twoa-gallery-carousel
       primitives in gallery-carousel.css).
   Lane 14 #2 — partial = template-parts/service-gallery.php
                (rendered by Lane 1 #18).

   NOTE: equivalent rules currently also exist in gallery-carousel.css
   so the partial styles render even if this file isn't enqueued. This
   file is the canonical home; Lane 15 should enqueue it on service
   pages and the duplicate block in gallery-carousel.css can be
   removed in a future cleanup pass.
   ========================================================= */

.twoa-service-gallery {
    position: relative;
    width: 100%;
}

/* -----------------------------------------------------------------
   Neutralize the legacy static-thumbnail wrapper.
   style.css styles .mc-service-hero__gallery as a `display:grid` 2x2
   thumbnail grid that is `display:none` below 1024px. That hid the
   scroller on tablet/mobile and boxed the desktop columns into one
   grid cell. This wrapper now only HOSTS the .twoa-service-gallery
   scroller (Vercel ServiceGallery parity), so collapse it back to a
   plain block at every breakpoint. Loaded after style.css (depends on
   twoa-style) so these win. ----------------------------------------- */
.mc-service-hero__gallery {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

/* ---------- Desktop two-column scroller (≥1280px) ---------- */
.twoa-service-gallery__desktop {
    display: none;          /* shown by breakpoint below */
    gap: 1rem;
    height: 500px;
    overflow: hidden;
    position: relative;
}

/* Top + bottom edge fades — soften items entering/leaving viewport. */
.twoa-service-gallery__desktop::before,
.twoa-service-gallery__desktop::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 4rem;
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.twoa-service-gallery__desktop::before {
    top: 0;
    /* Fade from the hero section bg (#f8f7f4 light) — see .mc-service-hero. */
    background: linear-gradient(to bottom, #f8f7f4 0%, transparent 100%);
}
.twoa-service-gallery__desktop::after {
    bottom: 0;
    background: linear-gradient(to top, #f8f7f4 0%, transparent 100%);
}
/* Dark mode: hero bg is var(--twoa-dark-deep) (#1a1a1a). Fade from it. */
.dark .twoa-service-gallery__desktop::before {
    background: linear-gradient(to bottom, var(--twoa-dark-deep, #1a1a1a) 0%, transparent 100%);
}
.dark .twoa-service-gallery__desktop::after {
    background: linear-gradient(to top, var(--twoa-dark-deep, #1a1a1a) 0%, transparent 100%);
}

.twoa-service-gallery__col {
    flex: 1 1 0;
    overflow: hidden;
    position: relative;
}
.twoa-service-gallery__col-track {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    will-change: transform;
}
/* Vercel parity: desktop columns use 25s + ease-in-out-cubic
   (globals.css .animate-scroll-up/.animate-scroll-down). col1 up, col2 down. */
.twoa-service-gallery__col--up   .twoa-service-gallery__col-track {
    animation: twoa-sg-scroll-up   25s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.twoa-service-gallery__col--down .twoa-service-gallery__col-track {
    animation: twoa-sg-scroll-down 25s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* Pause on hover (whole desktop block, not per column — feels natural). */
.twoa-service-gallery__desktop:hover .twoa-service-gallery__col-track {
    animation-play-state: paused;
}

.twoa-service-gallery__card {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
}
.twoa-service-gallery__card img {
    display: block;
    width: 100%;
    height: 11rem;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

@keyframes twoa-sg-scroll-up {
    0%   { transform: translate3d(0, 0,     0); }
    100% { transform: translate3d(0, -50%,  0); }
}
@keyframes twoa-sg-scroll-down {
    0%   { transform: translate3d(0, -50%,  0); }
    100% { transform: translate3d(0, 0,     0); }
}

@media (prefers-reduced-motion: reduce) {
    .twoa-service-gallery__col-track { animation: none !important; }
}

/* ---------- Mobile / tablet horizontal carousel (default) ----------
   Vercel parity (ServiceGallery mobile mode): cards w-40/sm:w-52/md:w-60
   (160/208/240px), h-28/sm:h-36/md:h-40 (112/144/160px), gap-3/sm:gap-4,
   rounded-xl/sm:rounded-2xl. These override the larger .twoa-gallery-carousel__item
   base (320x240) that the shared rail primitive ships. */
.twoa-service-gallery__mobile { display: block; }

.twoa-service-gallery__mobile-track { gap: 0.75rem; }
@media (min-width: 640px) {
    .twoa-service-gallery__mobile-track { gap: 1rem; }
}

.twoa-service-gallery__mobile-item {
    width: 160px;
    height: 112px;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
@media (min-width: 640px) {
    .twoa-service-gallery__mobile-item {
        width: 208px;
        height: 144px;
        border-radius: 1rem;
    }
}
@media (min-width: 768px) {
    .twoa-service-gallery__mobile-item {
        width: 240px;
        height: 160px;
    }
}
.twoa-service-gallery__mobile-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Breakpoint swap (matches Vercel `xl` = 1280px) ---------- */
@media (min-width: 1280px) {
    .twoa-service-gallery__desktop { display: flex; }
    .twoa-service-gallery__mobile  { display: none; }
}