/* ============================================================
   PROCESS SECTION — zigzag layout + wielkie cyfry
   ============================================================ */
.process-section {
    background: var(--color-surface-base);
    padding: 0;
    position: relative;
    overflow: hidden;
}

.process-svg-path {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    display: block; /* now visible on mobile too */
}

.desktop-path {
    display: none;
}

.mobile-path {
    display: block;
}

@media (min-width: 1024px) {
    .desktop-path {
        display: block;
    }
    .mobile-path {
        display: none;
    }
}

.process-grid-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    position: relative;
    z-index: 1;
    padding: var(--space-16) var(--space-4);
    /* Provide mobile padding */
}

@media (min-width: 1024px) {
    .process-grid-container {
        display: grid;
        grid-template-rows: 0.375fr 1fr 1fr 1fr 0.375fr;
        gap: 0;
        min-height: 1600px;
        padding: 0;
        /* Grid height handles everything */
    }
}

.process-step-row-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (min-width: 1024px) {
    .process-step-row-title {
        justify-content: flex-start;
        padding-top: var(--space-24);
    }
}

.process-step-padding {
    display: none;
}

@media (min-width: 1024px) {
    .process-step-padding {
        display: block;
    }
}

.process-step-row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    flex-direction: column;
}

@media (min-width: 1024px) {
    .process-step-row {
        flex-direction: row;
        gap: 60px;
        /* Photo is closely bounded to text */
        justify-content: flex-start;
        /* Ensure left/right edge touching */
    }

    .process-step-row--reverse {
        flex-direction: row-reverse;
    }
}

.process-step-text {
    flex: 1;
    position: relative;
}

@media (min-width: 1024px) {
    .process-step-text {
        flex: 0 0 460px;
        /* Narrower text column */
    }
}

.process-step-num {
    font-size: clamp(100px, 15vw, 220px);
    font-weight: 200;
    color: rgba(46, 16, 101, 0.03);
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -20px;
    user-select: none;
    pointer-events: none;
    letter-spacing: -0.05em;
    z-index: -1;
}

@media (min-width: 1024px) {
    .process-step-num {
        font-size: 260px;
        left: -80px;
    }

    .process-step-row--reverse .process-step-num {
        left: auto;
        right: -80px;
    }

    .process-step-row--reverse .process-step-text {
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
}

.process-step-inner {
    position: relative;
}

.process-step-title {
    font-size: clamp(var(--text-xl), 2.8vw, var(--text-3xl));
    font-weight: var(--font-weight-black);
    color: var(--color-primary);
    margin-bottom: var(--space-6);
    text-transform: none;
    letter-spacing: -0.01em;
}

.process-step-desc {
    font-size: var(--text-lg);
    color: var(--color-on-surface-var);
    line-height: 1.7;
    max-width: 500px;
    font-weight: var(--font-weight-medium);
}

.process-step-image {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (min-width: 1024px) {
    .process-step-image {
        flex: 0 0 380px;
        /* Make photo smaller */
        margin: 0;
        /* Remove auto space pushing */
    }
}

.process-step-image-wrapper {
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.15);
}

.process-step-image-wrapper img,
.process-step-image-wrapper .placeholder-box {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-xl);
    display: block;
}

.process-step-image-wrapper .placeholder-box {
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   SVG ANIMATIONS (ZIGZAG)
   ============================================================ */
@keyframes run-train {
    0% {
        stroke-dashoffset: 1000;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.train {
    stroke-dasharray: 4.5, 4.5, 4.5, 4.5, 4.5, 977.5;
    animation: run-train 12s linear infinite;
}

.train-2 {
    animation-delay: -6s;
}

.elec-wave {
    stroke: var(--color-primary);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    transform-origin: 0 0;
    opacity: 0;
    fill: none;
    animation: electro-pulse 6s infinite;
}

@keyframes electro-pulse {
    0% {
        transform: scale(0);
        opacity: 1;
        stroke-width: 2.5px;
    }

    25% {
        transform: scale(1.8);
        opacity: 0;
        stroke-width: 0.8px;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
        stroke-width: 0px;
    }
}

.pw-1-1 {
    animation-delay: 1.6s;
}

.pw-1-2 {
    animation-delay: 1.9s;
}

.pw-1-3 {
    animation-delay: 2.2s;
}

.pw-2-1 {
    animation-delay: 5.3s;
}

.pw-2-2 {
    animation-delay: 5.6s;
}

.pw-2-3 {
    animation-delay: 5.9s;
}

.pw-3-1 {
    animation-delay: 3.0s;
}

.pw-3-2 {
    animation-delay: 3.3s;
}

.pw-3-3 {
    animation-delay: 3.6s;
}