/* ============================================================
   My Studio Widgets — GC Steps & Diagram
   Diagram (left, sticky) + Journey steps (right, self-scrolling)
   ============================================================ */

.gc-steps-diagram {
    background: #ffffff;
    overflow: hidden;
}

/* ── Two-column layout ── */
.gc-sd-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    height: 100vh;
}

/* ── LEFT — diagram, sticky and centred ── */
.gc-sd-left {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-right: 1px solid rgba(184,149,58,0.15);
    background: rgba(184,149,58,0.02);
}

.gc-sd-left .gc-pillars-diagram {
    padding: 1.5rem 1rem 1rem;
    border-radius: 0;
    background: transparent;
    width: 100%;
}

.gc-sd-left .gc-pd-diagram-wrap {
    width: min(500px, 92%);
}

.gc-sd-left .gc-pd-header {
    margin-bottom: 0.8rem;
}

.gc-sd-left .gc-pd-heading {
    font-size: clamp(1.6rem, 2.2vw, 2.4rem);
    margin-bottom: 0;
}

.gc-sd-left .gc-pd-body {
    display: none;
}

/* ── RIGHT — steps panel self-scrolls ── */
.gc-sd-right {
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* thin gold scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(184,149,58,0.35) transparent;
}

.gc-sd-right::-webkit-scrollbar        { width: 4px; }
.gc-sd-right::-webkit-scrollbar-track  { background: transparent; }
.gc-sd-right::-webkit-scrollbar-thumb  { background: rgba(184,149,58,0.35); border-radius: 4px; }

.gc-sd-right .gc-experience-steps {
    background: transparent;
    overflow: visible;
}

.gc-sd-right .gc-exs-steps-section {
    padding: 5rem 3.5rem 5rem 3rem;
}

/* ── Step hover highlight ── */
.gc-sd-right .gc-exs-step {
    border-radius: 10px;
    padding-right: 1.5rem;
    transition: background 0.35s ease;
}

.gc-sd-right .gc-exs-step:hover {
    background: linear-gradient(
        90deg,
        rgba(184,149,58,0.09) 0%,
        rgba(184,149,58,0.04) 40%,
        transparent 85%
    );
}

.gc-sd-right .gc-exs-step:hover .gc-exs-step-title {
    color: var(--gc-exs-gold);
    transition: color 0.3s ease;
}

/* Editor visibility fixes */
.elementor-editor-active .gc-steps-diagram [data-gc-exs-reveal] {
    opacity: 1;
    transform: none;
}

.elementor-editor-active .gc-steps-diagram [data-gc-pd-reveal] {
    opacity: 1;
    transform: none;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .gc-sd-layout {
        grid-template-columns: 1fr 1fr;
    }

    .gc-sd-left .gc-pd-diagram-wrap {
        width: min(440px, 94%);
    }
}

@media (max-width: 860px) {
    .gc-sd-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .gc-sd-left {
        position: relative;
        height: auto;
        padding: 3rem 1rem 2rem;
        border-right: none;
        border-bottom: 1px solid rgba(184,149,58,0.15);
    }

    .gc-sd-left .gc-pd-diagram-wrap {
        width: min(480px, 94%);
    }

    .gc-sd-right {
        height: auto;
        overflow-y: visible;
    }

    .gc-sd-right .gc-exs-steps-section {
        padding: 4rem 2rem;
    }
}

@media (max-width: 520px) {
    .gc-sd-right .gc-exs-steps-section {
        padding: 3rem 1.2rem;
    }
}