/* ==========================================================================
   ASILI DISCOVERY
   SEARCH PAGE
   Editorial / Documentary Search System
   Articles + Animals
   ========================================================================== */


/* ==========================================================================
   1. BRAND TOKENS
   ========================================================================== */

:root {

    --asili-green: #35351f;
    --asili-green-deep: #292918;
    --asili-green-soft: #41412a;

    --asili-gold: #855e26;
    --asili-gold-light: #a47a38;
    --asili-gold-soft: #b78b4b;

    --asili-milk: #e4d6c5;
    --asili-milk-soft: #cfc0ad;
    --asili-white: #f3eee5;

    --asili-black: #171711;
    --asili-bg: #34321e;

    --border-light: rgba(228, 214, 197, .14);
    --border-medium: rgba(228, 214, 197, .25);
    --border-gold: rgba(133, 94, 38, .65);

    --shadow-dark:
        0 25px 70px rgba(0, 0, 0, .28);

    --shadow-card:
        0 14px 40px rgba(0, 0, 0, .20);

    --container: 1280px;

    --transition:
        220ms ease;

}


/* ==========================================================================
   2. RESET
   ========================================================================== */

.search-page *,
.search-page *::before,
.search-page *::after {

    box-sizing: border-box;

}


.search-page {

    width: 100%;
    min-height: 70vh;

    overflow: hidden;

    color: var(--asili-milk);

    background:
        var(--asili-bg);

}


.search-page a {

    color: inherit;
    text-decoration: none;

}


.search-page img {

    display: block;

    width: 100%;
    max-width: 100%;

}


.search-page button,
.search-page input {

    font: inherit;

}


/* ==========================================================================
   3. ACCESSIBILITY
   ========================================================================== */

.search-page .sr-only {

    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


/* ==========================================================================
   4. CONTAINER
   ========================================================================== */

.search-page .container {

    width:
        min(
            calc(100% - 64px),
            var(--container)
        );

    margin-inline: auto;

}


/* ==========================================================================
   5. SEARCH HERO
   ========================================================================== */

.search-header {

    position: relative;

    max-width: 980px;

    padding:
        clamp(80px, 10vw, 145px)
        0
        clamp(55px, 7vw, 90px);

}


.search-header::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--asili-gold),
            rgba(133, 94, 38, .25),
            transparent
        );

}


.search-header::after {

    content: "SEARCH";

    position: absolute;

    right: 0;
    top: 35px;

    color:
        rgba(228, 214, 197, .035);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(70px, 12vw, 170px);

    font-weight: 900;

    letter-spacing:
        -.08em;

    pointer-events: none;

}


/* ==========================================================================
   6. KICKER
   ========================================================================== */

.section-kicker {

    position: relative;
    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color:
        var(--asili-gold-light);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 900;

    letter-spacing:
        .20em;

    text-transform:
        uppercase;

}


.section-kicker::before {

    content: "";

    width: 30px;
    height: 2px;

    background:
        var(--asili-gold);

}


/* ==========================================================================
   7. TITLE
   ========================================================================== */

.search-header h1 {

    position: relative;
    z-index: 2;

    margin: 0;

    color:
        var(--asili-milk);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(60px, 9vw, 118px);

    font-weight: 400;

    line-height: .88;

    letter-spacing:
        -.055em;

}


.search-intro {

    position: relative;
    z-index: 2;

    max-width: 720px;

    margin:
        30px 0 42px;

    color:
        var(--asili-milk-soft);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(18px, 2vw, 23px);

    line-height:
        1.6;

}


/* ==========================================================================
   8. SEARCH FORM
   ========================================================================== */

.search-form {

    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 900px;

}


.search-input-wrap {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        150px;

    width: 100%;

    border:
        1px solid
        var(--border-medium);

    background:
        rgba(23, 23, 17, .58);

    box-shadow:
        0 15px 50px rgba(0, 0, 0, .12);

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}


