/* ==========================================================================
   DUO IMAGE BLOCK
   Two-column layout: left (header + stacked images + body) /
   right (body + stacked images). 1 image fills full column height;
   2 images split the height equally.
   ========================================================================== */

/* ── CSS custom properties ────────────────────────────────────── */
.duo-block {
  --db-title-color: var(--hng-orange, #f58220);
  --db-subhead-color: var(--hng-white, #ffffff);
  --db-body-color: var(--hng-muted, rgba(255, 255, 255, 0.72));
  --db-img-radius: var(--radius-image, 40px);
  --db-img-gap: 0.875rem;
  --db-col-gap: var(--hng-col-gap, clamp(1.25rem, 3vw, 2.25rem));
  --db-padding: var(--hng-section-pad, clamp(1.5rem, 6vw, 6rem));
  --db-inner-height: clamp(520px, 72vh, 820px);

  position: relative;
  width: 100%;
  /* Section-level padding so the outer-box inset is visible */
  /* padding: clamp(0.75rem, 2vw, 1.5rem); */
  box-sizing: border-box;
  margin-bottom: var(--hng-block-gap, 12%);
}

/* ── Inner container — defines the two-column grid ───────────── */
.duo-block__inner {
  /* max-width: 1400px;
	margin: 0 auto; */
  padding: var(--db-padding);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--db-col-gap);
  align-items: start; /* columns are independently sized by their content */
}

/* Outer-box variant */

/* ── Columns ──────────────────────────────────────────────────── */
.duo-block__col {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
}

/* ── Header area (title + subheader) ─────────────────────────── */
.duo-block__header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.duo-block__title {
  margin: 0;
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 600 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-h2-size, clamp(2.25rem, 4.5vw, 3.625rem));
  line-height: 1.1;
  color: var(--db-title-color);
}

.duo-block__subheader {
  margin: 0;
  font-size: var(--hng-body-size, clamp(1rem, 1.5vw, 1.25rem));
  font-weight: 600;
  line-height: 1.35;
  font-family: "ITCAvantGarde", sans-serif;
  font-style: normal;
  font-stretch: normal;
  color: var(--db-subhead-color);
}

/* ── Body copy ────────────────────────────────────────────────── */
.duo-block__body {
  flex-shrink: 0;
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 400 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-body-size, clamp(1rem, 1.5vw, 1.25rem));
  line-height: 1.78;
  color: var(--hng-white, #ffffff);
}

.duo-block__body p {
  margin: 0 0 0.65em;
}

.duo-block__body p:last-child {
  margin-bottom: 0;
}

/* ── Images stack ─────────────────────────────────────────────── */
.duo-block__images {
  display: flex;
  flex-direction: column;
  gap: var(--db-img-gap);
}

/* Each figure sizes itself to the image's natural aspect ratio */
.duo-block__image {
  margin: 0;
  padding: 0;
  border-radius: var(--db-img-radius);
  overflow: hidden; /* clips only the border-radius corners, not the image */
  line-height: 0; /* remove phantom gap below inline img */
}

.duo-block__image img {
  width: 100%;
  height: auto; /* natural aspect ratio — never cropped */
  display: block;
}

/* ── Right column order: body top, images bottom ─────────────── */
.duo-block__col--right {
  /* body text sits above images naturally via DOM order */
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .duo-block__image img {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   Elements start hidden; JS adds .is-visible when they enter the
   viewport. Respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* ── Base hidden state ───────────────────────────────────────── */
[data-duo-animate] {
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

[data-duo-animate="fade-up"] {
  opacity: 0;
  transform: translateY(48px);
}

[data-duo-animate="slide-left"] {
  opacity: 0;
  transform: translateX(-72px);
}

[data-duo-animate="slide-right"] {
  opacity: 0;
  transform: translateX(72px);
}

/* ── Visible state (added by JS) ─────────────────────────────── */
[data-duo-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── Stagger delay for sibling items ─────────────────────────── */
[data-duo-animate]:nth-child(2) {
  transition-delay: 0.1s;
}
[data-duo-animate]:nth-child(3) {
  transition-delay: 0.2s;
}
[data-duo-animate]:nth-child(4) {
  transition-delay: 0.3s;
}

/* ── Reduced motion: skip animations ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-duo-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Tablet ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .duo-block__inner {
    gap: 1.25rem;
  }
}

/* ── Mobile: stack columns ────────────────────────────────────── */
@media (max-width: 767px) {
  .duo-block {
    padding: 0;
  }

  .duo-block__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  /* Override horizontal slides to fade-up on mobile to avoid overflow */
  [data-duo-animate="slide-left"],
  [data-duo-animate="slide-right"] {
    transform: translateY(48px);
  }
}