/* ==========================================================================
   NINO SEPO
   Product Collection / Category Editorial Section
   ========================================================================== */


/* --------------------------------------------------------------------------
   Main section
   -------------------------------------------------------------------------- */

.ninosepo-product-category-info{
    width:100%;

    margin:0;

    padding:
        135px
        0
        130px;

    color:#111;
}


/* --------------------------------------------------------------------------
   Inner editorial layout
   -------------------------------------------------------------------------- */

.ninosepo-product-category-info__inner{
    display:grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(0,1.18fr);

    grid-template-areas:
        "heading content"
        "media content";

    grid-template-rows:
        auto
        auto;

    column-gap:
        clamp(80px,8vw,150px);

    row-gap:42px;

    align-items:start;

    width:100%;

    margin:
        0
        auto;

    padding-top:30px;

    border-top:
        1px
        solid
        rgba(17,17,17,.14);
}


/* --------------------------------------------------------------------------
   Left column heading
   -------------------------------------------------------------------------- */

.ninosepo-product-category-info__heading{
    grid-area:heading;

    min-width:0;
}


/* Collection eyebrow */

.ninosepo-product-category-info__eyebrow{
    display:block;

    margin:
        0
        0
        34px;

    color:
        rgba(17,17,17,.58);

    font-family:inherit;
    font-size:10px;
    font-weight:500;
    line-height:1;

    letter-spacing:.14em;
    text-transform:uppercase;
}


/* Collection title */

.ninosepo-product-category-info__title{
    max-width:540px;

    margin:0 !important;
    padding:0 !important;

    color:#111;

    font-family:inherit;

    font-size:
        clamp(48px,4.2vw,72px);

    font-weight:400;
    line-height:.98;

    letter-spacing:-.045em;
}


/* --------------------------------------------------------------------------
   Right column
   -------------------------------------------------------------------------- */

.ninosepo-product-category-info__content{
    grid-area:content;

    min-width:0;
    max-width:680px;

    padding-top:58px;
}


/* Description */

.ninosepo-product-category-info__description{
    margin:0;

    color:
        rgba(17,17,17,.72);

    font-family:inherit;
    font-size:15px;
    font-weight:400;
    line-height:1.72;

    letter-spacing:-.008em;
}


.ninosepo-product-category-info__description p{
    margin:
        0
        0
        18px;
}


.ninosepo-product-category-info__description > *:first-child{
    margin-top:0;
}


.ninosepo-product-category-info__description > *:last-child{
    margin-bottom:0;
}


/* --------------------------------------------------------------------------
   Discover collection link
   -------------------------------------------------------------------------- */

.ninosepo-product-category-info__link{
    position:relative;

    display:inline-flex;

    align-items:center;

    gap:11px;

    margin-top:34px;

    padding-bottom:6px;

    color:#111 !important;

    font-family:inherit;
    font-size:10px;
    font-weight:500;
    line-height:1;

    letter-spacing:.12em;
    text-transform:uppercase;

    text-decoration:none !important;
}


.ninosepo-product-category-info__link::after{
    content:"";

    position:absolute;

    right:0;
    bottom:0;
    left:0;

    height:1px;

    background:currentColor;

    transform:scaleX(1);
    transform-origin:left center;

    transition:
        transform 260ms ease,
        opacity 260ms ease;
}


.ninosepo-product-category-info__arrow{
    display:inline-block;

    font-size:14px;
    font-weight:300;
    line-height:1;

    transform:
        translateX(0);

    transition:
        transform 260ms ease;
}


.ninosepo-product-category-info__link:hover::after,
.ninosepo-product-category-info__link:focus-visible::after{
    opacity:.55;

    transform:
        scaleX(.74);
}


.ninosepo-product-category-info__link:hover
.ninosepo-product-category-info__arrow,
.ninosepo-product-category-info__link:focus-visible
.ninosepo-product-category-info__arrow{
    transform:
        translateX(4px);
}


.ninosepo-product-category-info__link:focus-visible{
    outline:
        1px
        solid
        rgba(17,17,17,.55);

    outline-offset:7px;
}


/* --------------------------------------------------------------------------
   Category image
   -------------------------------------------------------------------------- */

.ninosepo-product-category-info__media{
    grid-area:media;

    position:relative;

    width:100%;

    min-width:0;

    overflow:hidden;

    aspect-ratio:5 / 3;

    background:#f4f4f4;
}


.ninosepo-product-category-info__image{
    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    object-fit:cover;
    object-position:center;

    border:0;
    border-radius:0;

    box-shadow:none;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width:1024px){

    .ninosepo-product-category-info{
        padding-top:105px;
        padding-bottom:105px;
    }


    .ninosepo-product-category-info__inner{
        grid-template-columns:
            minmax(0,.9fr)
            minmax(0,1.1fr);

        column-gap:55px;
        row-gap:38px;

        padding-top:28px;
    }


    .ninosepo-product-category-info__title{
        font-size:
            clamp(44px,5.4vw,58px);
    }


    .ninosepo-product-category-info__content{
        max-width:610px;

        padding-top:48px;
    }

}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width:767px){

    .ninosepo-product-category-info{
        padding:
            82px
            0
            84px;
    }


    .ninosepo-product-category-info__inner{
        display:flex;

        flex-direction:column;

        gap:0;

        padding-top:23px;
    }


    .ninosepo-product-category-info__heading{
        order:1;

        width:100%;
    }


    .ninosepo-product-category-info__content{
        order:2;

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

        padding-top:38px;
    }


    .ninosepo-product-category-info__media{
        order:3;

        width:100%;

        margin-top:48px;

        aspect-ratio:4 / 5;
    }


    .ninosepo-product-category-info__eyebrow{
        margin-bottom:25px;

        font-size:9px;

        letter-spacing:.14em;
    }


    .ninosepo-product-category-info__title{
        max-width:100%;

        font-size:
            clamp(40px,11.5vw,54px);

        line-height:.99;

        letter-spacing:-.042em;
    }


    .ninosepo-product-category-info__description{
        max-width:100%;

        font-size:14px;
        line-height:1.68;
    }


    .ninosepo-product-category-info__description p{
        margin-bottom:16px;
    }


    .ninosepo-product-category-info__link{
        margin-top:30px;
    }

}


/* ==========================================================================
   Small mobile
   ========================================================================== */

@media (max-width:480px){

    .ninosepo-product-category-info{
        padding-top:72px;
        padding-bottom:72px;
    }


    .ninosepo-product-category-info__title{
        font-size:40px;
    }


    .ninosepo-product-category-info__content{
        padding-top:34px;
    }


    .ninosepo-product-category-info__media{
        margin-top:42px;
    }

}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

    .ninosepo-product-category-info__link::after,
    .ninosepo-product-category-info__arrow{
        transition:none;
    }

}