/* 2A — Auto-scrolling infinite gallery carousel.
 * Mirrors the look of Vercel's ServiceGallery (horizontal mobile mode), but
 * upgraded to desktop-sized cards. Edge-fade via mask-image. */

.twoa-gallery-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Edge fade so leading/trailing items soften into the section bg. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    touch-action: pan-y; /* allow page vertical scroll; we scrub on horizontal */
}

.twoa-gallery-carousel__track {
    display: flex;
    gap: 1rem;
    will-change: transform;
    cursor: grab;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.twoa-gallery-carousel__track.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.twoa-gallery-carousel__item {
    flex: 0 0 auto;
    width: 320px;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.04);
    position: relative;
}

.twoa-gallery-carousel__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    pointer-events: none; /* let drag work over images */
    -webkit-user-drag: none;
    user-select: none;
}

.twoa-gallery-carousel__item:hover img {
    transform: scale(1.05);
}

/* Mobile sizing tweak — keeps cards readable on narrow screens. */
@media (max-width: 640px) {
    .twoa-gallery-carousel__track { gap: 0.75rem; }
    .twoa-gallery-carousel__item {
        width: 240px;
        height: 180px;
        border-radius: 12px;
    }
}

/* Dark-mode polish: stronger shadow, subtle border for separation. */
@media (prefers-color-scheme: dark) {
    .twoa-gallery-carousel__item {
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }
}
.theme-dark .twoa-gallery-carousel__item,
[data-theme="dark"] .twoa-gallery-carousel__item {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Reduced motion: kill the hover zoom too (auto-scroll is killed in JS). */
@media (prefers-reduced-motion: reduce) {
    .twoa-gallery-carousel__item img { transition: none; }
    .twoa-gallery-carousel__item:hover img { transform: none; }
}

/* =========================================================
   Animated infinite-scroll service hero gallery (Vercel ServiceGallery parity).
   Desktop: two columns (col1 up, col2 down). Mobile: shared with
   .twoa-gallery-carousel above (horizontal track).
   ========================================================= */
.twoa-service-gallery { position: relative; width: 100%; }
.twoa-service-gallery__desktop {
    display: none;
    gap: 1rem;
    height: 500px;
    overflow: hidden;
    position: relative;
}
.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;
    background: linear-gradient(to bottom, var(--color-bg-secondary, #f8f7f4) 0%, transparent 100%);
}
.twoa-service-gallery__desktop::after {
    bottom: 0;
    background: linear-gradient(to top, var(--color-bg-secondary, #f8f7f4) 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;
}
.twoa-service-gallery__col--up   .twoa-service-gallery__col-track { animation: twoa-sg-scroll-up   30s linear infinite; }
.twoa-service-gallery__col--down .twoa-service-gallery__col-track { animation: twoa-sg-scroll-down 30s linear infinite; }
.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 gallery (hide desktop, show mobile horizontal carousel). */
.twoa-service-gallery__mobile { display: block; }
.twoa-service-gallery__mobile-item {
    width: 240px;
    height: 160px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.twoa-service-gallery__mobile-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

/* Prev / next round buttons (40x40) — used by the about Recent Projects rail. */
.twoa-gallery-carousel__viewport {
    overflow: hidden;
    width: 100%;
}
.twoa-gallery-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 1.5px solid var(--color-border, rgba(0,0,0,0.12));
    background: #fff;
    color: var(--twoa-orange, #eb5d1d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.twoa-gallery-carousel__nav:hover {
    background: var(--twoa-orange, #eb5d1d);
    color: #fff;
    border-color: var(--twoa-orange, #eb5d1d);
    transform: translateY(-50%) scale(1.05);
}
/* Lane 14 #3 — active press feedback (Vercel about/page.tsx:227,234 uses
   active:scale-95; -50% preserved to keep button vertically centered). */
.twoa-gallery-carousel__nav:active {
    transform: translateY(-50%) scale(0.95);
}
.twoa-gallery-carousel__nav:focus-visible {
    outline: 2px solid var(--twoa-orange, #eb5d1d);
    outline-offset: 2px;
}
.twoa-gallery-carousel__nav--prev { left: 0.5rem; }
.twoa-gallery-carousel__nav--next { right: 0.5rem; }
/* Vercel about/page.tsx:226,234 — dark rest: dark:bg-dark-deep (#1a1a1a) +
   dark:border-dark-soft (#404040) + dark:text-white. */
.theme-dark .twoa-gallery-carousel__nav,
[data-theme="dark"] .twoa-gallery-carousel__nav,
html.dark .twoa-gallery-carousel__nav {
    background: var(--twoa-dark-deep, #1a1a1a); /* dark:bg-dark-deep (#1a1a1a), not bg-card #2d2d2d */
    border-color: var(--twoa-dark-soft, #404040); /* dark:border-dark-soft */
    color: #fff;                                /* dark:text-white */
}
/* Vercel hover is hover:border-orange hover:text-orange in BOTH modes — no bg
   fill, text→orange (not white). Override the inherited light fill rule. */
.theme-dark .twoa-gallery-carousel__nav:hover,
[data-theme="dark"] .twoa-gallery-carousel__nav:hover,
html.dark .twoa-gallery-carousel__nav:hover {
    background: var(--twoa-dark-deep, #1a1a1a); /* keep rest bg — no orange fill */
    border-color: var(--twoa-orange, #eb5d1d);  /* hover:border-orange */
    color: var(--twoa-orange, #eb5d1d);          /* hover:text-orange (not #fff) */
}