/* blog-index.css — blog index + category archive blocks (cwu-blog-hero, -latest,
   -categories, -category-hero, -category, pagination) and the 1023 px
   .mobile-hide/.mobile-show pair from WP's cwu-blog-hero block, split out of
   blog-cards.css so the homepage teaser (cwu-blog) links only the card rules and
   keeps the theme's 768 px breakpoint for .mobile-hide/.mobile-show, as on WP. */

/* ══════════ Blog index + category archives (effective values) ══════════
 * Distilled from cwu-blog-{hero,latest,categories,category(-hero)}/style.css
 * (heavily self-overriding — last-wins resolved here). */

@media (max-width: 1023px) {
  .mobile-hide {
    display: none !important;
  }
}
@media (min-width: 1023px) {
  .mobile-show {
    display: none !important;
  }
}

/* Section headers ("Latest Articles" / category names) */
.blog-section-header {
  padding: 0.625rem 1rem;
  background: #f9f9f9;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  grid-column: span 4;
}
.blog-section-header > :not(:last-child) {
  margin-right: 0.625rem;
}
.blog-section-header__title {
  color: #1a1a1a;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 125%;
  flex-shrink: 0;
  flex-basis: 0;
  white-space: nowrap;
  flex-grow: 1;
  overflow: hidden;
}
.blog-section-header__title > * {
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}
.blog-section-header__link {
  font-size: 1rem;
  line-height: 150%;
  color: #1a1a1a;
  padding: 0 0.75rem;
  background: rgba(14, 124, 152, 0.2);
  text-decoration: unset;
  border-radius: 2rem;
  flex-shrink: 0;
  cursor: pointer;
  margin-left: auto;
}
.blog-section__line {
  height: 1px;
  display: block;
  background: #a6a6a6;
  margin: 0 0 2rem !important;
  grid-column: span 4;
}
@media (min-width: 769px) {
  .blog-section-header {
    padding: 0.5rem 1rem;
  }
  .blog-section-header > :not(:last-child) {
    margin-right: 2.625rem;
  }
  .blog-section-header__title {
    font-size: 1.5rem;
    line-height: 1.875rem;
    flex-basis: unset;
    flex-grow: unset;
  }
  .blog-section-header__link {
    font-size: 1rem;
  }
}

/* Author/date row on cards */
.blog-user-info {
  display: flex;
  align-items: center;
}
.blog-user-info > :not(:last-child) {
  margin-right: 0.5rem;
}
.blog-user-info__img {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}
.blog-user-info__img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: #d9d9d9;
}
.blog-user-info__content {
  color: #000;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.blog-user-info__content > :not(:last-child) {
  padding-right: 0.5rem;
  position: relative;
}
.blog-user-info__content > :not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #3c4b5f;
}

