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

:root {
    --lfd-journal-teal: #02b09c;
    --lfd-journal-teal-dark: #008f82;
    --lfd-journal-dark: #424141;
    --lfd-journal-muted: #777777;
    --lfd-journal-line: #e4e7e7;
    --lfd-journal-soft: #eaf8f6;
    --lfd-journal-soft-2: #f6fbfa;
    --lfd-journal-white: #ffffff;
}


.lfd-journal-hero,
.lfd-journal-signin-section,
.lfd-journal-latest {
    font-family: "Nunito", sans-serif;
    color: var(--lfd-journal-dark);
}


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

.lfd-journal-hero {
    padding: 64px 0 54px;

    background: #ffffff;
}


.lfd-journal-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    gap: clamp(54px, 6vw, 96px);

    align-items: center;
}


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

.lfd-journal-hero__content {
    min-width: 0;

    padding:
        18px
        0;
}


.lfd-journal-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 27px;

    color: var(--lfd-journal-teal);

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.lfd-journal-eyebrow i {
    font-size: 12px;
}


.lfd-journal-hero__title {
    max-width: 560px;

    margin: 0;

    color: var(--lfd-journal-dark);

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

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

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.lfd-journal-hero__intro {
    max-width: 620px;

    margin:
        28px
        0
        0;

    color: var(--lfd-journal-muted);

    font-size: 18px;
    font-weight: 400;

    line-height: 1.7;
}


.lfd-journal-featured-divider {
    width: 100%;

    height: 1px;

    margin:
        38px
        0
        31px;

    background: var(--lfd-journal-line);
}


/* ==========================================================
   EDITOR PICK
========================================================== */

.lfd-journal-editor-label {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color: var(--lfd-journal-teal);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.16em;

    line-height: 1;

    text-transform: uppercase;
}


.lfd-journal-editor-label i {
    font-size: 12px;
}


/* ==========================================================
   CATEGORY PILLS
========================================================== */

.lfd-journal-featured-categories {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 18px;
}


.lfd-journal-category-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 38px;

    padding:
        0
        16px;

    border: 1px solid #dedfdf;
    border-radius: 999px;

    background: #ffffff;

    color: #686868;

    font-size: 12px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}


.lfd-journal-category-pill i {
    font-size: 10px;
}


.lfd-journal-category-pill:hover {
    border-color: var(--lfd-journal-teal);

    color: var(--lfd-journal-teal);
}


.lfd-journal-category-pill--primary {
    border-color: transparent;

    background: var(--lfd-journal-soft);

    color: #17675e;
}


/* ==========================================================
   FEATURED ARTICLE
========================================================== */

.lfd-journal-featured-title {
    max-width: 650px;

    margin: 0;

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

    font-size: clamp(
        27px,
        2.2vw,
        36px
    );

    font-weight: 700;

    line-height: 1.18;

    letter-spacing: -0.025em;
}


.lfd-journal-featured-title a {
    color: var(--lfd-journal-dark);

    text-decoration: none;

    transition: color 0.2s ease;
}


.lfd-journal-featured-title a:hover {
    color: var(--lfd-journal-teal);
}


.lfd-journal-featured-excerpt {
    max-width: 650px;

    margin:
        19px
        0
        0;

    color: #747474;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.7;
}


/* ==========================================================
   FEATURED META
========================================================== */

.lfd-journal-featured-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        14px
        24px;

    margin-top: 29px;
}


.lfd-journal-author {
    display: flex;
    align-items: center;

    gap: 11px;
}


.lfd-journal-author__avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    overflow: hidden;

    border-radius: 50%;

    background: var(--lfd-journal-soft);

    color: var(--lfd-journal-teal);

    font-size: 15px;
    font-weight: 700;
}


