/* =========================================================
   HUMANAS JA / PASSO 6B
   EXPLORAR - FILOSOFIA POP EDITORIAL
   ========================================================= */

.explore-page {
    background: var(--paper);
}


/* HERO */

.explore-hero {

    width:
        min(
            var(--max),
            calc(100% - 48px)
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        .88fr 1.12fr;

    gap:
        75px;

    min-height:
        525px;

    padding:
        72px 0 78px;

    align-items:
        center;
}

.explore-kicker {

    color:
        var(--purple);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .14em;
}

.explore-hero-copy h1 {

    font-family:
        "Anton",
        sans-serif;

    font-size:
        clamp(
            82px,
            9vw,
            138px
        );

    line-height:
        .78;

    letter-spacing:
        -.035em;

    margin:
        28px 0 28px;
}

.explore-hero-copy h1 strong {

    color:
        var(--purple);

    font-weight:
        inherit;

    position:
        relative;
}

.explore-hero-copy h1 strong::after {

    content:
        "";

    position:
        absolute;

    height:
        12px;

    left:
        -2px;

    right:
        3px;

    bottom:
        0;

    background:
        var(--yellow);

    z-index:
        -1;

    transform:
        rotate(-1deg);
}

.explore-hero-copy p {

    max-width:
        480px;

    color:
        #635f58;

    line-height:
        1.7;

    font-size:
        16px;
}

.explore-hero-image {

    height:
        380px;

    position:
        relative;

    overflow:
        hidden;

    background:
        #d8d4ca;
}

.explore-hero-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(100%)
        contrast(.9)
        brightness(.78);

    transform:
        scale(1.04);

    transition:
        transform .9s
        cubic-bezier(.2,.75,.2,1);
}

.explore-hero-image:hover img {

    transform:
        scale(1.08);
}

.explore-image-label {

    position:
        absolute;

    left:
        24px;

    right:
        24px;

    bottom:
        22px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        white;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .11em;
}

.explore-image-label i {

    height:
        1px;

    flex:
        1;

    background:
        rgba(255,255,255,.48);
}


/* SEARCH STRIP */

.explore-search-strip {

    background:
        var(--purple-dark);

    color:
        white;

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

    border-bottom:
        1px solid var(--ink);
}

.explore-search-inner {

    width:
        min(
            var(--max),
            calc(100% - 48px)
        );

    margin:
        0 auto;

    min-height:
        112px;

    display:
        grid;

    grid-template-columns:
        125px 1fr auto;

    gap:
        25px;

    align-items:
        center;
}

.search-code {

    color:
        var(--yellow);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.explore-search-box {

    min-height:
        58px;

    background:
        white;

    display:
        grid;

    grid-template-columns:
        1fr auto;
}

.explore-search-box input {

    border:
        0;

    outline:
        0;

    padding:
        0 18px;

    min-width:
        0;
}

.explore-search-box button {

    border:
        0;

    min-width:
        120px;

    background:
        var(--yellow);

    color:
        var(--ink);

    font-weight:
        800;

    transition:
        background .25s ease,
        color .25s ease;
}

.explore-search-box button:hover {

    background:
        var(--ink);

    color:
        white;
}

.mobile-filter-button {

    display:
        none;
}


/* LIBRARY */

.explore-library {

    width:
        min(
            var(--max),
            calc(100% - 48px)
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        255px 1fr;

    gap:
        55px;

    padding:
        80px 0 120px;
}


/* FILTERS */

.filter-panel {

    align-self:
        start;

    position:
        sticky;

    top:
        22px;

    border-top:
        2px solid var(--ink);
}

.filter-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    padding:
        19px 0 22px;

    border-bottom:
        1px solid var(--line);
}

.filter-heading > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}

.filter-heading span {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .13em;
}

.filter-heading strong {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        17px;
}

.close-filters {

    display:
        none;
}

.filter-control {

    display:
        block;

    padding:
        17px 0;

    border-bottom:
        1px solid var(--line);
}

.filter-control > span {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .11em;

    color:
        #6e6a63;
}

.filter-control select {

    width:
        100%;

    min-height:
        42px;

    border:
        1px solid #aaa59c;

    background:
        transparent;

    padding:
        0 9px;

    color:
        var(--ink);

    font-size:
        12px;
}

.filter-control select:focus {

    outline:
        2px solid var(--purple);

    outline-offset:
        1px;
}

