/* filename: css/pillars_commitments.css */
.pillar-content{
  margin: 0 auto;
  padding: 5em 0px 2em;
}

.pillars-commitments-paragraph {
  background-color:#fff;
}

.pillars-commitments__main-title {
  font-size: 27px;
  font-weight: 600;
  color: #4B4C57;
  margin-bottom: 1em !important;
  text-align: left; /* Or center if preferred */
}

.pillars-commitments__grid {
  display: grid;
  gap: 2em 1.5em; /* Row gap, Column gap */
  grid-template-columns: 1fr; /* Mobile: 1 column */
}

/* Tablet - Example: 2 columns */
@media (min-width: 576px) {
  .pillars-commitments__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop - 3 columns */
@media (min-width: 992px) {
  .pillars-commitments__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pillar-item {
  background-color: #fff; /* Light background for text area */
  overflow: hidden; /* Ensure header bg doesn't bleed */
  display: flex; /* Use flex to make header/content structure easier */
  flex-direction: column;
}

.pillar-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  color: #ffffff; /* White text on colored background */
}

.pillar-item__title {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.3;
  color:white;
}

/* --- Keep General ICON STYLING --- */
.pillar-icon {
  display: inline-block;
  width: 66px;
  height: 56px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-left: 0.5em;
  vertical-align: middle;
}

/* --- Icon Background Images based on POSITION --- */
/* Assign the correct icon PNG to the correct pillar number */
.pillar-icon--1 { background-image: url('../images/icons/zero-hunger.webp'); } /* 1st pillar */
.pillar-icon--2 { background-image: url('../images/icons/water.webp'); }      /* 2nd pillar */
.pillar-icon--3 { background-image: url('../images/icons/industry.webp'); }   /* 3rd pillar */
.pillar-icon--4 { background-image: url('../images/icons/consumption.webp'); }/* 4th pillar */
.pillar-icon--5 { background-image: url('../images/icons/climate.webp'); }    /* 5th pillar */


/* --- Background Colors (based on POSITION - should match existing) --- */
.pillar-item--1 .pillar-item__header { background-color: #D3A029; } /* Gold */
.pillar-item--2 .pillar-item__header { background-color: #00AED9; } /* Blue */
.pillar-item--3 .pillar-item__header { background-color: #F36D24; } /* Orange */
.pillar-item--4 .pillar-item__header { background-color: #CF8D2A; } /* Gold */
.pillar-item--5 .pillar-item__header { background-color: #48773D; } /* Green */


.pillar-item__content {
  padding: 1em 1em 1em 0.5em;
  font-size: 16px;
  line-height: 100%;
  color: #000;
  flex-grow: 1; /* Allow content to fill space if heights differ */
  font-weight: 500;
}

.pillar-item__content ul {
  list-style: disc;
  margin: 0.5em 0 0 0;
  padding-left: 1.2em;
}

.pillar-item__content li {
  margin-bottom: 0.4em;
}

.pillar-item__content > *:last-child {
  margin-bottom: 0;
}