/* =========================================================
   HUMANAS JA / PASSO 6D
   KITS DE AULA
   ========================================================= */


/* HERO */

.kits-hero {

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

    margin:
        0 auto;

    min-height:
        610px;

    padding:
        70px 0 85px;

    display:
        grid;

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

    gap:
        75px;

    align-items:
        center;
}

.kits-kicker {

    color:
        var(--purple);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .13em;
}

.kits-hero-copy h1 {

    margin:
        26px 0 28px;

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

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

    line-height:
        .78;

    letter-spacing:
        -.035em;
}

.kits-hero-copy h1 strong {

    color:
        var(--purple);

    font-weight:
        inherit;

    position:
        relative;
}

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

    content:
        "";

    position:
        absolute;

    left:
        -2px;

    right:
        0;

    bottom:
        0;

    height:
        12px;

    background:
        var(--yellow);

    z-index:
        -1;

    transform:
        rotate(-1deg);
}

.kits-hero-copy p {

    max-width:
        520px;

    color:
        #655f58;

    line-height:
        1.7;

    font-size:
        16px;
}

.kits-hero-image {

    height:
        435px;

    position:
        relative;

    overflow:
        hidden;

    background:
        #d3cec3;
}

.kits-hero-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(100%)
        contrast(1.05)
        brightness(.7);

    transform:
        scale(1.03);

    transition:
        transform .9s ease;
}

.kits-hero-image:hover img {

    transform:
        scale(1.08);
}

.kits-hero-overlay {

    position:
        absolute;

    inset:
        0;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    color:
        white;
}

.kits-hero-overlay span {

    color:
        var(--yellow);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.kits-hero-overlay strong {

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

    font-size:
        54px;

    line-height:
        .82;
}


/* FILTER STRIP */

.kit-discipline-strip {

    min-height:
        76px;

    background:
        var(--purple-dark);

    color:
        white;

    display:
        flex;

    align-items:
        center;
}

.kit-discipline-strip > div {

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

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    flex-wrap:
        wrap;
}

.kit-discipline-strip > div > span {

    color:
        var(--yellow);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .11em;

    margin-right:
        15px;
}

.kit-filter {

    min-height:
        34px;

    padding:
        0 11px;

    border:
        1px solid #64577e;

    background:
        transparent;

    color:
        #d8d1e4;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .08em;
}

.kit-filter:hover,
.kit-filter.active {

    background:
        var(--yellow);

    color:
        var(--ink);

    border-color:
        var(--yellow);
}


/* LIBRARY */

.kits-library {

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

    margin:
        0 auto;

    padding:
        105px 0 115px;
}

.kits-section-heading,
.kit-materials-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        60px;

    margin-bottom:
        48px;
}

.kits-section-heading span,
.kit-materials-heading span {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.kits-section-heading h2,
.kit-materials-heading h2 {

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

    font-size:
        clamp(
            65px,
            7vw,
            100px
        );

    line-height:
        .8;

    margin:
        15px 0 0;
}

.kits-section-heading p,
.kit-materials-heading p {

    max-width:
        420px;

    color:
        #68625a;

    line-height:
        1.7;

    font-size:
        13px;
}


/* KIT GRID */

.kits-grid {

    display:
        grid;

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

    gap:
        22px;
}

.kit-card {

    min-height:
        440px;

    display:
        grid;

    grid-template-columns:
        1.08fr .92fr;

    background:
        #e6e0d5;

    overflow:
        hidden;

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

    opacity:
        0;

    transform:
        translateY(22px);

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

.kit-card-image {

    position:
        relative;

    overflow:
        hidden;
}

.kit-card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

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

    transform:
        scale(1.03);

    transition:
        transform .8s ease,
        filter .45s ease;
}

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

    transform:
        scale(1.08);

    filter:
        grayscale(15%);
}

.kit-card-image span {

    position:
        absolute;

    left:
        15px;

    top:
        15px;

    background:
        var(--yellow);

    padding:
        7px 9px;

    font-size:
        8px;

    font-weight:
        800;
}

.kit-card-content {

    padding:
        27px;

    display:
        flex;

    flex-direction:
        column;
}

.kit-card-content > span {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .11em;
}

.kit-card-content h3 {

    margin:
        16px 0 15px;

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

    font-size:
        47px;

    line-height:
        .84;
}

.kit-card-content p {

    color:
        #6a645d;

    font-size:
        11px;

    line-height:
        1.6;
}

.kit-card-meta {

    margin-top:
        auto;

    padding-top:
        20px;

    border-top:
        1px solid #c9c2b7;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    color:
        #6d675f;

    font-size:
        8px;

    font-weight:
        700;
}

.kit-card-link {

    display:
        inline-block;

    margin-top:
        18px;

    color:
        var(--purple);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .07em;
}

.kit-card-link:hover {

    transform:
        translateX(4px);
}

.kits-empty {

    padding:
        45px;

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

    background:
        #e7e1d7;

    text-align:
        center;

    color:
        #68625b;
}


