/* ==========================================================================
   articles.css — Articles index + article pages  ·  v1.0
   Loaded on articles.html, ar/articles.html and every article-*.html page.

   Two layouts in one sheet:
     .art-*   the index (hero band + card grid)
     .post-*  a single article (cover, meta, readable body column, CTA)

   Written with logical properties throughout, so the Arabic mirror needs no
   separate rules and no rtl.css overrides.
   ========================================================================== */

:root {
    --ar-r:      16px;
    --ar-r-lg:   22px;
    --ar-shadow: 0 18px 50px -18px rgba(11, 36, 69, 0.28);
    --ar-ease:   cubic-bezier(0.16, 1, 0.3, 1);
    --ar-measure: 68ch;        /* readable line length for long-form body */
}

/* ==========================================================================
   1 · INDEX — hero band
   ========================================================================== */
.art-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--midnight);
    background-image:
        radial-gradient(880px 500px at 50% -14%, rgba(51, 116, 186, 0.32), transparent 70%),
        linear-gradient(rgba(127, 185, 225, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 185, 225, 0.05) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
    padding-block: clamp(76px, 12vh, 132px) clamp(60px, 9vh, 100px);
    color: var(--white);
    text-align: center;
}
.art-hero__inner { max-width: 820px; margin-inline: auto; }
.art-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cerulean-light);
    margin-bottom: 20px;
}
.art-hero__title {
    font-size: clamp(2.1rem, 5.4vw, 3.8rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0 0 20px;
}
.art-hero__title span { color: var(--cerulean-light); }
.art-hero__lead {
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.78);
    max-width: 620px;
    margin-inline: auto;
}

/* ==========================================================================
   2 · INDEX — card grid
   ========================================================================== */
.art-list {
    background: linear-gradient(180deg, var(--icefield), #ffffff 60%);
    padding-block: clamp(64px, 9vh, 110px);
}
.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: clamp(18px, 2.2vw, 28px);
}
.art-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--white);
    border: 1.5px solid var(--ice);
    border-radius: var(--ar-r-lg);
    transition: transform 0.35s var(--ar-ease),
                box-shadow 0.35s var(--ar-ease),
                border-color 0.35s var(--ar-ease);
}
.art-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ar-shadow);
    border-color: var(--cerulean);
}
.art-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--midnight);
}
.art-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ar-ease);
}
.art-card:hover .art-card__media img { transform: scale(1.04); }

.art-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: clamp(22px, 2.4vw, 30px);
}
.art-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(11, 36, 69, 0.55);
}
.art-card__tag {
    background: var(--ice);
    color: var(--cerulean);
    border-radius: 999px;
    padding: 5px 12px;
    letter-spacing: 0.08em;
}
.art-card__title {
    font-size: clamp(1.1rem, 1.5vw, 1.32rem);
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--raven);
    margin: 0 0 12px;
}
.art-card:hover .art-card__title { color: var(--deep-sky); }
.art-card__excerpt {
    font-size: 0.93rem;
    line-height: 1.65;
    color: rgba(11, 36, 69, 0.7);
    margin: 0 0 20px;
}
.art-card__more {
    margin-block-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--cerulean);
}
.art-card__more svg { width: 15px; height: 15px; transition: transform 0.3s var(--ar-ease); }
[dir="rtl"] .art-card__more svg { transform: scaleX(-1); }
.art-card:hover .art-card__more svg { transform: translateX(4px); }
[dir="rtl"] .art-card:hover .art-card__more svg { transform: scaleX(-1) translateX(4px); }

/* an empty-state note for when only one article exists */
.art-note {
    margin-top: clamp(28px, 4vh, 44px);
    text-align: center;
    font-size: 0.9rem;
    color: rgba(11, 36, 69, 0.55);
}

/* ==========================================================================
   3 · ARTICLE — cover
   ========================================================================== */
