/* =========================================================
   UBUNTU LTD
   BLOG / JOURNAL
========================================================= */


/* =========================================================
   HERO
========================================================= */

.u-blog-hero {
    position: relative;

    min-height: 620px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background:
        url("../img/women_nursery.jpg")
        center 42%
        / cover
        no-repeat;
}


.u-blog-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(19,35,26,.08) 0%,
            rgba(19,35,26,.25) 40%,
            rgba(19,35,26,.90) 100%
        );
}


.u-blog-hero-inner {
    position: relative;
    z-index: 2;

    width: 100%;

    padding-top: 180px;

    padding-bottom:
        clamp(
            60px,
            8vw,
            96px
        );

    color: #fff;
}


.u-blog-eyebrow {
    margin:
        0 0 1rem;

    color:
        var(--amber-soft);

    font-size:
        .74rem;

    font-weight:
        700;

    letter-spacing:
        .18em;
}


.u-blog-hero h1 {
    max-width:
        900px;

    margin:
        0;

    color: #fff;

    font-size:
        clamp(
            3.2rem,
            7vw,
            6.8rem
        );

    font-weight:
        400;

    line-height:
        .95;

    letter-spacing:
        -.045em;
}


.u-blog-hero-copy {
    max-width:
        610px;

    margin:
        1.7rem 0 0;

    color:
        rgba(255,255,255,.76);

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.16rem
        );

    line-height:
        1.7;
}


/* =========================================================
   CATEGORY NAV
========================================================= */

.u-blog-categories {
    position:
        sticky;

    z-index:
        20;

    top:
        72px;

    background:
        var(--paper);

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


.u-blog-category-row {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    overflow-x:
        auto;

    padding-top:
        14px;

    padding-bottom:
        14px;

    scrollbar-width:
        none;
}


.u-blog-category-row::-webkit-scrollbar {
    display:
        none;
}


.u-blog-category {
    flex:
        0 0 auto;

    padding:
        .58rem 1rem;

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

    border-radius:
        99px;

    color:
        var(--ink);

    font-size:
        .82rem;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        background .3s,
        border-color .3s,
        color .3s;
}


.u-blog-category:hover,
.u-blog-category.active {
    border-color:
        var(--bark);

    background:
        var(--bark);

    color:
        var(--husk);
}


/* =========================================================
   FEATURED STORY
========================================================= */

.u-featured-story {
    padding-block:
        clamp(
            72px,
            9vw,
            130px
        );

    background:
        var(--paper);
}


.u-featured-heading {
    margin-bottom:
        25px;
}


.u-featured-card {
    display:
        grid;

    grid-template-columns:
        minmax(0,1.12fr)
        minmax(0,.88fr);

    min-height:
        590px;

    background:
        var(--husk);
}


.u-featured-image {
    position:
        relative;

    min-height:
        590px;

    display:
        block;

    overflow:
        hidden;

    background:
        var(--bark-2);
}


.u-featured-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

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


.u-featured-card:hover
.u-featured-image img {
    transform:
        scale(1.025);
}


.u-featured-content {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(
            38px,
            5vw,
            72px
        );
}


.u-blog-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        1rem;

    color:
        var(--ink-60);

    font-size:
        .75rem;

    font-weight:
        600;

    letter-spacing:
        .04em;
}


.u-blog-meta span:first-child {
    color:
        var(--leaf);

    font-weight:
        700;

    letter-spacing:
        .1em;
}


.u-blog-meta span +
span::before {
    content:
        "•";

    margin-right:
        10px;

    color:
        var(--amber);
}


.u-featured-content h2 {
    max-width:
        13ch;

    margin:
        0 0 1.3rem;

    font-size:
        clamp(
            2.4rem,
            4.3vw,
            4.5rem
        );

    line-height:
        1;
}


.u-featured-content h2 a {
    color:
        inherit;

    text-decoration:
        none;
}


.u-featured-content > p {
    max-width:
        52ch;

    color:
        var(--ink-60);

    line-height:
        1.75;
}


.u-read-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    align-self:
        flex-start;

    margin-top:
        1rem;

    color:
        var(--clay);

    font-weight:
        700;

    text-decoration:
        none;
}


.u-read-link span {
    transition:
        transform .3s;
}


.u-read-link:hover span {
    transform:
        translate(
            3px,
            -3px
        );
}


/* =========================================================
   PLACEHOLDER IMAGE
========================================================= */

.u-blog-image-placeholder {
    width:
        100%;

    height:
        100%;

    min-height:
        inherit;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--bark-2);

    color:
        var(--husk);
}


.u-blog-image-placeholder span {
    margin-bottom:
        .4rem;

    color:
        var(--amber);

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .2em;
}


.u-blog-image-placeholder strong {
    font-family:
        var(--serif);

    font-size:
        clamp(
            2rem,
            4vw,
            4rem
        );

    font-weight:
        400;
}


/* =========================================================
   JOURNAL
========================================================= */

.u-journal {
    padding-block:
        clamp(
            74px,
            9vw,
            135px
        );

    background:
        var(--husk-2);
}


.u-journal-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        clamp(
            34px,
            5vw,
            60px
        );
}


.u-journal-head h2 {
    font-size:
        clamp(
            2.4rem,
            4.4vw,
            4.2rem
        );
}


/* =========================================================
   BLOG GRID
========================================================= */

