.bhb-clean-table table {
    border: none !important;
    border-collapse: collapse;
}

.bhb-clean-table th, 
.bhb-clean-table td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #EAE6E1 !important; /* This keeps only the horizontal line */
    padding: 12px 8px; /* Gives the text a little breathing room */
}
.bhb-outline-text {
    color: transparent !important; /* Makes the inside of the letters see-through */
    -webkit-text-stroke-width: 1px; /* The thickness of the outline */
    -webkit-text-stroke-color: #333333; /* The color of the outline (change to match your branding) */
    letter-spacing: 2px; /* Adds elegant breathing room between the capital letters */
    text-transform: uppercase;
}
/* 1. The Sideways Scrolling Row Wrapper */
.bhb-editorial-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 24px !important;
    padding: 30px 4% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
}

/* Hide ugly scrollbars while keeping smooth scrolling */
.bhb-editorial-slider::-webkit-scrollbar { display: none; }
.bhb-editorial-slider { -ms-overflow-style: none; scrollbar-width: none; }

/* 2. Individual Card Master Proportions */
.bhb-editorial-card {
    flex: 0 0 320px !important; /* Exactly like IMG_6324 2.jpg width */
    width: 320px !important;
    height: 480px !important; /* Uniform magazine-style height */
    position: relative !important;
    overflow: hidden !important;
    border-radius: 4px; /* Soft subtle edges */
    cursor: pointer;
}

/* 3. Front Face Configuration (The Photo) */
.bhb-card-front {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover !important;
    background-position: center !important;
    z-index: 2;
	transition: opacity 0.6s ease-in-out !important;
    display: flex;
    align-items: flex-end; /* Pushes the title text to the bottom edge */
    padding: 24px;
    box-sizing: border-box;
}

/* Premium Editorial Blend: Full image tint + extra bottom depth */
.bhb-card-front::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
        to top, 
        rgba(0, 0, 0, 0.35) 0%,   /* Darker at the bottom base */
        rgba(0, 0, 0, 0.10) 60%,  /* Perfectly legible middle ground */
        rgba(0, 0, 0, 0.00) 100%  /* Soft uniform tint at the bright top */
    ) !important;
    z-index: 1;
}
.bhb-card-label {
    color: #ffffff !important; /* Force it to stay crisp white */
    font-family: serif;
    font-size: 28px;
    position: relative !important; /* Required for z-index to work */
    z-index: 5 !important; /* Higher than the overlay's z-index: 1 */
}

/* 2. RED BACKFACE WITH CRISP WHITE TEXT */
.bhb-card-back {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #6D3737 !important; /* Your gorgeous rich red */
    color: #F5F2EB !important; /* Forces all standard text inside to be crisp white */
    z-index: 1;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease-in-out !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    text-align: left;
    box-sizing: border-box;
		font-size: 14px;
		line-height: 1.6;
}

/* Forces the Heading (Sight Name) to be white as well */
.bhb-card-back h3 {
    color: #F5F2EB !important;
    font-family: serif;
    font-size: 26px;
    letter-spacing: 1px;
    margin: 0;
}
/* 5. THE MAGIC HOVER INTERACTION */
.bhb-editorial-card:hover .bhb-card-front {
    opacity: 0 !important; /* Smoothly fades out the picture */
}

.bhb-editorial-card:hover .bhb-card-back {
    opacity: 1 !important; /* Smoothly reveals the beige tip card */
    transform: translateY(0) !important; /* Elegant subtle lift lift */
}
/* Styling for the longer description text on the front of the cards */
.bhb-card-front .bhb-card-label {
    font-family: sans-serif; /* Clean, highly readable editorial font */
    font-size: 16px !important;
    line-height: 1.5;
    font-weight: 400;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* Makes text pop crisp against bright spots in photos */
}



/* 1. Bulletproof fix to disable hover fade even inside column containers */
.bhb-photo-only .bhb-card-front,
.bhb-editorial-card.bhb-photo-only:hover .bhb-card-front,
.wp-block-column .bhb-photo-only:hover .bhb-card-front {
    opacity: 1 !important; 
    visibility: visible !important;
}

/* 2. Strip any ghost flip animations from the photo-only elements */
.bhb-photo-only:hover,
.wp-block-column .bhb-photo-only:hover {
    transform: none !important;
    background: none !important;
    cursor: default !important;
}




/* 1. Force the parent row to stretch both columns equally and scale organically */
.editorial-split-row {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    height: auto !important; /* Forces the whole section to grow down */
}

/* 2. Force the column wrappers to allow growth */
.editorial-split-row > .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* Overrides any locked theme heights */
    min-height: 100% !important;
}

/* 3. Force the left image Group block to grow with its container */
.editorial-bg-image {
    width: 100% !important;
    height: 100% !important;
    flex-grow: 1 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 4. The Nuclear Option: Force the red box and EVERYTHING inside it to expand naturally */
.editorial-split-row > .wp-block-column:last-child,
.editorial-split-row > .wp-block-column:last-child *, 
.editorial-split-row > .wp-block-column:last-child .wp-block-group {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important; /* Removes any hidden ceilings */
    overflow: visible !important;  /* Ensures text doesn't clip or vanish */
}





@media screen and (max-width: 767px) {
    
    /* 1. SNAP SITE TO VIEWPORT BOUNDARIES (Deletes white gap on right) */
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. REALIGN HEADINGS (Pulls headlines away from the hard left edge) */
    h1, h2, h3, .wp-block-heading, .wp-block-post-title {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* 3. MOBILE-ONLY MEDIA & TEXT FIX */
    .wp-block-media-text {
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 25px !important;
    }

    .wp-block-media-text__media {
        width: 100% !important;
        max-width: 100% !important;
    }

    .wp-block-media-text__content {
        padding: 25px 20px 10px 20px !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. FIX THE "AT A GLANCE" SQUISHED BLOCK ON MOBILE */
    .wp-block-columns {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        gap: 0 !important;
    }

    .wp-block-column {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        flex-basis: 100% !important;
        width: 100% !important;
    }

    td, th, p, span {
        word-break: keep-all !important;
        hyphens: none !important;
    }
}

/* ==========================================================================
   DESKTOP PROTECTION SHIELD (768px and above)
   ========================================================================== */
@media screen and (min-width: 768px) {
    /* Restores natural side-by-side layout but allows the block editor to dictate width percentages */
    .wp-block-media-text {
        display: grid !important;
    }
    
    /* Unlocks the image width container so your 29% setting snaps back alive */
    .wp-block-media-text__media {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Forces your desktop table columns to return to their beautiful horizontal layout */
    .wp-block-columns {
        display: flex !important;
        flex-direction: row !important;
    }
}




/* ABSOLUTE MOBILE CONTAINMENT */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
}

.wp-site-blocks, 
#page, 
main, 
.entry-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}