/* =========================================================
   Blog Post — Substack-like Flow (colors preserved)
   - Keeps your color / background-color choices intact
   - Focuses on widths, sizes, spacing, and layout rhythm
   ========================================================= */

/* ---- General layout wrappers ---- */
.blogCenteredContent {
    width: 100% !important;
    min-width: 0;
    margin-left: 0;
}

/* ---- Hero image area ---- */
.imgContainer {
    position: absolute;
    width: 100%;
    height: 600px;
}

.blogPostImage {
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
}

/* ---- Post container ---- */
.postDataContainer {
    height: auto;
    width: 100%;
    background-color: white; /* keep your color */
    padding: 70px 0;
    position: relative;
    margin-bottom: 50px;
}

/* ---- Content root ---- */
.blogPostContent {
    width: 100%;
    height: auto;
    position: relative;
    float: left;
}

/* ---- Small “BLOG” title bar ---- */
#blogTitle {
    position: relative;
    font-size: 21px;
    margin-bottom: 65px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 80px;
    color: #333234; /* keep */
    text-align: center;
    border-bottom: 1px solid #e8e2e2; /* keep */
    height: 29px;
}

/* ---- Main post title (centered, responsive scale) ---- */
.blogPostTitle {
    position: relative;
    color: #000000; /* keep */
    margin: 0 auto 30px auto;
    font-family: var(--secondary-font-family); !important;
    text-align: center;
    line-height: 1.2;
    width: 100%;
    max-width: 820px;               /* breathe a bit wider for big titles */
    font-size: clamp(34px, 5vw, 60px); /* responsive but honors your larger top end */
    padding-left: 16px;
    padding-right: 16px;
}

/* ---- Date (hidden by default as you had it) ---- */
#blogPostDate {
    font-size: 15px;
    line-height: 14px;
    display: none;            /* keep */
    letter-spacing: 0em;
    text-align: center;
    color: black;             /* keep */
    margin: 0 auto 10px auto;
    font-weight: 400;
}

/* ---- Back link / arrow ---- */
a.back.desktopElement {}
.back.desktopElement {
    color: black;             /* keep */
    display: flex;
    line-height: 12px;
    position: absolute;
}
img.backArrow {
    height: 12px;
    margin-right: 10px;
}

/* ---- Optional subtitle block ---- */
.blogPostSubtitle {
    position: relative;
    display: none;            /* keep */
    font-size: 20px;
    font-style: medium;
    margin-top: 40px;
    color: black;             /* keep */
    line-height: 1.25;
    margin-bottom: 15px;
}

/* ---- Short description under title ---- */
.blogPostDescription {
    width: 100%;
    height: auto;
    position: relative;
    float: left;
    font-size: 18px;
    font-style: normal;
    color: black;            /* keep */
    line-height: 1.5;
    margin-bottom: 40px;
    text-align: center;
}

/* =========================================================
   Reading column & text rhythm
   ========================================================= */