.search-input-wrap:hover {

    border-color:
        rgba(228, 214, 197, .38);

}


.search-input-wrap:focus-within {

    border-color:
        var(--asili-gold);

    box-shadow:
        0 0 0 4px
        rgba(133, 94, 38, .13),
        var(--shadow-dark);

}


.search-input-wrap input {

    width: 100%;
    min-width: 0;

    min-height: 68px;

    padding:
        0 24px;

    border: 0;
    outline: 0;

    color:
        var(--asili-milk);

    background:
        transparent;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

}


.search-input-wrap input::placeholder {

    color:
        rgba(228, 214, 197, .48);

}


.search-input-wrap button {

    min-height: 68px;

    padding:
        0 25px;

    border: 0;

    border-left:
        1px solid
        var(--border-light);

    cursor: pointer;

    color:
        var(--asili-milk);

    background:
        var(--asili-gold);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 900;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    transition:
        background var(--transition),
        color var(--transition);

}


.search-input-wrap button:hover {

    background:
        var(--asili-gold-light);

    color:
        #fff;

}


.search-input-wrap button:focus-visible {

    outline:
        2px solid
        var(--asili-milk);

    outline-offset:
        -5px;

}


/* ==========================================================================
   9. SEARCH SUMMARY
   ========================================================================== */

.search-summary {

    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 8px;

    padding:
        24px 0;

    border-top:
        1px solid
        var(--border-light);

    border-bottom:
        1px solid
        var(--border-light);

    color:
        var(--asili-milk-soft);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    letter-spacing:
        .03em;

}


.search-summary strong:first-child {

    color:
        var(--asili-milk);

}


.search-term {

    color:
        var(--asili-gold-light);

}


/* ==========================================================================
   10. RESULTS
   ========================================================================== */

.search-results {

    display: flex;

    flex-direction: column;

}


.search-result {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(300px, 420px)
        minmax(0, 1fr);

    gap:
        clamp(35px, 6vw, 75px);

    padding:
        55px 0;

    border-bottom:
        1px solid
        var(--border-light);

}


/* ==========================================================================
   11. RESULT IMAGE
   ========================================================================== */

.search-result-image {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    aspect-ratio:
        16 / 10;

    overflow: hidden;

    background:
        var(--asili-green-deep);

}


.search-result-image::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0, 0, 0, .48)
        );

    pointer-events: none;

}


.search-result-image::after {

    content: "";

    position: absolute;

    left: 18px;
    bottom: 18px;

    width: 28px;
    height: 2px;

    z-index: 2;

    background:
        var(--asili-gold);

}


.search-result-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 650ms
        cubic-bezier(.2,.65,.2,1);

}


.search-result:hover
.search-result-image img {

    transform:
        scale(1.055);

}


/* ==========================================================================
   12. IMAGE PLACEHOLDER
   ========================================================================== */

.search-result-placeholder {

    background:
        radial-gradient(
            circle at 30% 20%,
            var(--asili-green-soft),
            var(--asili-green-deep) 70%
        );

}


.search-result-placeholder span {

    position: relative;

    z-index: 3;

    color:
        var(--asili-gold-light);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(24px, 3vw, 36px);

    letter-spacing:
        .18em;

}


/* ==========================================================================
   13. RESULT CONTENT
   ========================================================================== */

.search-result-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

}


.search-result-type {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 17px;

    color:
        var(--asili-gold-light);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 900;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


.search-result-type::before {

    content: "";

    width: 21px;
    height: 2px;

    background:
        var(--asili-gold);

}


/* ==========================================================================
   14. RESULT TITLE
   ========================================================================== */

.search-result h2 {

    max-width: 760px;

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 3.5vw, 52px);

    font-weight: 400;

    line-height:
        1.02;

    letter-spacing:
        -.035em;

}


.search-result h2 a {

    color:
        var(--asili-milk);

    transition:
        color var(--transition);

}


.search-result h2 a:hover {

    color:
        var(--asili-gold-light);

}