/* MANIFESTO */

.kits-manifesto {

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

    margin:
        0 auto 115px;

    min-height:
        330px;

    padding:
        55px;

    background:
        var(--ink);

    color:
        white;

    display:
        grid;

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

    gap:
        60px;

    align-items:
        end;
}

.kits-manifesto small {

    color:
        var(--yellow);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .11em;
}

.kits-manifesto h2 {

    margin:
        15px 0 0;

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

    font-size:
        69px;

    line-height:
        .8;
}

.kits-manifesto p {

    max-width:
        410px;

    color:
        #aaa;

    line-height:
        1.7;
}


/* DETAIL HERO */

.kit-detail-hero {

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

    margin:
        0 auto;

    min-height:
        660px;

    padding:
        72px 0 88px;

    display:
        grid;

    grid-template-columns:
        .92fr 1.08fr;

    gap:
        75px;

    align-items:
        center;
}

.kit-detail-image {

    height:
        550px;

    overflow:
        hidden;

    position:
        relative;

    box-shadow:
        18px 18px 0
        rgba(38,29,59,.08);
}

.kit-detail-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

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

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

.kit-detail-image:hover img {

    transform:
        scale(1.06);

    filter:
        grayscale(20%);
}

.kit-detail-code {

    position:
        absolute;

    left:
        17px;

    top:
        17px;

    background:
        var(--yellow);

    padding:
        8px 10px;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .09em;
}

.kit-back-link {

    display:
        inline-block;

    margin-bottom:
        28px;

    color:
        #706960;

    font-size:
        8px;

    font-weight:
        800;

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

    padding-bottom:
        4px;
}

