/* ============================================================================
   sections.css — per-section layout: spacing, and the row/grid containers that
   arrange each section's contents. The pieces inside them live in
   components.css.
   ========================================================================== */

/* ══════════════════════════════  01 — HERO  ═════════════════════════ */
.hero {
    min-height: 100vh;
    height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The copy is centred on the cabin window in the frame sequence rather
   than on the viewport. The offsets are measured from the footage at
   runtime by positionHeroCopy(), and fall back to dead-centre. */
.hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(var(--win-w, 470px), 470px);
    max-width: calc(100vw - 48px);
    padding-inline: 0;
    translate: var(--win-dx, 0px) var(--win-dy, 0px);
    transition: translate 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__eyebrow {
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 99px;
    padding: 8px 16px;
    font-size: 13px;
    margin-bottom: 20px;
}

.hero__copy .headline { white-space: nowrap; }
.hero__copy .headline--accent { color: var(--red); margin-bottom: 12px; }

.hero__lede {
    font-size: 15px;
    line-height: 26px;
    text-align: center;
    opacity: 0.7;
    max-width: 470px;
    margin: 0 0 18px;
    text-wrap: pretty;
}

.hero__ctas { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.hero__ctas .btn { font-size: 15px; padding: 14px 26px; }
.hero__ctas .btn--primary { padding-inline: 30px; }

.hero__features {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    opacity: 0.55;
}
.hero__features img { width: 3px; height: 3px; display: block; }

/* ═══════════════════  02 — الجهات المعتمدة  ═══════════════════════ */
.authorities { padding: 112px 0 96px; }
.authorities .glow { top: -70px; left: 280px; width: 880px; height: 440px; }

.section-copy { display: flex; flex-direction: column; align-items: center; }
.section-copy .eyebrow { margin-bottom: 14px; }

.authorities__row {
    display: flex;
    margin-top: 62px;
    border-top: 1px solid var(--hairline);
}

/* ══════════════════════  03 — الرحلة  ═════════════════════════════ */
.journey { padding: 104px 0 104px; }
.journey .headline { margin-bottom: 16px; }
.journey .lede { max-width: 640px; }

.steps { display: flex; gap: 16px; align-items: stretch; margin-top: 56px; }

/* ═══════════════════  04 — لماذا Express Travel  ══════════════════ */
.why { padding: 72px 0 96px; }
.why .eyebrow { margin-bottom: 38px; }

.why__headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 46px;
    line-height: 60px;
    letter-spacing: -0.92px;
}
.why__line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    white-space: nowrap;
}
.why__line .dim { font-weight: 400; opacity: 0.42; }
.why__line .lit { font-weight: 700; }
.why__line img { width: 32px; height: 32px; border-radius: 8px; display: block; }

.why__lede {
    font-size: 14px;
    line-height: 24px;
    opacity: 0.45;
    text-align: center;
    max-width: 430px;
    margin: 22px auto 0;
    text-wrap: pretty;
}

.why__cards { display: flex; gap: 16px; align-items: flex-start; margin-top: 50px; }

/* ═════════════════════  05 — المستندات  ═══════════════════════════ */
.docs { padding: 110px 0 96px; }
.docs .lede { max-width: 480px; }

.docs__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;   /* both cards share the taller one's height */
    justify-content: center;
    gap: 40px 120px;        /* row-gap once wrapped, column-gap side by side */
    margin-top: 102px;
}

/* ══════════════════════  06 — واتساب  ═════════════════════════════ */
.whatsapp { padding: 110px 0 94px; }

/* Copy on the right, the conversation on the left. First child lands on
   the right under dir="rtl", so the copy leads in the DOM. */
.whatsapp__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 48px 80px;
}
.whatsapp__copy {
    flex: 1 1 400px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* = the right edge in RTL */
}
.whatsapp__copy .eyebrow { text-align: start; margin-bottom: 14px; }
.whatsapp__copy .headline { text-align: start; }
.whatsapp__copy .lede { text-align: start; margin: 18px 0 0; max-width: 470px; }
.whatsapp__copy .btn { margin-top: 32px; }

/* ═══════════════════════  07 — الفرق  ═════════════════════════════ */
.diff { padding: 110px 0 96px; }
.diff .headline { max-width: 900px; line-height: 68px; white-space: normal; margin-inline: auto; }

.panels { display: flex; gap: 20px; align-items: flex-start; margin-top: 100px; }

/* ═══════════════════════════  08 — CTA  ═══════════════════════════ */
.cta { padding: 118px 0 110px; }
.cta .glow { top: -120px; left: 270px; width: 900px; height: 420px; }
.cta .lede { opacity: 0.5; margin-top: 18px; }
.cta .btn { margin-top: 30px; font-size: 16px; padding: 16px 38px; }
.cta__inner { display: flex; flex-direction: column; align-items: center; }