/* Employer News & Alerts: single article, listing and category pages.
   Loaded only on those views (inc/employer-news.php). Scoped under .cp-news. */

.cp-news .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ---------- Meta row (date, categories, effective date) ---------- */
.cp-news .news-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
  row-gap: 6px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 15px;
  line-height: 21px;
  color: #03a1e2;
}
.cp-news .news-meta > div {
  position: relative;
  padding-left: 26px;
}
.cp-news .news-meta a {
  color: #03a1e2;
}
.cp-news .news-meta a:hover {
  color: #023769;
}
.cp-news .news-meta .date::before,
.cp-news .news-meta .category::before,
.cp-news .news-meta .effective::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 18px;
  background: url(../../images/svg/icon-date.svg) center / contain no-repeat;
}
.cp-news .news-meta .category::before {
  width: 20px;
  top: 3px;
  height: 16px;
  background-image: url(../../images/svg/icon-category.svg);
}
.cp-news .news-meta .effective {
  color: #023769;
}
.cp-news .news-meta--center {
  justify-content: center;
  margin-bottom: 36px;
  font-size: 17px;
}

/* ---------- Single article ---------- */
.cp-news .news-article {
  margin-top: 20px;
  margin-bottom: 60px;
}
.cp-news .news-article .content-area {
  width: 956px;
}
.cp-news .news-summary p {
  font-size: 21px;
  line-height: 1.55;
  font-weight: 500;
  margin-bottom: 30px;
}
.cp-news .news-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  margin: 0 0 40px;
  padding: 22px 30px;
  border-left: 5px solid #03a1e2;
  border-radius: 10px;
  background: rgba(3, 161, 226, 0.08);
}
.cp-news .news-cta p {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
}
.cp-news .news-cta p.news-cta__heading {
  font-weight: 700;
}
.cp-news .news-cta .btn {
  flex: 0 0 auto;
}
.cp-news .featured-image {
  margin-bottom: 40px;
}
.cp-news .featured-image img {
  width: 100%;
  border-radius: 10px;
}

