/* Dedicated pages with hero image — reuses fullscreen-slider (custom.css); static, not carousel */

.navid-page-hero {
    margin-top: var(--navid-page-hero-gap, 24px);
    margin-bottom: 40px;
}

@media (max-width: 991.98px) {
    .navid-page-hero {
        margin-top: 0;
        margin-bottom: 0;
        overflow-x: clip;
    }

    /* Figma 240:12938 — page body sits flush below hero (no extra main margin) */
    main.main-content.navid-page {
        margin-top: 0;
    }

    .navid-page .container.main-container {
        padding-inline: 0;
    }

    .navid-page .navid-page-content {
        padding-inline: 24px;
    }

    /* Match homepage slider — avoid 100vw bleed/clipping */
    .navid-page-hero .navid-page-hero__breakout {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /*
     * Figma 240:12938 — keep fixed photo frame + diagonal (88→577 = 489px).
     * Grey panel still fills that frame; gradient fades to white sooner so
     * empty grey under short copy is less visible.
     */
    .navid-page-hero
        .fullscreen-slider--static.fullscreen-slider--mobile {
        --fs-page-hero-mobile-ref-h: 489;
        --fs-page-hero-mobile-text-top: 348;
        --fs-page-hero-mobile-side: 24px;
        --fs-page-hero-mobile-content-width: min(
            278px,
            calc(100% - (2 * var(--fs-page-hero-mobile-side))),
            calc(100% * 241 / var(--fs-mobile-ref-w, 390))
        );
    }

    .navid-page-hero
        .fullscreen-slider--static.fullscreen-slider--mobile
        .fullscreen-slider__static-inner {
        aspect-ratio: var(--fs-mobile-ref-w, 390) / var(--fs-page-hero-mobile-ref-h);
        height: auto;
    }

    .navid-page-hero
        .fullscreen-slider--static.fullscreen-slider--mobile
        .fullscreen-slider__slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /*
     * Figma 240:12745 (تماس با ما mobile hero)
     * Text block: y=436 page / y=348 below 88px header, x=125 w=241 (24px side inset)
     */
    .navid-page-hero
        .fullscreen-slider--static.fullscreen-slider--mobile
        .fullscreen-slider__panel {
        position: absolute;
        inset: 0;
        justify-content: flex-start;
        padding: calc(
                100% * var(--fs-page-hero-mobile-text-top) /
                    var(--fs-mobile-ref-w, 390)
            )
            var(--fs-page-hero-mobile-side) 0;
    }

    /* Fade grey→white around text end (~71–90% of frame) so spare grey below copy softens */
    .navid-page-hero
        .fullscreen-slider--static.fullscreen-slider--mobile
        .fullscreen-slider__shape-fill {
        background: linear-gradient(180deg, #ededee 42%, #fff 78%, #fff 100%);
    }

    /* Static page hero has no CTA — do not push copy to the bottom like the carousel */
    .navid-page-hero
        .fullscreen-slider--static.fullscreen-slider--mobile
        .fullscreen-slider__panel::before {
        display: none;
    }

    .navid-page-hero
        .fullscreen-slider--static.fullscreen-slider--mobile
        .fullscreen-slider__panel-inner {
        width: var(--fs-page-hero-mobile-content-width);
        max-width: 100%;
        gap: 16px;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    /* Figma: page-hero mobile title = H4 20px, body = 14 regular */
    .navid-page-hero
        .fullscreen-slider--static.fullscreen-slider--mobile
        .fullscreen-slider__title {
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
    }

    .navid-page-hero
        .fullscreen-slider--static.fullscreen-slider--mobile
        .fullscreen-slider__description {
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
    }
}

/* Tablet — desktop hero; keep gap below hero before page body */
@media (min-width: 768px) and (max-width: 991.98px) {
    main.main-content.navid-page {
        margin-top: 40px;
    }
}

.navid-page-hero__breakout {
    margin-bottom: 0;
}

.navid-page-hero .fullscreen-slider--static {
    margin-bottom: 0;
}

/* Static desktop hero — same height shell as homepage carousel (custom.css) */
@media (min-width: 768px) {
    .navid-page-hero .fullscreen-slider--static.fullscreen-slider--desktop .carousel-inner,
    .navid-page-hero .fullscreen-slider--static.fullscreen-slider--desktop .carousel-item,
    .navid-page-hero .fullscreen-slider--static.fullscreen-slider--desktop .carousel-item.active {
        height: clamp(520px, calc(100vw * 700 / var(--fullscreen-slider-ref-w, 1920)), 700px);
        min-height: 520px;
        max-height: 700px;
    }

    .navid-page-hero .fullscreen-slider--static.fullscreen-slider--desktop .fullscreen-slider__slide {
        height: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .navid-page-hero .fullscreen-slider--static.fullscreen-slider--desktop .carousel-inner,
    .navid-page-hero .fullscreen-slider--static.fullscreen-slider--desktop .carousel-item,
    .navid-page-hero .fullscreen-slider--static.fullscreen-slider--desktop .carousel-item.active {
        height: clamp(480px, calc(100vw * 480 / 744), 520px);
        min-height: 480px;
        max-height: 520px;
    }
}

/* Mobile static shell — same fixed frame as Figma (photo + diagonal angle preserved) */
.navid-page-hero .fullscreen-slider--static.fullscreen-slider--mobile .fullscreen-slider__static-inner {
    aspect-ratio: var(--fs-mobile-ref-w) / var(--fs-mobile-ref-h);
    width: 100%;
    height: auto;
    position: relative;
}

.navid-page-hero .fullscreen-slider--static.fullscreen-slider--mobile .fullscreen-slider__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.navid-page-hero .fullscreen-slider--static .fullscreen-slider__image--mobile {
    display: none;
}

.navid-page-hero .fullscreen-slider--static-mobile-art .fullscreen-slider__image--primary {
    display: none;
}

.navid-page-hero .fullscreen-slider--static-mobile-art .fullscreen-slider__image--mobile {
    display: block;
}

.navid-page-hero .fullscreen-slider__image--fallback {
    background: var(--navid-tertiary, #ededee);
}

/* Page body below hero — Figma 127:13751 (900px column, 1280 grid) */
.navid-page-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 104px;
    padding: 0 var(--navid-container-padding, 16px);
    color: var(--navid-gray, #6c7580);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    text-align: justify;
    overflow-wrap: anywhere;
    word-break: normal;
}

.navid-page-content h2,
.navid-page-content h3,
.navid-page-content h4 {
    color: var(--navid-secondary, #003663);
    font-weight: 500;
    text-align: right;
}

.navid-page-content h2,
.navid-page-content h3 {
    font-size: 24px;
    line-height: 1.4;
    margin: 0 0 16px;
}

@media (max-width: 991.98px) {
    .navid-page-content h2,
    .navid-page-content h3,
    .navid-page-content h4,
    .navid-page-content p,
    .navid-page-content li {
        line-height: 1.75;
    }
}

.navid-page-content h4 {
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 12px;
}

.navid-page-content p {
    margin: 0 0 40px;
}

.navid-page-content > *:last-child,
.navid-page-content p:last-child {
    margin-bottom: 0;
}

.navid-page-content ul,
.navid-page-content ol {
    margin: 0 0 16px;
    padding-right: 20px;
}

.navid-page-content li + li {
    margin-top: 8px;
}

.navid-page-content img,
.navid-page-content video,
.navid-page-content iframe {
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .navid-page .main-container {
        max-width: calc(
            var(--navid-content-width) + (2 * var(--navid-container-padding))
        );
    }

    .navid-page-content {
        padding: 64px 0 0;
    }

    .navid-page-content h2,
    .navid-page-content h3 {
        display: block;
        min-height: 48px;
        padding: 4px 0;
    }
}

.navid-page--contact .content-box-container {
    margin-top: 0;
}