/* ============================================================
   SUNNYBANK FLOWERS – CHECKERBOARD MAGAZINE POST LAYOUT
   Fully isolated styling for .sb-post only
============================================================ */


/* ------------------------------------------------------------
   HIDE WORDPRESS DEFAULT TITLE + META FOR THESE POSTS
------------------------------------------------------------ */
.single-post:has(.sb-post) .entry-header,
.single-post:has(.sb-post) .single-post-title,
.single-post:has(.sb-post) h1.entry-title,
.single-post:has(.sb-post) .meta,
.single-post:has(.sb-post) ul.meta,
.single-post:has(.sb-post) .entry-meta {
    display: none !important;
}


/* ------------------------------------------------------------
   MAIN POST WRAPPER
------------------------------------------------------------ */
.sb-post {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 20px 80px;
}

.sb-post .sb-landing {
    max-width: 1200px;
    margin: 0 auto;
}


/* ============================================================
   SECTION STRUCTURE (MAGAZINE CHECKERBOARD)
============================================================ */



/* Title above section */
.sb-sec-title {
    font-family: "Playfair Display", serif;
    text-align: center;
    font-size: 2.6rem;
    font-weight: 700;
    color: #4A6655;
    margin-bottom: 55px;
}

/* Grid: text left, image right */
.sb-sec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}


/* ============================================================
   TEXT FORMATTING
============================================================ */
.sb-sec-text p,
.sb-sec-text ul,
.sb-sec-text ol {
    text-align: justify;
    font-size: 1.18rem;
    line-height: 1.82;
    margin-bottom: 20px;
}

.sb-sec-text ul,
.sb-sec-text ol {
    padding-left: 25px;
    margin-top: 10px;
}


/* ============================================================
   STRONG FEATHERED FADE ON ALL IMAGES
============================================================ */

.sb-sec-img img {
    width: 100%;
    border-radius: 26px;

    /* strong premium feather fade */
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        rgba(0,0,0,1) 55%,
        rgba(0,0,0,0) 98%
    );
    mask-image: radial-gradient(
        ellipse at center,
        rgba(0,0,0,1) 55%,
        rgba(0,0,0,0) 98%
    );

    /* glow halo that merges with background */
    box-shadow:
        0 35px 65px rgba(0,0,0,0.16),
        0 0 0 20px rgba(242,245,243,0.96);

    background: #F2F5F3; /* match your master bg */
}


/* ============================================================
   CHECKERBOARD ALTERNATION
============================================================ */
/* Even sections: reverse grid (image left, text right) */
.sb-section.sb-even .sb-sec-grid {
    direction: rtl;
}

/* Restore normal reading direction inside children */
.sb-section.sb-even .sb-sec-grid > * {
    direction: ltr;
}


/* ============================================================
   BLOCKQUOTES
============================================================ */
.sb-post blockquote {
    background: #F9F7F2;
    padding: 24px 32px;
    border-left: 6px solid #4A6655;
    border-radius: 14px;
    margin: 40px auto;
    font-style: italic;
    font-size: 1.15rem;
}


/* ============================================================
   BUTTONS
============================================================ */
.sb-post .sb-btn {
    display: inline-block;
    padding: 14px 32px;
    background: #4A6655;
    color: #fff !important;
    font-weight: 700;
    border-radius: 40px;
    font-size: 1.12rem;
    text-align: center;
    margin: 8px auto 18px;
    transition: .2s ease;
}

.sb-post .sb-btn:hover {
    background: #688673;
    transform: translateY(-3px);
}

.sb-post .sb-btn-light {
    background: #D88A8A;
}

.sb-post .sb-btn-light:hover {
    background: #e7a2a2;
}


/* ============================================================
   HIDDEN SEO BLOCK
============================================================ */
.sb-hidden-seo {
    display: none !important;
}


/* ============================================================
   MOBILE LAYOUT
============================================================ */
@media (max-width: 900px) {

    /* stack content */
    .sb-sec-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* correct ordering for mobile (image first always) */
    .sb-section.sb-even .sb-sec-grid {
        direction: ltr;
    }

    /* tweak spacing */
    .sb-sec-title {
        font-size: 2rem;
        margin-bottom: 35px;
    }

    .sb-sec-img img {
        border-radius: 20px;
    }
}
/* Make image match the height of the text block */
.sb-sec-grid {
    align-items: stretch !important;
}

.sb-sec-img {
    display: flex;
    align-items: stretch;
}

.sb-sec-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
/* Force strict checkerboard using grid ordering */
.sb-odd .sb-sec-text { order: 1; }
.sb-odd .sb-sec-img  { order: 2; }

.sb-even .sb-sec-img  { order: 1; }
.sb-even .sb-sec-text { order: 2; }
/* Remove all rogue WordPress auto <p> tags inside checkerboard layout */
.sb-post .sb-sec-grid > p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sb-sec-img {
    display: flex;
    justify-content: center;
}

.sb-sec-img img {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}
/* Keep columns equal height */
.sb-sec-grid {
    align-items: stretch !important;
}

/* Image stays small but centered vertically and no empty space */
.sb-sec-img {
    display: flex;
    align-items: center; /* centers image vertically */
    justify-content: center;
}

/* Control actual image size */
.sb-sec-img img {
    width: 60%;   /* adjust this (50–80%) */
    height: auto;
    object-fit: contain;
}
/* Center + justify text inside all checkerboard text blocks */
.sb-sec-text {
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertically centers text */
    gap: 12px;
}

/* Center section headings above each block */
.sb-sec-title {
    text-align: center;
}
.sb-sec-text p {
    text-align: justify;
    text-justify: inter-word;
}
/* ==========================================
   SUNNYBANK – POST PAGE FIXES
   Fix huge whitespace on desktop & mobile
========================================== */

/* Reduce section spacing */
.sb-post .sb-section {
    margin: 40px 0;
}

/* Compact grid spacing */
.sb-post .sb-sec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: flex-start; /* prevents rows expanding to image height */
}

/* Restrict image height (MAIN FIX) */
.sb-post .sb-sec-img img {
    width: 100%;
    height: 320px;  /* adjust between 300–380 */
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

/* Tighten text alignment */
.sb-post .sb-sec-text {
    text-align: justify;
}

/* Mobile */
@media (max-width: 768px) {
    .sb-post .sb-sec-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sb-post .sb-sec-img img {
        height: 260px;
    }
}
.entry-meta,
.entry-meta * {
    display: none !important;
}
.entry-footer,
.entry-footer * {
    display: none !important;
}
.single-post .navigation.post-navigation {
    display: none !important;
}