.post-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--midnight);
    color: var(--white);
    /* Taller cover: padding alone left the band too shallow for the skyline to
       register as a photograph. A min-height gives the image room to breathe
       while the flex centring keeps the headline optically centred whatever
       the title length. Capped in dvh so mobile browser chrome can't push the
       CTA off-screen. */
    min-height: 62vh;
    min-height: 62dvh;
    display: flex;
    align-items: center;
    padding-block: clamp(96px, 14vh, 168px) clamp(76px, 11vh, 132px);
}
.post-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.post-hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* The cover art already carries a baked-in directional scrim, so the CSS
       layer here only needs to guarantee text contrast — at 0.32 the two
       stacked and the skyline disappeared entirely. */
    opacity: 0.62;
}
/* keeps the headline legible whatever the cover art does */
.post-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(11, 36, 69, 0.30) 0%,
        rgba(11, 36, 69, 0.52) 52%,
        rgba(11, 36, 69, 0.88) 100%);
}
.post-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}
.post-hero__title {
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0 0 22px;
}
.post-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 20px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}
.post-hero__meta .sep { opacity: 0.4; }
.post-hero__tag {
    background: rgba(127, 185, 225, 0.16);
    border: 1px solid rgba(127, 185, 225, 0.4);
    color: var(--cerulean-light);
    border-radius: 999px;
    padding: 6px 14px;
    letter-spacing: 0.08em;
}

/* ==========================================================================
   4 · ARTICLE — body
   ========================================================================== */
.post-body {
    background: #ffffff;
    padding-block: clamp(52px, 8vh, 88px) clamp(60px, 9vh, 100px);
}
.post-body__inner {
    max-width: var(--ar-measure);
    margin-inline: auto;
}
.post-body p {
    font-size: 1.04rem;
    line-height: 1.85;
    color: rgba(11, 36, 69, 0.86);
    margin: 0 0 22px;
}
.post-body__lead {
    font-size: clamp(1.1rem, 1.6vw, 1.22rem) !important;
    line-height: 1.7 !important;
    font-weight: 500;
    color: var(--raven) !important;
    padding-inline-start: 20px;
    border-inline-start: 3px solid var(--cerulean);
    margin-bottom: 34px !important;
}
.post-body h2 {
    font-size: clamp(1.32rem, 2.2vw, 1.72rem);
    font-weight: 880;
    line-height: 1.24;
    letter-spacing: -0.015em;
    color: var(--midnight);
    margin: clamp(38px, 5vh, 54px) 0 18px;
}
.post-body h2::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-block-start: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cerulean), var(--cerulean-light));
}
.post-body strong { color: var(--midnight); font-weight: 800; }
.post-body a { color: var(--cerulean); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--deep-sky); }

