/* The list */
.blogArticle__category-cards .smallVerticalCards{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min, 260px), 1fr)) !important;
  gap: var(--card-gap, 24px);
  align-items: stretch;
}

/* The card */
.blogArticle__category-cards .smallVerticalCards__card{
  width: auto !important;
  max-width: none !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Nuke inner fixed widths that keep the card looking “narrow” */
.blogArticle__category-cards .smallVerticalCards__card > *,
.blogArticle__category-cards .smallVerticalCards__card a,
.blogArticle__category-cards .smallVerticalCards__card .card,
.blogArticle__category-cards .smallVerticalCards__card .content{
  width: 100% !important;
  max-width: none !important;
}

/* Media should stretch with the card */
.blogArticle__category-cards .smallVerticalCards__card img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Optional: your target density */
.blogArticle__category-cards{ --card-min: 260px; }     /* ~4-up on wide screens */
@media (max-width: 1024px){ .blogArticle__category-cards{ --card-min: 220px; } }
@media (max-width: 768px){  .blogArticle__category-cards{ --card-min: 180px; } }
@media (max-width: 520px){  .blogArticle__category-cards{ --card-min: 100%; } } /* 1-up */

.blogHeader {
    padding-inline: 0;
    background-image: url(../images/issue.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 452px;
}
.blogHeader_Cards {
    align-items: end;
}
.blogHeader__firstColumn-card {
    background-color: var(--Zodiac);
    margin-top: -210px;
    margin-left: 10px;
    padding: 40px 40px 60px 40px;
}
.blogHeader__firstColumn-card p {
    color: var(--White);
    overflow: hidden;
}
.blogHeader__firstColumn-card h3 {
    color: var(--White);
}
.blogHeader__firstColumn-card-btn {
    text-align: center;
}
.blogHeader__secondcolumn-card {
    background-color: #EEF2FB;
    padding: 40px;
}
.blogHeader__secondcolumn-card h5 {
    overflow: hidden;
    font-size: 24px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.blogHeader__secondcolumn-card p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.latestPosts {
    margin-top: 100px;
}
.latestPosts h2{
    margin-bottom: 40px;
}
.largeHorizontalcard__img {
    margin-bottom: 40px;
    height: 299px;
}
.largeHorizontalcard__img img {
    width: 610px;
    height: 299px;
}
.largeHorizontalcard__content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-bottom: 40px;
}
.largeHorizontalcard__content h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    align-self: stretch;
    overflow: hidden;
    text-overflow: ellipsis;
}
.largeHorizontalcard__content p {
    color: var(--midnight);
    overflow: hidden;
    text-overflow: ellipsis;
}
.largeHorizontalcard__content a {
    color: var(--Tory);
}
.mediumHorizontalcard__img {
    height: auto;
}
.mediumHorizontalcard__content {
    display: flex;
    flex-direction: column;
    justify-content: start;
}
.mediumHorizontalcard__content .body-large{
    overflow: hidden;
    font-size: 18px;
    text-overflow: ellipsis;
    font-weight: 700;
}
.mediumHorizontalcard__content .body-base{
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    line-height: 150%;
    height: 72px;
}
.latestPost__btn {
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
}
.blogArticle__category {
    background-color: #EEF2FB;
    padding-block: 120px;
}
.blogArticle__category-cards {
    justify-content: space-between;
    gap: 20px;
}
.blogArticle__category-cards .smallVerticalCards__card {
    width: 295px !important;
}

.blogArticle__category-btn {
    display: flex;
    justify-content: center;
    margin-bottom: 120px;
}



/***********************Responsive***********************/
@media only screen and (max-width: 600px) {
    .mediumHorizontalcard__content .body-large{
        font-size: 22px;
        font-weight: 700;
        color: #132554;
    }
    .blogHeader{
        height: 269px;
        background-size: cover;
    }
    .blogHeader_Cards {
        padding: 0px;
    }
    .blogHeader__firstColumn {
        padding: 0px;
    }
    .blogHeader__firstColumn-card {
        margin-top: 0px;
        padding: 40px 30px 48px 30px;
    }
    .blogHeader__firstColumn-card h3 {
        font-size: 28px;
    }
    #js-LastestPosts.mb-5{
        margin-bottom: 0px !important;
    }

    .LightZodiacButton{
        font-size: 16px;
    }
    .largeHorizontalcard__content h3{
        font-size: 22px;
    }
    .blogHeader__secondcolumn {
        display: none;
    }
    .latestPosts{
        margin-block: 48px;
        padding-inline: 30px;
    }
    .latestPosts h2 {
        font-size: 28px;
    }
    .largeHorizontalcard__img {
        margin-bottom: 20px;
        height: 262px;
    }
    .largeHorizontalcard__img img {
        width: 100%;
        height: 263px;
        margin-bottom: 20px;
    }
    .largeHorizontalcard__content {
        margin-bottom: 30px;
    }
    .mediumHorizontalcard__img {
        margin-bottom: 30px;
        height: 262px;
    }
    .mediumHorizontalcard__content {
        padding-right: 20px;
        padding-left: 20px;
        margin-bottom: 30px;
    }
    .mediumHorizontalcard__content p {
        font-size: 16px;
    }
    .latestPost__btn {
        display: flex;
        justify-content: center;
        margin-bottom: 0;
    }

    .card-body{
        padding-bottom: 0px !important;
    }

    .blog-articles__Buttons button{
        font-size: 14px;
        padding: 16px 30px;
        height: 53px;   
    }
    .blogArticle__category{
        padding-block: 48px;
    }
    .blogArticle__category .blog-articles {
        margin-bottom: 48px;
    }
    .blogArticle__category-cards {
        padding-inline: 30px;
    }
    .blogArticle__category-cards .smallVerticalCards__card {
        width: 100% !important;
    }

 /*   .smallVerticalCards__card {
        border: 1.5px solid var(--PastelBlue);
    }
*/
    .smallVerticalCards__card img {
        visibility: visible;
    }

    .smallVerticalCards__card_Summary {
        height: auto !important;
    }

    .smallVerticalCards__card_title {
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: 130%;
        height: auto !important;
    }



}

