/* Leaders page (القادة) — design from the approved prototype.
   Scoped under .ld-page so nothing leaks into the rest of the site.
   Font: the site font (IBM Plex Sans Arabic) inherited from the layout. */

.ld-page {
    --ld-navy: #0C1B3A;
    --ld-navy-2: #162d57;
    --ld-gold: #B8903A;
    --ld-yellow: #F4C842;
    --ld-cream: #FAF6EA;
    --ld-paper: #FFFDF7;
    --ld-ink: #14203A;
    --ld-sub: #5C6579;
    --ld-line: #E7DFC9;
    background: var(--ld-cream);
    color: var(--ld-ink);
}
/* ==========================================================================
   Header country selector: hidden on the leaders page only (the page is Arabic only and its
   content does not depend on the visitor's country). Both copies are hidden: the mobile one
   (#countryDropdown) and the desktop one (#navbarScrollingDropdown1). The wrapper that CONTAINS the
   toggle is targeted, so the other dropdowns in the header (أضف، القوائم ...) are untouched, and the
   header script that writes the flag into these elements keeps working because they stay in the DOM.
   ========================================================================== */
body:has(.ld-page) .header .dropdown:has(> #countryDropdown),
body:has(.ld-page) .header .dropdown:has(> #navbarScrollingDropdown1) {
    display: none !important;
}

/* ==========================================================================
   Footer: on the leaders page only, the footer takes the prototype's design and
   dimensions. The shared footer markup is untouched; everything is scoped here.
   Prototype values: wrap 1200 / padding 48 24 36 / columns 1.6fr 1fr 1fr / gap 40.
   ========================================================================== */
body:has(.ld-page) footer.footer {
    margin-top: 0 !important;
    background: #0C1B3A;
    border-top: 2px solid #B8903A;
    color: #C9D0E0;
}
body:has(.ld-page) footer.footer > .bg-light { background: transparent !important; padding: 0 !important; }
body:has(.ld-page) footer.footer .container.footerlink { max-width: 1200px; padding: 0; }
body:has(.ld-page) footer.footer .footerlink > .row {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px;
    margin: 0; padding: 48px 24px 36px;
}
body:has(.ld-page) footer.footer .footerlink > .row > * { width: auto; max-width: none; flex: none; margin: 0; padding: 0 !important; }

/* brand column: white logo (34px high), gold divider, «القادة» in yellow */
body:has(.ld-page) footer.footer .row > .col-lg-6:first-child { position: relative; }
body:has(.ld-page) footer.footer .logo-footer { height: 34px; width: auto; margin: 0 0 16px !important; filter: brightness(0) invert(1); display: block; }
body:has(.ld-page) footer.footer .row > .col-lg-6:first-child::before {
    content: "القادة";
    position: absolute; top: 0; inset-inline-start: 104px;
    height: 34px; padding-inline-start: 14px; padding-top: 4px; box-sizing: border-box;
    background: linear-gradient(#B8903A, #B8903A) right center / 1px 30px no-repeat;
    font-size: 30px; font-weight: 700; line-height: 1; color: #F4C842;
}
body:has(.ld-page) footer.footer .row > .col-lg-6:first-child > div.m-3 { margin: 0 !important; }

/* description: 17px, line-height 2, max-width 380 */
body:has(.ld-page) footer.footer .footer-info {
    margin: 0 0 22px !important; max-width: 380px; font-size: 17px !important; line-height: 2 !important;
}
body:has(.ld-page) footer.footer .footer-info,
body:has(.ld-page) footer.footer .footer-info span { color: #E9E2CC !important; }
body:has(.ld-page) footer.footer .footer-info span.d-xl-block { display: inline !important; }

/* "follow us": 18px yellow, 12px below; icons 40px circles, 10px apart */
body:has(.ld-page) footer.footer b.fs-20 { display: block; font-size: 18px !important; color: #F4C842 !important; margin-bottom: 12px; }
body:has(.ld-page) footer.footer .footer-info ~ span { display: flex; gap: 10px; margin: 0 !important; }
body:has(.ld-page) footer.footer .footer-info ~ span a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin: 0 !important; border: 1px solid #B8903A; border-radius: 50%;
}
/* the original icons are coloured discs with a white glyph, so no filter (it would turn them into plain white discs) */
body:has(.ld-page) footer.footer .footer-info ~ span a img { width: 24px; height: 24px; }

/* link columns: title 19px bold yellow, links 16px, 12px apart */
body:has(.ld-page) footer.footer .col-lg-3 > ul.nav { display: grid; gap: 12px; margin: 0; padding: 0; }
body:has(.ld-page) footer.footer .col-lg-3 li.nav-item { padding: 0 !important; margin: 0; }
body:has(.ld-page) footer.footer .col-lg-3 p.fw-bold.fs-20 { font-size: 19px !important; font-weight: 700; line-height: 32px; color: #F4C842 !important; margin: 0 0 2px; }
body:has(.ld-page) footer.footer a.text-gray-60s { color: #E9E2CC !important; font-size: 16px !important; line-height: 27px !important; padding: 0 !important; }
body:has(.ld-page) footer.footer a.text-gray-60s:hover { color: #F4C842 !important; }

/* copyright bar: 15px, centered, 16px 24px, thin gold line above */
body:has(.ld-page) footer.footer .r-footer {
    margin: 0 !important; padding: 16px 24px !important; text-align: center;
    border-top: 1px solid rgba(184, 144, 58, .45); background: transparent;
}
body:has(.ld-page) footer.footer .r-footer span,
body:has(.ld-page) footer.footer .r-footer .text-gray-60s { font-size: 15px !important; color: #C9D0E0 !important; }

@media (max-width: 760px) {
    body:has(.ld-page) footer.footer .footerlink > .row { grid-template-columns: 1fr 1fr; }
    body:has(.ld-page) footer.footer .footerlink > .row > :first-child { grid-column: 1 / -1; }
}

/* the page background runs down to the footer: banner padding 20 + this 70 = the prototype's gap above the footer */
.ld-page { padding-bottom: 70px; }
.ld-page *, .ld-page *::before, .ld-page *::after { box-sizing: border-box; }
.ld-page a { text-decoration: none; }
.ld-page img { max-width: 100%; display: block; }
.ld-page [hidden] { display: none !important; }

.ld-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- buttons ---------- */
.ld-page .ld-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: 100px; padding: 11px 24px;
    font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.4;
    cursor: pointer; white-space: nowrap; transition: background .2s, color .2s;
}
.ld-page .ld-btn--lg { font-size: 16px; padding: 15px 32px; }
.ld-page .ld-btn--yellow { background: var(--ld-yellow); color: var(--ld-navy); }
.ld-page .ld-btn--yellow:hover { background: #ffd75e; color: var(--ld-navy); }
.ld-page .ld-btn--navy { background: var(--ld-navy); color: #fff; }
.ld-page .ld-btn--navy:hover { background: var(--ld-navy-2); color: #fff; }
.ld-page .ld-btn--ghost { background: transparent; color: #fff; border-color: currentColor; }
.ld-page .ld-btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- hero ---------- */
.ld-hero { background: linear-gradient(180deg, var(--ld-navy), #10234a); color: #fff; padding: 64px 0 56px; }
.ld-tag { font-size: 12px; font-weight: 700; color: var(--ld-gold); letter-spacing: .2px; }
.ld-tag--light { color: var(--ld-yellow); margin-bottom: 10px; }
.ld-hero__title { margin: 0 0 12px; font-size: 56px; font-weight: 700; line-height: 1.25; color: #fff; }
.ld-hero__title em { color: var(--ld-yellow); font-style: normal; }
.ld-hero__text { margin: 0; max-width: 640px; color: #C9D0E0; font-size: 17px; line-height: 1.8; }
.ld-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- sections ---------- */
.ld-section { padding-top: 64px; }
.ld-section--banner { padding-top: 72px; padding-bottom: 20px; }
.ld-title { margin: 0 0 6px; font-size: 40px; font-weight: 700; color: var(--ld-navy); line-height: 1.3; }
.ld-title span { color: var(--ld-gold); }
.ld-sub { margin: 0 0 26px; color: var(--ld-sub); font-size: 16px; }
.ld-title + .ld-filters { margin-top: 32px; }
/* anchors (hero buttons) must stop below the fixed header */
.ld-section { scroll-margin-top: 100px; }
.ld-subtitle { margin: 40px 0 16px; font-size: 19px; font-weight: 700; color: var(--ld-navy); }

/* ---------- filters ---------- */
.ld-filters {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    background: var(--ld-paper); border: 1px solid var(--ld-line); border-radius: 18px;
    padding: 12px 16px; margin: 0 0 24px;
}
.ld-filters__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ld-navy); font-size: 14px; padding-inline-end: 6px; }
.ld-select {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
    background: #fff; border: 1px solid var(--ld-line); border-radius: 100px; padding-inline-start: 16px;
    transition: background .2s, border-color .2s;
}
.ld-select span { font-size: 13px; font-weight: 700; color: var(--ld-sub); }
.ld-select select {
    appearance: none; -webkit-appearance: none; border: 0; outline: 0; cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B8903A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat;
    background-position: left 14px center;
    color: var(--ld-navy); font-family: inherit; font-size: 14.5px; font-weight: 700;
    min-width: 120px; padding: 10px 38px 10px 18px;
}
[dir="rtl"] .ld-select select { background-position: left 14px center; padding: 10px 18px 10px 38px; }
[dir="ltr"] .ld-select select { background-position: right 14px center; padding: 10px 38px 10px 18px; }
.ld-select.is-on { background: var(--ld-navy); border-color: var(--ld-gold); }
.ld-select.is-on span { color: var(--ld-yellow); }
.ld-select.is-on select { color: #fff; }
.ld-select select option { color: var(--ld-navy); background: #fff; }
.ld-clear { background: none; border: 0; color: var(--ld-gold); font-weight: 700; font-size: 13.5px; text-decoration: underline; cursor: pointer; font-family: inherit; }

/* ---------- grids ---------- */
.ld-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.ld-grid--wide { gap: 22px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.ld-more { display: flex; justify-content: center; margin-top: 28px; }
.ld-more--pair { justify-content: center; gap: 12px; }
.ld-empty { padding: 60px; text-align: center; color: var(--ld-sub); }

/* ---------- people cards ---------- */
.ld-card {
    display: block; overflow: hidden; background: var(--ld-paper); color: inherit;
    border: 1px solid var(--ld-line); border-radius: 16px; transition: box-shadow .2s, transform .2s;
}
.ld-card:hover { box-shadow: 0 14px 34px rgba(12, 27, 58, .14); transform: translateY(-3px); color: inherit; }
.ld-card__photo { position: relative; isolation: isolate; aspect-ratio: 4 / 4.4; overflow: hidden; background: linear-gradient(160deg, var(--ld-navy-2), var(--ld-navy)); }
.ld-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ld-card__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(12, 27, 58, .28), rgba(12, 27, 58, 0) 45%); }
.ld-card__body { padding: 12px 14px 14px; }
.ld-card__name { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--ld-navy); line-height: 1.5; }
.ld-badge { flex-shrink: 0; }
.ld-card__desc {
    margin: 0; color: var(--ld-sub); font-size: 12.5px; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- interviews ---------- */
.ld-thumb { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 14px; background: var(--ld-navy-2); }
.ld-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s; }
.ld-icard { display: block; color: inherit; }
.ld-icard:hover { color: inherit; }
.ld-icard:hover .ld-thumb img { transform: scale(1.04); }
.ld-icard > .ld-tag { margin-top: 14px; }
.ld-icard__title { margin: 6px 0 8px; font-size: 20px; font-weight: 700; line-height: 1.55; color: var(--ld-ink); }
.ld-icard__meta { font-size: 13.5px; color: var(--ld-sub); }

.ld-featured {
    display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; color: #fff;
    background: var(--ld-navy); border: 2px solid var(--ld-gold); border-radius: 20px;
}
.ld-featured:hover { color: #fff; }
.ld-featured__text { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 44px; }
.ld-featured__title { margin: 0; font-size: 38px; font-weight: 700; line-height: 1.45; color: #fff; }
.ld-featured__lead { margin: 0; color: #C9D0E0; font-size: 17px; line-height: 1.9; }
.ld-featured__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.ld-featured__date { font-size: 14px; color: #C9D0E0; }
.ld-featured__img { min-height: 380px; background: var(--ld-navy-2); }
.ld-featured__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- banner ---------- */
.ld-banner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px;
    padding: 44px 40px; border: 2px solid var(--ld-gold); border-radius: 24px;
    background: linear-gradient(135deg, #0C1B3A, #16305E);
}
.ld-banner__text { max-width: 620px; }
.ld-banner h2 { margin: 0 0 8px; font-size: 38px; font-weight: 700; line-height: 1.3; color: var(--ld-yellow); }
.ld-banner p { margin: 0; color: #D5DBEA; font-size: 16.5px; line-height: 1.9; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
    .ld-hero { padding: 48px 0 40px; }
    .ld-hero__title { font-size: 34px; }
    .ld-featured { grid-template-columns: 1fr; }
    .ld-featured__text { padding: 28px 22px; }
    .ld-featured__img { min-height: 220px; }
}
@media (max-width: 576px) {
    .ld-wrap { padding: 0 16px; }
    .ld-section { padding-top: 48px; }
    .ld-title { font-size: 30px; }
    .ld-banner { padding: 28px 22px; }
    .ld-banner h2 { font-size: 28px; }
    .ld-filters { gap: 10px; }
    .ld-select { flex: 1 1 100%; justify-content: space-between; }
    .ld-select select { flex: 1; }
    .ld-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ld-grid--wide { grid-template-columns: 1fr; }
}