/**
 * Work Process Section — Pure CSS
 */

.sh-process { padding: 6rem 0; background: var(--pi-bg-card, #ffffff); position: relative; overflow: hidden; }

/* Decorative */
.sh-process__bg-grid { position: absolute; inset: 0; z-index: 0; opacity: 0.05; pointer-events: none; background-image: linear-gradient(#000 1.5px, transparent 1.5px), linear-gradient(90deg, #000 1.5px, transparent 1.5px); background-size: 40px 40px; }
.sh-process__bg-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sh-process__deco { position: absolute; font-family: monospace; opacity: 0.2; color: var(--pi-border, #e2e8f0); }
.sh-process__deco--tl { top: 2.5rem; left: 2.5rem; font-size: 3.75rem; }
.sh-process__deco--br { bottom: 5rem; right: 5rem; font-size: 5rem; }
.sh-process__deco-circle { position: absolute; top: 50%; left: 5rem; width: 8rem; height: 8rem; border: 1px dashed var(--pi-border, #e2e8f0); border-radius: 50%; opacity: 0.2; }
.sh-process__deco-line { position: absolute; bottom: 2.5rem; left: 50%; width: 16rem; height: 1px; background: var(--pi-border, #e2e8f0); transform: translateX(-50%); }

/* Container */
.sh-process__container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 10; }

/* Header */
.sh-process__header { text-align: center; max-width: 56rem; margin: 0 auto 5rem; }
.sh-process__badge { display: inline-block; padding: 0.5rem 1.25rem; background: color-mix(in srgb, var(--pi-primary, #007d3d) 10%, transparent); color: var(--pi-primary, #007d3d); font-weight: 700; font-size: 0.875rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; border: 1px solid color-mix(in srgb, var(--pi-primary, #007d3d) 20%, transparent); }
.sh-process__title { font-size: 1.875rem; font-weight: 900; color: var(--pi-text, #1e293b); margin: 0 0 1.5rem; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.025em; }
@media (min-width: 768px) { .sh-process__title { font-size: 3.75rem; } }
.sh-process__title-accent { background: linear-gradient(to right, var(--pi-primary, #007d3d), #16a34a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sh-process__title-bar { width: 6rem; height: 0.375rem; background: linear-gradient(to right, var(--pi-primary, #007d3d), #00a84d); margin: 0 auto 2rem; border-radius: 9999px; }
.sh-process__desc { color: var(--pi-text-2, #475569); font-size: 1.125rem; font-weight: 500; max-width: 42rem; margin: 0 auto; line-height: 1.625; }
@media (min-width: 768px) { .sh-process__desc { font-size: 1.25rem; } }
.sh-process__desc strong { color: var(--pi-text, #1e293b); }

/* Steps Grid */
.sh-process__steps { display: grid; grid-template-columns: 1fr; gap: 1rem; position: relative; z-index: 10; }
@media (min-width: 1024px) { .sh-process__steps { grid-template-columns: repeat(5, 1fr); } }

/* Step Item */
.sh-process__step { position: relative; display: flex; flex-direction: row; align-items: flex-start; text-align: left; gap: 1rem; }
@media (min-width: 1024px) { .sh-process__step { flex-direction: column; align-items: center; text-align: center; gap: 0; } }

/* Mobile Connector */
.sh-process__mobile-line { position: absolute; top: 4rem; bottom: -2rem; left: 2rem; width: 1px; border-left: 2px dashed var(--pi-border, #e2e8f0); z-index: 0; }
@media (min-width: 1024px) { .sh-process__mobile-line { display: none; } }

/* Icon Circle */
.sh-process__icon-circle { width: 4rem; height: 4rem; border-radius: 50%; background: var(--pi-bg-card, #ffffff); border: 4px solid var(--pi-bg-alt, #f3f4f6); box-shadow: 0 10px 30px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 20; transition: all 0.7s ease; }
@media (min-width: 1024px) { .sh-process__icon-circle { width: 6rem; height: 6rem; margin-bottom: 2rem; } }
.sh-process__step:hover .sh-process__icon-circle { transform: scale(1.1); border-color: color-mix(in srgb, var(--pi-primary, #007d3d) 20%, transparent); box-shadow: 0 20px 40px rgba(0,128,96,0.15); }

.sh-process__number { position: absolute; top: -0.5rem; right: -0.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--pi-primary, #007d3d); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.625rem; box-shadow: 0 2px 6px rgba(0,0,0,0.15); border: 2px solid #fff; transition: transform 0.3s; }
@media (min-width: 1024px) { .sh-process__number { width: 2rem; height: 2rem; font-size: 0.75rem; } }
.sh-process__step:hover .sh-process__number { transform: scale(1.1); }

.sh-process__icon-svg { width: 2rem; height: 2rem; color: var(--pi-text-muted, #64748b); transition: color 0.5s; }
@media (min-width: 1024px) { .sh-process__icon-svg { width: 2.5rem; height: 2.5rem; } }
.sh-process__step:hover .sh-process__icon-svg { color: var(--pi-primary, #007d3d); }

/* Desktop connectors */
.sh-process__connector-line, .sh-process__connector-dot { display: none; }
@media (min-width: 1024px) {
    .sh-process__connector-line { display: block; position: absolute; width: 1px; height: 2rem; border-left: 1px dashed color-mix(in srgb, var(--pi-primary, #007d3d) 50%, transparent); bottom: -2rem; left: 50%; transform: translateX(-50%); }
    .sh-process__connector-dot { display: block; position: absolute; width: 0.5rem; height: 0.5rem; background: color-mix(in srgb, var(--pi-primary, #007d3d) 50%, transparent); border-radius: 50%; bottom: -3rem; left: 50%; transform: translateX(-50%); transition: transform 0.7s; }
    .sh-process__step:hover .sh-process__connector-dot { transform: translateX(-50%) translateY(0.5rem); }
}

/* Card */
.sh-process__card { background: var(--pi-bg-card, #ffffff); padding: 1.5rem 1.25rem 1rem; border-radius: var(--pi-radius, 0.75rem); border: 1px solid var(--pi-border, #e2e8f0); box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: all 0.3s ease; flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
@media (min-width: 1024px) { .sh-process__card { padding: 2rem 1.5rem 1.5rem; width: 100%; max-width: 16rem; margin-top: 1rem; } }
.sh-process__step:hover .sh-process__card { transform: translateY(-0.25rem); box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: color-mix(in srgb, var(--pi-primary, #007d3d) 50%, transparent); }
@media (min-width: 1024px) { .sh-process__step:hover .sh-process__card { transform: translateY(-0.5rem); } }

/* Card corners */
.sh-process__card-corner { position: absolute; width: 0.75rem; height: 0.75rem; }
.sh-process__card-corner--tl { top: 0; left: 0; border-top: 2px solid color-mix(in srgb, var(--pi-primary, #007d3d) 30%, transparent); border-left: 2px solid color-mix(in srgb, var(--pi-primary, #007d3d) 30%, transparent); }
.sh-process__card-corner--tr { top: 0; right: 0; border-top: 2px solid color-mix(in srgb, var(--pi-primary, #007d3d) 30%, transparent); border-right: 2px solid color-mix(in srgb, var(--pi-primary, #007d3d) 30%, transparent); }
.sh-process__card-corner--bl { bottom: 0; left: 0; border-bottom: 2px solid color-mix(in srgb, var(--pi-primary, #007d3d) 30%, transparent); border-left: 2px solid color-mix(in srgb, var(--pi-primary, #007d3d) 30%, transparent); }
.sh-process__card-corner--br { bottom: 0; right: 0; border-bottom: 2px solid color-mix(in srgb, var(--pi-primary, #007d3d) 30%, transparent); border-right: 2px solid color-mix(in srgb, var(--pi-primary, #007d3d) 30%, transparent); }

.sh-process__card-title { font-weight: 700; font-size: 0.75rem; color: var(--pi-text, #1e293b); margin: 0 0 0.25rem; text-transform: uppercase; letter-spacing: 0.025em; position: relative; z-index: 10; transition: color 0.3s; }
@media (min-width: 1024px) { .sh-process__card-title { font-size: 0.875rem; margin-bottom: 0.5rem; } }
.sh-process__step:hover .sh-process__card-title { color: var(--pi-primary, #007d3d); }

.sh-process__card-desc { color: var(--pi-text-3, #94a3b8); font-size: 0.75rem; line-height: 1.625; margin: 0; position: relative; z-index: 10; }

/* Dark Mode */
.dark .sh-process { background: var(--pi-bg-card, #1e293b); }
.dark .sh-process__title { color: var(--pi-text, #f1f5f9); }
.dark .sh-process__desc { color: var(--pi-text-2, #e2e8f0); }
.dark .sh-process__desc strong { color: var(--pi-text, #f1f5f9); }
.dark .sh-process__icon-circle { background: var(--pi-bg-card, #1e293b); border-color: var(--pi-border, #334155); }
.dark .sh-process__card { background: var(--pi-bg-card, #1e293b); border-color: var(--pi-border, #334155); }
.dark .sh-process__card-title { color: var(--pi-text, #f1f5f9); }