/* ===========================================================================
   Block: service-hero — block-specific styles
   التصميم أساساً Tailwind من main.css؛ الملف ده لأي تعديلات خاصة بالبلوك.
   =========================================================================== */

/* شريط الـbreadcrumb: إخفاء scrollbar مع إبقاء التمرير على الموبايل */
.voctos-service-hero nav ul::-webkit-scrollbar { height: 0; background: transparent; }

/* ── Style 2 (light) & Style 3 (dark navy) — shared layout ───── */

.voctos-service-hero--style-2,
.voctos-service-hero--style-3 {
    position: relative;
}

/* Content above the dark ::before band */
.voctos-service-hero--style-2 .container,
.voctos-service-hero--style-3 .container {
    position: relative;
    z-index: 1;
}

/* Highlighted word in heading */
.voctos-service-hero--style-2 .sh-highlight,
.voctos-service-hero--style-3 .sh-highlight {
    color: #F13C77;
}

/* CTA button: #7616F4 (exact from original) */
.voctos-service-hero--style-2 .sh2-cta,
.voctos-service-hero--style-3 .sh2-cta {
    background-color: #7616F4;
    transition: background-color 0.18s;
}
.voctos-service-hero--style-2 .sh2-cta:hover,
.voctos-service-hero--style-3 .sh2-cta:hover {
    background-color: #6010d4;
}

/*
 * Feature card — original layout:
 * li: padding 28px 16px, grid-cols-5, gap-x 20px, gap-y 14px, auto-rows max
 * icon: 44×44 (col 1) / title: 16px/20px w500 self-center (col 2-5)
 * desc: 13px/16px #0D172D (full width)
 */
.voctos-service-hero--style-2 .sh2-feat,
.voctos-service-hero--style-3 .sh2-feat {
    padding: 28px 16px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: max-content;
    column-gap: 20px;
    row-gap: 14px;
}
.voctos-service-hero--style-2 .sh2-feat-icon,
.voctos-service-hero--style-3 .sh2-feat-icon {
    grid-column: span 1 / span 1;
    width: 44px;
    height: 44px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.voctos-service-hero--style-2 .sh2-feat-title,
.voctos-service-hero--style-3 .sh2-feat-title {
    grid-column: span 4 / span 4;
    align-self: center;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: #0D172D;
    text-align: left;
    white-space: pre-line;
}
.voctos-service-hero--style-2 .sh2-feat-desc,
.voctos-service-hero--style-3 .sh2-feat-desc {
    grid-column: 1 / -1;
    font-size: 13px;
    line-height: 16px;
    color: #0D172D;
}

/* ── Style 2 — background (light) ────────────────────────────── */
/*
 *  - Section bg (lg): linear-gradient(#fff 25% → #EFF0F4 100%)
 *  - Section bg (mobile): rgba(255,255,255,.30) 25% → #F5F5F8 100%
 *  - ::before dark band (h 134px) behind the transparent header:
 *    rgba(0,0,0,.5) 10% → rgba(55,65,81,.5) 50% → rgba(75,85,99,0) 100%
 */
.voctos-service-hero--style-2 {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.30) 25%, #f5f5f8 100%);
}
@media (min-width: 1024px) {
    .voctos-service-hero--style-2 {
        background: linear-gradient(to bottom, #ffffff 25%, #eff0f4 100%);
    }
}
.voctos-service-hero--style-2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 134px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 10%, rgba(55, 65, 81, 0.5) 50%, rgba(75, 85, 99, 0) 100%);
}

/* ── Style 3 — background (dark navy, exact from original) ───── */
/*
 *  - Section bg: linear-gradient(#0D172D 25% → #EFF0F4 100%) — all breakpoints
 *  - ::before dark band (h 128px) behind the transparent header:
 *    rgba(0,0,0,.4) 10% → rgba(55,65,81,.1) 50% → rgba(75,85,99,0) 100%
 */
.voctos-service-hero--style-3 {
    background: linear-gradient(to bottom, #0d172d 25%, #eff0f4 100%);
}
.voctos-service-hero--style-3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 128px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 10%, rgba(55, 65, 81, 0.1) 50%, rgba(75, 85, 99, 0) 100%);
}

/* ── Feature cards: horizontal scroll on mobile & tablet only (below lg/1024px).
      The main hero box is untouched; desktop keeps its original 2×2 grid. ── */
@media (max-width: 1023px) {
    .voctos-service-hero .sh-feat-list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 14px;
        scroll-snap-type: x mandatory;
    }
    .voctos-service-hero .sh-feat-list > li {
        flex: 0 0 auto;
        width: 280px;
        max-width: 85%;
        scroll-snap-align: center;
    }
}