/* Hero (index carousel + category hero) */
.blog-hero {
  padding-top: 0;
}
.blog-hero:not(:first-child) {
  margin-top: 2rem;
}
.blog-hero:not(:last-child) {
  margin-bottom: 2rem;
}
.blog-hero h1,
.blog-hero h2,
.blog-hero h3,
.blog-hero h4 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-family: inherit;
}
.blog-hero__container {
  position: relative;
  max-width: unset;
  grid-column: span 4;
  margin: 0;
  padding: 0;
}
.blog-hero-caption h3 {
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.375rem;
}
.blog-hero-group {
  display: flex;
  margin-top: 0.625rem;
  margin-bottom: 2rem;
}
.blog-hero-dpl {
  background-color: #f9f9f9;
  border-radius: 18.75rem;
  padding: 0.625rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0 2rem;
  height: 3rem;
  position: relative;
  z-index: 4;
}
.blog-hero-dpl span {
  font-size: 1rem;
  line-height: 1.375rem;
  color: #004c8d;
  display: flex;
  align-items: center;
  padding: 0.625rem 1.5rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.blog-hero-dpl > svg {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease-in-out;
}
.blog-hero-dpl.is-open > svg {
  transform: translateY(-50%) rotate(180deg);
}
.blog-hero-dpl ul {
  position: absolute;
  left: 0;
  right: 0;
  background-color: #f9f9f9;
  overflow-y: auto;
  border-radius: 0 0 1.25rem 1.25rem;
  max-height: 16.25rem;
  padding: 2.25rem 1.5rem 1.25rem;
  font-size: 1rem;
  line-height: 1.375rem;
  top: 50%;
  z-index: -1;
}
.blog-hero-dpl li:not(:last-child) {
  margin-bottom: 1rem;
}
.blog-hero-dpl ul .is-selected {
  font-weight: 700;
}

/* Minimal swiper shell (WP CDN-loads Swiper 11; markup classes kept) */
.blog-hero .swiper {
  overflow: hidden;
  position: relative;
}
.blog-hero .swiper-wrapper {
  display: flex;
  gap: 32px;
  transition: transform 0.5s;
}
.blog-hero__container .swiper-slide {
  width: 100%;
  flex-shrink: 0;
}
.blog-hero__slider,
.blog-hero .swiper {
  margin-top: 2rem;
  margin-bottom: 0;
  border-radius: 1rem;
}

.blog-hero-single {
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  border-radius: 1rem;
  height: 100%;
}
.blog-hero-single__img {
  position: relative;
  width: 100%;
  display: block;
}
.blog-hero-single__img::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 66.5%;
}
.blog-hero-single__img > * {
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem 1rem 0 0;
}
.blog-hero-single .blog-user-info {
  margin-bottom: 0.75rem;
}
.blog-hero-single__content {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  flex-grow: 1;
}
.blog-hero-single__container {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
}
.blog-hero-single__time {
  width: fit-content;
  padding: 0.125rem 0.625rem;
  border-radius: 1rem;
  background-color: #91b2ce33;
  color: #004c8d;
  font-weight: 600;
  font-size: max(0.875rem, 12px);
  line-height: max(1.25rem, 12px);
  margin-bottom: 0.75rem;
}
.blog-hero-single__title {
  color: #000;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: normal;
  margin-bottom: 0;
}
.blog-hero-single__text {
  font-size: 1rem;
  line-height: 137%;
  color: #000;
  margin-bottom: auto;
}
.blog-hero-single__btn {
  width: fit-content;
  padding: 0.875rem 1.75rem;
  background: #00b43d;
  border-radius: 8.125rem;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  font-size: max(1.25rem, 12px);
  font-weight: 700;
  line-height: max(1.5225rem, 12px);
  color: #f1f1e6;
  margin-top: 0.75rem;
}
.blog-hero-single__btn:hover {
  background-color: #2a3442;
}
.blog-hero-single__controls {
  display: flex;
  justify-content: space-between;
  bottom: 1rem;
  left: 1rem;
  position: absolute;
  z-index: 9;
  margin: 0;
}
.blog-hero-single__controls > :not(:last-child) {
  margin-right: 0.75rem;
}
.blog-hero-single__controls > button {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #004c8d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.blog-hero-single__controls > button:hover {
  background-color: #bfc4ca;
}
.blog-hero-single__controls > button > svg {
  width: 1rem;
}
.blog-hero .swiper-slide .blog-hero-single__content {
  padding-bottom: 4.5rem;
}
.blog-hero-row {
  margin-top: 2rem;
}

