/* ==========================================================================
   Pillars Block
   File: assets/css/template-parts/pillars-block.css
   ========================================================================== */

/* ── Custom properties ──────────────────────────────────────── */
.pillars-block {
  --pb-padding: var(--hng-section-pad, clamp(2rem, 5vw, 4rem));
  --pb-inner-gap: var(--hng-row-gap, clamp(1.5rem, 3vw, 2.5rem));
  --pb-group-gap: clamp(3rem, 6vw, 5rem);
  --pb-item-gap: clamp(2.5rem, 5vw, 4rem);
  --pb-col-gap: clamp(1.5rem, 3vw, 3rem);
  --pb-img-radius: var(--radius-image, 40px);
  --pb-orange: var(--hng-orange, #f58220);
  --pb-white: var(--hng-white, #ffffff);
  --pb-muted: var(--hng-muted, rgba(255, 255, 255, 0.72));
  --pb-section-size: var(--hng-h1-size, clamp(2.25rem, 4.5vw, 3.625rem));
  --pb-group-size: clamp(2rem, 5vw, 3.5rem);
  --pb-item-title-sz: clamp(1.4rem, 2.5vw, 2rem);
  --pb-body-size: var(--hng-body-size, clamp(1rem, 1.5vw, 1.25rem));
}

/* ── Outer section ──────────────────────────────────────────── */
.pillars-block {
  width: 100%;
  padding: var(--pb-padding);
  box-sizing: border-box;
  margin-bottom: 60px;
}

/* ── Inner wrapper ──────────────────────────────────────────── */
.pillars-block__inner {
  /* max-width:      1100px;
	margin:         0 auto; */
  display: flex;
  flex-direction: column;
  gap: var(--pb-inner-gap);
}

/* ── Section title ──────────────────────────────────────────── */
.pillars-block__section-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));
  color: var(--pb-orange);
  line-height: 1.2;
}

/* ── Section intro ──────────────────────────────────────────── */
.pillars-block__section-intro {
  margin: 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.75;
  color: var(--hng-white, #ffffff);
  margin-bottom: 5%;
}

/* ── Groups container ───────────────────────────────────────── */
.pillars-block__groups {
  display: flex;
  flex-direction: column;
  gap: var(--pb-group-gap);
}

/* ── Individual group ───────────────────────────────────────── */
.pillars-block__group {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* ── Group heading — large, bold, all-caps ──────────────────── */
.pillars-block__group-heading {
  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));
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pb-white);
  line-height: 1.05;
}

/* ── Group intro ────────────────────────────────────────────── */
.pillars-block__group-intro {
  margin: 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.75;
  color: var(--hng-white, #ffffff);
}

/* ── Items list ─────────────────────────────────────────────── */
.pillars-block__items {
  display: flex;
  flex-direction: column;
  gap: var(--pb-item-gap);
}

/* ── Single item — two-column CSS Grid ──────────────────────── */
.pillars-block__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "content figure";
  align-items: flex-start;
  gap: var(--pb-col-gap);
}

/* Reversed item (even index) — image left, text right */
.pillars-block__item--reverse {
  grid-template-areas: "figure content";
}

/* ── Text content side ──────────────────────────────────────── */
.pillars-block__item-content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ── Item title ─────────────────────────────────────────────── */
.pillars-block__item-title {
  margin: 0;
  font-size: var(--pb-item-title-sz);
  font-weight: 700;
  color: var(--pb-white);
  line-height: 1.25;
}

/* ── Item body ──────────────────────────────────────────────── */
.pillars-block__item-body {
  font-size: var(--hng-body-size, clamp(1rem, 1.5vw, 1.25rem));
  line-height: 1.75;
  color: var(--hng-white, #ffffff);
}

.pillars-block__item-body p {
  margin: 0 0 0.5em;
}
.pillars-block__item-body p:last-child {
  margin-bottom: 0;
}
.pillars-block__item-body ul,
.pillars-block__item-body ol {
  padding-left: 1.25em;
  margin: 0.25em 0 0;
}
.pillars-block__item-body li {
  margin-bottom: 0.25em;
}
.pillars-block__item-body strong {
  color: var(--pb-white);
  font-weight: 600;
}
.pillars-block__item-body a {
  color: var(--pb-orange);
  text-decoration: underline;
}

/* ── CTA buttons container ──────────────────────────────────── */
.pillars-block__item-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 0.4rem;
  flex-direction: column;
  align-items: flex-start;
}

/* ── Individual CTA button — inherits .hng-btn ─────────────── */
.pillars-block__btn {
  /* All visual styling comes from .hng-btn */
}

/* ── Image figure ───────────────────────────────────────────── */
.pillars-block__item-figure {
  grid-area: figure;
  margin: 0;
  border-radius: var(--pb-img-radius);
  overflow: hidden;
  line-height: 0; /* remove inline spacing */
}

.pillars-block__item-figure img {
  display: block;
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  object-fit: contain;
  /* aspect-ratio: 4 / 3; */
  border-radius: var(--pb-img-radius);
}

/* ── Responsive — tablet ─────────────────────────────────────── */
@media (max-width: 900px) {
  .pillars-block__item {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

/* ── Responsive — mobile ─────────────────────────────────────── */
@media (max-width: 620px) {
  .pillars-block__item,
  .pillars-block__item--reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "figure"
      "content";
  }

  .pillars-block__item-figure img {
    aspect-ratio: 13 / 10;
  }

  .pillars-block__item-content {
    padding: 0 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   Text: fade up. Image on right: slide from right. Image on left: slide from left.
   ═══════════════════════════════════════════════════════════════ */

[data-pb-animate] {
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

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

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

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

[data-pb-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-pb-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}