/* =========================================================
   HUMANAS JA / PASSO 6E
   HUMANAS PARA TODOS
   ========================================================= */


/* HERO */

.adapted-hero {

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

    margin:
        0 auto;

    min-height:
        610px;

    padding:
        70px 0 85px;

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        75px;

    align-items:
        center;
}

.adapted-kicker {

    color:
        var(--purple);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .13em;
}

.adapted-hero-copy h1 {

    margin:
        25px 0 28px;

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

    font-size:
        clamp(
            60px,
            5.8vw,
            88px
        );

    line-height:
        .84;

    letter-spacing:
        -.03em;
}

.adapted-hero-copy h1 strong {

    display:
        block;

    color:
        var(--purple);

    font-weight:
        inherit;
}

.adapted-hero-copy p {

    max-width:
        530px;

    color:
        #665f58;

    line-height:
        1.72;

    font-size:
        16px;
}

.adapted-hero-image {

    height:
        435px;

    position:
        relative;

    overflow:
        hidden;

    background:
        #d8d3c7;
}

.adapted-hero-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(100%)
        contrast(1)
        brightness(.72);

    transform:
        scale(1.03);

    transition:
        transform .85s ease,
        filter .4s ease;
}

.adapted-hero-image:hover img {

    transform:
        scale(1.08);

    filter:
        grayscale(25%)
        brightness(.8);
}

.adapted-hero-labels {

    position:
        absolute;

    left:
        22px;

    right:
        22px;

    bottom:
        20px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        white;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .1em;
}

