/* =============================================
   SC-GALLERY — Full-width hero-style slider
   1 card visible at a time, arrow navigation
   ============================================= */

/* Platform injects an anchor div before every component — zero it out */
.anchor + .sc-gallery-wrap,
.anchor + * .sc-gallery-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

[id^="index_"] {
    margin: 0 !important;
    padding: 0 !important;
}

.sc-gallery-wrap {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.sc-gallery-title {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 400;
    color: var(--color-text, #fff);
    margin: 0;
    text-align: center;
}

    /* Hide title completely when empty — platform injects it even with no content,
   which creates a gap via line-height */
    .sc-gallery-title:empty {
        display: none !important;
    }

/* Stage: clip fills full width, arrows absolutely positioned over the image */
.sc-gallery-stage {
    display: block;
    position: relative;
    width: 100%;
}

/* Clip: full width, clips the track */
.sc-gallery-clip {
    width: 100%;
    overflow: hidden;
}

/* Track: row of slides, JS moves with translateX */
.sc-gallery-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    will-change: transform;
    cursor: grab;
    user-select: none;
    touch-action: pan-y; /* allow vertical scroll, JS handles horizontal */
}

    .sc-gallery-track:active {
        cursor: grabbing;
    }

/* Each slide fills the clip exactly.
   Default 100% width = correct before JS fires (no flash of wrong layout).
   JS overwrites this with exact px value at window.load. */
.sc-gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
}

/* Card */
.sc-gallery-card {
    display: block;
    border-radius: 0;
    overflow: hidden;
    background: var(--color-bg-soft, #0D0D0D);
    border: none;
    transition: box-shadow 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

/* Image — 16:9 ratio, taller so content isn't cropped */
.sc-gallery-img {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 = 9/16 = 56.25% */
    overflow: hidden;
    background: var(--color-bg-warm, #111);
}

.sc-gallery-img-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
}

.sc-gallery-card:hover .sc-gallery-img-bg {
    transform: scale(1.02);
}

/* Link badge */
.sc-gallery-link-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    border: 2px solid rgba(255,255,255,.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s, background .2s, transform .2s;
    pointer-events: none;
}

    .sc-gallery-link-btn svg {
        width: 24px;
        height: 24px;
    }

.sc-gallery-card:hover .sc-gallery-link-btn {
    transform: scale(1.1);
}

.sc-gallery-card:hover .sc-gallery-link-btn {
    opacity: 1;
    background: var(--color-primary, #22C55E);
    border-color: var(--color-primary, #22C55E);
    color: #000;
}

/* Text area — transparent so no black stripe when title/text are hidden */
.sc-gallery-info {
    padding: 16px 20px;
    background: transparent;
}

    /* Hide info block entirely when both children are display:none */
    .sc-gallery-info:empty,
    .sc-gallery-card-title[style*="display:none"] ~ .sc-gallery-card-text[style*="display:none"] {
        display: none;
    }

.sc-gallery-card-title {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #fff);
    margin: 0 0 6px;
    line-height: 1.3;
}

.sc-gallery-card-text {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 13px;
    color: var(--color-text-muted, #A1A1AA);
    margin: 0;
    line-height: 1.5;
}

/* Arrows: inside the image, vertically centered */
.sc-gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary, #22C55E);
    border: 2px solid rgba(0, 0, 0, 0.25);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background .2s, border-color .2s, opacity .2s, transform .2s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.sc-gallery-btn-prev {
    left: 16px;
}

.sc-gallery-btn-next {
    right: 16px;
}

.sc-gallery-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

.sc-gallery-btn:hover:not(:disabled) {
    background: var(--color-primary-dark, #16A34A);
    border-color: rgba(0,0,0,0.3);
    transform: translateY(-50%) scale(1.08);
}

.sc-gallery-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
    /* Keep green but dimmer so it's clear it's inactive */
    background: var(--color-primary, #22C55E);
    color: #000;
}

/* Dots */
.sc-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 16px;
}

.sc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--color-border-light, #333);
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.sc-dot-on {
    background: var(--color-primary, #22C55E);
    transform: scale(1.4);
}

/* Mobile: smaller arrows, swipe also works */
@media (max-width: 600px) {
    .sc-gallery-btn {
        width: 36px;
        height: 36px;
    }

        .sc-gallery-btn svg {
            width: 16px;
            height: 16px;
        }

    .sc-gallery-btn-prev {
        left: 10px;
    }

    .sc-gallery-btn-next {
        right: 10px;
    }

    .sc-gallery-wrap {
        padding: 20px 0 40px;
    }
}