/* Story 02 — same grid / edges as Manifesto 01 */

body .elementor .pm-section-story.e-con,
body .elementor .pm-section-story {
  background: #f2eee8 !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 140px 0 100px !important;
}

body .elementor .pm-section-story > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 64px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Identical content shell as section 01 */
body .elementor .pm-story-header.e-con,
body .elementor .pm-story-header,
body .elementor .pm-content-shell {
  width: 100% !important;
  max-width: var(--pm-content-max, 1400px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 var(--pm-content-pad, 24px) !important;
  box-sizing: border-box !important;
}

/* Tag on top, title block below (not beside the tag) */
body .elementor .pm-story-header > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  grid-template-columns: none !important;
}

body .elementor .pm-story-header > .e-con-inner > .pm-story-label,
body .elementor .pm-story-header > .e-con-inner > .pm-story-body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

/* Tag 02 — above the title */
body .elementor .pm-story-label.e-con,
body .elementor .pm-story-label {
  width: auto !important;
  max-width: none !important;
  padding-top: 0 !important;
}

body .elementor .pm-story-label > .e-con-inner {
  display: block !important;
  padding: 0 !important;
}

body .elementor .pm-story-label .elementor-widget-container,
body .elementor .pm-story-label p {
  margin: 0 !important;
  color: #e8432f !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  text-align: left !important;
}

/* Title block — same left edge as Manifesto title */
body .elementor .pm-story-body.e-con,
body .elementor .pm-story-body {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
}

body .elementor .pm-story-body > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 40px !important;
  width: 100% !important;
  padding: 0 !important;
}

body .elementor .pm-story-titles {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 70% !important;
}

body .elementor .pm-story-titles > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
}

body .elementor .pm-story-titles .elementor-heading-title {
  margin: 0 !important;
  color: #1a1e24 !important;
  text-align: left !important;
}

body .elementor .pm-story-titles .elementor-element:last-child .elementor-heading-title {
  font-family: "Instrument Serif", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* Lead — right edge of content shell (aligned with 01 content right) */
body .elementor .pm-story-body > .e-con-inner > .elementor-widget-text-editor {
  flex: 0 0 300px !important;
  max-width: 300px !important;
  margin-left: auto !important;
}

body .elementor .pm-story-body > .e-con-inner > .elementor-widget-text-editor .elementor-widget-container,
body .elementor .pm-story-body > .e-con-inner > .elementor-widget-text-editor p {
  margin: 0 !important;
  text-align: right !important;
  color: #6b6455 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  font-weight: 300 !important;
}

/* 3 cards, swipe, no arrows — left edge = content shell left */
body .elementor .pm-story-scroll.e-con,
body .elementor .pm-story-scroll {
  --story-gap: 20px;
  --story-side: max(
    var(--pm-content-pad, 24px),
    calc((100% - var(--pm-content-max, 1400px)) / 2 + var(--pm-content-pad, 24px))
  );
  --story-view: min(
    var(--pm-content-max, 1400px),
    calc(100% - (2 * var(--pm-content-pad, 24px)))
  );
  --story-card: calc((var(--story-view) - (2 * var(--story-gap))) / 3);
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body .elementor .pm-story-scroll.e-con,
body .elementor .pm-story-scroll > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: var(--story-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 20px 0 48px !important;
  padding-left: var(--story-side) !important;
  padding-right: var(--story-side) !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x;
}

body .elementor .pm-story-scroll:has(> .e-con-inner) {
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
  cursor: default;
}

body .elementor .pm-story-scroll > .e-con-inner::-webkit-scrollbar,
body .elementor .pm-story-scroll.e-con::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body .elementor .pm-story-scroll.is-dragging,
body .elementor .pm-story-scroll > .e-con-inner.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
  user-select: none !important;
}

.pm-story-nav {
  display: none !important;
}

body .elementor .pm-story-card.e-con,
body .elementor .pm-story-card {
  flex: 0 0 var(--story-card) !important;
  width: var(--story-card) !important;
  min-width: min(280px, var(--story-card)) !important;
  max-width: var(--story-card) !important;
  height: auto !important;
  min-height: 100% !important;
  align-self: stretch !important;
  border-radius: 18px !important;
  scroll-snap-align: start;
  padding: 26px 22px !important;
  box-sizing: border-box !important;
  box-shadow: 0 22px 44px -28px rgba(26, 30, 36, 0.22) !important;
  transition: transform 0.4s cubic-bezier(0.16, 0.68, 0.3, 1);
  overflow: hidden !important;
}

body .elementor .pm-story-card:hover {
  transform: translateY(-6px);
}

body .elementor .pm-story-card > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  height: 100% !important;
  min-height: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body .elementor .pm-story-card > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
  margin: 0 !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: #1a1e24 !important;
}