.lfd-journal-author__avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.lfd-journal-author__copy {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.lfd-journal-author__copy strong {
    color: var(--lfd-journal-dark);

    font-size: 13px;
    font-weight: 700;
}


.lfd-journal-author__copy small {
    color: #8b8b8b;

    font-size: 11px;
    font-weight: 400;
}


.lfd-journal-meta-item {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #707070;

    font-size: 12px;
    font-weight: 500;
}


.lfd-journal-meta-item i {
    color: var(--lfd-journal-teal);

    font-size: 12px;
}


/* ==========================================================
   FEATURED CTA
========================================================== */

.lfd-journal-featured-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    min-height: 54px;

    margin-top: 30px;

    padding:
        0
        27px;

    border: 1px solid var(--lfd-journal-teal);
    border-radius: 15px;

    background: var(--lfd-journal-teal);

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.06em;

    text-decoration: none;

    text-transform: uppercase;

    box-shadow:
        0 12px 28px
        rgba(2, 176, 156, 0.14);

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.lfd-journal-featured-cta:hover {
    background: var(--lfd-journal-teal-dark);

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 15px 32px
        rgba(2, 176, 156, 0.21);
}


.lfd-journal-featured-cta i {
    font-size: 12px;

    transition: transform 0.2s ease;
}


.lfd-journal-featured-cta:hover i {
    transform: translateX(3px);
}


/* ==========================================================
   FEATURED IMAGE
========================================================== */

.lfd-journal-featured-media {
    position: relative;

    display: block;

    width: 100%;
    height: min(
        700px,
        68vw
    );

    min-height: 570px;

    overflow: hidden;

    border-radius: 34px;

    background: var(--lfd-journal-soft);

    text-decoration: none;

    box-shadow:
        0 26px 58px
        rgba(35, 62, 58, 0.10);
}


.lfd-journal-featured-media > img {
    display: block;

    width: 100%;
    height: 100%;

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

    transition: transform 0.5s ease;
}


.lfd-journal-featured-media:hover > img {
    transform: scale(1.025);
}


.lfd-journal-featured-media__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: var(--lfd-journal-teal);

    font-size: 42px;
}


.lfd-journal-featured-badge {
    position: absolute;

    top: 25px;
    left: 25px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    min-height: 39px;

    padding:
        0
        18px;

    border-radius: 999px;

    background: rgba(
        2,
        176,
        156,
        0.94
    );

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* ==========================================================
   SIGN-IN SECTION
========================================================== */

.lfd-journal-signin-section {
    padding:
        8px
        0
        8px;

    background: #ffffff;
}


.lfd-journal-signin {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    min-height: 86px;

    padding:
        18px
        28px;

    border: 1px solid
        rgba(2, 176, 156, 0.22);

    border-radius: 18px;

    background:
        linear-gradient(
            100deg,
            #e9f8f6,
            #e2f6f3
        );
}


.lfd-journal-signin__content {
    display: flex;
    align-items: center;

    gap: 19px;

    min-width: 0;
}


.lfd-journal-signin__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    border-radius: 50%;

    background: #ffffff;

    color: var(--lfd-journal-teal);

    font-size: 16px;
}


.lfd-journal-signin p {
    margin: 0;

    color: #17675e;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.5;
}


.lfd-journal-signin__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 112px;
    min-height: 46px;

    flex: 0 0 auto;

    padding:
        0
        20px;

    border: 1px solid var(--lfd-journal-teal);
    border-radius: 14px;

    background: var(--lfd-journal-teal);

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.05em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.lfd-journal-signin__button:hover {
    background: var(--lfd-journal-teal-dark);

    color: #ffffff;

    transform: translateY(-1px);
}


/* ==========================================================
   LATEST WRITING
========================================================== */

.lfd-journal-latest {
    padding:
        25px
        0
        90px;

    background: #ffffff;
}


.lfd-journal-section-heading {
    margin-bottom: 38px;
}


.lfd-journal-section-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 16px;

    color: var(--lfd-journal-teal);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.17em;

    line-height: 1;

    text-transform: uppercase;
}


.lfd-journal-section-eyebrow i {
    font-size: 11px;
}


.lfd-journal-section-heading h2 {
    max-width: 800px;

    margin: 0;

    color: var(--lfd-journal-dark);

    font-size: clamp(
        34px,
        3.4vw,
        52px
    );

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -0.035em;
}


/* ==========================================================
   ARTICLE GRID
========================================================== */

.lfd-journal-grid {
    display: grid;

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

    gap: 28px;
}


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

.lfd-journal-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid #e0e2e2;
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 12px 34px
        rgba(35, 62, 58, 0.055);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.lfd-journal-card:hover {
    border-color:
        rgba(2, 176, 156, 0.34);

    transform: translateY(-3px);

    box-shadow:
        0 20px 42px
        rgba(35, 62, 58, 0.09);
}


/* ==========================================================
   CARD IMAGE
========================================================== */

.lfd-journal-card__media {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1.52 / 1;

    overflow: hidden;

    background: var(--lfd-journal-soft);

    text-decoration: none;
}


.lfd-journal-card__media > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}


.lfd-journal-card:hover
.lfd-journal-card__media > img {
    transform: scale(1.035);
}


.lfd-journal-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: var(--lfd-journal-teal);

    font-size: 32px;
}


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

