/*
 * Awards page (templates/template-awards.php). Loaded only by that template.
 * Every selector is scoped to a kb-award* class, so no other page is affected.
 */

/* Intro */
.kb-awards-intro p:last-child { margin-bottom: 0; }
.kb-awards-intro h2 { font-size: 1.75rem; margin-bottom: 1rem; color: #1e212c; }

/* Accreditations beside the intro (Website Options > SEO Items) */
.kb-awards-accred {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kb-awards-accred-item {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}
.kb-awards-accred-item:last-child { margin-bottom: 0; }
.kb-awards-accred-logo {
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  margin-right: 1rem;
  object-fit: contain;
}
.kb-awards-accred-text {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1e212c;
}

/* Phones: the carousels use the prev/next arrows under the heading, not dots (20 dots do not fit). */
@media (max-width: 575.98px) {
  /* Beats an older copy of this file in Customizer > Additional CSS (post 1013), which adds 2.75rem for dots. */
  #award-history.kb-awards-history .tns-item { padding-bottom: 1rem !important; }
  .kb-awards-history .tns-custom-controls,
  #award-winning-projects .tns-custom-controls,
  #awards-in-the-news .tns-custom-controls { margin-left: 0 !important; }
}

/* Year groups. The last group has no bottom space, so the projects section starts close below it. */
.kb-awards-history { padding-bottom: 0 !important; }
.kb-awards-history .kb-awards-year:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.kb-awards-year-count {
  display: inline-block;
  margin-left: .5rem;
  padding: .2rem .75rem;
  border-radius: 1rem;
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary);
  font-size: .875rem;
  font-weight: 700;
  vertical-align: middle;
  letter-spacing: .02em;
}
@media (min-width: 992px) {
  .kb-awards-few { display: none !important; }
}

/* Award card */
.kb-award-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: .75rem .75rem 1.5rem;
  border-radius: .5rem;
  background: #eef6fd;
}
.kb-awards-history .tns-item { display: inline-flex; }
/* The theme zeroes padding on #tns1 (the homepage slider), which here is the first year carousel. */
#award-history .tns-item { padding-bottom: 1rem !important; }
.kb-awards-history .tns-item > .kb-award-card { width: 100%; }

.kb-award-badge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: .9rem;
  row-gap: .1rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: .35rem;
  background: #fff;
}
.kb-award-badge .fa {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #12355b;
  color: #f2c14e;
  font-size: 1.35rem;
}
.kb-award-badge-result {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #12355b;
}
.kb-award-badge-year {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.35rem;
  font-weight: 900;
  color: #12355b;
}
.kb-award-badge-program {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: .85rem;
  font-weight: 700;
  color: var(--gray-dark);
}
.kb-award-badge--finalist .fa { background: #e8edf3; color: #12355b; }

.kb-award-recipient {
  margin: 0 .5rem .35rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1e212c;
}
.kb-award-recipient a { color: inherit; text-decoration: none; }
.kb-award-recipient a:hover { color: var(--primary); text-decoration: none; }
.kb-award-category {
  margin: 0 .5rem .75rem;
  font-size: .95rem;
  font-weight: 700;
  color: #1e212c;
}
.kb-award-program,
.kb-award-note {
  margin: 0 .5rem .5rem;
  font-size: .95rem;
  color: var(--gray-dark);
}
.kb-award-note { font-style: italic; }
.kb-award-link {
  margin: auto .5rem 0;
  padding-top: .75rem;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}
.kb-award-link:hover { text-decoration: underline; }
.kb-award-link .cxi-arrow-right { vertical-align: middle; font-size: .8em; }

/* Award-winning project + news cards */
/* Award-Winning Projects: the same space above and below as above "Awards in the News"
   (96px from lg, 48px below lg), measured from the card edges. The theme track is a flex row, so every
   slide has the height of the tallest card; the card fills its slide, so all cards share that height. */
#award-winning-projects { padding-top: 80px; padding-bottom: 72px; } /* + 16px slide gap above, 24px below */
#award-winning-projects .tns-item { display: flex !important; padding-bottom: 24px !important; }
#award-winning-projects .tns-item > .kb-award-project { flex: 1 1 auto; width: 100%; }
@media (max-width: 991.98px) {
  #award-winning-projects { padding-top: 32px; padding-bottom: 24px; }
}

.kb-award-project .card-body,
.kb-award-news .card-body { display: flex; flex-direction: column; }
.kb-award-project .btn { align-self: flex-start; margin-top: auto !important; }
.kb-award-project-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  color: var(--gray-dark);
}
.kb-award-project-list li { position: relative; margin-bottom: .4rem; padding-left: 1.4rem; }
.kb-award-project-list .kb-award-project-more { padding-left: 1.4rem; font-weight: 700; letter-spacing: .1em; }
.kb-award-project-list .fa { position: absolute; left: 0; top: .2rem; color: var(--primary); }
.kb-award-project .site-img img,
.kb-award-news .site-img img { object-fit: cover; }

@media (max-width: 575.98px) {
  .kb-awards-year-count { display: table; margin: .5rem 0 0; }
}