/* ARABIDS 1.2.117 — full-colour photographic chapters.
   The provided brand-guide pictures are used only as clean, text-free crops.
   Photography has its OWN canvas; headings and interactive cards never need
   a milky overlay. The same composition works in RTL, LTR, and on phones. */

:root {
  --arabids-ink-wine: #420b07;
  --arabids-ink-pine: #143328;
  --arabids-ink-gold: #a4865d;
  --arabids-paper: #efe6d8;
}

/* Previous image treatment stretched faded photos underneath entire sections.
   Keep section boundaries natural and separate the photo from the reading
   canvas without imposing thick rules between chapters. */
html body:is(.home,[data-page="home"]) :is(
  .hero,.core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) {
  position: relative !important;
  isolation: isolate !important;
  background-image: none !important;
  background-attachment: scroll !important;
  box-shadow: none !important;
}
html body:is(.home,[data-page="home"]) .hero {background-color: #faf8f3 !important;}
html body:is(.home,[data-page="home"]) .core_benefits_section {background-color: #f9f5ef !important;}
html body:is(.home,[data-page="home"]) .what_is_section {background-color: #faf6ef !important;}
html body:is(.home,[data-page="home"]) .who_its_for_section {background-color: #f4f6f0 !important;}
html body:is(.home,[data-page="home"]) .faq_section {background-color: #fbf6f0 !important;}

/* Hero: deliberately frame the existing phone artwork with a vivid antiques
   image. The photo is on the phone side (left in Arabic, right in English).
   The tagline and description remain on plain ivory, not on a photograph. */
html body:is(.home,[data-page="home"]) .hero {
  overflow: visible !important;
}
html body:is(.home,[data-page="home"]) .hero > .arabids-hero-photo-scene {
  position: absolute !important;
  display: block !important;
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  top: 8% !important;
  bottom: 8% !important;
  width: min(45%, 790px) !important;
  height: auto !important;
  background: #143328 url('../images/brand-atmospheres/auctions-antiques.jpg') 68% center / cover no-repeat !important;
  border: 1px solid rgba(164,134,93,.24) !important;
  border-radius: 0 28px 28px 0 !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
html[dir="ltr"] body:is(.home,[data-page="home"]) .hero > .arabids-hero-photo-scene,
html[data-language="en"] body:is(.home,[data-page="home"]) .hero > .arabids-hero-photo-scene {
  border-radius: 28px 0 0 28px !important;
}
html body:is(.home,[data-page="home"]) .hero > .container {
  position: relative !important;
  z-index: 2 !important;
}
html body:is(.home,[data-page="home"]) .hero .right .image img {
  position: relative !important;
  z-index: 2 !important;
  filter: drop-shadow(0 22px 24px rgba(3,18,13,.17)) !important;
}

/* Distinct image-and-heading introduction, followed by cards that use the
   full available width. No cards are squeezed into the photo column. */
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) > .container {
  position: relative !important;
  z-index: 1 !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
  align-items: center !important;
  gap: clamp(30px,5.4vw,90px) !important;
  direction: rtl;
  margin: 0 0 clamp(36px,4vw,60px) !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-scene {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: clamp(226px,24vw,340px) !important;
  min-height: 0 !important;
  display: block !important;
  align-self: stretch !important;
  overflow: hidden !important;
  background-color: #143328 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border: 1px solid rgba(164,134,93,.26) !important;
  border-radius: 12px 88px 12px 12px !important;
  box-shadow: 0 18px 44px rgba(20,51,40,.1) !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-heading {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-align: start !important;
  display: flex !important;
  justify-content: center !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding-inline-start: clamp(0px,1.5vw,26px) !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-heading::before {
  content: '' !important;
  width: 64px !important;
  height: 3px !important;
  flex: 0 0 3px !important;
  display: block !important;
  background: var(--arabids-ink-gold) !important;
  border-radius: 3px !important;
  margin-bottom: 18px !important;
}
html body:is(.home,[data-page="home"]) .arabids-editorial-heading > h2.title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  font-size: clamp(27px,3.1vw,47px) !important;
  line-height: 1.43 !important;
  text-align: start !important;
  color: var(--arabids-ink-wine) !important;
  -webkit-text-fill-color: var(--arabids-ink-wine) !important;
  text-shadow: none !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  white-space: normal !important;
}

/* Every chapter uses a different photograph and composition. */
html body:is(.home,[data-page="home"]) .core_benefits_section .arabids-editorial-scene {
  background-image: url('../images/brand-atmospheres/support-camera.jpg') !important;
  background-position: 72% 55% !important;
}
html body:is(.home,[data-page="home"]) .what_is_section .arabids-editorial-scene {
  background-image: url('../images/brand-atmospheres/heritage-frame.jpg') !important;
  background-position: 75% center !important;
  border-radius: 92px 12px 12px 12px !important;
}
html body:is(.home,[data-page="home"]) .who_its_for_section .arabids-editorial-scene {
  background-image: url('../images/brand-atmospheres/app-gallery.jpg') !important;
  background-position: 78% center !important;
}
html body:is(.home,[data-page="home"]) .faq_section .arabids-editorial-scene {
  background-image: url('../images/brand-atmospheres/account-coins.jpg') !important;
  background-position: 78% center !important;
  border-radius: 92px 12px 12px 12px !important;
}

/* Rebalance rather than repeat the same image alignment in every chapter. */
html body:is(.home,[data-page="home"]) :is(.what_is_section,.faq_section) .arabids-editorial-scene {
  grid-column: 2 !important;
}
html body:is(.home,[data-page="home"]) :is(.what_is_section,.faq_section) .arabids-editorial-heading {
  grid-column: 1 !important;
}

/* English copy is longer and flows LTR, but the photo remains its own panel. */
html:is([dir="ltr"],[data-language="en"]) body:is(.home,[data-page="home"]) .arabids-editorial-intro {
  direction: ltr !important;
}
html:is([dir="ltr"],[data-language="en"]) body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-heading {
  text-align: left !important;
}
html:is([dir="ltr"],[data-language="en"]) body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-heading h2.title {
  text-align: left !important;
}

/* The cards now read as distinct objects on a calm surface, independent of
   each richly coloured photograph above them. */
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) :is(.flex,.flex-wrap) > .item {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 991px) {
  html body:is(.home,[data-page="home"]) .hero {
    overflow: visible !important;
  }
  html body:is(.home,[data-page="home"]) .hero > .arabids-hero-photo-scene {
    width: calc(100% - 28px) !important;
    height: clamp(234px,50vw,350px) !important;
    top: auto !important;
    bottom: 18px !important;
    inset-inline-end: 14px !important;
    border-radius: 24px !important;
    background-position: 65% 50% !important;
  }
  html body:is(.home,[data-page="home"]) .hero > .container {
    position: relative !important;
    z-index: 2 !important;
  }
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) {
    padding-top: clamp(58px,9vw,90px) !important;
    padding-bottom: clamp(64px,9vw,96px) !important;
    overflow: hidden !important;
  }
  html body:is(.home,[data-page="home"]) .arabids-editorial-intro {
    display: flex !important;
    flex-direction: column !important;
    gap: 23px !important;
    direction: inherit !important;
    margin-bottom: 34px !important;
  }
  html body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-scene {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: clamp(186px,45vw,290px) !important;
    border-radius: 16px 52px 16px 16px !important;
    background-size: cover !important;
    box-shadow: 0 12px 26px rgba(20,51,40,.1) !important;
  }
  html body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-heading {
    width: 100% !important;
    padding-inline: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  html body:is(.home,[data-page="home"]) .arabids-editorial-heading::before {
    width: 45px !important;
    margin-bottom: 10px !important;
  }
  html body:is(.home,[data-page="home"]) .arabids-editorial-heading > h2.title {
    font-size: clamp(26px,5vw,37px) !important;
    line-height: 1.5 !important;
    text-align: start !important;
  }
}

@media (max-width: 540px) {
  html body:is(.home,[data-page="home"]) .hero > .arabids-hero-photo-scene {
    height: clamp(200px,59vw,285px) !important;
    bottom: 14px !important;
  }
  html body:is(.home,[data-page="home"]) .arabids-editorial-intro .arabids-editorial-scene {
    height: clamp(170px,48vw,225px) !important;
    border-radius: 12px 42px 12px 12px !important;
  }
}