body .elementor .pm-story-card.is-dark > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
  color: #e8432f !important;
}

body .elementor .pm-story-card.is-accent > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
  color: #ffffff !important;
}

body .elementor .pm-story-card-bottom,
body .elementor .pm-story-card-bottom.e-con {
  width: 100% !important;
  margin: 0 !important;
  margin-top: auto !important;
  align-self: stretch !important;
  flex: 1 1 auto !important;
}
body .elementor .pm-story-card-bottom > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  gap: 10px !important;
  width: 100% !important;
}

body .elementor .pm-story-card-bottom .elementor-heading-title {
  margin: 0 !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #1a1e24 !important;
  text-align: left !important;
}

body .elementor .pm-story-card.is-dark .pm-story-card-bottom .elementor-heading-title,
body .elementor .pm-story-card.is-accent .pm-story-card-bottom .elementor-heading-title {
  color: #ffffff !important;
}

body .elementor .pm-story-card-bottom .elementor-widget-text-editor,
body .elementor .pm-story-card-bottom .elementor-widget-text-editor .elementor-widget-container,
body .elementor .pm-story-card-bottom p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 300 !important;
  color: #6b7280 !important;
  text-align: left !important;
}

body .elementor .pm-story-card.is-dark .pm-story-card-bottom p {
  color: rgba(255, 255, 255, 0.6) !important;
}

body .elementor .pm-story-card.is-accent .pm-story-card-bottom p {
  color: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 900px) {
  body .elementor .pm-story-header > .e-con-inner {
    flex-direction: column !important;
    gap: 16px !important;
  }

  body .elementor .pm-story-label {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
  }

  body .elementor .pm-story-body > .e-con-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  body .elementor .pm-story-titles,
  body .elementor .pm-story-body > .e-con-inner > .elementor-widget-text-editor {
    max-width: 100% !important;
    flex: 1 1 auto !important;
    margin-left: 0 !important;
  }

  body .elementor .pm-story-body > .e-con-inner > .elementor-widget-text-editor p {
    text-align: left !important;
  }

  body .elementor .pm-story-scroll.e-con,
  body .elementor .pm-story-scroll {
    --story-side: 24px;
    --story-view: calc(100% - 48px);
    --story-card: calc((var(--story-view) - var(--story-gap)) / 2);
  }
}

@media (max-width: 600px) {
  body .elementor .pm-story-scroll.e-con,
  body .elementor .pm-story-scroll {
    --story-card: min(300px, calc(100% - 64px));
  }
}

/* Arabic: story cards + header right-aligned */
body.rtl .elementor .pm-story-label .elementor-widget-container,
body.rtl .elementor .pm-story-label p,
body.rtl .elementor .pm-story-titles .elementor-heading-title {
  text-align: right !important;
}

body.rtl .elementor .pm-story-body > .e-con-inner {
  direction: rtl !important;
}

body.rtl .elementor .pm-story-body > .e-con-inner > .elementor-widget-text-editor {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* AR section description — align right */
body.rtl .elementor .pm-story-body > .e-con-inner > .elementor-widget-text-editor {
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.rtl .elementor .pm-story-body > .e-con-inner > .elementor-widget-text-editor .elementor-widget-container,
body.rtl .elementor .pm-story-body > .e-con-inner > .elementor-widget-text-editor p,
body.rtl .elementor .pm-story-lead,
body.rtl .elementor .pm-story-lead p {
  text-align: right !important;
}

body.rtl .elementor .pm-story-scroll.e-con,
body.rtl .elementor .pm-story-scroll,
body.rtl .elementor .pm-story-scroll > .e-con-inner {
  direction: rtl !important;
}

body.rtl .elementor .pm-story-card,
body.rtl .elementor .pm-story-card > .e-con-inner,
body.rtl .elementor .pm-story-card-bottom,
body.rtl .elementor .pm-story-card-bottom > .e-con-inner {
  direction: rtl !important;
  text-align: right !important;
}

body.rtl .elementor .pm-story-card > .e-con-inner > .elementor-widget-heading .elementor-heading-title,
body.rtl .elementor .pm-story-card-bottom .elementor-heading-title,
body.rtl .elementor .pm-story-card-bottom .elementor-widget-text-editor,
body.rtl .elementor .pm-story-card-bottom .elementor-widget-text-editor p,
body.rtl .elementor .pm-story-card-bottom p {
  text-align: right !important;
}

@media (max-width: 900px) {
  body.rtl .elementor .pm-story-body > .e-con-inner {
    align-items: flex-end !important;
  }

  body.rtl .elementor .pm-story-body > .e-con-inner > .elementor-widget-text-editor {
    margin-right: 0 !important;
  }

  body.rtl .elementor .pm-story-body > .e-con-inner > .elementor-widget-text-editor p {
    text-align: right !important;
  }
}