/* =========================================================
   STRATEGIC OBJECTIVES
   ========================================================= */

:root{
  --objectives-max-width: 1400px;
  --objectives-bg: #f7f9fb;
  --objectives-card-bg: #ffffff;

  --objectives-heading: #0b2f50;
  --objectives-accent: #0cc392;
  --objectives-number: #d09353;

  --objectives-text: #252a31;
  --objectives-muted: #626b76;
  --objectives-border: #e1e7ec;

  --objectives-shadow:
    0 12px 32px rgba(11, 47, 80, 0.08);
}

/* =========================================================
   SECTION
   ========================================================= */

.objectives{
  width: 100%;
  /* background: var(--objectives-bg); */
  background: #DCE2CB;;
}

.objectives__wrap{
  width: min(
    var(--objectives-max-width),
    calc(100% - 40px)
  );

  margin: 0 auto;
  padding: clamp(52px, 7vw, 96px) 0;
}

/* =========================================================
   SECTION HEADER
   ========================================================= */

.objectives__header{
  max-width: 850px;
  margin: 0 auto clamp(38px, 5vw, 62px);
  text-align: center;
}

.objectives__eyebrow{
  margin: 0 0 10px;

  color: var(--objectives-number);

  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.objectives__title{
  margin: 0;

  color: var(--objectives-heading);

  font-family: Tahoma, Roboto, Geneva, Verdana, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.objectives__title-rule{
  width: 76px;
  height: 3px;

  margin: 20px auto 22px;

  background: var(--objectives-accent);
  border-radius: 999px;
}

.objectives__intro{
  margin: 0;

  color: var(--objectives-muted);

  font-family: Roboto, Arial, Helvetica, sans-serif;
  /* font-size: clamp(1rem, 1.35vw, 1.1rem); */
  font-size: 1rem;
  line-height: 1.75;
}

/* =========================================================
   OBJECTIVES GRID
   Five cards per row on large desktop
   ========================================================= */

.objectives__grid{
  list-style: none;

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);

  margin: 0;
  padding: 0;
}

/* =========================================================
   OBJECTIVE CARD
   ========================================================= */

.objective-card{
  position: relative;

  min-width: 0;
  /* min-height: 280px; */

  padding: 30px 20px 26px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  background: var(--objectives-card-bg);
  border: 1px solid var(--objectives-border);
  border-radius: 8px;
  box-shadow: var(--objectives-shadow);

  text-align: center;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.objective-card::before{
  content: "";

  position: absolute;
  top: 0;
  left: 50%;

  width: 56px;
  height: 3px;

  background: var(--objectives-accent);
  border-radius: 0 0 999px 999px;

  transform: translateX(-50%);
}

.objective-card:hover{
  transform: translateY(-6px);

  border-color: rgba(12, 195, 146, 0.45);

  box-shadow:
    0 18px 42px rgba(11, 47, 80, 0.14);
}

/* =========================================================
   CARD NUMBER
   ========================================================= */

.objective-card__number{
  margin-bottom: 20px;

  color: var(--objectives-number);

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
}

/* =========================================================
   CARD TEXT
   ========================================================= */

.objective-card__text{
  margin: 0;

  color: var(--objectives-text);

  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: clamp(0.88rem, 1vw, 0.98rem);
  font-weight: 600;
  line-height: 1.65;
}

/* =========================================================
   VERY LARGE SCREENS
   ========================================================= */

@media (min-width: 1500px){
  .objectives__wrap{
    padding-top: 88px;
    padding-bottom: 104px;
  }

  .objectives__grid{
    gap: 26px;
  }

  .objective-card{
    /* min-height: 290px; */
    padding: 32px 22px 28px;
  }
}

/* =========================================================
   LARGE DESKTOP
   5 cards per row
   ========================================================= */

@media (min-width: 1200px){
  .objectives__grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* =========================================================
   SMALLER DESKTOP
   4 cards per row
   ========================================================= */

@media (max-width: 1199px){
  .objectives__wrap{
    width: min(
      var(--objectives-max-width),
      calc(100% - 36px)
    );
  }

  .objectives__grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .objective-card{
    min-height: 270px;
  }
}

/* =========================================================
   TABLET LANDSCAPE
   3 cards per row
   ========================================================= */

@media (max-width: 1000px){
  .objectives__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .objective-card{
    /* min-height: 250px; */
    padding: 28px 22px 24px;
  }
}

/* =========================================================
   TABLET PORTRAIT
   2 cards per row
   ========================================================= */

@media (max-width: 760px){
  .objectives__wrap{
    width: min(
      var(--objectives-max-width),
      calc(100% - 32px)
    );
  }

  .objectives__header{
    margin-bottom: 40px;
  }

  .objectives__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .objective-card{
    /* min-height: 230px; */
    padding: 26px 20px 22px;
  }

  .objective-card__number{
    margin-bottom: 16px;
  }
}

/* =========================================================
   MOBILE
   1 card per row
   ========================================================= */

@media (max-width: 560px){
  .objectives__wrap{
    width: calc(100% - 28px);
    padding: 46px 0 58px;
  }

  .objectives__header{
    margin-bottom: 34px;
    text-align: left;
  }

  .objectives__title{
    font-size: clamp(1.9rem, 9vw, 2.7rem);
  }

  .objectives__title-rule{
    margin-left: 0;
    margin-right: 0;
  }

  .objectives__intro{
    font-size: 1rem;
    line-height: 1.7;
  }

  .objectives__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .objective-card{
    min-height: 0;

    padding: 24px 20px;

    align-items: flex-start;
    text-align: left;
  }

  .objective-card::before{
    left: 20px;
    transform: none;
  }

  .objective-card__number{
    margin-bottom: 14px;
    font-size: 2.5rem;
  }

  .objective-card__text{
    font-size: 0.98rem;
    line-height: 1.65;
  }
}

/* =========================================================
   EXTRA-SMALL MOBILE
   ========================================================= */

@media (max-width: 400px){
  .objectives__wrap{
    width: calc(100% - 24px);
    padding: 40px 0 50px;
  }

  .objectives__eyebrow{
    font-size: 0.76rem;
  }

  .objectives__title{
    font-size: 1.9rem;
  }

  .objective-card{
    padding: 22px 18px;
  }

  .objective-card::before{
    left: 18px;
  }

  .objective-card__number{
    font-size: 2.25rem;
  }

  .objective-card__text{
    font-size: 0.95rem;
  }
}