/* Articles and Careers pages (template-parts/articles-content.php, careers-content.php,
   article-content.php, career-content.php). Loaded only on those pages (inc/assets.php). */

/* ===== Listing pages (Articles, Careers) ===== */
.articles-header {
  max-width: 100%;
}

.articles__left-pattern {
  top: -16.5%;
  z-index: 0;
}

.articles-container {
  padding: 0;
  background: transparent;
}

.articles-columns {
  gap: 126px;
  width: 100%;
  z-index: 1;
  position: relative;
}

.articles-card__heading {
  margin: 0;
}

.articles-text-block {
  white-space: pre-line;
  font-size: 14px;
  margin: 0;
}

.articles-text-block-layout {
  gap: 20px;
}

.articles-content {
  width: 100%;
}

.articles-image {
  background: inherit !important;
}

.articles-layout {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  padding: 97px 90px 100px 137px;
  background: var(--color-gray);
}

.articles-container-overlay {
  position: absolute;
  left: 0;
  bottom: -42px;
  width: 100%;
  height: 100%;
  background-color: var(--color-cream);
  border-radius: 40px;
  z-index: -1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.articles-page__pagination {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 485px;
  height: fit-content;
  margin-right: 130px;
}

.articles-page__prev,
.articles-page__next,
.articles-page__pages-title,
.articles-page__see-all,
.articles-page__page {
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-teal);
  font-family: var(--font-family-primary);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
}

/* bigger touch area for the page numbers */
.articles-page__page {
  position: relative;
}

.articles-page__page::after {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

.articles-page__page.active,
.articles-page__see-all.active {
  color: white;
}

.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.articles-page__pages {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.articles-page__pages-list {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 1280px) {
  .articles__left-pattern {
    top: -12.6%;
  }

  .articles-header {
    max-width: 530px;
  }
}

@media (max-width: 1024px) {
  .articles-layout {
    padding: 21px 16px 61px 16px;
  }

  .articles-container {
    margin-top: 49px;
  }

  .articles-content {
    flex-direction: column-reverse;
    gap: 30px;
  }

  .articles__left-pattern {
    top: -7%;
  }
}

@media (max-width: 768px) {
  .articles-columns {
    gap: 113px;
  }

  .articles-header {
    max-width: 330px;
  }

  .articles-text-block {
    font-size: 13px;
  }

  .articles-content__content {
    padding: 0 10px;
  }

  .articles-page {
    margin-bottom: 259px;
  }

  .articles-page--empty {
    margin-bottom: 0;
  }

  .articles-container-overlay {
    bottom: -134px;
    justify-content: center;
  }

  .articles-page__pagination {
    flex-direction: column;
    gap: 15px;
    margin: 0 0 15px 0;
  }
}

/* Careers listing only */
.career__left-pattern {
  top: -55.5%;
}

.career-location {
  margin: 0;
  color: var(--color-teal);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}

@media (max-width: 1280px) {
  .career__left-pattern {
    top: -36.6%;
  }
}

@media (max-width: 1024px) {
  .career__left-pattern {
    top: -27%;
  }
}

@media (max-width: 768px) {
  .career-location {
    font-size: 14px;
  }

  .articles-page--careers .articles-text-block-layout {
    margin-top: 20px;
  }
}

/* ===== Single article / career page ===== */
.individual-blog__main {
  margin-top: 20px;
  width: 100%;
}

.individual-blog__container {
  max-width: 1214px;
  padding: 0 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 50px;
  margin: 0 auto;
}

.individual-blog__items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.individual-blog__intro {
  margin-top: 10px;
}

.individual-blog__items>h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  color: var(--color-teal);
  text-transform: uppercase;
  font-family: var(--font-family-primary);
}

.individual-blog__content-body h2,
.individual-blog__content-body h3 {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-teal);
  text-transform: uppercase;
  margin: 40px 0 20px;
  font-family: var(--font-family-primary);
}

.individual-blog__content-body h2:first-of-type {
  margin-top: 0;
}

.individual-blog__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.individual-blog__content p,
.individual-blog__content-body p,
.individual-blog__content-body li {
  font-size: 15px;
  color: var(--color-black);
  font-family: var(--font-family-primary);
  text-align: left;
  line-height: 1.25;
  margin: 0;
}