.kit-detail-kicker {

    color:
        var(--purple);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.kit-detail-copy h1 {

    margin:
        23px 0 26px;

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

    font-size:
        clamp(
            72px,
            8vw,
            115px
        );

    line-height:
        .8;
}

.kit-detail-copy > p {

    max-width:
        650px;

    color:
        #645e57;

    line-height:
        1.72;

    font-size:
        15px;
}

.kit-detail-meta {

    display:
        grid;

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

    margin-top:
        34px;

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

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

.kit-detail-meta > div {

    min-height:
        84px;

    padding:
        17px 12px;

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

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;
}

.kit-detail-meta > div:first-child {

    padding-left:
        0;
}

.kit-detail-meta > div:last-child {

    border-right:
        0;
}

.kit-detail-meta span {

    color:
        #7a746c;

    font-size:
        8px;

    font-weight:
        800;
}

.kit-detail-meta strong {

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

    font-size:
        12px;
}


/* DETAIL STRIP */

.kit-detail-strip {

    min-height:
        66px;

    background:
        var(--purple-dark);

    color:
        white;

    overflow:
        hidden;
}

.kit-detail-strip > div {

    width:
        max-content;

    min-height:
        66px;

    display:
        flex;

    align-items:
        center;

    gap:
        34px;

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

    animation:
        kitStripMove
        26s linear
        infinite;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .1em;
}

.kit-detail-strip i {

    width:
        35px;

    height:
        2px;

    background:
        var(--yellow);
}


/* KIT MATERIALS */

.kit-materials {

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

    margin:
        0 auto;

    padding:
        105px 0 115px;
}

.kit-materials-grid {

    display:
        grid;

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

    gap:
        20px;
}

.kit-material-card {

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

    opacity:
        0;

    transform:
        translateY(20px);

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

.kit-material-image {

    height:
        320px;

    overflow:
        hidden;

    position:
        relative;

    background:
        #d8d3c7;
}

.kit-material-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(100%);

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

.kit-material-card:hover img {

    transform:
        scale(1.07);

    filter:
        grayscale(15%);
}

.kit-material-image span {

    position:
        absolute;

    left:
        14px;

    top:
        14px;

    background:
        var(--paper);

    padding:
        6px 8px;

    font-size:
        8px;

    font-weight:
        800;
}

.kit-material-body {

    padding:
        17px 0 0;
}

.kit-material-body small {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .1em;
}

.kit-material-body h3 {

    margin:
        9px 0 11px;

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

    font-size:
        21px;

    line-height:
        1.04;
}

.kit-material-body p {

    color:
        #6a645d;

    font-size:
        11px;

    line-height:
        1.55;
}

.kit-material-body a {

    display:
        inline-block;

    margin-top:
        14px;

    color:
        var(--purple);

    font-size:
        9px;

    font-weight:
        800;
}


/* SEQUENCE */

.kit-sequence {

    background:
        var(--paper-2);

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

    display:
        grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap:
        70px;
}

.kit-sequence-copy small {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;
}

.kit-sequence-copy h2 {

    margin:
        17px 0 0;

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

    font-size:
        69px;

    line-height:
        .8;
}

.kit-sequence-steps {

    display:
        grid;

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

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

.kit-sequence-steps article {

    min-height:
        235px;

    padding:
        23px;

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

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

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

    display:
        flex;

    flex-direction:
        column;
}

.kit-sequence-steps article > span {

    color:
        var(--purple);

    font-size:
        9px;

    font-weight:
        800;
}

.kit-sequence-steps article strong {

    margin-top:
        auto;

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

    font-size:
        20px;
}

.kit-sequence-steps article p {

    margin:
        8px 0 0;

    color:
        #6d675f;

    font-size:
        11px;

    line-height:
        1.55;
}


/* AUTHOR */

.kit-author {

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

    margin:
        100px auto;

    min-height:
        160px;

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

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

    display:
        grid;

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

    gap:
        40px;

    align-items:
        center;
}

.kit-author small {

    display:
        block;

    color:
        #777168;

    font-size:
        8px;

    font-weight:
        800;
}

.kit-author strong {

    display:
        block;

    margin-top:
        4px;

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

    font-size:
        18px;
}

.kit-author > span {

    background:
        var(--yellow);

    padding:
        9px 11px;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    transform:
        rotate(-2deg);
}

.kit-author > a {

    justify-self:
        end;

    color:
        var(--purple);

    font-size:
        9px;

    font-weight:
        800;
}


/* NOT FOUND */

.kit-not-found {

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

    margin:
        100px auto 130px;

    padding:
        60px;

    background:
        var(--paper-2);

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

.kit-not-found span {

    color:
        var(--purple);

    font-size:
        8px;

    font-weight:
        800;
}

.kit-not-found h1 {

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

    font-size:
        75px;

    line-height:
        .82;

    margin:
        18px 0 25px;
}

.kit-not-found a {

    color:
        var(--purple);

    font-size:
        9px;

    font-weight:
        800;

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

    padding-bottom:
        4px;
}


/* ANIMATIONS */

@keyframes kitCardIn {

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}

@keyframes kitMaterialIn {

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}

@keyframes kitStripMove {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-16%);
    }
}


/* TABLET */

@media (max-width: 1050px) {

    .kits-hero {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }

    .kits-hero-image {

        height:
            420px;
    }

    .kits-grid {

        grid-template-columns:
            1fr;
    }

    .kit-card {

        min-height:
            400px;
    }

    .kit-detail-hero {

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

        gap:
            45px;
    }

    .kit-detail-meta {

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

    .kit-detail-meta > div:nth-child(2) {

        border-right:
            0;
    }

    .kit-detail-meta > div:nth-child(3),
    .kit-detail-meta > div:nth-child(4) {

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

    .kit-materials-grid {

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

    .kit-sequence {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }
}


/* MOBILE */

@media (max-width: 780px) {

    .kits-hero,
    .kits-library,
    .kits-manifesto,
    .kit-detail-hero,
    .kit-materials,
    .kit-author {

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

    .kits-hero {

        padding:
            55px 0;
    }

    .kits-hero-copy h1 {

        font-size:
            75px;
    }

    .kit-discipline-strip > div {

        width:
            calc(100% - 30px);

        padding:
            18px 0;
    }

    .kits-section-heading,
    .kit-materials-heading {

        display:
            block;
    }

    .kits-section-heading p,
    .kit-materials-heading p {

        margin-top:
            25px;
    }

    .kit-card {

        grid-template-columns:
            1fr;

        min-height:
            auto;
    }

    .kit-card-image {

        height:
            360px;
    }

    .kit-card-content {

        min-height:
            300px;
    }

    .kits-manifesto {

        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            40px 25px;
    }

    .kit-detail-hero {

        grid-template-columns:
            1fr;

        padding:
            55px 0 70px;
    }

    .kit-detail-image {

        height:
            480px;
    }

    .kit-detail-copy h1 {

        font-size:
            70px;
    }

    .kit-materials-grid {

        grid-template-columns:
            1fr;
    }

    .kit-material-image {

        height:
            400px;
    }

    .kit-sequence {

        padding:
            70px 25px;
    }

    .kit-sequence-steps {

        grid-template-columns:
            1fr;

        border-left:
            0;
    }

    .kit-sequence-steps article {

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

    .kit-author {

        grid-template-columns:
            1fr;

        gap:
            20px;

        padding:
            28px 0;
    }

    .kit-author > a {

        justify-self:
            start;
    }
}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .kits-hero-copy h1 {

        font-size:
            63px;
    }

    .kits-hero-image {

        height:
            330px;
    }

    .kit-card-image {

        height:
            310px;
    }

    .kit-detail-image {

        height:
            420px;
    }

    .kit-detail-meta {

        grid-template-columns:
            1fr;
    }

    .kit-detail-meta > div {

        border-right:
            0;

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

    .kit-detail-meta > div:first-child {

        border-top:
            0;
    }

    .kit-material-image {

        height:
            340px;
    }
}


/* REDUCED MOTION */

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

    .kit-card,
    .kit-material-card {

        opacity:
            1;

        transform:
            none;

        animation:
            none;
    }

    .kit-detail-strip > div {

        animation:
            none;
    }
}