/**
 * Zamseed Process Steps Widget
 *
 * @package Zamseed
 * @since 1.0.0
 */

/* ==========================================================================
   Wrapper
   ========================================================================== */

/* Own measure rather than a percentage width on the widget, so the section
   lands on the frame's 1200px container (Figma 11096:35668) at any parent
   width and keeps a gutter below 1240. */
.zs-process-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
    width: min(var(--zs-container-max, 1200px), calc(100% - var(--zs-container-padding, 20px) * 2));
    margin-inline: auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

.zs-process-steps__header {
    display: flex;
    flex-direction: column;
    align-items: var(--zs-header-items, center);
    gap: 16px;
    max-width: 740px;
    margin-left: var(--zs-header-margin-left, auto);
    margin-right: var(--zs-header-margin-right, auto);
    text-align: var(--zs-header-text-align, center);
    width: 100%;
}

.zs-process-steps__eyebrow {
    display: block;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--zs-accent, #c48c33);
}

.zs-process-steps__title {
    margin: 0;
    /* 630 inside the 740 header, per Figma 11096:35673. The break after
       "stage" is a consequence of this measure, not a hard-coded <br>. */
    max-width: 630px;
    margin-inline: auto;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.083;
    color: var(--zs-primary, #2d5a27);
}

.zs-process-steps__description {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

/* ==========================================================================
   Steps Row
   ========================================================================== */

.zs-process-steps__row {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

/* ==========================================================================
   Individual Step
   ========================================================================== */

.zs-process-steps__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
    min-width: 0;
    text-align: center;
}

.zs-process-steps__step-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: center;
}

.zs-process-steps__step-title {
    /* Now a real heading element (h3 under an h2 section title) rather than a
       <div>, so the browser's default heading margins have to be reset here to
       keep the 24px/14px step rhythm unchanged. */
    margin: 0 0 6px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--zs-primary, #2d5a27);
}

.zs-process-steps__step-desc {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--zs-muted, #555555);
}

/* ==========================================================================
   Badge
   ========================================================================== */

.zs-process-steps__badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 26px;
    background-color: var(--zs-primary, #2d5a27);
}

.zs-process-steps__badge-ring {
    position: absolute;
    inset: -7px;
    border-radius: 33px;
    border: 1px solid rgba(45, 90, 39, 0.28);
    pointer-events: none;
}

.zs-process-steps__badge-number {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

/* ==========================================================================
   Connector
   ========================================================================== */

.zs-process-steps__connector {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 26px;
    flex: 0 0 70px;
    width: 70px;
}

.zs-process-steps__connector-line {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.08);
    transform-origin: left center;
}

.zs-process-steps.zs-reveal-armed .zs-process-steps__connector-line {
    transform: scaleX(0);
}

.zs-process-steps.zs-revealed .zs-process-steps__connector-line {
    animation: zs-process-connector-draw-x 620ms var(--zs-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)) 100ms both;
}

.zs-process-steps__connector-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    color: rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Breakpoints track Elementor's default tiers (tablet <= 1024, mobile <= 767)
   so these rules and the 12 responsive control values switch on the same
   pixel. The 768px block in particular flipped the connector axis one pixel
   before Elementor's mobile control values took effect. */
@media (max-width: 1024px) {
    .zs-process-steps__title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .zs-process-steps__title {
        font-size: 28px;
    }

    .zs-process-steps__row {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .zs-process-steps__step {
        flex: unset;
        width: 100%;
        max-width: 320px;
    }

    .zs-process-steps__connector {
        flex: unset;
        width: 2px;
        height: 40px;
        padding-top: 0;
        align-items: center;
    }

    .zs-process-steps__connector-line {
        width: 2px;
        height: 100%;
        transform-origin: center top;
    }

    .zs-process-steps.zs-reveal-armed .zs-process-steps__connector-line {
        transform: scaleY(0);
    }

    .zs-process-steps.zs-revealed .zs-process-steps__connector-line {
        animation-name: zs-process-connector-draw-y;
    }

    .zs-process-steps__connector-arrow {
        display: none;
    }
}

@keyframes zs-process-connector-draw-x {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes zs-process-connector-draw-y {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .zs-process-steps__connector-line {
        animation: none !important;
        transform: none !important;
    }
}

/* Empty state
   ------------------------------------------------------------------------
   Published only when the Empty State Message control is non-blank, so an
   empty step list reads as deliberate rather than collapsing to a gap.
   Matches the shared empty-state treatment used by the blog-grid, events,
   resources, faq and team widgets. */
.zs-process-steps__empty {
    margin: 0 auto;
    max-width: 640px;
    padding: 28px 24px;
    border: 1px dashed var(--zs-border, #e4e4e4);
    border-radius: 16px;
    background: var(--zs-surface-muted, #fdfcf9);
    text-align: center;
}

.zs-process-steps__empty p {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}