@media (min-width: 769px) {
  .blog-hero {
    padding-top: 2.5rem;
  }
  .blog-hero__container {
    grid-column: span 12;
  }
  .blog-hero-row {
    display: flex;
  }
  .blog-hero-row > .blog-hero-single {
    flex-basis: 67.8%;
    flex-grow: 1;
  }
  .blog-hero-single {
    flex-direction: row;
  }
  .blog-hero-single__img {
    width: 50%;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .blog-hero-single__img::before {
    padding-top: 64.3%;
  }
  .blog-hero-single__img > * {
    border-radius: 0;
  }
  .blog-hero-single__content {
    padding: 1.25rem 2rem;
  }
  .blog-hero-single__text {
    flex-grow: 1;
  }
  .blog-hero-single__controls {
    margin: auto 0 0 auto !important;
    left: unset;
    right: 32px;
    bottom: 10px;
  }
  .blog-hero .swiper-slide .blog-hero-single__content {
    padding-bottom: 1.25rem;
  }
  .blog-hero-group {
    margin-top: -0.375rem;
  }
  .blog-hero-dpl:not(:last-child) {
    margin-right: 1.5rem;
  }
  .blog-hero-elem {
    background-color: #f9f9f9;
    border-radius: 18.75rem;
    padding: 0.625rem 1.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 1rem 0 0;
  }
  .blog-hero-elem.is-active {
    background-color: #2b3849;
  }
  .blog-hero-elem.is-active span {
    color: #f1f1e6;
  }
  .blog-hero-elem:not(:last-child) {
    margin-right: 1.5rem;
  }
  .blog-hero-elem span {
    font-size: 1rem;
    color: #004c8d;
  }
  .blog-hero-caption h3 {
    font-weight: 400;
  }
}

/* Latest-articles grid (index) + category-archive listing */
.blog-latest {
  font-family: var(--font-inter);
}
.blog-latest:not(:first-child) {
  margin-top: 2rem;
}
.blog-latest:not(:last-child) {
  margin-bottom: 2rem;
}
.blog-latest h1,
.blog-latest h2,
.blog-latest h3,
.blog-latest h4 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-family: inherit;
}
.blog-latest article {
  gap: 0;
}
.blog-latest-content {
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 2rem;
  grid-column: span 4;
}
.blog-latest-content > * {
  grid-column: span 4;
}
.blog-latest-elem {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.blog-latest-elem__img {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  display: block;
  margin: 0;
}
.blog-latest-elem__img::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 46%;
}
.blog-latest-elem__img > * {
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-latest-elem__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  width: 100%;
  padding: 1rem 1rem 0;
  gap: 0.75rem;
}
.blog-latest-elem__content .blog-user-info__content {
  margin-top: 0;
}
.blog-latest-elem__title {
  font-size: 1.5rem;
  line-height: normal;
  font-weight: 700;
  color: #000;
}
@media (min-width: 769px) {
  .blog-latest-content {
    column-gap: 3rem;
    grid-column: span 12;
  }
  .blog-latest-content > * {
    grid-column: span 6;
  }
  .blog-latest-elem {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    justify-content: unset;
    gap: 2rem !important;
  }
  .blog-latest-elem__img {
    width: auto;
    grid-column: span 1;
  }
  .blog-latest-elem__img::before {
    padding-top: 62.3%;
  }
  .blog-latest-elem__content {
    width: auto;
    grid-column: span 1;
    padding: 0;
    justify-content: unset;
  }
  .blog-latest-elem__title {
    font-size: 1.375rem;
    line-height: 155%;
  }
}

