.blog-grid-wrapper {
  /*max-width: 1200px;*/
  /*margin: 0 auto;*/
  /*padding: 2rem;*/
  /*background: #F4F2FF;       */
  /*border-radius: 12px;       */
}
.blog-header {
    display: flex;
    justify-content: space-between;
}
.section-title {
    color: #532867;
    font-family: Feijoa;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 60px */
    letter-spacing: -0.44px;
    margin: 0;
    margin-bottom: 1.5rem;
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 0.75rem;
  margin: 2rem 0 5rem 0;
}

.filter-pill {
    color: #A577B5;
    font-family: "Sohne";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 35px; /* 250% */
    cursor: pointer;
    padding: 7px 20px;
    transition: background 0.2s, color 0.2s;
    border-radius: 30px;
    border: 1px solid #A577B5;
    background: #EFEDFA;
}
.filter-pill:hover {
  background: #532867;
  color: #F6F3ED;
}

.filter-pill.active {
  background: #532867;
  color: #F6F3ED;
}

.blog-grid-posts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  /* negative margin to compensate for child margins if needed */
}

.blog-card {
  margin-bottom: 32px;
  width: calc((100% - 3rem) / 3);
}

.blog-card h3 {
  /*color: #532867;*/
  /*font-family: 'Feijoa';*/
  /*font-size: 28px;*/
  /*font-style: normal;*/
  /*font-weight: 700;*/
  /*line-height: 42px;*/
  /*letter-spacing: -0.308px;*/
  margin: 0;
  margin-bottom: 12px;
}

.blog-card h3 a {
  color: #532867;
  font-family: 'Feijoa';
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: -0.308px;
}

/* 2. Excerpt Text */
.blog-card p {
  color: #532867;
  font-family: 'Sohne';
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 30px;
  flex-grow: 1;
  margin: 0;
  margin-bottom: 24px;
}

/* 3. Read More Link */
.blog-card .read-more {
  color: #532867;
  font-family: 'Sohne';
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
  text-decoration: none;
  align-self: flex-start;
}

/* 4. Featured Image Styling */
.blog-card img { 
  background-position: 0px -37.833px;
  background-size: 100% 147.599%;
  margin-bottom: 24px;
}
.blog-card .card-image img {
    height: 210px !important;
    object-position: left;
    object-fit: fill;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.view-more-wrap {
  text-align: center;
  margin-top: 2rem;
}

.blog-grid-wrapper .view-more {
    display: inline-block;
    height: 48px;
    padding: 7px 93px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
    color: #F6F3ED !important;
    font-family: "Sohne";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 35px;
    background: #532867;
    border-radius: 30px;
}

.blog-grid-wrapper .view-more:hover {
  background: #F6F3ED;
  color: #532867 !important;
}

.filter-pill {
    flex: 0 0 auto;          /* don’t stretch/wrap */
}

/* Container */
.blog-pagination {
  text-align: center;
  margin: 2rem 0;
}

/* Remove list bullets & inline items */
.blog-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 0.5rem;
}

/* Base styles for all page links */
.blog-pagination a.page-numbers,
.blog-pagination a.prev,
.blog-pagination a.next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;       /* square */
  height: 2.5rem;
  border-radius: 50%;  /* circle */
  text-decoration: none;
  font-family: "Söhne", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #1E3A8A;      /* dark text */
  background: #E0EBFF; /* light-blue background */
  transition: background 0.2s, color 0.2s;
}

/* Current page */
.blog-pagination a.page-numbers.current {
  background: #1E3A8A; /* dark blue */
  color: #FFFFFF;      /* white text */
}

/* Hover state */
.blog-pagination a.page-numbers:hover:not(.current),
.blog-pagination a.prev:hover,
.blog-pagination a.next:hover {
  background: #D0DEFF;
}

/* Arrow icons (you can use ↩︎ or → in HTML) */
/* If you want to style the arrow differently: */
.blog-pagination a.prev::before {
  content: "←";
  font-size: 1.2rem;
}
.blog-pagination a.next::before {
  content: "→";
  font-size: 1.2rem;
}