/* Article body (WYSIWYG): H2/H3, paragraphs, lists, links */
.cp-news .news-body h2,
.cp-news .news-perspective h2,
.cp-news .news-closing h2 {
  margin: 45px 0 16px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  color: #023769;
}
.cp-news .news-body h3 {
  margin: 32px 0 12px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  color: #023769;
}
.cp-news .news-body > :first-child {
  margin-top: 0;
}
.cp-news .news-body p,
.cp-news .news-body li,
.cp-news .news-perspective p,
.cp-news .news-perspective li {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: #023769;
}
.cp-news .news-body p,
.cp-news .news-perspective p {
  margin-bottom: 18px;
}
.cp-news .news-body strong,
.cp-news .news-perspective strong {
  font-weight: 700;
}
.cp-news .news-body a,
.cp-news .news-perspective a,
.cp-news .news-sources a {
  color: #0b6fb3;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cp-news .news-body a:hover,
.cp-news .news-perspective a:hover,
.cp-news .news-sources a:hover {
  color: #03a1e2;
}
.cp-news .news-body ul,
.cp-news .news-body ol,
.cp-news .news-perspective ul,
.cp-news .news-perspective ol {
  margin: 0 0 22px;
  padding-left: 28px;
}
.cp-news .news-body li,
.cp-news .news-perspective li {
  margin-bottom: 8px;
}
.cp-news .news-body ul li::marker,
.cp-news .news-perspective ul li::marker,
.cp-news .news-body ol li::marker,
.cp-news .news-perspective ol li::marker {
  color: #03a1e2;
  font-weight: 700;
}

.cp-news .news-perspective {
  margin: 45px 0 0;
  padding: 36px 40px 22px;
  border-radius: 10px;
  background: rgba(3, 161, 226, 0.08);
}
.cp-news .news-perspective h2 {
  margin-top: 0;
}

.cp-news .news-closing {
  margin: 45px 0 0;
  padding: 40px;
  border-radius: 10px;
  background: #023769;
  text-align: center;
}
.cp-news .news-closing h2 {
  margin: 0 0 8px;
  color: #fff;
}
.cp-news .news-closing p {
  margin: 0 0 22px;
  color: #fff;
  font-size: 20px;
}
.cp-news .news-closing .btn {
  margin-top: 4px;
}

.cp-news .news-disclaimer {
  margin-top: 40px;
}
.cp-news .news-disclaimer p {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  font-style: italic;
  color: #4d6582;
}
.cp-news .news-sources {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(2, 55, 105, 0.15);
}
.cp-news .news-sources .news-sources__label {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cp-news .news-sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cp-news .news-sources li {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
}

/* ---------- Cards (listing + related) ---------- */
.cp-news .news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}
.cp-news .news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(2, 55, 105, 0.12);
  border-radius: 10px;
  background: #fff;
}
.cp-news .news-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.cp-news .news-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 26px 26px;
}
.cp-news .news-card .news-meta {
  column-gap: 22px;
  font-size: 14px;
}
.cp-news .news-card__title {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
}
.cp-news .news-card__title a {
  color: #023769;
}
.cp-news .news-card__title a:hover {
  color: #03a1e2;
}
.cp-news .news-card p {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 400;
}
.cp-news .news-card .link-arrow {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- Listing page ---------- */
.cp-news .news-listing {
  margin-bottom: 120px;
}
.cp-news .news-listing .content-area,
.cp-news .news-related .content-area {
  width: 1200px;
}
.cp-news .news-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: -10px 0 50px;
}
.cp-news .news-filter a {
  padding: 6px 18px;
  border: 1px solid #03a1e2;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: #023769;
}
.cp-news .news-filter a:hover {
  background: rgba(3, 161, 226, 0.1);
}
.cp-news .news-filter a.active {
  border-color: #023769;
  background: #023769;
  color: #fff;
}
.cp-news .news-empty {
  text-align: center;
}
.cp-news .pagination {
  margin-top: 60px;
}
.cp-news .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.cp-news .pagination .page-numbers {
  min-width: 44px;
  padding: 9px 14px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  color: #023769;
}
.cp-news .pagination a.page-numbers:hover {
  background: rgba(3, 161, 226, 0.1);
}
.cp-news .pagination .page-numbers.current {
  background: #023769;
  color: #fff;
}

/* ---------- Related ---------- */
.cp-news .news-related {
  margin-top: 70px;
  margin-bottom: 50px;
}
.cp-news .news-related__title {
  margin-bottom: 40px;
  font-size: 25.92px;
  font-weight: 500;
  text-align: center;
  color: #03a1e2;
}
.cp-news-single .back-to-all-article {
  margin-bottom: 100px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .cp-news .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }
}
@media (max-width: 767.98px) {
  .cp-news .news-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cp-news .news-meta--center {
    margin-bottom: 24px;
    font-size: 15px;
  }
  .cp-news .news-summary p {
    font-size: 19px;
  }
  .cp-news .news-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 22px;
  }
  .cp-news .news-body h2,
  .cp-news .news-perspective h2,
  .cp-news .news-closing h2 {
    font-size: 24px;
  }
  .cp-news .news-body h3 {
    font-size: 20px;
  }
  .cp-news .news-body p,
  .cp-news .news-body li,
  .cp-news .news-perspective p,
  .cp-news .news-perspective li {
    font-size: 17px;
  }
  .cp-news .news-perspective,
  .cp-news .news-closing {
    padding: 28px 22px 16px;
  }
  .cp-news .news-closing {
    padding-bottom: 28px;
  }
  .cp-news .news-listing {
    margin-bottom: 60px;
  }
  .cp-news .news-related__title {
    font-size: 22px;
    margin-bottom: 24px;
  }
  .cp-news-single .back-to-all-article {
    margin-bottom: 60px;
  }
}