@charset "UTF-8";

/* ======================
 Common
=========================*/

h1.page-title {
    margin-bottom: 2rem;
    font-size: 3.2rem;
    font-weight: 800;
}

h2.section-title {
    position: relative;
    font-size: 2.4rem;
}


/* ======================
 Search area
=========================*/
.search-area {
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0, 0, 0, 0);
        overflow: hidden;
    }

    .section-inner {
        padding-top: 0;
        padding-bottom: 2rem !important;
    }

    .section-title {
        display: flex;
        align-items: center;
    }

    .section-title::before {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
        background: #6d6e70;
    }

    .toggle-button {
        all: unset;
        display: flex;
        align-items: center;
        flex-grow: 1;
        padding: 10px 20px;
        font-size: 1.6rem;
        font-weight: 400;
        cursor: pointer;
    }

    .toggle-button:focus {
        outline: none;
    }

    .toggle-icon {
        margin-left: 10px;
        stroke: #ce2c1f;
        transition: transform 0.3s ease-in-out;
    }

    .toggle-button.active .toggle-icon {
        transform: rotate(180deg);
    }

    .toggle-content {
        padding: 2rem 0 3rem;
        overflow: hidden;
        height: 0;
        opacity: 0;
        transition: 0.3s ease;
    }

    .toggle-content.active {
        height: auto;
        opacity: 1;
        transition: 0.3s ease;
    }

    .group-title {
        font-size: 1.8rem;
        font-weight: 800;
    }

    .checkbox-container {
        padding: 1rem 0 2rem 4rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 1.6rem;

        @media screen and (max-width: 1000px) {
            grid-template-columns: repeat(2, 1fr);
            font-size: 1.4rem;
            gap: 1rem;
        }

        @media screen and (max-width: 767px) {
            grid-template-columns: 1fr;
        }

        @media screen and (max-width: 480px) {
            padding: 1rem 0 2rem 0;
            gap: 0.5rem;
        }
    }

    .custom-checkbox {
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
        padding-left: 3rem;
        margin: 0;
    }

    .custom-checkbox .checkbox-box {
        position: absolute;
        left: 0;
        width: 2rem;
        height: 2rem;
        border: 2px solid #8d8d8d;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .custom-checkbox input {
        display: none;
    }

    .custom-checkbox input:checked + .checkbox-box {
        border-color: #000;
        background: #000;
    }

    .custom-checkbox input:checked + .checkbox-box::after {
        content: '';
        display: inline-block;
        width: 1.6rem;
        height: 1.6rem;
        background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%2220 6 9 17 4 12%22/%3E%3C/svg%3E');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .custom-checkbox input:disabled + .checkbox-box {
        border-color: #ccc;
        background: #eaeaea;
    }

    .custom-checkbox input:disabled + .checkbox-box + span {
        color: #aaa;
    }

    .custom-checkbox input:disabled ~ * {
        pointer-events: none;
    }

    .custom-checkbox:has(input:disabled) {
        cursor: default;
    }

    .reset-filters-btn {
        text-align: right;
    }

    .reset-filters-btn a {
        display: inline-block;
        border: 1px solid #2013b5;
        background: #fff;
        padding: 1.2rem 3rem;
        color: #2013b5;
        text-decoration: none;
        line-height: 1;
        font-size: 1.4rem;
        cursor: pointer;
        transition: 0.3s;
    }

    .reset-filters-btn a:hover {
        background: #2013b5;
        ;
        color: #fff;
        transition: 0.3s;
    }

}


/* ======================
 Search results area
=========================*/
.search-results-area {
    .section-inner {
        padding-top: 0 !important;
    }

    .section-title {
        margin-bottom: 2rem;
    }

    .section-title::before {
        position: absolute;
        content: "";
        bottom: -8px;
        left: 0;
        height: 1px;
        width: 100%;
        background: #6d6e70;
    }

    .search-summary {
        font-size: 1.4rem;
        display: grid;
        grid-template-columns: auto auto;
        width: fit-content;
        gap: 0.2rem 0.5rem;
    }

    .search-summary dt,
    .search-summary dd {
        font-weight: 400;
        margin: 0;
    }

    .search-summary span {
        color: #d52e20;
    }

    .card-container {
        margin-top: 3rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;

        @media screen and (max-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media screen and (max-width: 480px) {
            grid-template-columns: 1fr;
        }
    }

    .card {
        border: 1px solid #ccc;
        padding: 1.6rem;
        display: flex;
        flex-direction: column;
        height: 100%;
        text-decoration: none;
        transition: transform 0.3s ease;
    }

    .card:hover {
        transform: translateY(-5px);
    }

    .card-link {
        display: flex;
        flex-direction: column;
        height: 100%;
        text-decoration: none;
        color: inherit;
    }

    .card-image {
        height: 186px;
        overflow: hidden;
        margin-bottom: 1.6rem;
    }

    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .card-title {
        font-size: 1.8rem;
        font-weight: 800;
        margin-bottom: 1.6rem;
    }

    .card-description {
        flex-grow: 1;
        font-size: 1.6rem;
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-detail-link {
        margin-top: auto;
        text-align: right;
    }


    .more-btn {
        margin-top: 6rem;
    }

    .more-btn a {
        border-color: #7d7d7d;
        background: #fff;
        color: #000;
    }

    .more-btn svg {
        fill: initial;
        transform: rotate(90deg)
    }

    .more-btn svg .circle,
    a:hover .more-btn svg .circle {
        stroke: #1c1c1c !important;
    }

}