/* ============================================================
   Center Property ID 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');*/

/* ── CSS Custom Properties ── */
.center-property-id {
    --cpid-bg:                  #ededed;
    --cpid-text:                #f3f3f3;
    --cpid-card-bg:             #282828;
    --cpid-badge-border-top:    #fdfdfd;
    --cpid-badge-border-bottom: #8a8a8a;
    --cpid-side-width:          191px;
    --cpid-side-border:         #8d8d8d;

    width: 100%;
    direction: rtl;
    /*font-family: 'Noto Sans Hebrew', sans-serif;*/ 
    background-color: var(--cpid-bg);
}

/* ============================================================
   MOBILE  (default — up to 1024px)
   ============================================================ */

/* Side panel: hidden on mobile */
.center-property-id__side-panel {
    display: none;
}

/* Content fills full width on mobile */
.center-property-id__content {
    width: 100%;
}

/* Text block */
.center-property-id__inner {
    /*padding: 86px 20px 32px;*/
    padding: 36px 20px 32px;
    box-sizing: border-box;
}


.center-property-id__description {
    margin: 22px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.68;
    color: #4f4f4f;
}

/* ── Cards wrap ── */
.center-property-id__cards-wrap {
    padding: 24px 20px 42px;
    box-sizing: border-box;
}

/* ── Cards grid: 3 columns × 2 rows on mobile ── */
.center-property-id__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 1.5%;
    align-items: stretch;
}

/* ── Each card ── */
.center-property-id__card {
    position: relative;
    aspect-ratio: 320 / 500;
    background-color: var(--cpid-card-bg);
    border-radius: 10px;
    padding: 24% 14% 15%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Card bg image: hidden on mobile */
.center-property-id__card-bg {
    display: none;
}

/* Card inner layout */
.center-property-id__card-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    text-align: right;
    width: 100%;
    height: 100%;
}

.center-property-id__card-top {
    margin: 0;
    /* 19px at 375px → 34.2px at 1000px (×1.8) */
    font-size: clamp(19px, calc(9.88px + 2.432vw), 34.2px);
    font-weight: 700;
    line-height: 1.1;
    color: #a6a5a5;
}

.center-property-id__card-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 9px;
    width: 100%;
}

.center-property-id__card-bottom img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.center-property-id__card-label {
    margin: 0;
    /* 13px at 375px → 23.4px at 1000px (×1.8) */
    font-size: clamp(13px, calc(6.76px + 1.664vw), 23.4px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--cpid-text);
}

.center-property-id__card-extra {
    display: none;
}

/* ============================================================
   DESKTOP  (>1024px)
   Layout: RTL flex-row — side panel (right) + content area (rest)
   ============================================================ */

