/* Core Offerings — five full-screen stops scrolling over a topographic map. */
body { background: #fff; }

.core {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: url('../img/core-offerings-bg.webp') no-repeat fixed;
  background-size: 100% 350%;
  background-position: 50% -5%;
  transition: all 1s cubic-bezier(.4, 0, .2, 1);
}
.core::-webkit-scrollbar { display: none; }
/* Background framing per visible stop (set by core-offerings.js). */
.core[data-stop="2"] { background-size: 140% 490%; background-position: 45% 27%; }
.core[data-stop="3"] { background-size: 140% 490%; background-position: 60% 50%; }
.core[data-stop="4"] { background-size: 140% 490%; background-position: 51% 70%; }
.core[data-stop="5"] { background-size: 140% 490%; background-position: 75% 100%; }

.core p { line-height: 1.25rem; }
.core h2 { font-size: 1.5em; line-height: 1.4; font-weight: 500; }
.blue { color: var(--blue); }
.small { font-size: .75rem; }

.stop {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100vh;
  scroll-snap-align: start;
}
.stop__row {
  display: flex;
  justify-content: center;
  column-gap: 4rem;
  max-width: 1100px;
  padding: 1rem;
  margin-bottom: 6%;
}
.stop__row--tall { height: 100%; margin-bottom: 4%; }
.stop__row--last { margin-bottom: 8%; }

.stop__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 50%;
  color: var(--nav);
}
.stop__col > div,
.idea {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  padding: 1rem;
  border-radius: .5rem;
  background: rgba(255, 255, 255, .65);
  text-align: justify;
}
.stop__col:first-child > div { width: 80%; padding: 1.25rem; justify-content: center; }
.stop__col:last-child > div { width: 90%; }
.idea {
  width: 100% !important;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}
.stop__col:first-child .idea { padding: 1.25rem; }

.quote-mark {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 96px;
}

/* Per-stop tweaks carried over from the original layout. */
.s2 .stop__col:first-child { margin-bottom: 2%; }
.s2 .stop__col:last-child > div { width: 70%; }
.s2 .quote-text { max-width: 65%; }
.s3 .stop__col:last-child { margin-bottom: 8%; }
.s4 .stop__col:first-child { align-self: center; margin-top: 13%; }
.s4 .stop__col:last-child > div { width: 81%; }
.s4 .quote-text { max-width: 80%; }
.s5 .stop__col:first-child { margin-bottom: 8%; }
.s5 .stop__col:last-child > div { width: 40%; align-self: center; }
.s5 .quote-mark { top: 20%; }

.down-arrow {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index: 20;
  width: 28px;
  height: 45px;
  border: 2px solid #fff;
  border-radius: 15px;
  backdrop-filter: blur(6px);
}
.down-arrow svg { position: absolute; bottom: 0; fill: #fff; }

/* Footer at the end of the scroller */
.core-footer {
  display: flex;
  justify-content: center;
  padding: 30px 0;
  background: #fff;
  scroll-snap-align: start;
}
.core-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}
.core-footer__logo img { width: 80px; }
.core-footer__right { display: flex; flex-direction: column; align-items: flex-end; row-gap: 1rem; color: #000; }
.core-footer__social { display: flex; column-gap: 1.5rem; }
.core-footer__social svg { width: 24px; height: 24px; }
.core-footer__links { display: flex; column-gap: 2rem; }
.core-footer__links a { color: #333; }
.core-footer__links a:hover { color: #007bff; }

@media (max-width: 768px) {
  .core { background-size: 250% 350%; background-position: 16% 0%; }
  .core[data-stop="2"] { background-size: 250% 350%; background-position: 60% 25%; }
  .core[data-stop="3"] { background-size: 250% 350%; background-position: 30% 50%; }
  .core[data-stop="4"] { background-size: 250% 350%; background-position: 60% 75%; }
  .core[data-stop="5"] { background-size: 250% 350%; background-position: 70% 100%; }

  .stop__row {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 80%;
    padding: .75rem;
    margin-bottom: 0;
  }
  .stop__row--tall { height: 100%; }
  .stop__row--last { margin-bottom: 8%; }
  .stop__col { width: 90%; }
  .stop__col:last-child { margin-bottom: 4%; }
  .stop__col > div,
  .stop__col:first-child > div,
  .stop__col:last-child > div { width: 90%; font-size: .75rem; }

  .core-footer__inner { text-align: center; }
  .core-footer__logo img { width: 60px; }
  .core-footer__right { align-items: center; margin: 0 auto; }
  .core-footer__social { justify-content: center; margin-top: 10px; }
  .core-footer__links { flex-direction: column; row-gap: .5rem; margin-top: 10px; }
}

/* Arabic: the cards are placed around photos baked into the background art,
   so keep the layout geometry and only flip the text inside the cards. */
[dir="rtl"] .stop__row { direction: ltr; }
[dir="rtl"] .stop__col > div { direction: rtl; }
[dir="rtl"] .quote-mark { right: auto; left: 4px; transform: scaleX(-1); }