/*
 * Truck Life Journal – Homepage Article Cards
 * v1.0.16: makes variant 07 a plain white outlined card with no fill artwork.
 */

.tlj-homepage-cards-enabled main ul.wp-block-post-template {
    display: block !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li {
    --tlj-card-title-width: 100%;
    --tlj-card-excerpt-width: 100%;

    position: relative;
    isolation: isolate;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 300px;
    margin: 0 auto 34px !important;
    padding: 42px 54px 34px;
    overflow: hidden;

    border: 1.5px dashed #c6b8a4 !important;
    border-radius: 12px;
    background-color: #faf7f1 !important;
    background-repeat: no-repeat;
    background-size: 100% auto;
    box-shadow: none !important;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li::before,
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li::after {
    content: none !important;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li > * {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: 100%;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li h2,
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li .wp-block-post-title {
    width: 100%;
    max-width: var(--tlj-card-title-width) !important;
    margin-top: 0 !important;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li .wp-block-post-excerpt {
    width: 100%;
    max-width: var(--tlj-card-excerpt-width) !important;
    margin-top: 22px;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li .wp-block-post-excerpt__excerpt,
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li .wp-block-post-excerpt p {
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    hyphenate-limit-chars: 5 2 2;
    hyphenate-limit-zone: 7%;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-align: justify !important;
    text-align-last: left;
    text-justify: inter-word;
    line-break: auto;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li .wp-block-post-date {
    margin-top: auto !important;
    padding-top: 24px;
}

/* 01 – Mountains, sun and trees */
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 1) {
    --tlj-card-title-width: 80%;
    --tlj-card-excerpt-width: 86%;
    background-image:
        url("../images-v115/desktop/layers/tlj-card-01-top.png"),
        url("../images-v115/desktop/layers/tlj-card-01-bottom.png");
    background-position: center top, center bottom;
    background-size: 100% auto, 100% auto;
}

/* 02 – Winter landscape and truck icon */
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 2) {
    padding-left: 112px;
    background-image:
        url("../images-v115/desktop/layers/tlj-card-02-top.png"),
        url("../images-v115/desktop/layers/tlj-card-02-bottom.png");
    background-position: center top, center bottom;
    background-size: 100% auto, 100% auto;
    background-repeat: no-repeat, no-repeat;
}

/* 03 – Topographic map */
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 3) {
    --tlj-card-title-width: 94%;
    --tlj-card-excerpt-width: 94%;
    padding-bottom: 58px;
    background-image:
        url("../images-v115/desktop/layers/tlj-card-03-bottom.png"),
        url("../images-v115/desktop/layers/tlj-card-03-texture.png");
    background-position: center bottom, center top;
    background-size: 100% auto, 100% auto;
    background-repeat: no-repeat, repeat-y;
}

/* 04 – Airmail border and road stamp */
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 4) {
    --tlj-card-title-width: 76%;
    --tlj-card-excerpt-width: 88%;
    background-image:
        url("../images-v115/desktop/layers/tlj-card-04-top.png"),
        url("../images-v115/desktop/layers/tlj-card-04-bottom.png");
    background-position: center top, center bottom;
    background-size: 100% auto, 100% auto;
}

/* 05 – Open road */
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 5) {
    --tlj-card-title-width: 90%;
    --tlj-card-excerpt-width: 92%;
    padding-bottom: 88px;
    background-image:
        url("../images-v115/desktop/layers/tlj-card-05-top.png"),
        url("../images-v115/desktop/layers/tlj-card-05-bottom.png");
    background-position: center top, center bottom;
    background-size: 100% auto, 100% auto;
}

/* 06 – Paper note and paperclip */
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 6) {
    padding: 48px 66px 38px 78px;
    background-image:
        url("../images-v115/desktop/layers/tlj-card-06-top.png"),
        url("../images-v115/desktop/layers/tlj-card-06-bottom.png"),
        linear-gradient(#f7f3ea,#f7f3ea);
    background-position: center top, center bottom, center;
    background-size: 100% auto, 100% auto, calc(100% - 44px) calc(100% - 34px);
}

/* 07 – Garage card (approved original concept) */
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) {
    --tlj-card-title-width: 72%;
    --tlj-card-excerpt-width: 62%;
    min-height: 430px;
    padding-top: 44px;
    padding-left: 215px;
    padding-right: 310px;
    padding-bottom: 42px;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("../images-v115/desktop/layers/tlj-card-07-full.png");
    background-position: center top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-excerpt__excerpt,
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-excerpt p {
    text-align: left !important;
    text-align-last: left !important;
    text-justify: auto;
    hyphens: none !important;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-date {
    padding-top: 18px;
}


/* 08 – Lighthouse and coast */
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 8) {
    --tlj-card-title-width: 78%;
    --tlj-card-excerpt-width: 82%;
    padding-bottom: 64px;
    background-image: url("../images-v115/desktop/layers/tlj-card-08-bottom.png");
    background-position: center bottom;
    background-size: 100% auto;
}

/* 09 – Day and night */
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 9) {
    padding-left: 122px;
    padding-bottom: 64px;
    background-image:
        url("../images-v115/desktop/layers/tlj-card-09-top.png"),
        url("../images-v115/desktop/layers/tlj-card-09-bottom.png");
    background-position: center top, center bottom;
    background-size: 100% auto,100% auto;
    background-repeat: no-repeat,no-repeat;
}

/* 10 – Quote and mountains */
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 10) {
    --tlj-card-title-width: 82%;
    --tlj-card-excerpt-width: 88%;
    padding-left: 54px;
    padding-bottom: 72px;
    background-image:
        url("../images-v115/desktop/layers/tlj-card-10-top.png"),
        url("../images-v115/desktop/layers/tlj-card-10-bottom.png");
    background-position: center top, center bottom;
    background-size: 100% auto,100% auto;
}