.adapted-toggle {

    display:
        grid;

    grid-template-columns:
        auto 1fr;

    gap:
        10px;

    align-items:
        start;

    padding:
        19px 0;

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

    font-size:
        11px;

    line-height:
        1.45;

    cursor:
        pointer;
}

.adapted-toggle input {

    accent-color:
        var(--purple);

    width:
        17px;

    height:
        17px;
}

.clear-filters {

    width:
        100%;

    min-height:
        45px;

    margin-top:
        18px;

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

    background:
        transparent;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .08em;
}

.clear-filters:hover {

    background:
        var(--ink);

    color:
        white;
}


/* RESULTS HEADER */

.results-header {

    min-height:
        88px;

    border-top:
        2px solid var(--ink);

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

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        30px;
}

.results-header > div:first-child span {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.results-header h2 {

    font-family:
        "Anton",
        sans-serif;

    font-size:
        42px;

    line-height:
        1;

    margin:
        6px 0 0;
}

.results-tools {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;
}

.results-tools strong {

    font-size:
        10px;

    letter-spacing:
        .04em;
}

.results-tools select {

    min-height:
        38px;

    border:
        1px solid #aaa59c;

    background:
        transparent;

    padding:
        0 10px;

    font-size:
        11px;
}


/* ACTIVE FILTERS */

.active-filters {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    padding:
        17px 0;

    min-height:
        20px;
}

.filter-chip {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        29px;

    padding:
        0 10px;

    background:
        #e3ded3;

    font-size:
        9px;

    font-weight:
        700;
}

.filter-chip button {

    border:
        0;

    background:
        transparent;

    padding:
        0;

    font-size:
        15px;

    line-height:
        1;

    cursor:
        pointer;
}


/* MATERIAL GRID */

.explore-grid {

    display:
        grid;

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

    gap:
        27px 18px;
}

.explore-card {

    min-width:
        0;

    opacity:
        0;

    transform:
        translateY(20px);

    animation:
        exploreCardIn
        .6s
        cubic-bezier(.22,.8,.25,1)
        forwards;
}

.explore-card-image {

    position:
        relative;

    height:
        285px;

    overflow:
        hidden;

    background:
        #d7d2c7;
}

.explore-card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(100%)
        contrast(.98);

    transform:
        scale(1.02);

    transition:
        transform .75s
        cubic-bezier(.2,.75,.2,1),
        filter .45s ease;
}

.explore-card:hover
.explore-card-image img {

    transform:
        scale(1.08);

    filter:
        grayscale(15%);
}

.explore-card-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            transparent 55%,
            rgba(0,0,0,.72)
        );

    pointer-events:
        none;
}

.card-discipline {

    position:
        absolute;

    left:
        14px;

    top:
        14px;

    z-index:
        3;

    background:
        var(--paper);

    color:
        var(--ink);

    min-height:
        27px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 9px;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .1em;
}

.card-type {

    position:
        absolute;

    left:
        15px;

    bottom:
        13px;

    z-index:
        3;

    color:
        white;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .1em;
}

.card-index {

    position:
        absolute;

    right:
        15px;

    bottom:
        13px;

    z-index:
        3;

    color:
        var(--yellow);

    font-family:
        "Anton",
        sans-serif;

    font-size:
        22px;
}

.explore-card-body {

    padding:
        17px 0 0;

    border-top:
        1px solid var(--ink);
}

.explore-card-meta {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}

.explore-card h3 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        21px;

    line-height:
        1.04;

    letter-spacing:
        -.035em;

    margin:
        9px 0 10px;
}

.explore-card p {

    color:
        #6c675f;

    font-size:
        11px;

    line-height:
        1.55;

    margin:
        0;
}

.explore-card-footer {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    align-items:
        center;

    margin-top:
        16px;

    padding-top:
        13px;

    border-top:
        1px solid var(--line);
}

.explore-card-footer span {

    color:
        #777169;

    font-size:
        8px;

    font-weight:
        700;
}

.explore-card-footer a {

    color:
        var(--purple);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .06em;

    transition:
        transform .25s ease;
}

.explore-card-footer a:hover {

    transform:
        translateX(4px);
}


/* EMPTY */

.empty-state {

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

    padding:
        60px;

    text-align:
        center;

    background:
        #ece7dc;
}

.empty-state > span {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.empty-state h3 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        31px;

    margin:
        13px 0 10px;
}

.empty-state p {

    color:
        #716c64;
}

