/* Process Steps — Syngenic-inspired design */

.p3-process {
    position: relative;
}

@media (min-width: 1200px) {
    .p3-process {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

.p3-process .p3-process-subtitle {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #0b0620;
    margin-bottom: 8px;
}

.p3-process .p3-process-title {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: #0b0620;
    margin-bottom: 12px;
}

.p3-process .p3-process-desc {
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--wp--preset--spacing--50, 3rem);
    color: #475569;
    font-size: 16px;
    line-height: 1.7;
}

/* Step cards grid */
.p3-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    position: relative;
    align-items: start;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* Break wp:html out of constrained layout */
.p3-process .wp-block-html {
    width: 100%;
    max-width: none;
}

/* Individual step */
.p3-step {
    position: relative;
    text-align: center;
    padding: 1.5rem 1rem 2rem;
}

/* Step number badge — sits on top-right corner of icon */
.p3-step-number {
    position: absolute;
    top: calc(1.5rem - 12px);
    left: calc(50% + 33px);
    background: #1e293b;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    z-index: 2;
    line-height: 1;
}

/* Icon box */
.p3-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #00851a, #167b35);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(11, 98, 0, 0.25);
    position: relative;
}

.p3-step-icon svg {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Arrow connectors between steps */
.p3-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(1.5rem + 25px);
    width: 6.5rem;
    height: 65px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 1;
    opacity: 0.35;
    right: -4.5rem;
}

/* Step 1→2: right2.svg rotated +90° */
.p3-step:nth-child(1)::after {
    background-image: url("data:image/svg+xml,%3Csvg fill='%231e293b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M 10.488281 1.023438 L 9.78125 1.726563 L 12.054688 4 L 10.914063 4 C 6.011719 4 2.03125 7.984375 2.03125 12.886719 L 2.03125 14 L 3.03125 14 L 3.03125 12.886719 C 3.03125 8.527344 6.554688 5 10.914063 5 L 12.054688 5 L 9.78125 7.273438 L 10.488281 7.976563 L 13.96875 4.5 Z M 12.53125 4.476563 L 12.554688 4.5 L 12.53125 4.523438 Z'/%3E%3C/svg%3E");
    transform: rotate(45deg);
}

/* Step 2→3: right3.svg rotated -90° */
.p3-step:nth-child(2)::after {
    background-image: url("data:image/svg+xml,%3Csvg fill='%231e293b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M 2.011719 1 L 2.011719 2.113281 C 2.011719 7.015625 5.996094 11 10.898438 11 L 12.035156 11 L 9.765625 13.269531 L 10.472656 13.980469 L 13.953125 10.5 L 10.472656 7.023438 L 9.765625 7.726563 L 12.035156 10 L 10.898438 10 C 6.539063 10 3.011719 6.472656 3.011719 2.113281 L 3.011719 1 Z M 12.511719 10.472656 L 12.535156 10.5 L 12.511719 10.527344 Z'/%3E%3C/svg%3E");
    transform: rotate(-45deg);
}

/* Step 3→4: right2.svg rotated +90° */
.p3-step:nth-child(3)::after {
    background-image: url("data:image/svg+xml,%3Csvg fill='%231e293b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M 10.488281 1.023438 L 9.78125 1.726563 L 12.054688 4 L 10.914063 4 C 6.011719 4 2.03125 7.984375 2.03125 12.886719 L 2.03125 14 L 3.03125 14 L 3.03125 12.886719 C 3.03125 8.527344 6.554688 5 10.914063 5 L 12.054688 5 L 9.78125 7.273438 L 10.488281 7.976563 L 13.96875 4.5 Z M 12.53125 4.476563 L 12.554688 4.5 L 12.53125 4.523438 Z'/%3E%3C/svg%3E");
    transform: rotate(45deg);
}

/* Desktop: offset steps 2 and 3 downward for visual rhythm */
@media (min-width: 961px) {
    .p3-step:nth-child(2),
    .p3-step:nth-child(4) {
        margin-top: 3.5rem;
    }
}

/* Step title */
.p3-step-title {
    font-size: 17px;
    font-weight: 700;
    color: #0b0620;
    margin-bottom: 8px;
}

/* Step description */
.p3-step-text {
    font-size: 15px;
    line-height: 1.65;
    color: #475569;
    margin: 0 auto;
}

/* Scroll-reveal animation */
.p3-process[data-animate] .p3-step {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.p3-process[data-animate] .p3-step.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.p3-process[data-animate] .p3-step:nth-child(2) { transition-delay: 0.12s; }
.p3-process[data-animate] .p3-step:nth-child(3) { transition-delay: 0.24s; }
.p3-process[data-animate] .p3-step:nth-child(4) { transition-delay: 0.36s; }

/* Responsive */
@media (max-width: 960px) {
    .p3-steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 2rem;
    }
    /* Tablet: only show arrows 1→2 and 3→4 */
    .p3-step:nth-child(2)::after {
        display: none !important;
    }
}

@media (max-width: 600px) {
    /* Mobile: hide all arrows */
    .p3-step::after {
        display: none !important;
    }
    .p3-steps-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 320px;
        margin: 0 auto;
    }
    .p3-process .p3-process-title {
        font-size: 28px;
    }
}