/* ========================================================================
   Chairman page — Salsabeel 2026
   Page-scoped by design; no rules target the approved global header.
   ======================================================================== */

.sb-page--chairman {
    --chairman-reading-width: 770px;
    overflow: clip;
    background:
        radial-gradient(circle at 8% 40%, rgba(194, 139, 30, 0.055), transparent 24rem),
        linear-gradient(180deg, #f7f9fc 0%, #ffffff 46%, #f8fafc 100%);
}

.sb-page--chairman .chairman-hero {
    position: relative;
    isolation: isolate;
    min-height: 410px;
    display: grid;
    align-items: center;
    padding-block: 72px 118px;
    overflow: hidden;
    color: #fff;
    background-image:
        linear-gradient(90deg, rgba(7, 28, 45, 0.88), rgba(15, 55, 89, 0.94)),
        var(--chairman-hero-image);
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid rgba(223, 168, 53, 0.48);
}

[dir="rtl"] .sb-page--chairman .chairman-hero {
    background-image:
        linear-gradient(270deg, rgba(7, 28, 45, 0.87), rgba(15, 55, 89, 0.94)),
        var(--chairman-hero-image);
}

.sb-page--chairman .chairman-hero::before,
.sb-page--chairman .chairman-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.sb-page--chairman .chairman-hero::before {
    width: 520px;
    height: 520px;
    inset-block-start: -350px;
    inset-inline-end: -80px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 0 0 56px rgba(255, 255, 255, 0.025),
        0 0 0 112px rgba(255, 255, 255, 0.018);
}

.sb-page--chairman .chairman-hero::after {
    width: 290px;
    height: 290px;
    inset-block-end: -230px;
    inset-inline-start: 9%;
    background: rgba(194, 139, 30, 0.13);
    filter: blur(2px);
}

.sb-page--chairman .chairman-hero__content {
    position: relative;
    z-index: 1;
    max-width: 840px;
}

.sb-page--chairman .chairman-hero__eyebrow {
    margin-block-end: 22px;
}

.sb-page--chairman .chairman-hero h1 {
    max-width: 16ch;
    margin: 0;
    color: #fff;
    font-size: clamp(2.65rem, 5vw, 4.8rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.sb-page--chairman .chairman-hero__subtitle {
    max-width: 690px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    font-weight: 500;
    line-height: 1.85;
}

.sb-page--chairman .chairman-hero__quote-mark {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: max(24px, calc((100vw - var(--sb-container)) / 2));
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.055);
    font-size: clamp(10rem, 20vw, 20rem);
    line-height: 1;
    pointer-events: none;
}

.sb-page--chairman .chairman-main {
    position: relative;
    z-index: 2;
    margin-block-start: -72px;
    padding-block-end: clamp(72px, 8vw, 120px);
}

.sb-page--chairman .chairman-card {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    grid-template-areas: "profile message";
    gap: clamp(42px, 5vw, 76px);
    align-items: start;
    direction: ltr;
    padding: clamp(28px, 4.25vw, 68px);
    border: 1px solid rgba(220, 229, 237, 0.95);
    border-radius: var(--sb-radius-lg);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--sb-shadow-lg);
}

.sb-page--chairman .chairman-profile {
    grid-area: profile;
    position: sticky;
    top: 28px;
    width: min(100%, 360px);
    direction: rtl;
}

[dir="ltr"] .sb-page--chairman .chairman-profile {
    direction: ltr;
}

.sb-page--chairman .chairman-portrait {
    position: relative;
    margin: 0;
}

.sb-page--chairman .chairman-portrait::before {
    content: "";
    position: absolute;
    inset: 18px -16px -18px 16px;
    border: 1px solid rgba(194, 139, 30, 0.24);
    border-radius: 26px;
    background: #eef3f7;
}

[dir="ltr"] .sb-page--chairman .chairman-portrait::before {
    inset: 18px 16px -18px -16px;
}

.sb-page--chairman .chairman-portrait__media,
.sb-page--chairman .chairman-portrait__placeholder {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: clamp(400px, 31.5vw, 455px);
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(7, 28, 45, 0.19);
}

.sb-page--chairman .chairman-portrait__media {
    object-fit: cover;
    object-position: 38% center;
}

.sb-page--chairman .chairman-portrait__placeholder {
    display: grid;
    place-items: center;
    padding: 28px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 22%, rgba(223, 168, 53, 0.2), transparent 8rem),
        linear-gradient(145deg, var(--sb-navy-700), var(--sb-navy-950));
}

