/* CMS-driven sections of Membership and Careers (CMS bar): membership overview, careers search bar, pagination, share icons, "Let's connect" form.
   Tokens only. Logical properties, so Arabic RTL mirrors by itself. Widths: 1728 / 1024 / 375. */

/* Careers header image from the CMS: a soft layer behind the title. */
.samf-cms-hero { position: relative; isolation: isolate; overflow: hidden; }
.samf-cms-hero__img { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .35; }

/* Membership overview image from the CMS. */
.samf-mb-overview__image { position: relative; overflow: hidden; }
.samf-mb-overview__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Membership overview: text left, image right (mirrored in Arabic). */
.samf-overview { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(2rem, 4vw, 4rem); }
.samf-overview__body { font-size: var(--samf-fs-body); line-height: 1.6; color: var(--samf-color-text); margin: 0 0 1.5rem; max-inline-size: 36rem; }
.samf-overview__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.samf-overview__btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 3.125rem; padding-inline: 1.5rem; border-radius: .5rem; border: 1px solid var(--samf-color-primary); font-weight: 600; text-transform: uppercase; text-decoration: none; }
.samf-overview__btn--solid { background: var(--samf-color-primary); color: var(--samf-color-on-primary); }
.samf-overview__btn--outline { background: transparent; color: var(--samf-color-primary); }
.samf-overview__btn:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 3px; }
.samf-overview__image { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1.5rem; }
:lang(ar) .samf-overview__btn { text-transform: none; }
.samf-member-card__text { font-size: var(--samf-fs-body); line-height: 1.5; margin-block-end: 1.25rem; }

/* Pagination. */
.samf-pager[hidden] { display: none; }
.samf-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-block: 2rem 0; }
.samf-pager__list { display: flex; align-items: center; gap: .5rem; list-style: none; padding: 0; margin: 0; }
button.samf-pager__page, button.samf-pager__nav { font: inherit; background: transparent; cursor: pointer; padding: 0; }
.samf-pager__page { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; border-radius: 999px; border: 1px solid var(--samf-color-border); color: var(--samf-color-text); text-decoration: none; font-weight: 600; }
.samf-pager__page.is-current { background: var(--samf-color-primary); border-color: var(--samf-color-primary); color: var(--samf-color-on-primary); }
.samf-pager__page:hover, .samf-pager__page:focus-visible { border-color: var(--samf-color-primary); }
.samf-pager__page:focus-visible, .samf-pager__nav:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; }
.samf-pager__gap { color: var(--samf-color-muted); padding-inline: .25rem; }
.samf-pager__nav { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 999px; border: 1px solid var(--samf-color-border); color: var(--samf-color-text); }
.samf-pager__nav > span { inline-size: .6rem; block-size: .6rem; border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; }
.samf-pager__next > span { transform: rotate(45deg); margin-inline-end: .2rem; }
.samf-pager__prev > span { transform: rotate(-135deg); margin-inline-start: .2rem; }
[dir="rtl"] .samf-pager__next > span { transform: rotate(-135deg); }
[dir="rtl"] .samf-pager__prev > span { transform: rotate(45deg); }

/* Share icons. */
.samf-share { display: flex; align-items: center; gap: .5rem; margin-block-start: 1rem; }
.samf-share__label { font-weight: 600; margin-inline-end: .5rem; }
.samf-share__link { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 999px; border: 1px solid var(--samf-color-border); color: var(--samf-color-text); }
.samf-share__link:hover { color: var(--samf-color-primary); border-color: var(--samf-color-primary); }
.samf-share__link:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; }

/* "Let's connect" talent form. */
.samf-connect { padding-block: clamp(2rem, 4vw, 4rem); }
.samf-connect > .samf-cr-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.samf-connect__title { font-family: var(--samf-font-display); font-size: var(--samf-fs-h3); line-height: 1.1; font-weight: 700; color: var(--samf-color-performance); text-transform: uppercase; margin: 0 0 1rem; }
:lang(ar) .samf-connect__title { text-transform: none; }
.samf-connect__text { font-size: var(--samf-fs-body); line-height: 1.6; max-inline-size: 36rem; }
.samf-connect__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.samf-connect__field--wide, .samf-connect__actions { grid-column: 1 / -1; }
.samf-connect__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.samf-connect__upload { display: inline-flex; align-items: center; min-block-size: 3.125rem; padding-inline: 1.25rem; border: 1px dashed var(--samf-color-border-strong); border-radius: .5rem; cursor: pointer; font-weight: 600; }
.samf-connect__upload:focus-within, .samf-connect__upload:hover { border-color: var(--samf-color-primary); }
.samf-connect__submit { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--samf-color-accent); color: var(--samf-color-ink); border: 1px solid var(--samf-color-accent); font-family: var(--samf-font-body); font-weight: 600; min-block-size: 3.125rem; padding-inline: 1.5rem; border-radius: .5rem; text-transform: uppercase; }
:lang(ar) .samf-connect__submit { text-transform: none; }
.samf-connect__submit:hover, .samf-connect__submit:focus-visible { background: var(--samf-color-primary-hover); border-color: var(--samf-color-primary-hover); }
.samf-connect__pending { display: none; grid-column: 1 / -1; margin: 1.5rem 0 0; padding: 1rem 1.25rem; border: 1px solid var(--samf-color-border-strong); border-radius: .5rem; font-weight: 600; }
.samf-connect__pending:target { display: block; }
.samf-connect > .samf-cr-wrap > .samf-connect__pending:target { grid-column: 1 / -1; }

@media (max-width: 1024px) {
  .samf-overview, .samf-connect > .samf-cr-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .samf-connect__submit, .samf-connect__upload { inline-size: 100%; justify-content: center; }
  .samf-connect__form { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
  .samf-connect__form { gap: 12px; }
}