.lfd-journal-card__category {
    position: absolute;

    top: 17px;
    left: 17px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    max-width:
        calc(100% - 34px);

    min-height: 34px;

    padding:
        0
        13px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.94);

    color: #17675e;

    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    text-overflow: ellipsis;
    white-space: nowrap;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.lfd-journal-card__category i {
    font-size: 9px;
}


/* ==========================================================
   CARD BODY
========================================================== */

.lfd-journal-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;

    padding:
        24px
        24px
        20px;
}


/* ==========================================================
   CARD META
========================================================== */

.lfd-journal-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px 18px;

    margin-bottom: 16px;

    color: #828282;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.lfd-journal-card__meta span {
    display: inline-flex;
    align-items: center;

    gap: 7px;
}


.lfd-journal-card__meta i {
    color: var(--lfd-journal-teal);

    font-size: 10px;
}


/* ==========================================================
   CARD TITLE
========================================================== */

.lfd-journal-card__title {
    margin: 0;

    color: var(--lfd-journal-dark);

    font-size: 22px;
    font-weight: 700;

    line-height: 1.28;

    letter-spacing: -0.025em;
}


.lfd-journal-card__title a {
    color: inherit;

    text-decoration: none;

    transition: color 0.2s ease;
}


.lfd-journal-card__title a:hover {
    color: var(--lfd-journal-teal);
}


/* ==========================================================
   CARD EXCERPT
========================================================== */

.lfd-journal-card__excerpt {
    display: -webkit-box;

    margin:
        16px
        0
        22px;

    overflow: hidden;

    color: #747474;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.65;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}


/* ==========================================================
   CARD FOOTER
========================================================== */

.lfd-journal-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-top: auto;
    padding-top: 17px;

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


.lfd-journal-card-author {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}


.lfd-journal-card-author__avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    overflow: hidden;

    border-radius: 50%;

    background: var(--lfd-journal-soft);

    color: var(--lfd-journal-teal);

    font-size: 12px;
    font-weight: 700;
}


.lfd-journal-card-author__avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.lfd-journal-card-author > span {
    overflow: hidden;

    color: #636363;

    font-size: 12px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.lfd-journal-card__read {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    flex: 0 0 auto;

    color: var(--lfd-journal-teal);

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}


.lfd-journal-card__read i {
    font-size: 10px;

    transition: transform 0.2s ease;
}


.lfd-journal-card__read:hover {
    color: var(--lfd-journal-teal-dark);
}


.lfd-journal-card__read:hover i {
    transform: translateX(3px);
}


/* ==========================================================
   LOAD MORE / INFINITE SCROLL
========================================================== */

.lfd-journal-load-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 15px;

    min-height: 100px;

    margin-top: 38px;
}


.lfd-journal-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    min-width: 235px;
    min-height: 52px;

    padding:
        0
        24px;

    border: 1px solid var(--lfd-journal-teal);
    border-radius: 15px;

    background: #ffffff;

    color: var(--lfd-journal-teal);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.lfd-journal-load-more:hover {
    background: var(--lfd-journal-teal);

    color: #ffffff;

    transform: translateY(-1px);
}


.lfd-journal-load-more i {
    font-size: 9px;
}


.lfd-journal-load-status {
    color: #929292;

    font-size: 11px;
    font-weight: 400;
}


.lfd-journal-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;

    color: #767676;

    font-size: 12px;
    font-weight: 600;
}


.lfd-journal-loader[hidden] {
    display: none;
}


.lfd-journal-loader__spinner {
    width: 18px;
    height: 18px;

    border:
        2px solid
        rgba(2, 176, 156, 0.18);

    border-top-color:
        var(--lfd-journal-teal);

    border-radius: 50%;

    animation:
        lfdJournalSpin
        0.7s
        linear
        infinite;
}


@keyframes lfdJournalSpin {

    to {
        transform: rotate(360deg);
    }

}


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

.lfd-journal-empty {
    grid-column: 1 / -1;

    padding:
        70px
        20px;

    text-align: center;
}


.lfd-journal-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin-bottom: 20px;

    border-radius: 50%;

    background: var(--lfd-journal-soft);

    color: var(--lfd-journal-teal);

    font-size: 25px;
}


.lfd-journal-empty h2 {
    margin: 0;

    color: var(--lfd-journal-dark);

    font-size: 24px;
    font-weight: 700;
}


.lfd-journal-empty p {
    margin:
        10px
        0
        22px;

    color: var(--lfd-journal-muted);

    font-size: 14px;
}


