/*!
 * ===========================
 * Author: Steve Gotthardt
 * Created: 4/2026
 * ===========================
 */

main#top {
  padding-bottom: 0;
}
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  max-width: 285px;
  margin: 0 auto;
  @media (min-width: 768px) {
    flex-direction: row;
    max-width: none;
    gap: 12px;
  }
  .button {
    width: 100%;
    @media (min-width: 768px) {
      width: 285px;
    }
  }
  .button.button--secondary {
    color: #00447c;
    &:hover,
    &:focus {
      color: white;
    }
  }
}

.highlight-row.grid,
.section-container .grid {
  align-items: stretch;
  .grid__unit > div,
  .grid__unit > div > div {
    display: flex;
    flex-direction: column;
    text-align: center;
    @media (min-width: 768px) {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
.highlight-row.grid .grid__unit > div > div,
.section-container .grid ul li {
  text-align: start;
}

.section-container {
  padding: 108px 0;
  &.interstitial {
    padding: 0 24px 24px !important;
    @media (min-width: 960px) {
      padding: 0 48px !important;
    }
    @media (min-width: 1376px) {
      padding: 0 !important;
    }
    &.interstitial--left {
      @media (min-width: 960px) {
        padding-right: 0 !important;
      }
    }
    &.interstitial--right {
      @media (min-width: 960px) {
        padding-left: 0 !important;
      }
    }
  }
  .card {
    h2.h3,
    h3 {
      line-height: 1.2;
    }
  }
  &.pricing-cta {
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    background: #f6f6f6;
    h2,
    p {
      text-align: start;
    }
  }
  &.pricing {
    padding-bottom: 0;
  }
  &.more-info {
    padding-left: 24px;
    @media (min-width: 768px) {
      padding-left: 48px;
    }
    .grid {
      margin: 0;
    }
  }
  &.join-promo {
    margin: 0;
    background: #00447c;
  }
  &.why-recommend,
  &.testimonial,
  &.pricing {
    padding-left: 24px;
    padding-right: 24px;
    @media (min-width: 768px) {
      padding-left: 48px;
      padding-right: 48px;
    }
    @media (min-width: 1376px) {
      padding-left: 0;
      padding-right: 0;
    }
  }
  &.why-recommend {
    background: #00447c;
    color: white;
    .h1 {
      font-family:
        "Barlow Semi Condensed", "Roboto", Helvetica, Arial, sans-serif;
      font-size: 54px;
      line-height: 1.15;
      font-weight: 600;
      color: white;
    }
  }
  &.testimonial {
    background: #00447c;
    color: white;
    text-align: center;
    p {
      max-width: 70ch;
      margin-left: auto;
      margin-right: auto;
    }
    .quote {
      font-family: "Halant", "Roboto", Helvetica, Arial, sans-serif;
      font-size: 18pt;
      line-height: 1.6;
      font-style: italic;
    }
  }
  &.benefits,
  &.benefits-expanded {
    .page-bounds {
      padding: 0 24px;
      @media (min-width: 768px) {
        padding: 0 48px;
      }
      @media (min-width: 1376px) {
        padding: 0;
      }
    }
    .benefit-tile-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      grid-gap: 12px;
      justify-content: center;
      .benefit {
        background:
          linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),
          url(https://www.ifebp.org/images/default-source/site-images/membership/membership-thumbnail-2025.jpg);
        background-blend-mode: saturation;
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        padding: 48px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &::before {
          position: absolute;
          content: "";
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0.9;
        }
        &::after {
          position: absolute;
          content: "";
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: white;
          opacity: 0.2;
        }
        h3,
        p {
          color: #262626;
          z-index: 1;
          position: relative;
          text-align: center;
        }
        h3 {
          font-family:
            "Barlow Semi Condensed", "Roboto", Helvetica, Arial, sans-serif;
          font-size: 25px;
          line-height: 32px;
          font-weight: 600;
          margin-bottom: 12px;
        }
      }
    }
    &.benefits {
      .benefit-tile-container .benefit {
        &:nth-of-type(4n + 1) {
          &::before {
            background: #f7c414;
          }
        }
        &:nth-of-type(4n + 2) {
          &::before {
            background: #82bf43;
          }
        }
        &:nth-of-type(4n + 3) {
          &::before {
            background: #9bcfe8;
          }
        }
        &:nth-of-type(4n + 4) {
          &::before {
            background: #3bac96;
          }
        }
      }
    }
    &.benefits-expanded {
      padding-top: 0;
      .benefit-tile-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        .benefit {
          &:nth-of-type(3n + 1) {
            &::before {
              background: #f7c414;
            }
          }
          &:nth-of-type(3n + 2) {
            &::before {
              background: #82bf43;
            }
          }
          &:nth-of-type(3n + 3) {
            &::before {
              background: #9bcfe8;
            }
          }
        }
      }
    }
    &.pricing {
      background: #f6f6f6;
    }
  }
}

div#RateChartMainContainer {
  margin-top: 0;
}

.join-and-explore-buttons {
  display: flex;
  flex-direction:column;
  gap: 6px;
  @media (min-width:600px) {
    flex-direction:row;
  }
  @media (min-width:768px) {
    flex-direction:column;
  }
  @media (min-width:1220px) {
    flex-direction:row;
  }
}