/* HEADER */
p.blog__overtitle { font-size: var(--fs-20); line-height: 1.1; margin: 0 0 var(--space-1); }
h1.blog__title { font-size: var(--fs-65); line-height: 1.1; margin: 0; text-wrap: balance;}

/* SEARCH */
.blog__header { padding-block: var(--space-10) var(--space-6); }
.blog__filter { position: relative ; padding-block: calc(var(--space-2) / 2); display: inline-block;}
button.blog__filter-remove { font-size: var(--fs-15); position: absolute; left: 100%; top: 50%; transform: translate(0, -50%); background: none; border: none; text-transform: uppercase; margin-left: var(--space-2); color: #d0d0d0; width: 100%; text-align: left; padding: 0; cursor: pointer; display: none; }
button.blog__filter-btn { padding: 0; border: none; background: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2);}
img.blog__filter-icon { filter: brightness(0) saturate(100%) invert(14%) sepia(97%) saturate(2917%) hue-rotate(207deg) brightness(77%) contrast(101%); max-width: 2rem; width: 100%; }
span.blog__filter-label { font-size: var(--fs-20); line-height: 1; font-family: var(--font-body);}
.blog__filter-popup { position: absolute; z-index: 1; box-shadow: 0px 3px 20px #0000000D; right: 0; top: 100%; max-width: 12rem; width: 100%; display: none;}
.blog__filter-popup-inner { display: flex; flex-direction: column; }
.blog__filter-popup-inner > span { font-size: var(--fs-20); padding: calc(var(--space-2) / 2); cursor: pointer; font-family: var(--font-body);}
.blog__filter-popup-inner > span:hover, .blog__filter-popup-inner > span.active { background-color: var(--silver); }
.blog__filter-popup-inner > span:not(:last-child) { border-block-end: 2px solid var(--white); }

/* ARTICLE */
.blog__grid { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-4); padding-block: var(--space-8) var(--space-10); }
.post-card { background: var(--white); border-radius: 0 0 2rem 2rem; display: flex; flex-direction: column; box-shadow: 0px 0px 30px #0000001A;}
a.post-card__image-link { display: block; position: relative; &:after { position: absolute; content: ""; left: 0; width: 100%; height: 100%; bottom: -2px; background: transparent linear-gradient(0deg, #ffffff 0%, #ffffff 8%, #ffffffd9 22%, #ffffff00 50%) 0% 0% no-repeat padding-box; } }
img.post-card__image { width: 100%; object-fit: cover;}
.post-card__meta { display:flex; flex-direction: column; height: 100%;}
.post-card__category { font-size: var(--fs-20); text-decoration: none; text-transform: uppercase; display: block; margin-bottom: var(--space-1);}
p.post-card__title { font-size: var(--fs-25); line-height: 1.2; margin: 0 0 var(--space-3);}
p.post-card__title a { text-decoration: none;}
a.post-card__btn { background: var(--cobalt); border: 3px solid var(--cobalt); border-radius: 5rem; font-size: var(--fs-20); text-decoration: none; display: flex; justify-content: center; align-items: center; margin-top: auto; box-sizing: border-box; }

/* NO ARTICLE */
.blog__no-results { font-size: var(--fs-20); margin: 0;}

@media (max-width: 550px){

    .blog__header, .blog__filter, .blog__grid { padding-inline: 8vw; }
    .blog__filter-popup { left: calc(8vw + 1.5rem + var(--space-2));}
    .blog__grid { justify-content: center; }
    .post-card { flex: 0 0 80%; }  
    img.post-card__image { height: 15rem; }
    .post-card__meta { padding: 5px var(--space-2) var(--space-3); }
}
@media (min-width: 551px) and (max-width: 766.9px){

    .blog__header, .blog__filter, .blog__grid { padding-inline: 10vw; }
    .blog__filter-popup { left: calc(10vw + 1.5rem + var(--space-2));}
    .post-card { flex: 0 0 calc(50% - (var(--space-4) / 2)); }  
    img.post-card__image { height: 10rem; }
    .post-card__meta { padding: 5px var(--space-2) var(--space-3); }
}
@media (min-width: 767px) {

    .post-card__meta { padding: 5px var(--space-4) var(--space-3); }
}
@media (min-width: 767px) and (max-width: 899.9px){
    .post-card { flex: 0 0 calc((100% - var(--space-4)) / 2); }
    img.post-card__image { height: 15rem; }
}
@media (min-width: 767px) and (max-width: 1099.9px){

    .blog__header, .blog__filter, .blog__grid { padding-inline: calc((100vw - 84vw) / 2); }
    .blog__filter-popup { left: calc(((100vw - 84vw) / 2) + 1.5rem + var(--space-2));}
}
@media (min-width: 900px){
    .post-card { flex: 0 0 calc((100% - (2 * var(--space-4))) / 3); }
}
@media (min-width: 900px) and (max-width: 1400px){
    img.post-card__image { height: 13rem; }
}
@media  (max-width: 1099.9px){
    a.post-card__btn { height: 3rem; }
}
@media (min-width: 1100px) {
    a.post-card__btn { height: 3.5rem; }
}
@media (min-width: 1100px) and (max-width: 1400px){

    .blog__header, .blog__filter, .blog__grid { padding-inline: calc((100vw - 80vw) / 2); }
    .blog__filter-popup { left: calc(((100vw - 80vw) / 2) + 1.5rem + var(--space-2));}
}
@media (min-width: 1401px){

    .blog__header, .blog__grid { padding-inline: calc((100vw - min(80vw, 1200px)) / 2); }
    .blog__filter { padding-left: calc((100vw - min(80vw, 1200px)) / 2); }
    .blog__filter-popup { left: calc(((100vw - min(80vw, 1200px)) / 2) + 1.5rem + var(--space-2));}
    img.post-card__image { height: 18rem; }
}