/* Per-category sections (index) */
.blog-categories {
  font-family: var(--font-inter);
}
.blog-categories:not(:first-child) {
  margin-top: 2rem;
}
.blog-categories + .entry-banner-wrapper {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.blog-categories h1,
.blog-categories h2,
.blog-categories h3,
.blog-categories h4 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-family: inherit;
}
.blog-categories-content {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 4;
  gap: 2rem;
}
.blog-categories-content > * {
  grid-column: span 4;
}
.blog-categories-element {
  padding: 0;
  position: relative;
}
.blog-categories-element > :not(:last-child) {
  margin-bottom: 1rem;
}
.blog-categories-element__img {
  position: relative;
  max-width: 100%;
  width: 100%;
  display: block;
}
.blog-categories-element__img::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 46%;
}
.blog-categories-element__img > * {
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-categories-element__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1rem;
}
.blog-categories-element__title {
  display: block;
  font-size: 1.5rem;
  line-height: normal;
  font-weight: 700;
  color: #000;
  margin-bottom: 0;
}
.blog-categories-element__text {
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.blog-categories-element__text > * {
  font-size: 1rem;
}
@media (min-width: 769px) {
  .blog-categories-content {
    grid-column: span 12;
  }
  .blog-categories-content > * {
    grid-column: span 3;
  }
  .blog-categories .blog-section__line {
    display: none;
  }
  .blog-categories-element__content {
    flex-grow: 1;
    padding: 0;
  }
  .blog-categories-element__img {
    max-width: 23.3125rem;
  }
  .blog-categories-element__img::before {
    padding-top: 100%;
  }
  .blog-categories-element__title {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

/* Category-archive pagination */
.blog-category__pagination {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: span 4;
}
@media (min-width: 769px) {
  .blog-category__pagination {
    grid-column: span 12;
  }
}
.blog-category__pagination-title {
  margin-bottom: 7px;
}
.blog-category__pagination-title > * {
  font-weight: 700;
  font-size: 14px;
  line-height: 143%;
  text-align: center;
  color: #3c4b5f;
}
.blog-category__pagination-row {
  display: flex;
}
.blog-category__pagination-row > *:not(:last-child) {
  margin-right: 1.375rem;
}
.blog-category__pagination .pagination {
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  color: #2b3849;
}
.blog-category__pagination .nav-links {
  display: flex;
  align-items: center;
}
.blog-category__pagination .page-numbers:not(.prev):not(.next) {
  margin: 0 0.5rem;
}
.blog-category__pagination .page-numbers.current {
  border-radius: 50px;
  padding: 3.5px 10px 2px;
  display: block;
  background: #2b3849;
  color: #f1f1e6;
  font-weight: 700;
  line-height: 100%;
}
.blog-category__pagination .prev.page-numbers,
.blog-category__pagination .next.page-numbers {
  display: block;
  position: relative;
}
.blog-category__pagination .prev.page-numbers::after,
.blog-category__pagination .next.page-numbers::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 8px;
  height: 14px;
}
.blog-category__pagination .prev.page-numbers {
  padding: 0 10px 0 22px;
}
.blog-category__pagination .next.page-numbers {
  padding: 0 22px 0 10px;
}
.blog-category__pagination .prev.page-numbers::after {
  left: 9px;
  background-image: url('data:image/svg+xml,%3Csvg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6.84648 0.712757C6.50804 0.384995 5.97057 0.384936 5.63205 0.712624L0.60493 5.57894C-0.202087 6.36286 -0.202087 7.62992 0.60493 8.41385L5.63871 13.2871C5.97719 13.6148 6.51467 13.6146 6.85299 13.2868C7.20693 12.9438 7.20678 12.3759 6.85266 12.0331L1.85921 7.19916C1.74364 7.08717 1.74364 6.90589 1.85921 6.79417L6.84631 1.96707C7.20067 1.62408 7.20075 1.05584 6.84648 0.712757Z" fill="%232B3849"/%3E%3C/svg%3E%0A');
}
.blog-category__pagination .next.page-numbers::after {
  right: 9px;
  background-image: url('data:image/svg+xml,%3Csvg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.15352 13.2872C1.49196 13.615 2.02943 13.6151 2.36795 13.2874L7.39507 8.42106C8.20209 7.63714 8.20209 6.37008 7.39507 5.58615L2.36129 0.71292C2.02281 0.38523 1.48533 0.385365 1.14701 0.713225C0.793067 1.05622 0.793217 1.62408 1.14734 1.96689L6.14079 6.80084C6.25636 6.91283 6.25636 7.09411 6.14079 7.20583L1.15369 12.0329C0.799327 12.3759 0.799251 12.9442 1.15352 13.2872Z" fill="%232B3849"/%3E%3C/svg%3E%0A');
}

/* ---------------------------------------------------------------------------
 * Global green-CTA 3D treatment (operator, 2026-09-09).
 *
 * The 3D look is the standard green CTA in EVERY instance, not just the blocks
 * that opt in on WP, so the green CTAs in this kit take it too. Values live in
 * globals.css as --cw-btn-3d-*; radius/size/casing are untouched. Appended at
 * the end of the sheet so it wins over the verbatim WP rules above without
 * editing them. Divergence from live WP is intentional and accepted.
 * ------------------------------------------------------------------------- */
.blog-hero-single__btn {
  border: var(--cw-btn-3d-border);
  box-shadow: var(--cw-btn-3d-shadow);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
@media (any-hover: hover) {
  .blog-hero-single__btn:hover {
    background-color: var(--cw-btn-3d-bg-hover);
    box-shadow: var(--cw-btn-3d-shadow-hover);
  }
}