.blog-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.card-image img {
  width: 100%;
  height: auto;
  display: block;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Test Söhne", sans-serif;
  font-size: 14px;
  color: #6B7280; /* gray text for metadata */
  padding: 0.75rem 1rem 0;
}

.meta-item i {
  margin-right: 0.25rem;
  color: #A1A1AA; /* slightly lighter icon color */
}

.meta-sep {
  color: #D1D5DB;
}

.card-title {
  font-family: Feijoa, serif;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  padding: 0.5rem 1rem 1rem;
  margin: 0;
}
h2.section-title {
    display: none;
}
.blog-header a.filter-pill {
    min-width: 80px;
    padding: 11px 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background: white;
    border-radius: 100px;
    font-size: 16px;
    line-height: 1.45;
    color: #1E1E1E;
    font-family: "IBM Plex Sans", sans-serif;
    border: 0;
}
span.meta-item.meta-date {
    font-size: 12px;
    letter-spacing: 0.065em;
    margin-right: calc(0.065em * -1);
    color: #4D4B50;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 9px;
}
.blog-grid-posts .meta-date img {
    width: 20px;
    height: auto !important;
    margin: 0;
}
.card-meta span.meta-item.meta-author {
    font-size: 12px;
    letter-spacing: 0.065em;
    margin-right: calc(0.065em * -1);
    color: #4D4B50;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 9px;
}
.card-meta span.meta-item.meta-author img {
    width: 20px;
    height: auto !important;
    margin: 0;
}
.blog-card h3.card-title {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0em;
    color: rgba(0, 0, 0, 1);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 500;
    text-align: left;
    margin-top: 16px;
}
.card-meta .meta-sep {
    margin: 0 5px;
}
.blog-header a.filter-pill:hover, .blog-header a.filter-pill.active {
    background: #195190;
    color: white;
}
nav.blog-pagination ul li a.current, nav.blog-pagination ul li span.current {
    background: #195190 !important;
    color: #fff !important;
}
nav.blog-pagination ul li a, nav.blog-pagination ul li span {
    color: #195190 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    background: #E0EBFF !important;
    font-size: 1em !important;
    width: 47px !important;
    height: 47px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 100px !important;
}
nav.blog-pagination ul.pagination-numbers {
    gap: 14px;
}
.blog-pagination a.prev::before, .blog-pagination a.next::before {
    display: none;
}
nav.blog-pagination ul.pagination-numbers a.page-numbers svg {
    width: 19px;
    fill: #195190;
}
nav.blog-pagination ul li span.dots {
    background: transparent !important;
    font-weight: 700;
}
/* Responsive: stack to two columns on medium screens */
@media (max-width: 1350px) {
    .blog-card .card-image img {
        height: 150px !important;
    }
}
@media (max-width: 991px) {
    .blog-header {
        flex-direction: column;
    }
    .blog-card {
        flex: 1 1 calc(50% - 1.5rem);
    }
    .blog-filters {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
}

/* Responsive: single column on small screens */
@media (max-width: 767px) {
    .blog-card {
        flex: 1 1 100%;
    }
    .blog-filters::-webkit-scrollbar { display: none; }
    
    .blog-card h3 a {
      font-size: 20px;
      line-height: 30px;
      letter-spacing: -0.22px;
    }
    .blog-card p {
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 16px;
    }
    
    .blog-card .read-more {
      font-size: 18px;
      line-height: 27px;
    }
    
    .blog-card img {
      height: 335px !important;
      margin-bottom: 20px;
    }
    nav.blog-pagination ul li a, nav.blog-pagination ul li span {
        font-size: 0.8em !important;
        width: 33px !important;
        height: 33px !important;
    }
    nav.blog-pagination ul.pagination-numbers {
        gap: 7px;
    }
    .blog-pagination {
        margin: 0px 0 2rem 0;
    }
    nav.blog-pagination ul.pagination-numbers a.page-numbers svg {
        width: 14px;
    }
}