.blogText,
.available-content .body,
.blogSliderWrapper,
.image-text-row,
.blogImage,
.blogCaption {
    max-width: 728px;          /* unified reading column */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.blogText {
    position: relative;
    display: block;
    height: auto;
    overflow: hidden;
    color: var(--base);         /* keep */
    font-size: 20px;            /* desktop body */
    line-height: 1.7;           /* comfy rhythm */
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 28px;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "ProximaNova" !important;
}
.blogText *{
    font-family: "ProximaNova" !important;
    line-height: 1.7 !important;
}
.blogText p, .blogText a{
    font-size:20px !important;
}

/* Headings inside article */
.blogText h2,
.blogText h3,
.header-anchor-post {
    line-height: 1.25;
    margin-top: 42px;
    margin-bottom: 12px;
    padding-left: 0;
    padding-right: 0;
}

.blogText h2,
.header-anchor-post {
    font-size: clamp(24px, 3.2vw, 30px);
}
.blogText h3 {
    font-size: clamp(20px, 2.6vw, 24px);
}

/* Paragraphs / lists / quotes spacing */
.blogText p,
.blogText ul,
.blogText ol,
.blogText blockquote {
    margin: 0 0 20px 0;
}
.blogText ul,
.blogText ol {
    padding-left: 22px;
}

/* =========================================================
   Images & captions
   ========================================================= */
.blogImage {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 24px auto 8px auto;
}

.blogCaption {
    position: relative;
    text-align: center;
    width: 100%;
    font-size: 12px;           /* keep size close and readable */
    color: black;              /* keep */
    margin: 0 auto 24px auto;
    font-family: "Arial", sans-serif; !important;
    padding-left: 16px;
    padding-right: 16px;
}

/* =========================================================
   Slick gallery (aligned to reading column)
   ========================================================= */
.blogGallery {
    position: relative;
    margin-top: 20px;
    height: auto;
    overflow: hidden;
    width: 100%;
}

.blogSlider {
    position: relative;
    margin-top: 24px;
    margin-bottom: 15px;
    height: auto;
    overflow: hidden;
    width: 100%;               /* was 101% */
    float: none;               /* avoid layout nudge */
}

.blogSliderWrapper {
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    padding-left: 8px;         /* small gutter so slides don’t kiss edges */
    padding-right: 8px;
}

.blogSliderSlide {
    margin-right: 10px !important;
    margin-left: 10px !important;
}

/* Dots (keep your colors) */
.slick-dots {
    top: 20px;
    right: 20px;
    width: auto;
}
.slick-dots li {
    width: 14px;
    margin: 0 3px;
}
.slick-dots li button:before {
    border: 2px solid var(--principal1); /* keep */
    border-radius: 100px;
    width: 10px;
    height: 10px;
    background-color: transparent;
    color: transparent;
    font-size: 0;
    opacity: 1;
}
.slick-dots li.slick-active button:before {
    background-color: var(--principal1); /* keep */
    opacity: 1;
}

/* Arrows centered vertically (colors come from your inline or theme) */
.blogSliderLeftArrow,
.blogSliderRightArrow {
    position: absolute;
    z-index: 1;
    height: 17px;
    padding: 7px;
    top: 50%;
    transform: translateY(-50%);
}
.blogSliderLeftArrow { left: 10px; }
.blogSliderRightArrow { right: 9px; }

/* Generic slick slide height behavior */
.slick-slide { height: auto; }

/* =========================================================
   Image + text rows
   ========================================================= */
.image-text-row {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    margin: 24px 0;             /* more breathing room */
    gap: 24px;
    padding-left: 16px;
    padding-right: 16px;
}

.image-text-row img {
    display: block;
    position: relative;
    width: 50%;
    height: auto;
}

.image-text-row .text {
    position: relative;
    display: block;
    padding: 0;                  /* rely on row gap */
    color: black;                /* keep */
    font-size: 18px;             /* up from 14 for readability */
    line-height: 1.6;
}

.image-text-row:nth-of-type(even) {
    flex-direction: row-reverse;
}
a.blogSubscribeButton {
    position: relative;
    width: 200px;
    height: 35px;
    background: orange;
    display: block;
    margin: 0 auto;
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: black;
}

/* =========================================================
   Responsive
   ========================================================= */
@media screen and (max-width: 768px) {
    .blogCenteredContent {
        width: 100% !important;
    }

    .blogCaption {
        width: 100%;
    }

    .blogSliderWrapper {
        width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }

    .image-text-row {
        flex-direction: column;
        gap: 16px;
        padding-left: 16px;
        padding-right: 16px;
        margin: 20px 0;
    }
    .image-text-row:nth-of-type(even) {
        flex-direction: column;
    }
    .image-text-row img {
        width: 100%;
    }
    .image-text-row .text {
        font-size: 16px;
        line-height: 1.6;
    }

    .imgContainer {
        height: 300px;
    }

    .blogSlider { width: 100%; }

    img.blogSliderSlide.slick-slide.slick-current.slick-active { width: 100%; }
    img.blogSliderSlide { margin: 0 5px !important; }
    img.blogSliderRightArrow { right: 5px; }
    img.blogSliderLeftArrow { left: 5px; }

    .blogPostTitle {
        font-size: clamp(28px, 6vw, 36px);
        line-height: 1.2;
        max-width: 100%;
        margin: 0 auto 12px auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    #blogPostDate {
        font-size: 12px;
        width: 100%;
        margin-bottom: 20px;
    }

    .blogPostSubtitle {
        font-size: 17px;
        margin: 21px 0;
    }

    .blogPostDescription {
        font-size: 16px;
        line-height: 1.5;
        padding-left: 16px;
        padding-right: 16px;
    }

    .blogText {
        max-width: 100%;
        width: calc(100% - 32px);
        margin: 0 auto;
        padding: 0 16px;
        height: auto;
        font-size: 18px;      /* mobile body */
        line-height: 1.7;
    }

    .blogImage {
        width: 100%;
        height: auto;
        max-width: 100%;
        margin: 1em 0;
    }

    .postDataContainer {
        padding: 20px 0;
        margin-bottom: 10px;
        margin-left: 20px;
        width: calc(100% - 40px);
    }

    #blogTitle {
        width: 90%;
        margin: 20px auto 20px auto;
        height: auto;
        padding-bottom: 10px;
        font-size: 19px;
        letter-spacing: 2px;
    }

    .blogSliderLeftArrow,
    .blogSliderRightArrow {
        height: 21px;
    }

    .slick-dots li button:before {
        width: 8px;
        height: 8px;
    }
    .slick-dots {
        top: 10px;
        right: 10px;
    }
}