/*! AFRITAL — homepage sections (design width: 1440px) */

/* ============ HERO ============ */
.hero { overflow-x: clip; }
.hero__text { padding: 55px var(--gutter) 0; text-align: center; }
.hero__title { max-width: 14.7em; margin: 0 auto; font-size: var(--fs-h1); font-weight: 600; }
.hero__lead { max-width: 820px; margin: 20px auto 0; }
.hero__text .btn { margin-top: 36px; }

/* Coverflow stage. Slide size drives everything; offsets are % of the slide's own box. */
.hero__stage {
  --hw: min(561px, 38.96vw);
  --hh: calc(var(--hw) * 1.00535);
  position: relative;
  display: grid; align-items: end; justify-items: center;
  margin-top: 58px; padding-top: 22px;
  overflow: hidden;
}
.hero__halo {
  position: absolute; inset: 0 0 calc(var(--hh) * .044) 0; z-index: 0; overflow: hidden;
}
.hero__halo::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: calc(var(--hw) * 2.71); aspect-ratio: 1; border-radius: 50%;
  background: #EDE5CB; transform: translateX(-50%);
}
.hero__slide {
  grid-area: 1 / 1; margin: 0;
  width: var(--hw); height: var(--hh);
  border-radius: 24px; overflow: hidden; background: #DCE3E8;
  transform-origin: 50% 100%;
  transition: transform .7s var(--ease), opacity .5s var(--ease);
  will-change: transform;
}
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide[data-pos="0"]  { z-index: 5; transform: none; }
.hero__slide[data-pos="-1"] { z-index: 4; transform: translate(-58.6%, -4.4%) scale(.766); }
.hero__slide[data-pos="1"]  { z-index: 4; transform: translate(58.6%, -4.4%) scale(.766); }
.hero__slide[data-pos="-2"] { z-index: 3; transform: translate(-125%, -4.4%) scale(.574); }
.hero__slide[data-pos="2"]  { z-index: 3; transform: translate(125%, -4.4%) scale(.574); }
.hero__slide[data-pos="hidden"] { z-index: 0; opacity: 0; pointer-events: none; transform: translate(0, -4.4%) scale(.5); }

/* ============ OUR INITIATIVE ============ */
.initiative { padding-top: 113px; }
.banner {
  margin: 48px 0 0; aspect-ratio: 1240 / 496;
  border-radius: 24px; overflow: hidden; background: #fff;
}
.banner img { width: 100%; height: 100%; object-fit: cover; }

/* ============ WHAT WE FOCUS ON ============ */
.focus { padding: 157px 0 62px; }
.focus__carousel { margin-top: 24px; }

.cf--focus { display: grid; justify-items: center; overflow: hidden; padding-bottom: 30px; }
.focus-card {
  grid-area: 1 / 1; width: min(612px, 49.35%);
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 12px 32px rgba(9, 34, 59, .08);
  transition: transform .7s var(--ease), opacity .5s var(--ease);
  will-change: transform;
}
.focus-card[data-pos="0"]  { z-index: 5; }
.focus-card[data-pos="-1"] { z-index: 4; opacity: .85; transform: translateX(-34.15%) scale(.96); }
.focus-card[data-pos="1"]  { z-index: 4; opacity: .85; transform: translateX(34.15%) scale(.96); }
.focus-card[data-pos="-2"] { z-index: 3; opacity: .4;  transform: translateX(-128.3%) scale(.92); }
.focus-card[data-pos="2"]  { z-index: 3; opacity: .4;  transform: translateX(128.3%) scale(.92); }
.focus-card[data-pos="hidden"] { z-index: 0; opacity: 0; pointer-events: none; transform: scale(.88); }

.focus-card__media { aspect-ratio: 612 / 283; background: #DCE3E8; }
.focus-card__media img { width: 100%; height: 100%; object-fit: cover; }
.focus-card__body {
  flex: 1; padding: 34px 20px 33px;
  background: #fff; transition: background-color .5s var(--ease);
}
.focus-card__title { font-size: 20px; font-weight: 600; transition: color .5s var(--ease); }
.focus-card__text { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--c-grey); transition: color .5s var(--ease); }
.focus-card[data-pos="0"] .focus-card__body { background: var(--c-navy); }
.focus-card[data-pos="0"] .focus-card__title { color: #fff; }
.focus-card[data-pos="0"] .focus-card__text { color: var(--c-border); }

.cf-controls { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
.cf-btn {
  width: 48px; height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border); border-radius: 50%;
  background: #fff; color: var(--c-navy); font-size: 18px; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.cf-btn--next { border-color: var(--c-navy); background: var(--c-navy); color: #fff; }
.cf-btn:hover { background: var(--c-surface); }
.cf-btn--next:hover { background: #12365a; }

/* ============ INSIGHTS & UPDATE ============ */
.insights { padding: 63px 0 62px; background: var(--c-navy); color: #fff; }
.insights h2, .insights h3 { color: #fff; }
.insights__head { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 70px; }
.insights__head p { max-width: 616px; font-size: 16px; text-align: right; color: var(--c-border); }

.insight__media { display: block; overflow: hidden; border-radius: 20px; background: #1a3552; }
.insight__media img { width: 100%; height: auto; }
.insight__body { padding: 28px 20px 0; }
.insight__title { font-size: clamp(28px, 2.778vw, 40px); }
.insight__excerpt { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--c-border); }
.insight__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; font-size: 14px; line-height: 21px; }
.insight__link { font-weight: 500; color: var(--c-yellow); }
.insight__link:hover { text-decoration: underline; text-underline-offset: 4px; }

.insights__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 80px; }
.insights__more { display: flex; justify-content: center; margin-top: 70px; }

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
  .hero__text { padding-top: 32px; }
  .hero__stage { margin-top: 40px; --hw: 62vw; }
  .initiative { padding-top: 72px; }
  .focus { padding-top: 88px; }
  .focus-card { width: 74%; }
  .focus-card[data-pos="-1"] { transform: translateX(-96%) scale(.94); }
  .focus-card[data-pos="1"]  { transform: translateX(96%) scale(.94); }
  .focus-card[data-pos="-2"], .focus-card[data-pos="2"] { opacity: 0; }
  .insights__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
  .insights__head p { text-align: left; }
  .insights__grid { grid-template-columns: 1fr; margin-top: 48px; }
  .insights__more { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .focus-card, .focus-card__body, .focus-card__title, .focus-card__text { transition: none; }
  }