/* =============================================================
   Pillars — Plain text vertical layout
   ============================================================= */

.pillars-section {
  padding-block: var(--sp-7);
}

.pillars-split {
  gap: var(--sp-9);
  /* 3x the standard gap (increase by 200%) */
}

.pillars-heading {
  text-align: right;
  max-width: 20ch;
  margin-left: auto;
  margin-bottom: 0;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.pillars-text {
  text-align: right;
}

@media (max-width: 768px) {
  .pillars-heading {
    text-align: center;
    max-width: 26ch;
    margin-inline: auto;
    margin-bottom: var(--sp-9);
  }

  .pillars-text {
    text-align: center;
  }
}

.btn--pillars {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  padding: 18px 36px;
  background-color: var(--c-gold);
  color: var(--c-white) !important;
  border-color: var(--c-gold);
}

.btn--pillars:hover {
  background-color: transparent;
  color: var(--c-gold) !important;
}

/* Vertical stack container */
.pillars {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  /* Tighter gap for bullet points */
  width: 100%;
  max-width: 520px;
  margin-inline: 0 auto;
}

/* ---------- Node cards (Plain text) ---------- */
.pillar-node {
  position: relative;
  padding-left: var(--sp-7);
  /* More padding for the line/bullet space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Ensure content is vertically centered */
  min-height: 80px;
  /* Ensure enough height for the line to look good */
  align-items: flex-start;
  text-align: left;
}

.pillar-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--c-gold);
  border-radius: 50%;
  z-index: 2;
}

/* Vertical connecting line */
.pillar-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 4.5px;
  /* Center of the 10px bullet */
  top: 50%;
  height: calc(100% + var(--sp-4));
  /* Reaches the center of the next bullet */
  width: 1px;
  background-color: var(--color-border);
  z-index: 1;
}

/* Label - matches .feature__title strong style */
.pillar-node__label {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 var(--sp-1);
}

/* Description - matches .feature__body style */
.pillar-node__desc {
  margin: 0;
  font-size: 1.15rem;
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  max-width: 100%;
}

/* ---------- Mobile: spacing and alignment ---------- */
@media (max-width: 768px) {
  .pillars {
    margin-inline: auto;
    gap: var(--sp-6);
    padding-block: var(--sp-6);
    align-items: flex-start;
    max-width: 320px;
    /* Keeps the list centered on screen while items are left-aligned */
  }

  .pillar-node {
    padding-left: var(--sp-6);
    align-items: flex-start;
    text-align: left;
    min-height: 0;
  }

  .pillar-node::before,
  .pillar-node::after {
    display: block;
  }

  .pillar-node:not(:last-child)::after {
    height: calc(100% + var(--sp-6));
  }

  .pillar-node__label {
    font-size: 1.4rem;
  }

  .pillar-node__desc {
    font-size: 1.05rem;
    max-width: 100%;
  }
}