/* ================================================================
   Voctos — Dev How We Work (Process Steps) block

   Original section: class="container pt-2.5 pb-4 overflow-hidden"
   OL: grid xl:grid-cols-3 lg:grid-cols-2 cust-counter border-b-2 border-sixth lg:border-0
   LI::before = gradient counter number; LI::after = dark bg square
   ================================================================ */

/* ── Section ──────────────────────────────────────────────────── */
.voctos-dev-howwework {
    padding-top: 10px;    /* pt-2.5 */
    padding-bottom: 16px; /* pb-4 */
    overflow: hidden;
}

/* ── Heading: text-2xl sm:text-fs-5 text-third sm:mb-7 mb-4 ──── */
.voctos-dev-howwework .dhww-heading {
    font-family: 'Unbounded', sans-serif;
    font-size: 24px;       /* text-2xl */
    font-weight: 400;
    line-height: 1.3;
    color: #0D172D;        /* text-third */
    margin: 0 0 16px;      /* mb-4 */
}
.voctos-dev-howwework .dhww-heading--empty {
    margin: 0;
}
@media (min-width: 640px) {
    .voctos-dev-howwework .dhww-heading {
        font-size: 38px;   /* sm:text-fs-5 */
        margin-bottom: 28px; /* sm:mb-7 */
    }
    .voctos-dev-howwework .dhww-heading--empty {
        margin: 0;
    }
}

/* ── Steps OL ─────────────────────────────────────────────────── */
/* grid xl:grid-cols-3 lg:grid-cols-2 gap-x-9 sm:gap-y-11 gap-y-4 */
/* cust-counter pb-7 border-b-2 border-sixth lg:border-0          */
.voctos-dev-howwework .dhww-steps {
    display: grid;
    grid-template-columns: 1fr;   /* mobile: 1 column */
    column-gap: 36px;              /* gap-x-9 */
    row-gap: 16px;                 /* gap-y-4 mobile */
    list-style: none;
    margin: 0;
    padding: 0 0 28px;             /* pb-7 */
    counter-reset: custCounter;
    border-bottom: 2px solid #D5D9E8; /* border-b-2 border-sixth */
}
@media (min-width: 640px) {
    .voctos-dev-howwework .dhww-steps {
        row-gap: 44px;             /* sm:gap-y-11 */
    }
}
@media (min-width: 1024px) {
    .voctos-dev-howwework .dhww-steps {
        grid-template-columns: repeat(2, 1fr); /* lg:grid-cols-2 */
        border-bottom: none;                    /* lg:border-0 */
    }
}
@media (min-width: 1280px) {
    .voctos-dev-howwework .dhww-steps {
        grid-template-columns: repeat(3, 1fr); /* xl:grid-cols-3 */
    }
}

/* ── Step LI ──────────────────────────────────────────────────── */
.voctos-dev-howwework .dhww-step {
    position: relative;
}

/* LI::after — dark square background (z-index: 1, behind number) */
/* after:content-[''] after:z-[1] after:absolute after:rounded-rc-5 */
/* after:left-0 after:top-0 after:w-16 after:h-16 after:bg-zinc-800 */
/* sm:after:w-24 sm:after:h-24                                        */
.voctos-dev-howwework .dhww-step::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 64px;          /* w-16 */
    height: 64px;         /* h-16 */
    border-radius: 15px;  /* rounded-rc-5 */
    background-color: #27272a; /* bg-zinc-800 */
}
@media (min-width: 640px) {
    .voctos-dev-howwework .dhww-step::after {
        width: 96px;      /* sm:w-24 */
        height: 96px;     /* sm:h-24 */
    }
}