/* ==========================================================================
   15. CATEGORY
   ========================================================================== */

.search-result-category {

    display: inline-block;

    margin-top: 17px;

    padding-bottom: 5px;

    border-bottom:
        1px solid
        rgba(133, 94, 38, .55);

    color:
        var(--asili-gold-light);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


/* ==========================================================================
   16. EXCERPT
   ========================================================================== */

.search-result-content p {

    max-width: 680px;

    margin:
        20px 0 0;

    color:
        var(--asili-milk-soft);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    line-height:
        1.7;

}


/* ==========================================================================
   17. READ MORE
   ========================================================================== */

.read-more {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 28px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        var(--asili-gold);

    color:
        var(--asili-milk);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 900;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    transition:
        color var(--transition),
        border-color var(--transition),
        gap var(--transition);

}


.read-more span {

    color:
        var(--asili-gold-light);

    font-size: 17px;

}


.read-more:hover {

    gap: 18px;

    color:
        var(--asili-gold-light);

    border-color:
        var(--asili-gold-light);

}


/* ==========================================================================
   18. EMPTY / NO RESULTS
   ========================================================================== */

.search-empty {

    max-width: 800px;

    margin:
        45px auto 100px;

    padding:
        clamp(60px, 9vw, 110px)
        30px;

    text-align: center;

    border-top:
        1px solid
        var(--border-light);

    border-bottom:
        1px solid
        var(--border-light);

}


.search-empty-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin:
        0 auto 28px;

    border:
        1px solid
        var(--asili-gold);

    color:
        var(--asili-gold-light);

    font-family:
        Georgia,
        serif;

    font-size: 30px;

}


.search-empty h2 {

    margin: 0;

    color:
        var(--asili-milk);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(32px, 5vw, 52px);

    font-weight: 400;

    line-height:
        1.05;

}


.search-empty p {

    max-width: 600px;

    margin:
        20px auto 0;

    color:
        var(--asili-milk-soft);

    font-family:
        Georgia,
        serif;

    font-size: 17px;

    line-height:
        1.65;

}


/* ==========================================================================
   19. SUGGESTIONS
   ========================================================================== */

.search-suggestions {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 35px;

}


.search-suggestions span {

    width: 100%;

    margin-bottom: 5px;

    color:
        var(--asili-milk-soft);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.search-suggestions a {

    padding:
        10px 15px;

    border:
        1px solid
        var(--border-medium);

    color:
        var(--asili-milk);

    background:
        rgba(53, 53, 31, .55);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        .05em;

    transition:
        border-color var(--transition),
        color var(--transition),
        background var(--transition);

}


.search-suggestions a:hover {

    border-color:
        var(--asili-gold);

    color:
        var(--asili-gold-light);

    background:
        var(--asili-green);

}


/* ==========================================================================
   20. ERROR
   ========================================================================== */

.search-message {

    max-width: 760px;

    margin:
        30px 0 80px;

    padding:
        28px 30px;

    border-left:
        3px solid
        var(--asili-gold);

    background:
        rgba(53, 53, 31, .65);

}


.search-message strong {

    color:
        var(--asili-milk);

    font-family:
        Georgia,
        serif;

    font-size: 24px;

    font-weight: 400;

}


.search-message p {

    margin:
        10px 0 0;

    color:
        var(--asili-milk-soft);

    line-height:
        1.6;

}


/* ==========================================================================
   21. PAGINATION
   ========================================================================== */

.pagination {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding:
        38px 0 90px;

}


.pagination-link {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding:
        0 20px;

    border:
        1px solid
        var(--border-medium);

    color:
        var(--asili-milk);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 900;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);

}


.pagination-link:hover {

    border-color:
        var(--asili-gold);

    color:
        var(--asili-gold-light);

    background:
        rgba(133, 94, 38, .10);

}