/* numbered point cards — used for the five gaps and the four-phase plan */
.post-points {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    gap: 12px;
    counter-reset: pt;
}
.post-points li {
    counter-increment: pt;
    position: relative;
    background: var(--icefield);
    border: 1px solid var(--ice);
    border-radius: var(--ar-r);
    padding: 20px 22px 20px 62px;
    font-size: 0.99rem;
    line-height: 1.72;
    color: rgba(11, 36, 69, 0.84);
    transition: border-color 0.3s var(--ar-ease), background 0.3s var(--ar-ease);
}
[dir="rtl"] .post-points li { padding: 20px 62px 20px 22px; }
.post-points li::before {
    content: counter(pt, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 20px;
    top: 18px;
    width: 28px;
    font-size: 0.92rem;
    font-weight: 900;
    color: var(--cerulean);
}
.post-points li:hover { border-color: var(--cerulean); background: #ffffff; }
.post-points li b { display: block; color: var(--midnight); font-weight: 850; margin-bottom: 3px; }

/* phased plan — same shape, but labelled rather than numbered */
.post-phases { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.post-phases li {
    background: #ffffff;
    border: 1.5px solid var(--ice);
    border-radius: var(--ar-r);
    padding: 20px 22px;
    font-size: 0.99rem;
    line-height: 1.72;
    color: rgba(11, 36, 69, 0.84);
    border-inline-start: 4px solid var(--cerulean);
}
.post-phases li b { display: block; color: var(--midnight); font-weight: 850; margin-bottom: 4px; letter-spacing: 0.01em; }

/* pull-out callout */
.post-callout {
    background: var(--midnight);
    color: var(--white);
    border-radius: var(--ar-r-lg);
    padding: clamp(26px, 3.2vw, 38px);
    margin: clamp(32px, 4vh, 44px) 0;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.68;
    font-weight: 600;
    position: relative;
    background-image: linear-gradient(90deg, var(--cerulean), var(--cerulean-light));
    background-size: 100% 4px;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: var(--midnight);
}
.post-callout em { font-style: normal; color: var(--cerulean-light); }

/* ==========================================================================
   5 · ARTICLE — CTA + disclaimer
   ========================================================================== */
.post-cta {
    position: relative;
    overflow: hidden;
    background-color: var(--navy, #081C38);
    background-image:
        radial-gradient(700px 420px at 50% 120%, rgba(51, 116, 186, 0.34), transparent 70%),
        linear-gradient(rgba(127, 185, 225, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 185, 225, 0.05) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
    padding-block: clamp(60px, 9vh, 104px);
    color: var(--white);
    text-align: center;
}
.post-cta__title {
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.14;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0 0 16px;
    text-wrap: balance;
}
.post-cta__title span { color: var(--cerulean-light); }
.post-cta__lead {
    color: rgba(255, 255, 255, 0.76);
    max-width: 62ch;
    margin: 0 auto 28px;
    line-height: 1.72;
}
.post-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--cerulean);
    color: var(--white);
    border-radius: 999px;
    padding: 15px 34px;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    transition: background 0.3s var(--ar-ease), transform 0.3s var(--ar-ease);
}
.post-cta__btn:hover { background: var(--cerulean-light); transform: translateY(-2px); }
.post-cta__btn svg { width: 16px; height: 16px; }
[dir="rtl"] .post-cta__btn svg { transform: scaleX(-1); }

.post-disclaimer {
    background: var(--icefield);
    padding-block: 26px;
    font-size: 0.83rem;
    line-height: 1.7;
    color: rgba(11, 36, 69, 0.6);
    text-align: center;
}
.post-disclaimer p { max-width: 74ch; margin-inline: auto; }

/* back link */
.post-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: clamp(34px, 5vh, 48px);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cerulean);
}
.post-back:hover { color: var(--deep-sky); }
.post-back svg { width: 15px; height: 15px; }
[dir="rtl"] .post-back svg { transform: scaleX(-1); }

/* ==========================================================================
   6 · RESPONSIVE + REDUCED MOTION
   ========================================================================== */
@media (max-width: 620px) {
    .art-grid { grid-template-columns: 1fr; }
    .post-body p { font-size: 1rem; }
    .post-points li { padding: 18px 18px 18px 54px; }
    [dir="rtl"] .post-points li { padding: 18px 54px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .art-card, .art-card__media img, .post-points li, .post-cta__btn { transition: none !important; }
    .art-card:hover { transform: none !important; }
    .art-card:hover .art-card__media img { transform: none !important; }
    .post-cta__btn:hover { transform: none !important; }
}

/* ==========================================================================
   7 · ANSWER-FIRST, FAQ AND SOURCES  ·  added v1.2
   These three blocks exist for machine readers as much as human ones:
   AI systems extract from the top of a page, answer question-shaped headings,
   and weight content that cites verifiable sources.
   ========================================================================== */

/* --- key points: the answer, above everything else --------------------- */
.post-key {
    background: var(--icefield);
    border: 1.5px solid var(--ice);
    border-radius: var(--ar-r-lg);
    padding: clamp(24px, 3vw, 34px);
    margin-bottom: clamp(30px, 4vh, 42px);
    border-inline-start: 4px solid var(--cerulean);
}
.post-key__head {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cerulean);
    margin: 0 0 16px;
}
.post-key ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.post-key li {
    position: relative;
    padding-inline-start: 26px;
    font-size: 0.98rem;
    line-height: 1.65;
    color: rgba(11, 36, 69, 0.86);
}
.post-key li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 0.62em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cerulean);
}
.post-key li b { color: var(--midnight); font-weight: 800; }

/* --- FAQ ---------------------------------------------------------------- */
.post-faq { margin-top: clamp(38px, 5vh, 54px); }
.post-faq__item {
    border: 1.5px solid var(--ice);
    border-radius: var(--ar-r);
    padding: 20px 22px;
    margin-bottom: 12px;
    background: #ffffff;
    transition: border-color 0.3s var(--ar-ease);
}
.post-faq__item:hover { border-color: var(--cerulean); }
.post-faq__q {
    font-size: 1.02rem;
    font-weight: 850;
    line-height: 1.45;
    color: var(--midnight);
    margin: 0 0 8px;
}
.post-faq__a { font-size: 0.97rem; line-height: 1.72; color: rgba(11, 36, 69, 0.82); margin: 0; }

/* --- sources ------------------------------------------------------------ */
.post-sources {
    margin-top: clamp(34px, 4.5vh, 48px);
    padding-top: 24px;
    border-top: 1px solid var(--ice);
}
.post-sources__head {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(11, 36, 69, 0.55);
    margin: 0 0 14px;
}
.post-sources ol { margin: 0; padding-inline-start: 20px; }
.post-sources li { font-size: 0.88rem; line-height: 1.7; color: rgba(11, 36, 69, 0.7); margin-bottom: 8px; }
.post-sources a { color: var(--cerulean); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }