:root {
    --zmb-bg: #f3eddd;
    --zmb-bg-darker: #E8E0C7;
    --zmb-border: #07304a;
    --zmb-text: #06304a;
    --zmb-muted: #113d56;
}

.zmb-single,
.zmb-archive,
.zmb-more {
    background: var(--zmb-bg);
    color: var(--zmb-text);
    font-family: inherit;
}

.zmb-single a,
.zmb-archive a,
.zmb-more a {
    color: inherit;
    text-decoration: none;
}

.zmb-single {
    display: block;
    min-height: 100vh;
    overflow: visible;
}

.zmb-single__layout {
    position: relative;
    min-height: 100vh;
    overflow: visible;
}

.zmb-single__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: var(--zmb-media-height, 100vh);
    overflow: hidden;
    background: #ddd5c5;
    z-index: 1;
    will-change: top;
}

.zmb-single__media.zmb-is-fixed {
    position: fixed;
    top: var(--zmb-header-offset, 0px);
    left: 0;
}

.zmb-single__media.zmb-is-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
}

.zmb-single__article {
    width: 50vw;
    margin-left: 50vw;
    min-height: 100vh;
}

.zmb-single__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zmb-single__body {
    padding: clamp(48px, 7vw, 110px) clamp(28px, 5vw, 96px) 0;
}

.zmb-single__title {
    font-size: clamp(42px, 5.4vw, 84px);
    line-height: 0.92;
    font-weight: 400;
    letter-spacing: -0.05em;
    margin: 0 0 28px;
    max-width: 800px;
}

.zmb-badges,
.zmb-card__badges {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.zmb-badges span,
.zmb-card__badges span {
    border: 1px solid var(--zmb-border);
    color: var(--zmb-text);
    background: var(--zmb-bg);
    padding: 7px 14px;
    margin-right: 10px;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.zmb-badges span:first-child,
.zmb-card__badges span:first-child {
    background: var(--zmb-border);
    color: var(--zmb-bg);

}.zmb-badges span:nth-child(2),
.zmb-card__badges span:nth-child(2) {
    background: var(--zmb-bg-darker);
    color: var(--zmb-text);
}

.zmb-single__rule {
    border: 0;
    border-top: 1px solid var(--zmb-border);
    margin: clamp(38px, 6vw, 84px) 0 clamp(36px, 5vw, 70px);
}

.zmb-single__content {
    max-width: 850px;
    font-size: clamp(16px, 1.05vw, 20px);
    line-height: 1.18;
}

.zmb-single__content h2,
.zmb-single__content h3 {
    font-size: clamp(30px, 2.4vw, 44px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.035em;
    margin: 46px 0 0;
}

.zmb-single__content p {
    margin: 0 0 0;
}

.zmb-single__content ul,
.zmb-single__content ol {
    margin: 0 0 32px 1.3em;
    padding: 0;
}

.zmb-single__content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 44px 0;
}

.zmb-more {
    position: relative;
    background-color: var(--zmb-bg-darker);
    z-index: 2;
    clear: both;
    border-top: 1px solid var(--zmb-border);
    padding: clamp(52px, 6vw, 98px) clamp(24px, 3vw, 54px) clamp(70px, 7vw, 112px);
}

.zmb-more h2,
.zmb-archive__title {
    text-align: center;
    padding:0 20vw 0 20vw;
    font-size: clamp(42px, 4vw, 72px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.05em;
    margin: 0 0 clamp(52px, 6vw, 98px);
}

.zmb-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.zmb-card__image {
    position: relative;
    display: block;
    border: 1px solid var(--zmb-border);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #ddd5c5;
}

.zmb-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.zmb-card:hover .zmb-card__image img {
    transform: scale(1.035);
}

.zmb-card__badges {
    position: absolute;
    left: 12px;
    bottom: 12px;
}

.zmb-card__badges span {
    font-size: 12px;
    padding: 7px 12px;
}

.zmb-card__title {
    font-size: clamp(24px, 1.7vw, 34px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.04em;
    margin: 15px 0 8px;
}

.zmb-card__excerpt {
    font-size: 16px;
    line-height: 1.12;
    margin: 0;
    max-width: 360px;
}

.zmb-archive {
    padding: clamp(52px, 6vw, 98px) clamp(24px, 3vw, 54px) clamp(70px, 7vw, 112px);
    min-height: 80vh;
}

@media (max-width: 1100px) {
    .zmb-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .zmb-single {
        display: block;
    }

    .zmb-single__layout {
        min-height: 0;
    }

    .zmb-single__article {
        width: 100%;
        margin-left: 0;
        min-height: 0;
    }

    .zmb-single__media,
    .zmb-single__media.zmb-is-fixed,
    .zmb-single__media.zmb-is-bottom {
        position: relative;
        top: auto !important;
        bottom: auto !important;
        left: auto;
        width: 100%;
        height: 70vw;
        min-height: 270px;
        max-height: 440px;
    }

    .zmb-single__body {
        padding: 34px 25px 0;
    }

    .zmb-single__title {
        font-size: 32px;
        line-height: 0.95;
        letter-spacing: -0.05em;
        margin-bottom: 18px;
    }

    .zmb-badges span {
        font-size: 12px;
        padding: 9px 12px;
    }

    .zmb-single__rule {
        margin: 32px 0 30px;
    }

    .zmb-single__content {
        font-size: 17px;
        line-height: 1.12;
    }

    .zmb-single__content h2,
    .zmb-single__content h3 {
        font-size: 28px;
        line-height: 1;
        margin: 38px 0 12px;
    }

    .zmb-more {
        padding: 62px 25px 74px;
        overflow: hidden;
    }

    .zmb-more h2,
    .zmb-archive__title {
        font-size: 33px;
        padding:0;
        margin-bottom: 22px;
    }

    /* Archive blog cards should NOT slide horizontally */
    body.post-type-archive-makara_blog .zmb-card-grid,
    body.tax-makara_blog_category .zmb-card-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        padding-bottom: 0 !important;
        margin-right: 0 !important;
    }

    body.post-type-archive-makara_blog .zmb-card,
    body.tax-makara_blog_category .zmb-card {
        flex: initial !important;
        width: 100% !important;
        max-width: none !important;
        scroll-snap-align: unset !important;
    }

    /* Only the bottom category filter bar should slide/drag */
    .zmb-filter-bar__scroller {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        cursor: grab;
    }

    .zmb-filter-bar__scroller.is-dragging {
        cursor: grabbing;
    }

    .zmb-filter-bar__button {
        flex: 0 0 auto !important;
        min-width: 138px;
        white-space: nowrap;
        scroll-snap-align: start;
    }


    .zmb-card__image {
        aspect-ratio: 0.78 / 1;
    }

    .zmb-card__title {
        font-size: 24px;
        margin-top: 13px;
    }

    .zmb-card__excerpt {
        font-size: 16px;
    }
}


/* Keep the theme footer in the normal document flow after the blog template. */
body.single-makara_blog #footer-outer,
body.single-makara_blog #copyright,
body.post-type-archive-makara_blog #footer-outer,
body.post-type-archive-makara_blog #copyright {
    position: relative;
    z-index: 3;
    clear: both;
}


.makara-blog-right * {
    margin-bottom: 0 !important;
}

.makara-blog-right > * + * {
    margin-top: 24px;
}

/* Blog archive bottom filter bar: fixed to window until footer reaches it */
body.post-type-archive-makara_blog .zmb-filter-bar,
body.tax-makara_blog_category .zmb-filter-bar {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: var(--zmb-filter-bottom, 0px);
    z-index: 9999;

    width: 100%;
    margin: 0;
    padding: 12px clamp(24px, 3vw, 54px);

    background: var(--zmb-bg-darker);
    border-top: 1px solid var(--zmb-border);
    border-bottom: 1px solid var(--zmb-border);
    box-sizing: border-box;
}

/* Add space so the fixed filter bar does not cover the last row/footer */
body.post-type-archive-makara_blog .zmb-archive,
body.tax-makara_blog_category .zmb-archive {
    padding-bottom: calc(clamp(70px, 7vw, 112px) + 84px) !important;
    overflow: visible !important;
}

.zmb-filter-bar__scroller {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

.zmb-filter-bar__scroller::-webkit-scrollbar {
    display: none;
}

.zmb-filter-bar__scroller.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.zmb-filter-bar__button {
    appearance: none;
    border: 1px solid var(--zmb-border);
    border-left: 0;
    background: var(--zmb-bg);
    color: var(--zmb-text);
    min-height: 58px;
    padding: 13px 18px;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.zmb-filter-bar__button:first-child {
    border-left: 1px solid var(--zmb-border);
}

.zmb-filter-bar__button.is-active,
.zmb-filter-bar__button:hover {
    background: var(--zmb-border);
    color: var(--zmb-bg);
}

.zmb-card.zmb-is-hidden {
    display: none !important;
}

.zmb-filter-empty {
    margin: 40px 0 0;
    font-size: 18px;
    color: var(--zmb-text);
}

@media (max-width: 768px) {
    body.post-type-archive-makara_blog .zmb-filter-bar,
    body.tax-makara_blog_category .zmb-filter-bar {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: var(--zmb-filter-bottom, 0px);
        z-index: 9999;

        width: 100%;
        margin: 0;
        padding: 8px 8px;

        background: var(--zmb-bg-darker);
        border-top: 1px solid var(--zmb-border);
        border-bottom: 1px solid var(--zmb-border);
        overflow: hidden;
        box-sizing: border-box;
    }

    body.post-type-archive-makara_blog .zmb-archive,
    body.tax-makara_blog_category .zmb-archive {
        padding-bottom: 92px !important;
    }

    .zmb-filter-bar__scroller {
        display: flex;
        grid-template-columns: none;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .zmb-filter-bar__button {
        flex: 0 0 auto;
        min-width: 138px;
        min-height: 42px;
        padding: 11px 16px;
        font-size: 12px;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    /* Mobile-only slide helper tag above blog category bar */
    body.post-type-archive-makara_blog .zmb-filter-bar::before,
    body.tax-makara_blog_category .zmb-filter-bar::before {
        content: "←  SLIDE  →";
        position: fixed;
        bottom: calc(var(--zmb-filter-bottom, 0px) + 60px);
        left: 19.25%;
        transform: translateX(-50%);

        min-width: 88px;
        height: 27px;
        padding: 0 20px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: var(--zmb-text);
        color: var(--zmb-bg);
        border: 1px solid var(--zmb-border);

        font-size: 10px;
        line-height: 1;
        letter-spacing: 0.19em;
        font-weight: 400;
        text-transform: uppercase;

        z-index: 10000 !important;
        pointer-events: none;
    }
}