.empty-state button {

    min-height:
        43px;

    margin-top:
        16px;

    padding:
        0 16px;

    border:
        0;

    background:
        var(--ink);

    color:
        white;

    font-size:
        9px;

    font-weight:
        800;
}


/* CALLOUT */

.explore-callout {

    width:
        min(
            var(--max),
            calc(100% - 48px)
        );

    margin:
        0 auto 110px;

    min-height:
        330px;

    background:
        var(--purple-dark);

    color:
        white;

    padding:
        55px;

    display:
        grid;

    grid-template-columns:
        1fr .8fr;

    gap:
        70px;

    align-items:
        end;

    position:
        relative;

    overflow:
        hidden;
}

.explore-callout::after {

    content:
        "";

    position:
        absolute;

    width:
        330px;

    height:
        330px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:
        50%;

    right:
        -100px;

    top:
        -150px;
}

.explore-callout small {

    color:
        var(--yellow);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.explore-callout h2 {

    font-family:
        "Anton",
        sans-serif;

    font-size:
        68px;

    line-height:
        .8;

    margin:
        17px 0 0;
}

.explore-callout p {

    color:
        #c2b8d1;

    line-height:
        1.75;

    max-width:
        400px;

    position:
        relative;

    z-index:
        2;
}


/* ANIMATION */

@keyframes exploreCardIn {

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* TABLET */

@media (max-width: 1080px) {

    .explore-hero {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }

    .explore-hero-image {

        height:
            420px;
    }

    .explore-library {

        grid-template-columns:
            220px 1fr;

        gap:
            35px;
    }

    .explore-grid {

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


/* MOBILE FILTER DRAWER */

@media (max-width: 780px) {

    .explore-hero,
    .explore-search-inner,
    .explore-library,
    .explore-callout {

        width:
            calc(100% - 30px);
    }

    .explore-hero {

        min-height:
            auto;

        padding:
            55px 0;
    }

    .explore-hero-copy h1 {

        font-size:
            79px;
    }

    .explore-hero-image {

        height:
            300px;
    }

    .explore-image-label {

        flex-wrap:
            wrap;
    }

    .explore-image-label i {

        display:
            none;
    }

    .explore-search-inner {

        grid-template-columns:
            1fr auto;

        padding:
            22px 0;
    }

    .search-code {

        grid-column:
            1 / -1;
    }

    .explore-search-box {

        grid-template-columns:
            1fr;
    }

    .explore-search-box input {

        min-height:
            52px;
    }

    .explore-search-box button {

        min-height:
            47px;
    }

    .mobile-filter-button {

        display:
            block;

        align-self:
            stretch;

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

        background:
            transparent;

        color:
            var(--yellow);

        padding:
            0 15px;

        font-size:
            9px;

        font-weight:
            800;

        letter-spacing:
            .08em;
    }

    .explore-library {

        display:
            block;

        padding-top:
            55px;
    }

    .filter-panel {

        position:
            fixed;

        inset:
            0 0 0 auto;

        width:
            min(340px,88vw);

        z-index:
            100;

        background:
            var(--paper);

        padding:
            25px;

        overflow-y:
            auto;

        transform:
            translateX(105%);

        transition:
            transform .38s
            cubic-bezier(.22,.8,.25,1);

        box-shadow:
            -20px 0 45px
            rgba(0,0,0,.22);
    }

    .filter-panel.open {

        transform:
            translateX(0);
    }

    .close-filters {

        display:
            block;

        border:
            0;

        background:
            transparent;

        font-size:
            29px;
    }

    .results-header {

        align-items:
            flex-start;

        padding:
            15px 0;

        display:
            block;
    }

    .results-tools {

        margin-top:
            16px;

        justify-content:
            space-between;
    }

    .explore-grid {

        grid-template-columns:
            1fr;
    }

    .explore-card-image {

        height:
            390px;
    }

    .explore-callout {

        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            40px 25px;
    }

    .explore-callout h2 {

        font-size:
            59px;
    }
}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .explore-hero-copy h1 {

        font-size:
            65px;
    }

    .explore-search-inner {

        grid-template-columns:
            1fr;
    }

    .mobile-filter-button {

        min-height:
            45px;
    }

    .explore-card-image {

        height:
            320px;
    }

    .results-tools {

        align-items:
            flex-start;

        flex-direction:
            column;
    }
}


/* REDUCED MOTION */

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

    .explore-card {

        opacity:
            1;

        transform:
            none;

        animation:
            none;
    }
}