/* ============================================================
   Center Hero Section — Mobile First
   Font: Noto Sans Hebrew
   Breakpoint: ≤1024px mobile, >1024px desktop
   ============================================================ */

/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400;500;600;700&display=swap');*/

/* ── Reset / Base ── */
.center-hero {
    /*font-family: 'Noto Sans Hebrew', sans-serif;*/ 
    direction: rtl;
    position: relative;
    width: 100%;
    background-color: #ededed;
    overflow: hidden;
}

/* ============================================================
   MOBILE  (default — up to 1024px)
   Design ref: 1125×1159 @3× → 375×386 device px
   ============================================================ */

/* ── Text block (title + breadcrumb) ── */
.center-hero__text {
    padding: 120px 27px 0;
    text-align: center;
}

.center-hero__title {
    /*font-family: 'Noto Sans Hebrew', sans-serif;*/ 
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    color: #272727;
    margin: 0;
    direction: rtl;
    text-align: center;
}

.center-hero__breadcrumb {
    /*font-family: 'Noto Sans Hebrew', sans-serif;*/ 
    font-size: 13px;
    font-weight: 400;
    color: #272727;
    direction: rtl;
    text-align: center;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.center-hero__breadcrumb a {
    color: #272727;
    text-decoration: none;
}
.center-hero__breadcrumb a:nth-child(2) {
  display: none!important;
}
.center-hero__breadcrumb a:hover {
    text-decoration: underline;
}

.center-hero__breadcrumb-sep {
    color: #272727;
    font-size: 12px;
    margin: 0 2px;
}

/* Show breadcrumb inside the dark bar on mobile */
.center-hero__text .center-hero__breadcrumb:not(.center-hero__breadcrumb--bar) {
    display: none;
}

.center-hero__breadcrumb--bar {
    display: flex;
}

/* ── Bottom bar (black strip above image) ── */
.center-hero__bar {
    height: 48px;
    background-color: #272727;
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.center-hero__bar .center-hero__breadcrumb {
    color: #f3f3f3;
    justify-content: center;
    text-align: center;
    margin: 0;
}

.center-hero__bar .center-hero__breadcrumb a,
.center-hero__bar .center-hero__breadcrumb-sep {
    color: #f3f3f3;
}

/* ── Hero image ── */
.center-hero__image-wrap {
    width: 100%;
    line-height: 0;
    aspect-ratio: 1100 / 600;
    overflow: hidden;
}

.center-hero__image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   DESKTOP  (>1024px)
   Design ref: 1920×746
   Layout:
     - Right grey panel: 191px fixed, separated by 1px #8d8d8d
     - Content area fills the rest
     - Title + breadcrumb positioned inside content area (right-aligned RTL)
     - Decorative scroller handle: 3px × 88px, anchored to separator
   ============================================================ */

@media (min-width: 1025px) {

    .center-hero {
        background-color: #f3f3f3;
        display: flex;
        flex-direction: row;   /* in RTL, row keeps the first item on the visual right */
        min-height: 746px;
        height: 746px;
        position: relative;
        overflow: hidden;
    }

    /* ── Right grey panel ── */
    .center-hero__side-panel {
        flex: 0 0 191px;
        width: 191px;
        background-color: #f3f3f3;
        border-left: 1px solid #8d8d8d;   /* left = separator from content area (RTL) */
        position: relative;
        z-index: 2;
    }

    /* ── Decorative scroller handle ── */
    .center-hero__side-panel::before {
        content: none;
    }

    /* ── Main content area (image fills this) ── */
    .center-hero__content {
        flex: 1 1 auto;
        position: relative;
        display: flex;
        flex-direction: column;
        /*overflow: hidden;*/
        background-color: #f3f3f3;
    }

    /* ── Hero image fills the content area ── */
    .center-hero__image-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
    }

    .center-hero__image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    /* ── Text overlay on top of image ── */
    .center-hero__text {
        position: relative;
        width: 100%;
        min-height: 285px;
        padding: 175px 66px 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        z-index: 3;
        direction: rtl;
        text-align: right;
    }

    .center-hero__title {
        position: relative;
        display: block;
        font-size: 56px;
        font-weight: 700;
        color: #272727;
        line-height: 1.3;
        margin: 0;
        padding: 0;
        text-align: right;
    }

    .center-hero__title::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: -68px;
        width: 3px;
        background-color: #272727;
        margin: -10px 0 -10px;
        border-radius: 2px;
    }

    .center-hero__breadcrumb {
        font-size: 14px;
        color: #f3f3f3;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
    }

    .center-hero__breadcrumb a {
        color: #f3f3f3;
    }

    .center-hero__breadcrumb-sep {
        color: #f3f3f3;
    }

    /* Hide the inline breadcrumb in the text block on desktop */
    .center-hero__text .center-hero__breadcrumb:not(.center-hero__breadcrumb--bar) {
        display: none;
    }

    /* Show the bar breadcrumb on desktop */
    .center-hero__breadcrumb--bar {
        display: flex;
    }

    /* ── Dark bar containing the breadcrumb (bottom strip before image area) ── */
    .center-hero__bar {
        position: relative;
        width: 100%;
        height: 45px;
        flex: 0 0 45px;
        background-color: #272727;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: flex-start;   /* RTL: start is the visual right */
    }

    /* Move breadcrumb into the bar on desktop */
    .center-hero__bar .center-hero__breadcrumb {
        position: static;
        width: 100%;
        justify-content: flex-start;
        text-align: right;
        padding: 0 66px;
        transform: none;
    }
}