/* LI::before — gradient counter number (z-index: 2, above dark square) */
/* before:absolute before:z-[2] before:top-0 before:left-0              */
/* before:w-16 sm:before:w-24  before:h-16 sm:before:h-24               */
/* before:rounded-rc-5                                                    */
/* before:text-transparent before:text-3xl sm:before:text-fs-4           */
/* before:text-center                                                     */
/* before:leading-[64px] sm:before:leading-[96px]                        */
/* before:bg-clip-text before:bg-lg-13                                   */
.voctos-dev-howwework .dhww-step::before {
    counter-increment: custCounter;
    content: counter(custCounter);
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 64px;          /* w-16 */
    height: 64px;         /* h-16 */
    border-radius: 15px;  /* rounded-rc-5 */
    font-size: 30px;      /* text-3xl */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    text-align: center;
    line-height: 64px;    /* leading-[64px] */
    color: transparent;   /* text-transparent → shows gradient through clip */
    background-image: linear-gradient(180deg, #AAB4CA 0.04%, #E7EAF2 100%); /* bg-lg-13 */
    -webkit-background-clip: text;
    background-clip: text;
}
@media (min-width: 640px) {
    .voctos-dev-howwework .dhww-step::before {
        width: 96px;         /* sm:w-24 */
        height: 96px;        /* sm:h-24 */
        font-size: 46px;     /* sm:text-fs-4 */
        line-height: 96px;   /* sm:leading-[96px] */
    }
}

/* ── Step icon (optional) — overlays the dark square, replaces number ─ */
/* When a step has an icon, hide the CSS counter number.
   The counter still increments (custCounter) so numbered steps keep counting. */
.voctos-dev-howwework .dhww-step--has-icon::before {
    counter-increment: custCounter;
    content: '';           /* keep incrementing, but render nothing */
}

/* Icon container: same footprint as the dark square (z above ::after) */
.voctos-dev-howwework .dhww-step__icon {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 64px;           /* matches ::after w-16 */
    height: 64px;          /* matches ::after h-16 */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.voctos-dev-howwework .dhww-step__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    /* Icons are usually dark line-art; force them white to read on the dark square.
       Works for single-colour PNG/SVG. Remove if using pre-coloured icons. */
    filter: brightness(0) invert(1);
}
@media (min-width: 640px) {
    .voctos-dev-howwework .dhww-step__icon {
        width: 96px;       /* matches ::after sm:w-24 */
        height: 96px;      /* matches ::after sm:h-24 */
    }
    .voctos-dev-howwework .dhww-step__icon img {
        width: 48px;
        height: 48px;
    }
}

/* ── Step title box ───────────────────────────────────────────── */
/* sm:py-5 py-2.5 pr-3 sm:pl-28 pl-20                             */
/* border border-[#CBCFDF] rounded-rc-5 sm:h-24 h-16 sm:mb-5 mb-4 */
.voctos-dev-howwework .dhww-step__head {
    display: flex;
    align-items: center;
    height: 64px;         /* h-16 */
    padding: 10px 12px 10px 80px;  /* py-2.5 pr-3 pl-20 */
    border: 1px solid #CBCFDF;
    border-radius: 15px;  /* rounded-rc-5 */
    margin-bottom: 16px;  /* mb-4 */
    position: relative;
    z-index: 0;           /* sits in normal flow, ::before/::after overlap visually */
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .voctos-dev-howwework .dhww-step__head {
        height: 96px;     /* sm:h-24 */
        padding: 20px 12px 20px 112px; /* sm:py-5 pr-3 sm:pl-28 */
        margin-bottom: 20px; /* sm:mb-5 */
    }
}

/* ── Step title text ──────────────────────────────────────────── */
/* overflow-hidden text-ellipsis line-clamp-2 leading-tight        */
/* font-medium whitespace-pre-wrap text-third text-lg sm:text-fs-7 */
.voctos-dev-howwework .dhww-step__title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;    /* font-medium */
    color: #0D172D;      /* text-third */
    font-size: 18px;     /* text-lg */
    white-space: normal; /* pre-wrap collapses to normal for display */
    margin: 0;
}
@media (min-width: 640px) {
    .voctos-dev-howwework .dhww-step__title {
        font-size: 22px;  /* sm:text-fs-7 */
    }
}

/* When a step has an icon, use a smaller 16px title (all viewports) */
.voctos-dev-howwework .dhww-step--has-icon .dhww-step__title {
    font-size: 16px;
}

/* ── Sub-items list ───────────────────────────────────────────── */
.voctos-dev-howwework .dhww-step__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* text-sm text-third pl-6 relative */
.voctos-dev-howwework .dhww-step__items > li {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 14px;     /* text-sm */
    line-height: 1.4;
    color: #0D172D;      /* text-third */
    padding-left: 24px;  /* pl-6 */
    position: relative;
}
/* [&:not(:last-child)]:pb-2 */
.voctos-dev-howwework .dhww-step__items > li:not(:last-child) {
    padding-bottom: 8px; /* pb-2 */
}

/* before: dot — 7×7px #252525 at left-1 (4px) top-1.5 (6px) */
.voctos-dev-howwework .dhww-step__items > li::before {
    content: '';
    position: absolute;
    left: 4px;    /* left-1 */
    top: 6px;     /* top-1.5 */
    width: 7px;
    height: 7px;
    background-color: #252525;
    border-radius: 50%;
}