.sb-page--chairman .chairman-portrait__placeholder::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
}

.sb-page--chairman .chairman-portrait__placeholder i {
    color: rgba(243, 207, 122, 0.9);
    font-size: clamp(4rem, 8vw, 6.5rem);
}

.sb-page--chairman .chairman-portrait__placeholder span {
    display: block;
    max-width: 14ch;
    margin-block-start: 22px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.7;
}

.sb-page--chairman .chairman-portrait__quote {
    position: absolute;
    z-index: 3;
    inset-block-start: -18px;
    inset-inline-end: -18px;
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 5px solid #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--sb-gold-500), var(--sb-gold-700));
    color: #fff;
    font-size: 1.55rem;
    box-shadow: 0 14px 32px rgba(156, 108, 18, 0.28);
}

.sb-page--chairman .chairman-profile__caption {
    position: relative;
    z-index: 2;
    margin: 36px 14px 0;
    padding: 18px 20px;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    box-shadow: var(--sb-shadow-sm);
}

.sb-page--chairman .chairman-profile__caption strong,
.sb-page--chairman .chairman-profile__caption span {
    display: block;
}

.sb-page--chairman .chairman-profile__caption strong {
    color: var(--sb-navy-800);
    font-size: 1.05rem;
    font-weight: 900;
}

.sb-page--chairman .chairman-profile__caption span {
    margin-block-start: 5px;
    color: var(--sb-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.sb-page--chairman .chairman-message {
    grid-area: message;
    min-width: 0;
    padding-block-start: 8px;
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .sb-page--chairman .chairman-message {
    direction: ltr;
    text-align: left;
}

.sb-page--chairman .chairman-message__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 18px;
    color: var(--sb-gold-700);
    font-size: 0.92rem;
    font-weight: 900;
}

.sb-page--chairman .chairman-message__label::before {
    content: "";
    width: 34px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sb-gold-600), var(--sb-gold-300));
}

.sb-page--chairman .chairman-message h2 {
    max-width: 22ch;
    margin: 0;
    color: var(--sb-navy-800);
    font-size: clamp(2rem, 3.25vw, 3.15rem);
    font-weight: 900;
    line-height: 1.27;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.sb-page--chairman .chairman-message__subtitle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: var(--chairman-reading-width);
    margin: 18px 0 0;
    color: var(--sb-gold-700);
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.7;
}

.sb-page--chairman .chairman-message__subtitle i {
    margin-block-start: 0.42em;
    font-size: 0.72rem;
}

.sb-page--chairman .chairman-divider {
    width: min(100%, var(--chairman-reading-width));
    height: 1px;
    margin-block: 30px;
    background: linear-gradient(90deg, rgba(220, 229, 237, 0), var(--sb-border) 16%, var(--sb-border) 84%, rgba(220, 229, 237, 0));
}

.sb-page--chairman .chairman-speech {
    max-width: var(--chairman-reading-width);
    color: #405267;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 2.05;
}

.sb-page--chairman .chairman-speech p {
    margin: 0 0 20px;
}

.sb-page--chairman .chairman-speech p:first-child {
    position: relative;
    padding-inline-start: 18px;
    color: var(--sb-navy-800);
    font-size: 1.16em;
    font-weight: 800;
}