.lfd-journal-empty a {
    color: var(--lfd-journal-teal);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}


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

.lfd-journal-pagination {
    margin-top: 42px;
}


/* ==========================================================
   LARGE TABLET / SMALL DESKTOP
========================================================== */

@media (max-width: 1199.98px) {

    .lfd-journal-hero {
        padding-top: 52px;
    }


    .lfd-journal-hero__grid {
        grid-template-columns:
            minmax(0, 0.96fr)
            minmax(380px, 1.04fr);

        gap: 44px;
    }


    .lfd-journal-featured-media {
        min-height: 540px;
    }


    .lfd-journal-card__body {
        padding:
            21px
            20px
            18px;
    }


    .lfd-journal-card__title {
        font-size: 20px;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991.98px) {

    .lfd-journal-hero {
        padding:
            44px
            0
            54px;
    }


    .lfd-journal-hero__grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .lfd-journal-hero__content {
        max-width: 760px;

        padding: 0;
    }


    .lfd-journal-hero__title br {
        display: none;
    }


    .lfd-journal-featured-media {
        height: 560px;
        min-height: 0;

        border-radius: 26px;
    }


    .lfd-journal-signin-section {
        padding:
            25px
            0
            38px;
    }


    .lfd-journal-latest {
        padding:
            48px
            0
            72px;
    }


    .lfd-journal-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 22px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {

    .lfd-journal-hero {
        padding:
            34px
            0
            42px;
    }


    .lfd-journal-eyebrow {
        margin-bottom: 20px;

        font-size: 10px;
    }


    .lfd-journal-hero__title {
        font-size: 43px;

        line-height: 1.02;
    }


    .lfd-journal-hero__intro {
        margin-top: 20px;

        font-size: 15px;

        line-height: 1.65;
    }


    .lfd-journal-featured-divider {
        margin:
            28px
            0
            24px;
    }


    .lfd-journal-featured-title {
        font-size: 27px;
    }


    .lfd-journal-featured-excerpt {
        margin-top: 14px;

        font-size: 14px;

        line-height: 1.65;
    }


    .lfd-journal-featured-meta {
        align-items: flex-start;

        gap:
            15px
            18px;

        margin-top: 23px;
    }


    .lfd-journal-author {
        width: 100%;
    }


    .lfd-journal-featured-cta {
        width: 100%;

        margin-top: 24px;
    }


    .lfd-journal-featured-media {
        height: 420px;

        border-radius: 21px;
    }


    .lfd-journal-featured-badge {
        top: 16px;
        left: 16px;

        min-height: 34px;

        padding:
            0
            14px;

        font-size: 9px;
    }


    /* SIGN IN */

    .lfd-journal-signin {
        align-items: stretch;
        flex-direction: column;

        gap: 17px;

        padding: 20px;

        border-radius: 16px;
    }


    .lfd-journal-signin__content {
        align-items: flex-start;
    }


    .lfd-journal-signin p {
        font-size: 13px;
    }


    .lfd-journal-signin__button {
        width: 100%;
    }


    /* LATEST */

    .lfd-journal-latest {
        padding:
            40px
            0
            58px;
    }


    .lfd-journal-section-heading {
        margin-bottom: 28px;
    }


    .lfd-journal-section-heading h2 {
        font-size: 34px;
    }


    .lfd-journal-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .lfd-journal-card {
        border-radius: 18px;
    }


    .lfd-journal-card__body {
        padding:
            20px
            18px
            17px;
    }


    .lfd-journal-card__title {
        font-size: 21px;
    }


    .lfd-journal-card__excerpt {
        font-size: 14px;
    }


    .lfd-journal-load-zone {
        margin-top: 30px;
    }


    .lfd-journal-load-more {
        width: 100%;
    }


    .lfd-journal-load-status {
        width: 100%;

        text-align: center;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 575.98px) {

    .lfd-journal-hero__title {
        font-size: 38px;
    }


    .lfd-journal-featured-categories {
        gap: 7px;
    }


    .lfd-journal-category-pill {
        min-height: 34px;

        padding:
            0
            12px;

        font-size: 10px;
    }


    .lfd-journal-featured-title {
        font-size: 24px;
    }


    .lfd-journal-featured-media {
        height: 340px;
    }


    .lfd-journal-author__avatar {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .lfd-journal-signin__icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .lfd-journal-section-heading h2 {
        font-size: 30px;
    }


    .lfd-journal-card__meta {
        font-size: 10px;
    }


    .lfd-journal-card__title {
        font-size: 19px;
    }

}