/*!
 * ===========================
 * Author: Steve Gotthardt
 * Created: 1/2023
 * ===========================
 */

/* Nav Bar */
.resourceCategories {
  border: 1px solid #cecece;
  border-radius: 5px;
  background: #ededed;
  padding: 1rem 1.25rem;
}
.resourceCategories ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.resourceCategories ul li {
  margin: 0.5rem 0;
}
.resourceCategories a:not(:hover, :focus) {
  color:#262626;
}
.resourceCategories a::before,
h2.resourceCategory::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: bold;
}
.resourceCategories a::before {
  display: inline-block;
  margin-right: 6px;
  width: 20px;
}
.resourceCategories a[href="#a-conferences"]::before,
h2.resourceCategory#conferences::before {
  content: "\f0c0";
}
.resourceCategories a[href="#a-webcasts"]::before,
h2.resourceCategory#webcasts::before {
  content: "\f0ac";
}
.resourceCategories a[href="#a-elearning"]::before,
h2.resourceCategory#elearning::before {
  content: "\f8cc";
}
.resourceCategories a[href="#a-tools"]::before,
h2.resourceCategory#tools::before {
  content: "\f7d9";
}
.resourceCategories a[href="#a-blogs"]::before,
h2.resourceCategory#blogs::before {
  content: "\f14b";
}
.resourceCategories a[href="#a-articles"]::before,
h2.resourceCategory#articles::before {
  content: "\f1ea";
}
.resourceCategories a[href="#a-surveys"]::before,
h2.resourceCategory#surveys::before {
  content: "\f681";
}
.resourceCategories a[href="#a-videos"]::before,
h2.resourceCategory#videos::before {
  content: "\f03d";
}
.resourceCategories a[href="#a-podcasts"]::before,
h2.resourceCategory#podcasts::before {
  content: "\f2ce";
}
.resourceCategories a[href="#a-stories"]::before,
h2.resourceCategory#stories::before {
  content: "\f164";
}
.resourceCategories a[href="#a-tips"]::before,
h2.resourceCategory#tips::before {
  content: "\f0ae";
}
.resourceCategories a[href="#a-quicklinks"]::before,
h2.resourceCategory#quicklinks::before {
  content: "\f0c1";
}
.resourceCategories a[href="#a-additional"]::before,
h2.resourceCategory#additional::before {
  content: "\f61f";
}

@media screen and (min-width: 600px) {
  .resourceCategories {
    text-align: center;
  }
  .resourceCategories ul li {
    margin: 0;
    display: inline;
  }
  .resourceCategories a {
    margin: 0.25rem 1rem;
    display: inline-block;
  }
  .resourceCategories a::before {
    width: auto;
  }
}

/* Items */
.resource-container img {
  max-width: 400px;
  width: 100%;
  margin: 0;
}
h2.resourceCategory {
  margin: 2.5rem 0 0;
  padding: 2.5rem 0 1.5rem;
  border-top: 2px solid #7e9f38;
  color: #7e9f38;
}
h2.resourceCategory + h3,
h2.resourceCategory + ul {
  margin-top: -0.5rem;
}
h2.resourceCategory::before {
  margin-right: 0.75rem;
}

.resourceList {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.resource {
  display: grid;
  grid-row-gap: 2rem;
  align-items: start;
}
.resource .resourceImage {
  margin: 0 auto;
  max-width: 400px;
}
.resource a.resourceImage:hover {
  opacity: 0.75;
}
.resource .resourceImage img {
  display: block;
}
.resourceList.blogs .resource .resourceText {
  display: grid;
  grid-template-areas: "thumbnail" "title" "description" "button";
  align-items: start;
}
.resourceList.blogs .resource .resourceText h3,
.resourceList.blogs .resource .resourceText p:nth-of-type(2) {
  margin-right: 48px;
}
.resourceList.blogs .resource .resourceText h3 {
  grid-area: title;
  align-self: end;
}
.resourceList.blogs .resource .resourceText p:nth-of-type(1) {
  grid-area: thumbnail;
  margin: 0 0 24px;
}
.resourceList.blogs .resource .resourceText p:nth-of-type(2) {
  grid-area: description;
}
.resourceList.blogs .resource .resourceText p:nth-of-type(3),
.resourceList.blogs .resource .resourceText p:nth-of-type(4),
.resourceList.blogs .resource .resourceText a.read-more-button {
  display: none;
}
.resourceList.blogs .resource .resourceText a.button {
  grid-area: button;
  justify-self: start;
}
.resourceList.blogs .resource .resourceText img {
  height: auto;
  margin-right: 0 !important;
}

@media screen and (min-width: 768px) {
  .resourceList {
    gap: 4rem;
    margin-right: -48px;
  }
  .resourceList .resource,
  .resourceList.blogs .resource .resourceText {
    grid-template-columns: 1fr 3fr;
  }
  .resourceList.blogs .resource {
    display: block;
  }
  .resourceList.blogs .resource .resourceText {
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "thumbnail title"
      "thumbnail description"
      "thumbnail button";
  }
  .resourceList.blogs .resource .resourceText p:nth-of-type(1) {
    margin-bottom: 0;
  }
  .resource .resourceImage,
  .resource .resourceText,
  .resourceList.blogs .resource .resourceText p:nth-of-type(1) {
    margin-right: 48px;
  }
  .resourceList.blogs .resourceText {
    margin-right: 0;
  }
  .resource .resourceImage img {
    display: block;
  }
}
.resourceList.podcasts {
  max-width: 800px;
}