.u-blog-grid {
    display:
        grid;

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

    gap:
        clamp(
            24px,
            3vw,
            38px
        );
}


.u-blog-card {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    background:
        var(--paper);
}


.u-blog-card-image {
    position:
        relative;

    display:
        block;

    height:
        310px;

    overflow:
        hidden;

    background:
        var(--bark-2);
}


.u-blog-card-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        .8s
        cubic-bezier(.2,.8,.3,1);
}


.u-blog-card:hover
.u-blog-card-image img {
    transform:
        scale(1.035);
}


.u-blog-card-body {
    display:
        flex;

    flex:
        1 1 auto;

    flex-direction:
        column;

    padding:
        24px 24px 25px;
}


.u-blog-card h3 {
    margin:
        0 0 .8rem;

    font-size:
        clamp(
            1.35rem,
            2vw,
            1.75rem
        );

    line-height:
        1.14;
}


.u-blog-card h3 a {
    color:
        inherit;

    text-decoration:
        none;
}


.u-blog-card-body > p {
    margin:
        0;

    color:
        var(--ink-60);

    font-size:
        .91rem;

    line-height:
        1.7;
}


.u-blog-card-bottom {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-top:
        auto;

    padding-top:
        28px;

    color:
        var(--ink-60);

    font-size:
        .78rem;
}


.u-blog-card-bottom a {
    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

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

    border-radius:
        50%;

    color:
        var(--ink);

    font-size:
        1.05rem;

    text-decoration:
        none;

    transition:
        background .3s,
        color .3s,
        transform .3s;
}


.u-blog-card-bottom a:hover {
    background:
        var(--bark);

    color:
        var(--husk);

    transform:
        translate(
            2px,
            -2px
        );
}


/* =========================================================
   PAGINATION
========================================================= */

.u-blog-pagination {
    margin-top:
        clamp(
            45px,
            6vw,
            76px
        );
}


.u-blog-pagination
.nav-links {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;
}


.u-blog-pagination
.page-numbers {
    min-width:
        43px;

    height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding-inline:
        12px;

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

    border-radius:
        99px;

    background:
        var(--paper);

    color:
        var(--ink);

    font-size:
        .84rem;

    font-weight:
        600;

    text-decoration:
        none;
}


.u-blog-pagination
.page-numbers.current,
.u-blog-pagination
.page-numbers:hover {
    border-color:
        var(--bark);

    background:
        var(--bark);

    color:
        var(--husk);
}


/* =========================================================
   EMPTY
========================================================= */

.u-blog-empty {
    padding-block:
        160px;

    background:
        var(--paper);

    text-align:
        center;
}


.u-blog-empty h2 {
    margin-bottom:
        .8rem;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        );
}


.u-blog-empty p:last-child {
    max-width:
        55ch;

    margin:
        0 auto;

    color:
        var(--ink-60);
}


/* =========================================================
   CTA
   Deliberately different from footer
========================================================= */

.u-blog-cta {
    padding-block:
        clamp(
            76px,
            9vw,
            130px
        );

    background:
        var(--leaf);

    color:
        var(--husk);
}


.u-blog-cta-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(280px,.55fr);

    gap:
        clamp(
            45px,
            8vw,
            120px
        );

    align-items:
        center;
}


.u-blog-cta
.kicker {
    color:
        var(--amber-soft);
}


.u-blog-cta h2 {
    max-width:
        11ch;

    margin-bottom:
        1.2rem;

    color:
        #fff;

    font-size:
        clamp(
            2.6rem,
            5vw,
            5rem
        );
}


.u-blog-cta-copy > p:not(.kicker) {
    max-width:
        52ch;

    margin-bottom:
        2rem;

    color:
        rgba(255,255,255,.72);
}


.u-blog-cta-mark {
    width:
        min(
            360px,
            100%
        );

    aspect-ratio:
        1;

    justify-self:
        end;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    text-align:
        center;
}


.u-blog-cta-mark::before {
    content:
        "";

    position:
        absolute;
}


.u-blog-cta-mark span {
    margin-bottom:
        .4rem;

    color:
        var(--amber-soft);

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .2em;
}


.u-blog-cta-mark strong {
    font-family:
        var(--serif);

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.8rem
        );

    font-weight:
        400;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .u-blog-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


@media (max-width: 900px) {

    .u-featured-card {
        grid-template-columns:
            1fr;
    }


    .u-featured-image {
        min-height:
            480px;
    }


    .u-blog-cta-grid {
        grid-template-columns:
            1fr;
    }


    .u-blog-cta-mark {
        justify-self:
            start;

        width:
            280px;
    }

}


@media (max-width: 620px) {

    .u-blog-hero {
        min-height:
            570px;
    }


    .u-blog-hero h1 {
        font-size:
            clamp(
                3rem,
                15vw,
                4.6rem
            );
    }


    .u-blog-categories {
        top:
            62px;
    }


    .u-featured-image {
        min-height:
            380px;
    }


    .u-featured-content {
        padding:
            30px 24px 36px;
    }


    .u-blog-grid {
        grid-template-columns:
            1fr;
    }


    .u-blog-card-image {
        height:
            330px;
    }


    .u-blog-meta {
        gap:
            7px;
    }


    .u-blog-meta span +
    span::before {
        margin-right:
            7px;
    }

}