/* after: vertical connector line (not last child) */
/* [&:not(:last-child)]:after:content-[''] absolute w-px bg-[#252525] */
/* after:left-[7px] after:top-4 after:bottom-0                         */
.voctos-dev-howwework .dhww-step__items > li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 7px;   /* left-[7px] */
    top: 16px;   /* top-4 */
    bottom: 0;
    width: 1px;
    background-color: #252525;
}

/* ================================================================
   Style 2 — full-width step 1 + 3-column items + sticky sidebar
   Grid: repeat(3, 1fr) — step 1 col-span-full, steps 2+ span-2,
   sidebar LI col-start-3 row-start-2 row-end-last (sticky card)
   ================================================================ */

/* overflow:hidden on the base section blocks sticky — override for Style 2 */
.voctos-dev-howwework--style-2 {
    overflow: visible;
}

/* Steps OL: single column mobile, 3-column grid desktop */
.voctos-dev-howwework--style-2 .dhww-steps {
    grid-template-columns: 1fr;
    row-gap: 16px;
    padding-bottom: 0;
    border-bottom: none;
}
@media (min-width: 1024px) {
    .voctos-dev-howwework--style-2 .dhww-steps {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 48px;
        row-gap: 44px;
    }
    /* Step 1: full width across all 3 columns */
    .voctos-dev-howwework--style-2 .dhww-step--first {
        grid-column: 1 / -1;
    }
    /* Steps 2+: span 2 columns (sidebar occupies col 3) */
    .voctos-dev-howwework--style-2 .dhww-step:not(.dhww-step--first):not(.dhww-step--sidebar) {
        grid-column: span 2;
    }
    /* Sidebar LI: column 3, rows 2 through end of last step.
       --dhww-sidebar-end is set via inline style from PHP (step count + 1) */
    .voctos-dev-howwework--style-2 .dhww-step--sidebar {
        grid-column: 3;
        grid-row: 2 / var(--dhww-sidebar-end, 99);
    }
}
/* Hide counter badge for sidebar LI (all viewports) */
.voctos-dev-howwework--style-2 .dhww-step--sidebar::before,
.voctos-dev-howwework--style-2 .dhww-step--sidebar::after {
    display: none !important;
}
/* Sidebar LI: no step head, just the card */
.voctos-dev-howwework--style-2 .dhww-step--sidebar > .dhww-step__head {
    display: none;
}

/* Items: 3 separate ULs in a CSS grid (column-fill order).
   Each UL has independent connector lines — last item per column has no line. */
.voctos-dev-howwework--style-2 .dhww-step__items-s2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 640px) {
    .voctos-dev-howwework--style-2 .dhww-step__items-s2 {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 24px;
    }
}
@media (min-width: 1024px) {
    .voctos-dev-howwework--style-2 .dhww-step__items-s2 {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 48px;
    }
}
.voctos-dev-howwework--style-2 .dhww-step__items-s2 .dhww-step__items {
    min-width: 0;
}

/* ── Sidebar card ─────────────────────────────────────────────── */
.dhww-s2-sidebar__card {
    background: #ffffff;
    border-radius: 19px;
    padding: 24px 16px;
}
@media (min-width: 1024px) {
    .dhww-s2-sidebar__card {
        padding: 32px;
        position: sticky;
        top: 16px;
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    }
}
.dhww-s2-sidebar__icon {
    display: block;
    height: auto;
    min-height: 179px;
    object-fit: contain;
    margin-bottom: 20px;
}
.dhww-s2-sidebar__title {
    font-family: 'Unbounded', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: #0D172D;
    margin: 0 0 12px;
}
.dhww-s2-sidebar__desc {
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #0D172D;
    margin: 0 0 20px;
}
.dhww-s2-sidebar__btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #9BB725;
    color: #ffffff;
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 16px 40px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.18s;
}
.dhww-s2-sidebar__btn:hover { background: #88a020; }

/* ================================================================
   Style 3 — same as Style 1 but capped at 2 columns + subtitle
   ================================================================ */

/* Keep xl from jumping to 3 columns — stay at 2 */
@media (min-width: 1024px) {
    .voctos-dev-howwework--style-3 .dhww-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1280px) {
    .voctos-dev-howwework--style-3 .dhww-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Head: allow it to grow when subtitle is present */
.voctos-dev-howwework--style-3 .dhww-step__head {
    height: auto;
    min-height: 64px;
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 640px) {
    .voctos-dev-howwework--style-3 .dhww-step__head {
        min-height: 96px;
        padding-top: 18px;
        padding-bottom: 18px;
    }
}

/* Subtitle — e.g. "1-2 weeks", "Constantly" */
.voctos-dev-howwework--style-3 .dhww-step__sub {
    margin: 4px 0 0;
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #0D172D;
    line-height: 1.3;
}