/* =========================================================================
   Circular project gallery
   Lays the existing .showcase-card elements out on a 3D ring. The per-card
   angle, depth and opacity are written as inline styles by
   circular-gallery.js; this file owns the stage, the side arrows, the dots
   and the small-screen stack fallback.
   ========================================================================= */

/* Keep the section header (title + filter pills) above the ring. */
.tm-section-showcase .showcase-head {
    position: relative;
    z-index: 20;
}

.cg-carousel {
    position: relative;
    z-index: 5;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

/* The perspective lives on the viewport, the 3D space on the ring inside it. */
.cg-viewport {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 560px;
    margin: 0 auto;
    perspective: 1400px;
    perspective-origin: 50% 45%;
}

.cg-ring {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    /* JS sets translateZ(-radius) so the front card sits at z = 0 and is
       therefore rendered at its true size, with the rest receding behind it. */
}

.cg-ring .showcase-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    margin: 0;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    /* Cards past the halfway point are seen from behind; hiding the backface
       stops their text rendering mirrored during a turn. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* No transform transition: the rotation is eased in JS frame by frame, so
       a CSS transition on top of it would only add lag. */
    transition: opacity 0.3s linear, box-shadow 0.35s ease;
    will-change: transform, opacity;
    opacity: 0; /* revealed by JS on the first layout (avoids a stacked flash) */
}

/* The card currently facing the viewer earns a deeper shadow so it reads as
   the one in front rather than one of a flat pile. */
.cg-ring .showcase-card.is-front {
    box-shadow: 0 40px 80px -30px rgba(10, 22, 40, 0.5);
}

/* Ring-scoped proportions: the card is narrower here than in the admin "View"
   preview or the details page, which reuse the same markup unscoped. */
.cg-ring .showcase-card-media { aspect-ratio: 16 / 8.5; }
.cg-ring .showcase-card-body { padding: 16px 22px 18px; }
.cg-ring .showcase-card-title { font-size: 1.35rem; }
.cg-ring .showcase-card-desc {
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Feature and tech lists are capped so one wordy project can't make its card
   taller than the others and break the ring's silhouette. The full lists
   still show on the project details page. */
.cg-ring .showcase-features {
    margin-bottom: 12px;
    gap: 6px;
    grid-auto-rows: min-content;
    max-height: 92px;
    overflow: hidden;
}
.cg-ring .showcase-tech {
    margin-bottom: 12px;
    max-height: 64px;
    overflow: hidden;
}

/* ------------------------------ Side arrows ---------------------------- */
/* Flanking the stage rather than sitting under it, so the ring reads as
   something you turn left and right. */
.cg-arrow {
    position: absolute;
    top: 50%;
    z-index: 30;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border-radius: 999px;
    border: 1px solid var(--vs-line);
    background: var(--vs-glass-bg-strong);
    color: var(--vs-ink);
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateY(-50%);
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.cg-prev { left: 4px; }
.cg-next { right: 4px; }

.cg-arrow:hover {
    background: #fff;
    border-color: var(--vs-brand);
    color: var(--vs-brand);
    box-shadow: var(--vs-shadow);
}
.cg-arrow:active { transform: translateY(-50%) scale(0.94); }
.cg-arrow:focus-visible {
    outline: 2px solid var(--vs-brand);
    outline-offset: 3px;
}

/* --------------------------------- Dots -------------------------------- */
.cg-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    z-index: 20;
}
.cg-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(10, 22, 40, 0.18);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.25s ease, width 0.25s ease;
}
.cg-dot.is-active {
    width: 22px;
    background: var(--vs-brand);
}

/* A single project has nothing to turn to. */
.cg-carousel.cg-solo .cg-arrow,
.cg-carousel.cg-solo .cg-dots {
    display: none;
}

/* ------------------------------ Responsive ----------------------------- */
@media (max-width: 1279px) {
    .cg-viewport { height: 530px; }
    .cg-ring .showcase-card { width: 340px; }
}

@media (max-width: 1023px) {
    .cg-viewport { height: 490px; }
    .cg-ring .showcase-card { width: 300px; }
    .cg-arrow { width: 44px; height: 44px; font-size: 1.2rem; }
}

/* Stack fallback: on phones the ring becomes a plain vertical list. The 3D
   ring needs width to read at all, and a scroll-driven rotation fights the
   touch scroll it is riding on. */
@media (max-width: 767px) {
    .cg-carousel { margin-top: 30px; }
    .cg-viewport {
        height: auto;
        perspective: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
    }
    .cg-ring {
        position: relative;
        inset: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
        transform: none !important;
        transform-style: flat;
    }
    .cg-ring .showcase-card {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 400px;
        transform: none !important;
        opacity: 1 !important;
        z-index: auto !important;
    }
    .cg-arrow,
    .cg-dots { display: none !important; }
}

/* Reduced motion: the ring still turns via the arrows and dots, but nothing
   moves on its own or in response to scrolling (handled in JS). */
@media (prefers-reduced-motion: reduce) {
    .cg-ring .showcase-card { transition: opacity 0.2s linear; }
}