.adapted-hero-labels i {

    flex:
        1;

    height:
        1px;

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


/* PRINCIPLE */

.adapted-principle {

    background:
        var(--purple-dark);

    color:
        white;

    min-height:
        330px;

    padding:
        60px max(
            24px,
            calc((100vw - var(--max)) / 2)
        );

    display:
        grid;

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

    gap:
        65px;

    align-items:
        end;
}

.adapted-principle small {

    color:
        var(--yellow);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.adapted-principle h2 {

    margin:
        15px 0 0;

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

    font-size:
        clamp(
            49px,
            4.8vw,
            67px
        );

    line-height:
        .85;
}

.adapted-principle p {

    color:
        #c4bbd0;

    line-height:
        1.75;

    max-width:
        420px;
}


/* TYPES */

.adaptation-types {

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

    margin:
        0 auto;

    padding:
        105px 0 115px;
}

.adaptation-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        60px;

    margin-bottom:
        48px;
}

.adaptation-heading span {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.adaptation-heading h2 {

    margin:
        15px 0 0;

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

    font-size:
        clamp(
            50px,
            5vw,
            74px
        );

    line-height:
        .84;
}

.adaptation-heading p {

    max-width:
        390px;

    color:
        #68625a;

    line-height:
        1.7;

    font-size:
        13px;
}

.adaptation-type-grid {

    display:
        grid;

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

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

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

.adaptation-type-card {

    min-height:
        205px;

    padding:
        20px;

    border:
        0;

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

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

    background:
        transparent;

    text-align:
        left;

    display:
        flex;

    flex-direction:
        column;

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

.adaptation-type-card:hover,
.adaptation-type-card.active {

    background:
        var(--ink);

    color:
        white;

    transform:
        translateY(-3px);
}

.adaptation-type-card > span {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;
}

.adaptation-type-card:hover > span,
.adaptation-type-card.active > span {

    color:
        var(--yellow);
}

.adaptation-type-card strong {

    margin-top:
        auto;

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

    font-size:
        29px;

    line-height:
        .9;
}

.adaptation-type-card small {

    margin-top:
        8px;

    color:
        #766f67;

    font-size:
        8px;
}

.adaptation-type-card:hover small,
.adaptation-type-card.active small {

    color:
        #aaa;
}


/* SEARCH */

.adapted-search-section {

    background:
        var(--paper-2);

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

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

.adapted-search-inner {

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

    margin:
        0 auto;

    min-height:
        120px;

    display:
        grid;

    grid-template-columns:
        1fr 220px 220px;

    gap:
        14px;

    align-items:
        center;
}

.adapted-search-box {

    min-height:
        55px;

    display:
        grid;

    grid-template-columns:
        1fr auto;

    background:
        white;

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

.adapted-search-box input {

    border:
        0;

    outline:
        0;

    padding:
        0 16px;
}

.adapted-search-box button {

    border:
        0;

    background:
        var(--ink);

    color:
        white;

    padding:
        0 22px;

    font-size:
        9px;

    font-weight:
        800;
}

.adapted-search-inner > select {

    min-height:
        55px;

    border:
        1px solid #aaa59d;

    background:
        transparent;

    padding:
        0 12px;

    font-size:
        11px;
}


/* LIBRARY */

.adapted-library {

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

    margin:
        0 auto;

    padding:
        100px 0 115px;
}

.adapted-library-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        50px;

    margin-bottom:
        25px;
}

.adapted-library-heading span {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.adapted-library-heading h2 {

    margin:
        15px 0 0;

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

    font-size:
        clamp(
            50px,
            5vw,
            72px
        );

    line-height:
        .84;
}

.adapted-result-tools {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}

.adapted-result-tools strong {

    font-size:
        10px;
}

.adapted-result-tools button {

    min-height:
        38px;

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

    background:
        transparent;

    padding:
        0 12px;

    font-size:
        8px;

    font-weight:
        800;
}

.adapted-result-tools button:hover {

    background:
        var(--ink);

    color:
        white;
}

.adapted-active-filter {

    min-height:
        34px;

    margin-bottom:
        20px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}

.adapted-filter-chip {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    padding:
        0 10px;

    background:
        var(--yellow);

    font-size:
        8px;

    font-weight:
        800;
}


/* GRID */

.adapted-grid {

    display:
        grid;

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

    gap:
        25px 18px;
}

.adapted-card {

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

    opacity:
        0;

    transform:
        translateY(20px);

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

.adapted-card-image {

    height:
        310px;

    overflow:
        hidden;

    position:
        relative;

    background:
        #d7d1c7;
}

.adapted-card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(100%)
        contrast(1);

    transition:
        transform .75s ease,
        filter .4s ease;
}

.adapted-card:hover img {

    transform:
        scale(1.07);

    filter:
        grayscale(15%);
}

.adapted-card-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

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

.adapted-card-image > span {

    position:
        absolute;

    left:
        13px;

    top:
        13px;

    z-index:
        3;

    background:
        var(--yellow);

    padding:
        6px 8px;

    color:
        var(--ink);

    font-size:
        8px;

    font-weight:
        800;
}

.adapted-card-image > strong {

    position:
        absolute;

    left:
        14px;

    bottom:
        14px;

    z-index:
        3;

    color:
        white;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .09em;
}

.adapted-card-body {

    padding:
        17px 0 0;
}

.adapted-card-body > small {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .09em;
}

.adapted-card-body h3 {

    margin:
        8px 0 10px;

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

    font-size:
        21px;

    line-height:
        1.05;
}

.adapted-card-body p {

    color:
        #6b655e;

    font-size:
        11px;

    line-height:
        1.55;
}

.adapted-card-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        14px;
}

.adapted-card-tags span {

    padding:
        5px 7px;

    background:
        #e4ded4;

    font-size:
        7px;

    font-weight:
        700;
}

.adapted-card-footer {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        15px;

    padding-top:
        13px;

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

.adapted-card-footer span {

    color:
        #777168;

    font-size:
        8px;
}

.adapted-card-footer a {

    color:
        var(--purple);

    font-size:
        9px;

    font-weight:
        800;
}


/* EMPTY */

.adapted-empty {

    padding:
        55px;

    background:
        var(--paper-2);

    text-align:
        center;

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

.adapted-empty > span {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;
}

.adapted-empty h3 {

    margin:
        13px 0;

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

    font-size:
        28px;
}

.adapted-empty p {

    color:
        #6e6860;
}

.adapted-empty button {

    min-height:
        43px;

    margin-top:
        15px;

    border:
        0;

    background:
        var(--ink);

    color:
        white;

    padding:
        0 15px;

    font-size:
        8px;

    font-weight:
        800;
}


/* PAIR */

.adapted-pair-section {

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

    margin:
        0 auto 110px;

    min-height:
        540px;

    display:
        grid;

    grid-template-columns:
        1.05fr .95fr;
}

.adapted-pair-photo {

    position:
        relative;

    overflow:
        hidden;
}

.adapted-pair-photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(100%)
        contrast(1.05);
}

.adapted-pair-photo > span {

    position:
        absolute;

    left:
        23px;

    top:
        23px;

    background:
        var(--yellow);

    padding:
        8px 10px;

    font-size:
        8px;

    font-weight:
        800;
}

.adapted-pair-copy {

    padding:
        60px;

    background:
        var(--purple-dark);

    color:
        white;
}

.adapted-pair-copy small {

    color:
        var(--yellow);

    font-size:
        8px;

    font-weight:
        800;
}

.adapted-pair-copy h2 {

    margin:
        17px 0 25px;

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

    font-size:
        clamp(
            48px,
            4.7vw,
            65px
        );

    line-height:
        .85;
}

.adapted-pair-copy p {

    color:
        #c3b9ce;

    line-height:
        1.72;
}

.adapted-pair-copy a {

    display:
        inline-block;

    margin-top:
        24px;

    color:
        var(--yellow);

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

    padding-bottom:
        5px;

    font-size:
        9px;

    font-weight:
        800;
}


/* CLOSING */

.adapted-closing {

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

    margin:
        0 auto 105px;

    min-height:
        270px;

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

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

    display:
        grid;

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

    gap:
        60px;

    align-items:
        center;
}

.adapted-closing small {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;
}

.adapted-closing h2 {

    margin:
        13px 0 0;

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

    font-size:
        clamp(
            44px,
            4.4vw,
            60px
        );

    line-height:
        .86;
}

.adapted-closing p {

    color:
        #6a645c;

    line-height:
        1.72;

    max-width:
        420px;
}


/* ANIMATION */

@keyframes adaptedCardIn {

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* TABLET */

@media (max-width: 1050px) {

    .adapted-hero {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }

    .adapted-hero-image {

        height:
            420px;
    }

    .adaptation-type-grid {

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

    .adapted-search-inner {

        grid-template-columns:
            1fr 190px 190px;
    }

    .adapted-grid {

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


/* MOBILE */

@media (max-width: 780px) {

    .adapted-hero,
    .adaptation-types,
    .adapted-search-inner,
    .adapted-library,
    .adapted-pair-section,
    .adapted-closing {

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

    .adapted-hero {

        padding:
            55px 0;
    }

    .adapted-hero-copy h1 {

        font-size:
            58px;
    }

    .adapted-principle {

        grid-template-columns:
            1fr;

        gap:
            28px;

        padding:
            50px 25px;
    }

    .adaptation-heading,
    .adapted-library-heading {

        display:
            block;
    }

    .adaptation-heading p {

        margin-top:
            22px;
    }

    .adaptation-type-grid {

        grid-template-columns:
            1fr;
    }

    .adaptation-type-card {

        min-height:
            160px;
    }

    .adapted-search-inner {

        grid-template-columns:
            1fr;

        padding:
            25px 0;
    }

    .adapted-search-box {

        grid-template-columns:
            1fr;
    }

    .adapted-search-box input {

        min-height:
            52px;
    }

    .adapted-search-box button {

        min-height:
            46px;
    }

    .adapted-library-heading {

        margin-bottom:
            20px;
    }

    .adapted-result-tools {

        margin-top:
            20px;

        justify-content:
            space-between;
    }

    .adapted-grid {

        grid-template-columns:
            1fr;
    }

    .adapted-card-image {

        height:
            390px;
    }

    .adapted-pair-section {

        grid-template-columns:
            1fr;
    }

    .adapted-pair-photo {

        min-height:
            420px;
    }

    .adapted-pair-copy {

        padding:
            45px 25px;
    }

    .adapted-closing {

        grid-template-columns:
            1fr;

        gap:
            25px;

        padding:
            35px 0;
    }
}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .adapted-hero-copy h1 {

        font-size:
            50px;
    }

    .adapted-hero-image {

        height:
            330px;
    }

    .adapted-card-image {

        height:
            330px;
    }
}