.sb-page--chairman .chairman-speech p:first-child::before {
    content: "";
    position: absolute;
    inset-block: 0.42em;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--sb-gold-600);
}

.sb-page--chairman .chairman-signature {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(100%, var(--chairman-reading-width));
    margin-block-start: 36px;
    padding-block-start: 26px;
    border-top: 1px solid var(--sb-border);
}

.sb-page--chairman .chairman-signature__mark {
    flex: 0 0 auto;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(194, 139, 30, 0.25);
    border-radius: 15px;
    background: #fffaf0;
    color: var(--sb-gold-700);
    font-size: 1.15rem;
}

.sb-page--chairman .chairman-signature__copy {
    min-width: 0;
}

.sb-page--chairman .chairman-signature__copy strong,
.sb-page--chairman .chairman-signature__copy span {
    display: block;
}

.sb-page--chairman .chairman-signature__copy strong {
    color: var(--sb-navy-800);
    font-size: 1.12rem;
    font-weight: 900;
}

.sb-page--chairman .chairman-signature__copy span {
    margin-block-start: 4px;
    color: var(--sb-muted);
    font-size: 0.91rem;
    line-height: 1.55;
}

.sb-page--chairman .chairman-signature__rule {
    flex: 1 1 auto;
    height: 1px;
    margin-inline-start: 12px;
    background: linear-gradient(90deg, var(--sb-border), transparent);
}

[dir="rtl"] .sb-page--chairman .chairman-signature__rule,
[dir="rtl"] .sb-page--chairman .chairman-divider,
[dir="rtl"] .sb-page--chairman .chairman-message__label::before {
    transform: scaleX(-1);
}

@media (max-width: 1024px) {
    .sb-page--chairman .chairman-card {
        grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
        gap: 40px;
    }

    .sb-page--chairman .chairman-profile {
        position: static;
    }
}

@media (max-width: 820px) {
    .sb-page--chairman .chairman-hero {
        min-height: 360px;
        padding-block: 58px 102px;
        background-position: 35% center;
    }

    .sb-page--chairman .chairman-hero__quote-mark {
        opacity: 0.6;
    }

    .sb-page--chairman .chairman-main {
        margin-block-start: -56px;
    }

    .sb-page--chairman .chairman-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "profile"
            "message";
        gap: 58px;
    }

    .sb-page--chairman .chairman-profile {
        width: min(100%, 430px);
        margin-inline: auto;
    }

    .sb-page--chairman .chairman-portrait__media,
    .sb-page--chairman .chairman-portrait__placeholder {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 560px) {
    .sb-page--chairman .chairman-hero {
        min-height: 340px;
        padding-block: 48px 86px;
    }

    .sb-page--chairman .chairman-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.15rem);
    }

    .sb-page--chairman .chairman-hero__subtitle {
        margin-block-start: 16px;
        font-size: 1rem;
        line-height: 1.7;
    }

    .sb-page--chairman .chairman-main {
        margin-block-start: -44px;
        padding-block-end: 72px;
    }

    .sb-page--chairman .chairman-card {
        gap: 46px;
        padding: 18px;
        border-radius: 22px;
    }

    .sb-page--chairman .chairman-portrait::before {
        inset: 12px -8px -12px 8px;
    }

    [dir="ltr"] .sb-page--chairman .chairman-portrait::before {
        inset: 12px 8px -12px -8px;
    }

    .sb-page--chairman .chairman-portrait__quote {
        inset-block-start: -14px;
        inset-inline-end: -8px;
        width: 58px;
        height: 58px;
        border-width: 4px;
    }

    .sb-page--chairman .chairman-profile__caption {
        margin-inline: 8px;
    }

    .sb-page--chairman .chairman-message {
        padding: 4px 4px 10px;
    }

    .sb-page--chairman .chairman-message h2 {
        font-size: 1.9rem;
    }

    .sb-page--chairman .chairman-signature__rule {
        display: none;
    }
}