/* ============================================================
   TransLog v2.9 — Process Steps timeline
   Drop at: public/assets/css/process.css
   ============================================================ */

.process-section {
    background:
        radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.06) 1px, transparent 0) 0 0 / 18px 18px,
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 80px 0;
}
.process-header {
    text-align: center;
    margin-bottom: 56px;
}
.process-eyebrow {
    display: inline-block;
    color: #f59e0b;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.process-title {
    margin: 0;
    font-size: 2.2rem;
    color: #0B1D3A;
    font-weight: 700;
}

/* Timeline grid: each step is a column. Connector lines are drawn via
   pseudo-elements so they automatically stretch between circles. */
.process-timeline {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(var(--cols, 5), 1fr);
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 8px;
}
/* set --cols based on data-count up to 5 */
.process-timeline[data-count="1"] { --cols: 1; }
.process-timeline[data-count="2"] { --cols: 2; }
.process-timeline[data-count="3"] { --cols: 3; }
.process-timeline[data-count="4"] { --cols: 4; }
.process-timeline[data-count="5"] { --cols: 5; }
.process-timeline[data-count="6"] { --cols: 6; }

.process-step {
    text-align: center;
    position: relative;
    padding-top: 16px;
}

/* The circle itself */
.process-circle {
    position: relative;
    width: 110px; height: 110px;
    margin: 0 auto 18px;
    background: #ffffff;
    border-radius: 50%;
    border: 2px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e3a8a;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    transition: background 0.4s, border-color 0.4s, transform 0.4s, box-shadow 0.4s;
    z-index: 2;
}
.process-circle .process-icon {
    width: 50px; height: 50px;
    transition: transform 0.5s, color 0.4s;
    transform-style: preserve-3d;
}
.process-circle .process-icon svg {
    width: 100%; height: 100%;
    display: block;
}

/* Step number badge */
.process-step-num {
    position: absolute;
    top: -2px; right: -4px;
    width: 32px; height: 32px;
    background: #1e3a8a;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.35);
    transition: background 0.4s, transform 0.3s;
    z-index: 3;
}

/* Title + description */
.process-step-title {
    font-size: 1.05rem;
    color: #0B1D3A;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
}
.process-step-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
    padding: 0 8px;
}

/* ============================================================
   DOTTED CONNECTOR between circles
   - drawn between circle and the next one using a pseudo-element
   - hidden on the last step
   ============================================================ */
.process-step:not(:last-child) .process-circle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 6px);
    width: calc(100vw / var(--cols, 5) - 116px);  /* approx column gap */
    max-width: 220px;
    height: 30px;
    transform: translateY(-30%);
    background-image: radial-gradient(circle, #94a3b8 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    background-repeat: repeat-x;
    background-position: 0 50%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
}

/* ============================================================
   HOVER — circle "fills" with brand blue, icon flips to white
   ============================================================ */
.process-step:hover .process-circle,
.process-step.is-active .process-circle {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    border: 2px solid #1e3a8a;
    border-style: solid;
    color: #ffffff;
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 12px 28px rgba(30, 58, 138, 0.32);
}
.process-step:hover .process-icon,
.process-step.is-active .process-icon {
    /* small spin/flip on hover for nice feedback */
    transform: rotateY(360deg);
    color: #ffffff;
}
.process-step:hover .process-step-num,
.process-step.is-active .process-step-num {
    background: #f59e0b;
    color: #0B1D3A;
    transform: scale(1.05);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .process-timeline { grid-template-columns: repeat(3, 1fr); }
    .process-timeline[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
    /* hide horizontal connector on wrapped layout */
    .process-step .process-circle::after { display: none; }
}
@media (max-width: 720px) {
    .process-timeline { grid-template-columns: repeat(2, 1fr); }
    .process-title { font-size: 1.6rem; }
    .process-section { padding: 56px 0; }
}
@media (max-width: 480px) {
    .process-timeline { grid-template-columns: 1fr; gap: 36px; }
    .process-circle { width: 96px; height: 96px; }
    .process-circle .process-icon { width: 42px; height: 42px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .process-step:hover .process-icon { transform: none; }
    .process-step:hover .process-circle { transform: none; }
}

/* ============================================================
   ADMIN — order badge in the steps list
   ============================================================ */
.step-order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: #1e3a8a;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.82rem;
}