.pagination-current {

    color:
        var(--asili-milk-soft);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.pagination-current strong {

    color:
        var(--asili-milk);

}


/* ==========================================================================
   22. TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .search-page .container {

        width:
            min(
                calc(100% - 42px),
                760px
            );

    }


    .search-header {

        max-width: 800px;

    }


    .search-result {

        grid-template-columns:
            300px
            minmax(0, 1fr);

        gap:
            30px;

        padding:
            42px 0;

    }


    .search-result h2 {

        font-size:
            clamp(28px, 4vw, 40px);

    }


    .search-result-content p {

        font-size: 16px;

    }

}


/* ==========================================================================
   23. MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .search-page .container {

        width:
            calc(100% - 32px);

    }


    .search-header {

        padding:
            58px 0 45px;

    }


    .search-header::after {

        top: 30px;
        right: -15px;

        font-size:
            80px;

    }


    .section-kicker {

        margin-bottom: 19px;

        font-size: 9px;

    }


    .search-header h1 {

        font-size:
            clamp(52px, 17vw, 78px);

        letter-spacing:
            -.06em;

    }


    .search-intro {

        margin:
            23px 0 32px;

        font-size:
            18px;

        line-height:
            1.55;

    }


    /* SEARCH FORM */

    .search-input-wrap {

        display: flex;

        flex-direction: column;

    }


    .search-input-wrap input {

        min-height: 58px;

        padding:
            0 18px;

        font-size: 16px;

    }


    .search-input-wrap button {

        min-height: 54px;

        border-top:
            1px solid
            var(--border-light);

        border-left: 0;

    }


    /* SUMMARY */

    .search-summary {

        padding:
            19px 0;

        line-height:
            1.7;

    }


    /* RESULTS */

    .search-result {

        display: block;

        padding:
            30px 0 38px;

    }


    .search-result-image {

        aspect-ratio:
            16 / 10;

        margin-bottom:
            25px;

    }


    .search-result-content {

        display: block;

    }


    .search-result-type {

        margin-bottom:
            12px;

    }


    .search-result h2 {

        font-size:
            clamp(29px, 9vw, 43px);

        line-height:
            1.02;

    }


    .search-result-category {

        margin-top:
            14px;

    }


    .search-result-content p {

        margin-top:
            16px;

        font-size:
            16px;

        line-height:
            1.65;

    }


    .read-more {

        margin-top:
            21px;

    }


    /* PAGINATION */

    .pagination {

        flex-direction:
            column;

        padding:
            28px 0 65px;

    }


    .pagination-current {

        order:
            -1;

    }


    .pagination-link {

        width:
            100%;

    }


    /* EMPTY */

    .search-empty {

        margin:
            20px auto 60px;

        padding:
            55px 20px;

    }


    .search-empty h2 {

        font-size:
            34px;

    }


    .search-empty p {

        font-size:
            16px;

    }


    .search-suggestions {

        gap:
            7px;

    }


    .search-suggestions a {

        font-size:
            10px;

    }


    /* ERROR */

    .search-message {

        margin:
            20px 0 60px;

        padding:
            24px 20px;

    }

}


/* ==========================================================================
   24. SMALL PHONES
   ========================================================================== */

@media (max-width: 380px) {

    .search-page .container {

        width:
            calc(100% - 24px);

    }


    .search-header {

        padding-top:
            48px;

    }


    .search-header h1 {

        font-size:
            50px;

    }


    .search-intro {

        font-size:
            17px;

    }


    .search-result h2 {

        font-size:
            28px;

    }


    .search-result-image {

        aspect-ratio:
            4 / 3;

    }

}


/* ==========================================================================
   25. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .search-page *,
    .search-page *::before,
    .search-page *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

    }

}


/* ==========================================================================
   26. PRINT
   ========================================================================== */

@media print {

    .search-page {

        color:
            #000;

        background:
            #fff;

    }


    .search-form,
    .search-suggestions,
    .pagination {

        display:
            none;

    }


    .search-result {

        break-inside:
            avoid;

    }

}