@media (max-width:820px) {
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li {
        min-height:340px;
        padding:38px 40px 32px;
    }
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 2) { padding-left:96px; }
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) {
        --tlj-card-title-width: 86%;
        --tlj-card-excerpt-width: 84%;
        min-height: 360px;
        padding-top: 28px;
        padding-left: 34px;
        padding-right: 34px;
        padding-bottom: 70px;
        border: none !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        background-image: url("../images-v115/mobile/layers/tlj-card-07-full.png");
        background-position: center top;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li .wp-block-post-excerpt { margin-top:18px; }
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li .wp-block-post-date { padding-top:20px; }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 1) {
        background-image:url("../images-v115/mobile/layers/tlj-card-01-top.png"),url("../images-v115/mobile/layers/tlj-card-01-bottom.png");
        background-position:center top,center bottom;
        background-size:100% auto,100% auto;
    }
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 1) h2,
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 1) .wp-block-post-title { max-width:76%; }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 2) {
        padding-left:92px;
        background-image:
            url("../images-v115/mobile/layers/tlj-card-02-top.png"),
            url("../images-v115/mobile/layers/tlj-card-02-bottom.png");
        background-position:center top,center bottom;
        background-size:100% auto,100% auto;
        background-repeat:no-repeat,no-repeat;
    }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 3) {
        padding-bottom:66px;
        background-image:url("../images-v115/mobile/layers/tlj-card-03-bottom.png"),url("../images-v115/mobile/layers/tlj-card-03-texture.png");
        background-position:center bottom,center top;
        background-size:100% auto,100% auto;
        background-repeat:no-repeat,repeat-y;
    }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 4) {
        background-image:url("../images-v115/mobile/layers/tlj-card-04-top.png"),url("../images-v115/mobile/layers/tlj-card-04-bottom.png");
        background-position:center top,center bottom;
        background-size:100% auto,100% auto;
    }
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 4) h2,
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 4) .wp-block-post-title { max-width:72%; }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 5) {
        padding-bottom:112px;
        background-image:url("../images-v115/mobile/layers/tlj-card-05-top.png"),url("../images-v115/mobile/layers/tlj-card-05-bottom.png");
        background-position:center top,center bottom;
        background-size:100% auto,100% auto;
    }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 6) {
        padding:48px 28px 34px 46px;
        background-image:
            url("../images-v115/mobile/layers/tlj-card-06-top.png"),
            url("../images-v115/mobile/layers/tlj-card-06-bottom.png"),
            linear-gradient(#f7f3ea,#f7f3ea);
        background-position:center top,center bottom,center;
        background-size:100% auto,100% auto,calc(100% - 30px) calc(100% - 26px);
    }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) {
        padding-left:108px;
        padding-bottom:76px;
        background-image:
            url("../images-v115/mobile/layers/tlj-card-07-top.png"),
            url("../images-v115/mobile/layers/tlj-card-07-bottom.png"),
            repeating-linear-gradient(0deg,transparent 0 22px,rgba(211,204,191,.42) 22px 23px),
            repeating-linear-gradient(90deg,transparent 0 22px,rgba(211,204,191,.42) 22px 23px),
            linear-gradient(#faf7f1,#faf7f1);
        background-position:center top,center bottom,center,center,center;
        background-size:100% auto,100% auto,100% 100%,100% 100%,100% 100%;
        background-repeat:no-repeat,no-repeat,repeat,repeat,no-repeat;
    }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 8) {
        padding-bottom:170px;
        background-image:url("../images-v115/mobile/layers/tlj-card-08-bottom.png");
        background-position:center bottom;
        background-size:100% auto;
    }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 9) {
        padding-left:92px;
        padding-bottom:84px;
        background-image:
            url("../images-v115/mobile/layers/tlj-card-09-top.png"),
            url("../images-v115/mobile/layers/tlj-card-09-bottom.png");
        background-position:center top,center bottom;
        background-size:100% auto,100% auto;
        background-repeat:no-repeat,no-repeat;
    }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 10) {
        padding-left:24px;
        padding-bottom:100px;
        background-image:url("../images-v115/mobile/layers/tlj-card-10-top.png"),url("../images-v115/mobile/layers/tlj-card-10-bottom.png");
        background-position:center top,center bottom;
        background-size:100% auto,100% auto;
    }
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 10) h2,
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 10) .wp-block-post-title { max-width:80%; }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-excerpt__excerpt,
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-excerpt p {
        text-align: left !important;
        text-align-last: left !important;
        text-justify: auto;
        hyphens: none !important;
    }
}