.cat-filter-trigger.active {
    background-color: var(--Zodiac);
    color: var(--White);
}


#submit{
  display: inline-flex;
  height: 56px;
  padding: 0px 30px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: "Cera Pro";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; 
  border: 1.5px solid var(--Zodiac);
  background: var(--Zodiac);
  color: var(--White);
}

/* ==== Category cards: fluid Flex layout (Bootstrap-safe) ==== */

/* 0) Remove any fixed width that keeps cards narrow */
.blogArticle__category-cards .smallVerticalCards__card {
  width: auto !important;         /* beats prior 295px rule */
  max-width: none !important;
}

/* 1) The list becomes a wrapping flex row */
.blogArticle__category-cards .smallVerticalCards {
  display: flex !important;
  flex-wrap: wrap;
  gap: 24px;                      /* your spacing */
  align-items: stretch;
}

/* 2) Cards: target 4-up on wide screens, but allow growth */
@media (min-width: 1200px) {
  .blogArticle__category-cards .smallVerticalCards__card {
    /* Each wants ~25% width, but can GROW to fill extra space */
    flex: 1 1 calc((100% - 3 * 24px) / 4);
    min-width: 260px;             /* prevents squishing too small */
  }
}

/* 3) Tablet: target 3-up */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .blogArticle__category-cards .smallVerticalCards__card {
    flex: 1 1 calc((100% - 2 * 24px) / 3);
    min-width: 240px;
  }
}

/* 4) Phone: 1–2 up depending on width */
@media (max-width: 767.98px) {
  .blogArticle__category-cards .smallVerticalCards__card {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* 5) Make inner boxes stretch with the card */
.blogArticle__category-cards .smallVerticalCards__card > *,
.blogArticle__category-cards .smallVerticalCards__card .content,
.blogArticle__category-cards .smallVerticalCards__card a {
  width: 100% !important;
  max-width: none !important;
}

/* 6) Images scale with the card */
.blogArticle__category-cards .smallVerticalCards__card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Optional: unify thumbnail height */
.blogArticle__category-cards .smallVerticalCards__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.blogArticle__category-cards .smallVerticalCards__thumb img {
  height: 100%;
  object-fit: cover;
}