.individual-blog__content-body>*:last-child,
.individual-blog__content-body p:last-child,
.individual-blog__content-body ul:last-child,
.individual-blog__content-body ol:last-child {
  margin-bottom: 0;
}

.individual-blog__content-body ul,
.individual-blog__content-body ol {
  margin: 0 0 20px;
  padding-left: 20px;
}

.individual-blog__content-body a,
.individual-blog__back-link {
  color: var(--color-teal);
  font-weight: 700;
  text-decoration: none;
}

.individual-blog__content-body figure,
.individual-blog__content-body .wp-block-image {
  margin: 20px 0;
}

.individual-blog__content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 40px;
  overflow: hidden;
  object-fit: cover;
}

.individual-blog__content-imgs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  gap: 36px;
  padding: 20px 0;
}

.individual-blog__content-img {
  max-width: 484px;
  height: auto;
  border-radius: 40px;
  overflow: hidden;
  object-fit: cover;
  aspect-ratio: 484 / 212;
}

.individual-blog__footer {
  width: 100%;
  margin-top: 80px;
  padding: 0 30px;
}

.individual-blog__footer-container {
  max-width: 1735px;
  margin: 0 auto;
  border-radius: 40px;
  background-color: var(--color-teal);
  padding: 65px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.individual-blog__footer-overlay {
  position: absolute;
  bottom: -20px;
  right: -13px;
  background-color: var(--color-cream);
  border-radius: 40px;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.individual-blog__footer-layout {
  max-width: 1154px;
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  align-items: flex-start;
  width: 100%;
  gap: 18px;
}

.individual-blog__footer-layout img {
  max-width: 268px;
  height: 66px;
  margin-bottom: 14px;
}

.individual-blog__footer-layout h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bolder;
  color: var(--color-white);
  text-align: left;
  font-family: var(--font-family-primary);
}

.individual-blog__footer-layout p {
  margin: 0;
  font-size: 15px;
  color: var(--color-white);
  text-align: left;
  font-family: var(--font-family-primary);
}

.individual-blog__footer-layout strong,
.individual-blog__footer-layout b,
.individual-blog__footer-layout em,
.individual-blog__footer-layout i,
.individual-blog__footer-layout a {
  color: var(--color-cream);
}

.individual-blog__footer-layout a {
  text-decoration: underline;
}

.article-text-accent {
  color: var(--color-cream);
  font-weight: bolder;
}

@media (max-width: 768px) {
  .individual-blog__items>h2,
  .individual-blog__content-body h2,
  .individual-blog__content-body h3 {
    font-size: 20px;
  }

  .individual-blog__content p,
  .individual-blog__content-body p,
  .individual-blog__content-body li {
    font-size: 13px;
  }

  .individual-blog__content-imgs {
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    padding: 0;
  }

  .individual-blog__content-img {
    max-width: 366px;
    width: 100%;
  }

  .individual-blog__footer-layout {
    align-items: center;
  }

  .individual-blog__footer-layout img {
    max-width: 200px;
    height: 50px;
    margin-bottom: 30px;
  }

  .individual-blog__footer-layout h2 {
    font-size: 20px;
    text-align: center;
  }

  .individual-blog__footer-layout p {
    font-size: 13px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .individual-blog__footer-container {
    padding: 63px 20px;
  }

  .individual-blog__footer-overlay {
    right: 0;
  }
}

/* Career page only */
.individual-blog__footer--career .individual-blog__footer-container {
  padding: 88px 30px;
}

.career-job__footer-head-title {
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 0 0 27px;
  border-bottom: 3px solid var(--color-cream);
  width: 100%;
  margin: 0 0 80px;
}

.career-job__footer-head-title h2 {
  margin: 0;
  font-size: 46px;
  line-height: 1.23;
  font-weight: 800;
  color: var(--color-cream);
  text-align: left;
  font-family: var(--font-family-primary);
  font-style: italic;
}

.career-job__footer-head-title p {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-white);
  text-align: left;
  font-family: var(--font-family-primary);
  font-weight: 500;
}

@media (max-width: 768px) {
  .career-job__footer-head-title h2 {
    font-size: 40px;
    text-align: center;
  }

  .career-job__footer-head-title p {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .individual-blog__footer--career .individual-blog__footer-container {
    padding: 63px 20px;
  }

  .career-job__footer-head-title h2 {
    font-size: 36px;
  }

  .career-job__footer-head-title p {
    font-size: 18px;
  }
}