/* v1.0.16 override – Variant 07 plain empty card */
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) {
    --tlj-card-title-width: 100%;
    --tlj-card-excerpt-width: 100%;
    min-height: 300px;
    margin: 0 auto 34px !important;
    padding: 42px 54px 34px;
    overflow: hidden;
    border: 1.5px dashed #c6b8a4 !important;
    border-radius: 12px !important;
    background-color: #faf7f1 !important;
    background-image: none !important;
    background-position: initial !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-title,
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) h2 {
    max-width: 100% !important;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-excerpt {
    max-width: 100% !important;
    margin-top: 22px;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-excerpt__excerpt,
.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-excerpt p {
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    hyphenate-limit-chars: 5 2 2;
    hyphenate-limit-zone: 7%;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-word;
    line-break: auto;
}

.tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-date {
    margin-top: auto !important;
    padding-top: 24px;
}

@media (max-width:820px) {
    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) {
        min-height: 340px;
        padding: 38px 40px 32px;
        border: 1.5px dashed #c6b8a4 !important;
        border-radius: 12px !important;
        background-color: #faf7f1 !important;
        background-image: none !important;
        background-position: initial !important;
        background-size: auto !important;
        background-repeat: no-repeat !important;
    }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-excerpt {
        margin-top: 18px;
    }

    .tlj-homepage-cards-enabled main ul.wp-block-post-template > li:nth-child(10n + 7) .wp-block-post-date {
        padding-top: 20px;
    }
}