/* === Search bar === */





.ds-article-search {


    width: 100%;


    max-width: 100%;


    margin-bottom: 2rem;


}





.ds-article-search__inner {


    display: flex;


    gap: 60px;


    align-items: stretch;


    justify-content: center;


}





.ds-article-search__field-wrap {


    position: relative;


    flex: 1;


    display: flex;


    align-items: center;


    box-shadow: 0px 3px 12px #00000029;


    border-radius: 29px;


    max-width: 1095px;


    max-height: 58px;


    height: 58px;


}





.ds-article-search__icon {


    position: absolute;


    left: 12px;


    top: 50%;


    transform: translateY(-50%);


    display: inline-flex;


    pointer-events: none;


    font-size: 18px;


}





.ds-article-search__icon svg {


    width: 24px;


    height: 24px;


    stroke: #D0D0D0;


}





.ds-article-search__input {


    width: 100%;


    padding: 10px 12px 10px 40px; /* left padding to make room for icon */


    border: none;


    font-size: 14px;


    font-family: "General Sans", Sans-serif;


    border-radius: 29px;


    max-width: 1095px;


    max-height: 58px;


    height: 58px;


    outline: none;


}





.ds-article-search__btn {


    white-space: nowrap;


    padding: 16px 36px;


    border-radius: 29px;


    border: 3px solid #63C6CC;


    cursor: pointer;


    font-size: 20px;


    font-family: "General Sans", Sans-serif;


    font-weight: 700;


    background: transparent;


    color: #63C6CC;


    outline: none;


    transition: all 0.5s ease;


    width: 100%;


    max-width: 220px;


    max-height: 58px;


}


.ds-article-search__btn:focus {


    outline: none !important;


}


.ds-article-search__btn:hover {


  background: #63C6CC;


  color: #fff;


  font-size: 1.5em;


}





/* Responsive tweaks */


@media (max-width: 768px) {


    .ds-article-search__inner {


        flex-direction: column;


    }





    .ds-article-search__btn {


        width: 100%;


        text-align: center;


    }


}





/* === Results grid === */





.ds-article-results {


    position: relative;


    min-height: 40px;


}





/* Loading state */


.ds-article-results--loading::after {


    content: "";


    position: absolute;


    inset: 0;


    background: rgba(255,255,255,0.7);


    z-index: 2;


}





.ds-article-results--loading::before {


    content: "";


    position: absolute;


    top: 50%;


    left: 50%;


    width: 32px;


    height: 32px;


    margin: -16px 0 0 -16px;


    border-radius: 50%;


    border: 3px solid rgba(99, 198, 204, 0.25);  /* thinner ring */


    border-top-color: #63C6CC; 


    animation: ds-article-spinner 0.7s linear infinite;


    z-index: 3;


}





@keyframes ds-article-spinner {


    to {


        transform: rotate(360deg);


    }


}





.ds-article-results__no-results {


    margin: 1rem 0;


}





/* Grid: 3 per row */


.ds-article-results__grid {


    display: grid;


    grid-template-columns: repeat(3, minmax(0, 1fr));


    gap: 40px;


}





@media (max-width: 1180px) {


    .ds-article-results__grid {


        grid-template-columns: repeat(2, minmax(0, 1fr));


    }


}





@media (max-width: 600px) {


    .ds-article-results__grid {


        grid-template-columns: 1fr;


    }


}





/* === Card layout === */





.ds-article-card {
    background: #ffffff;
    border-radius: 0; 
    overflow: hidden;
    position: relative;
}

.ds-article-card a:hover img{
    transform: scale(1.1);
}



/* Container 1: image, full width, no padding */


.ds-article-card__image-wrap {


    line-height: 0;


}





.ds-article-card__image {
    width: 100%;
    min-height: 292px;
    max-height: 292px;
    object-fit: cover;
    display: block;
    transition: all 0.3s ease;
}





/* Date label: half over image, half over body (using negative margin) */


.ds-article-card__date {


    display: flex;


    flex-direction: row;


    align-items: center;


    justify-content: center;


    background: #A6E9CF;


    padding: 10px 20px;


    position: relative;


    margin-top: -20px;


    font-family: "General Sans", Sans-serif;


    font-size: 14px;


    font-weight: 600;


    line-height: 12px;


    color: #0C7EF9; 


    margin-left: 33px;


    border-radius: 20px;


    z-index: 1;


    flex-wrap: nowrap;


    max-width: 160px;


}





.ds-article-card__date-day {


    font-size: 18px;


    font-family: "General Sans", Sans-serif;


    line-height: 1;


}





.ds-article-card__date-mon {


    font-size: 11px;


    font-family: "General Sans", Sans-serif;


    line-height: 1.2;


}





/* Container 2: body with 33px padding */


.ds-article-card__body {
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}





.ds-article-card__title {
    color: #2575F0;
    font-weight: 700;
    font-size: 26px;
    font-family: "Archivo", Sans-serif;
    line-height: 35px;
    margin: 0;
}





.ds-article-card__title a {


    color: #0C7EF9;


    text-decoration: none;


}





.ds-article-card__title a:hover {


    color:#0C7EF9;


}





.ds-article-card__excerpt {
    color: #000000;
    font-size: 20px;
    line-height: 31px;
    font-family: "DM Sans", Sans-serif;
    margin-bottom: 1rem;
}





/* "Button": text + SVG, same line, no bg */
.ds-article-card__link {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ds-article-card__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #1D1E4E;
    font-size: 20px;
    font-family: "DM Sans", Sans-serif;
    line-height: 26px;
    font-weight: 700;
    width: fit-content;
}





.ds-article-card__more-text {
    display: inline-block;
}





.ds-article-card__more-icon {
    display: inline-flex;
}





.ds-article-card__more svg {
    width: 16px;
    height: 16px;
}





/* Optional hover */


.ds-article-card__more:hover .ds-article-card__more-text {
    text-decoration: none;
    color: #1D1E4E;
}


/* === Load more button === */





.ds-article-results__load-more-wrap {
    text-align: center;
    margin-top: 60px;
    min-height: 60px;
}





.ds-article-results__load-more {


    padding: 8px 16px;


    border-radius: 29px;


    border: 3px solid #1D1E4E;


    cursor: pointer;


    font-size: 18px;


    font-family: "General Sans", Sans-serif;


    font-weight: 500;


    background: transparent;


    color: #1D1E4E;


    outline: none;


    transition: all 0.5s ease;


    width: 100%;


    max-width: 160px;


}





.ds-article-results__load-more:hover {


    background: #1D1E4E;


    color: #fff;


    font-size: 20px;


}