@media (min-width: 1025px) {

    /* ── Section: horizontal flex ── */
    .center-property-id {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        min-height: 700px;
    }

    /* ── Right side panel ── */
    .center-property-id__side-panel {
        display: block;
        flex: 0 0 var(--cpid-side-width);
        width: var(--cpid-side-width);
        background-color: var(--cpid-bg);
        border-left: 1px solid var(--cpid-side-border);
        position: relative;
    }

    /* [ 02 ] label */
    .center-property-id__section-num {
        position: absolute;
        top: 88px;
        left: 0;
        width: 100%;
        /*font-family: 'Noto Sans Hebrew', sans-serif;*/
        font-size: 22px;
        font-weight: 500;
        color: #949494;
        white-space: nowrap;
        letter-spacing: 0.04em;
        text-align: center;
    }

    .center-property-id__section-num::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -2px;   /* sits on the side-panel separator line */
        width: 3px;
        background-color: #282828;
        margin: -20px 0; /* outer margin like hero title marker */
        border-radius: 2px;
    }

    /* Handle moved to .center-property-id__section-num::after */
    .center-property-id__side-panel::before {
        content: none;
    }

    /* ── Content area ── */
    .center-property-id__content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
        min-height: 880px;
        position: relative;
        isolation: isolate;
    }

    .center-property-id__content::before {
        content: '';
        position: absolute;
        inset: 0;
        top:100px;
        max-width: 1600px;
        background-image: url('../img/dpt-rpt-bg.webp');
        background-repeat: repeat;
        background-position: top right;
        background-size: auto;
        -webkit-mask-image: radial-gradient(ellipse 64% 48% at 50% 50%, #000 0%, #000 58%, rgba(0, 0, 0, 0.82) 72%, rgba(0, 0, 0, 0.35) 86%, rgba(0, 0, 0, 0) 100%);
        mask-image: radial-gradient(ellipse 64% 48% at 50% 50%, #000 0%, #000 58%, rgba(0, 0, 0, 0.82) 72%, rgba(0, 0, 0, 0.35) 86%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .center-property-id__content > * {
        position: relative;
        z-index: 1;
    }

    

    /* ── Text block: fixed pixel sizes, no fluid scaling ── */
    .center-property-id__inner {
        display: grid;
        grid-template-columns: auto auto minmax(360px, 1fr);
        align-items: flex-start;
        column-gap: 26px;
        padding: 88px 66px 44px;
        box-sizing: border-box;
        min-height: 290px;
    }

    .center-property-id__badge {
        font-size: 16px;
        padding: 6px 40px;
        margin: 0;
    }

    .center-property-id__title {
        font-size: 44px;
        line-height: 1.1;
        white-space: normal;
        max-width: 270px;
        margin-right: 40px;
    }

    .center-property-id__description {
        font-size: 16px;
        line-height: 1.65;
        margin: 0;
        max-width: 560px;
    }

    /* ── Cards wrap: scales max-width by card count (6 -> 1600, 3 -> 800) ── */
    .center-property-id__cards-wrap {
        --cpid-cards-wrap-max: 1600px;
        width: 100%;
        max-width: var(--cpid-cards-wrap-max);
        padding: 0 66px 0 24px;
        box-sizing: border-box;
    }

    .center-property-id__cards-wrap:has(.center-property-id__cards > .center-property-id__card:nth-child(5):last-child) {
        --cpid-cards-wrap-max: 1333px;
    }

    .center-property-id__cards-wrap:has(.center-property-id__cards > .center-property-id__card:nth-child(4):last-child) {
        --cpid-cards-wrap-max: 1067px;
    }

    .center-property-id__cards-wrap:has(.center-property-id__cards > .center-property-id__card:nth-child(3):last-child) {
        --cpid-cards-wrap-max: 800px;
    }

    .center-property-id__cards-wrap:has(.center-property-id__cards > .center-property-id__card:nth-child(2):last-child) {
        --cpid-cards-wrap-max: 533px;
    }

    .center-property-id__cards-wrap:has(.center-property-id__cards > .center-property-id__card:only-child) {
        --cpid-cards-wrap-max: 267px;
    }

    /* ── Cards: all 6 in one row ── */
    .center-property-id__cards {
        display: flex;
        flex-direction: row;
        gap: 6px;
        align-items: flex-start;
    }

    .center-property-id__cards-wrap {
        overflow: visible;
    }

    /* ── Each card: equal flex slots, smooth flex-grow transition ── */
    .center-property-id__card {
        flex: 1 1 0%;
        aspect-ratio: 240 / 380;
        height: auto;
        
        border-radius: 12px;
        padding: 0;
        transform: translateY(0);
        transition: flex-grow 0.4s ease, transform 0.4s ease;
        overflow: hidden;
    }

    /* Active card grows 30% — neighbours slide aside, keep their own proportions */
    .center-property-id__card--active {
        flex-grow: 1.3;
        transform: translateY(-11.5%);
    }

    /* ── Background image inside each card ── */
    .center-property-id__card-bg {
        display: block;
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 0.4s ease;
        border-radius: inherit;
    }

    .center-property-id__card--active .center-property-id__card-bg {
        opacity: 1;
    }

    /* ── Card inner: sits above bg image ── */
    .center-property-id__card-inner {
        position: relative;
        z-index: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 20% 15%;
        box-sizing: border-box;
    }

    /* ── Card text sizes: fixed on desktop ── */
    .center-property-id__card-top {
        font-size: 22px;
        transition: font-size 0.4s ease, color 0.4s ease;
    }

    .center-property-id__card--active .center-property-id__card-top {
        font-size: 39.6px;
        color: #fff;
    }

    .center-property-id__card-bottom img {
        width: 30px;
        height: 30px;
    }

    .center-property-id__card-label {
        font-size: 14px;
        transition: font-size 0.4s ease;
    }

    .center-property-id__card--active .center-property-id__card-label {
        font-size: 26px;
    }

    .center-property-id__card-bottom {
        margin-top: auto;
        transition: transform 0.4s ease;
    }

    .center-property-id__card-extra {
        display: none;
        margin: 10px 0 0;
        font-size: 12px;
        line-height: 1.5;
        color: #fff;
        opacity: 0;
        transform: translateY(12px);
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease;
    }

}

@media (min-width: 1601px) {
    .center-property-id__card-extra {
        display: block;
    }

    .center-property-id__card--expanded .center-property-id__card-bottom {
        transform: translateY(-16px);
    }

    .center-property-id__card--expanded .center-property-id__card-extra {
        opacity: 1;
        transform: translateY(0);
        max-height: 180px;
    }
}

.center-hero {
  margin-bottom: 0;
}