/* =========================================================
   MPR CONTENT LIST - BASE SECTION
   Shared by all content-list layouts
   ========================================================= */

.mpr-content-list-section {
  padding: 18px 26px;
}

.mpr-content-list-wrapper {
  max-width: 1180px;
  margin: 0 auto;
}


/* =========================================================
   MPR CONTENT LIST - BASE LIST
   Shared by all content-list layouts
   ========================================================= */

.mpr-content-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5rem;
}

.mpr-content-list-item {
  position: relative;
  padding-left: 2.8rem;
  margin-bottom: 1.2rem;
  color: #263238;
  line-height: 1.55;
}

.mpr-content-list-item:last-child {
  margin-bottom: 0;
}


/* =========================================================
   MPR CONTENT LIST - GREEN CHECK ICON
   ========================================================= */

.mpr-content-list-item::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.18em;
  color: green;
  font-size: 2rem;
  line-height: 1;
}


/* =========================================================
   MPR CONTENT LIST - ITEM TITLE & DESCRIPTION
   Description is optional in the HTML
   ========================================================= */

.mpr-content-list-item-title {
  display: block;
  font-weight: 600;
  color: #263238;
}

.mpr-content-list-item-description {
  display: block;
  margin-top: 0.25rem;
  color: #59656b;
  font-size: 1.6rem;
  line-height: 1.45;
}


/* =========================================================
   LAYOUT OPTION 1
   FULL-WIDTH TWO-COLUMN TEXT GRID
   Section modifier:
   .mpr-content-list-section--two-column-grid
   ========================================================= */

.mpr-content-list-section--two-column-grid .mpr-content-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 50px;
}


/* =========================================================
   LAYOUT OPTION 2
   TEXT LEFT + IMAGE RIGHT
   Section modifier:
   .mpr-content-list-section--two-column-image-right
   ========================================================= */

.mpr-content-list-section--two-column-image-right .mpr-content-list-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.mpr-content-list-section--two-column-image-right .mpr-content-list-text {
  flex: 1 1 58%;
  min-width: 0;
}

.mpr-content-list-section--two-column-image-right .mpr-content-list-image {
  flex: 1 1 42%;
  min-width: 0;
}

.mpr-content-list-section--two-column-image-right .mpr-content-list-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}


/* =========================================================
   TEMPORARY IMAGE PLACEHOLDER
   Only needed while testing image layouts
   ========================================================= */

.mpr-content-list-image--placeholder {
  min-height: 350px;
  background: #e9eef2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667780;
  border-radius: 8px;
}


/* =========================================================
   TABLET / NARROWER SCREENS
   Both layouts become one column
   ========================================================= */

@media (max-width: 900px) {

  .mpr-content-list-section--two-column-grid .mpr-content-list {
    grid-template-columns: 1fr;
  }

  .mpr-content-list-section--two-column-image-right .mpr-content-list-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .mpr-content-list-section--two-column-image-right .mpr-content-list-text,
  .mpr-content-list-section--two-column-image-right .mpr-content-list-image {
    flex: none;
    width: 100%;
  }

  .mpr-content-list-section--two-column-image-right .mpr-content-list-image {
    max-width: 620px;
    margin: 0 auto;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 520px) {

  .mpr-content-list-section {
    padding: 18px 12px;
  }

  .mpr-content-list-item {
    margin-bottom: 1.4rem;
  }
}


/* =========================================================
   MPR CONTENT LIST - HTML USAGE

   OPTION 1: TWO-COLUMN TEXT GRID
   <section class="mpr-content-list-section mpr-content-list-section--two-column-grid">
     <div class="mpr-content-list-wrapper">
       <h2 class="mpr-section-heading">...</h2>
       <ul class="mpr-content-list">
         <li class="mpr-content-list-item">...</li>
       </ul>
     </div>
   </section>

   OPTION 2: TEXT + IMAGE RIGHT
   <section class="mpr-content-list-section mpr-content-list-section--two-column-image-right">
     <div class="mpr-content-list-wrapper">
       <h2 class="mpr-section-heading">...</h2>
       <div class="mpr-content-list-inner">
         <div class="mpr-content-list-text">
           <ul class="mpr-content-list">
             <li class="mpr-content-list-item">...</li>
           </ul>
         </div>
         <div class="mpr-content-list-image">
           <img src="..." alt="...">
         </div>
       </div>
     </div>
   </section>
   ========================================================= */