.entry-date published {
	display: none;
}/* Specifically target and hide the 'time' element on the Video page */
.page-id-334 time {
    display: none !important;
}

/* Also hide any link or container that might be wrapping that time tag */
.page-id-334 .entry-date,
.page-id-334 .post-date,
.page-id-334 .published {
    display: none !important;
}

/* Collapse the empty space at the top of the Video page */
.page-id-334 .entry-header, 
.page-id-334 .post-header,
.page-id-334 .wp-block-post-title-container {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force the main content to move up */
.page-id-334 .entry-content, 
.page-id-334 .post-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Targets the specific container holding the date and kills its height/spacing */
.page-id-334 .wp-block-group.post-meta {
    display: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* Removes the default block gap that WordPress forces between elements */
.page-id-334 .entry-content, 
.page-id-334 .post-content {
    margin-top: -2em !important; /* This "pulls" the content up to close the final gap */
}

/* Specifically target and kill the 110px spacer on the Video page */
.page-id-334 .wp-block-spacer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
}

/* Makes the Header stay at the top while scrolling */
header, .wp-block-template-part.header {
    position: sticky !important;
    top: 0;
    z-index: 9999; /* Ensures it stays on top of images/videos */
    background-color: #ffffff; /* Change this to match your site's background! */
}

/* 1. THE NUCLEAR BREAKOUT */
.slant-container {
    display: flex;
    position: relative;
    
    /* Force the width to be exactly the size of the screen */
    width: 100vw !important;
    min-width: 100vw !important;
    
    /* This centers the element regardless of where its parent is */
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    
    height: 85vh; 
    background: #000;
    overflow: hidden;
    z-index: 10;
}

/* 2. ENSURE PARENTS DON'T CLAM THE OVERFLOW */
.entry-content, 
.wp-block-group, 
.wp-block-custom-html {
    overflow: visible !important;
}

/* 3. THE REST OF YOUR HOVER EFFECTS (Keep these the same) */
.slant-item {
    position: relative;
    flex: 1;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.3, 1);
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
}

.slant-item:nth-child(1) { clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); margin-right: -10%; }
.slant-item:nth-child(2) { clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%); margin-left: -10%; margin-right: -10%; }
.slant-item:nth-child(3) { clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); margin-left: -10%; }

.slant-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.6s ease;
    filter: brightness(0.7);
}

.expert-bg { background-image: url('https://sanfordjetjackson.com/wp-content/uploads/2026/03/expertled.webp'); }
.branded-bg { background-image: url('https://sanfordjetjackson.com/wp-content/uploads/2026/03/adcontent.webp'); }
.filmmaking-bg { background-image: url('https://sanfordjetjackson.com/wp-content/uploads/2026/03/filmmaking.webp'); }

.slant-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.4s ease;
    padding: 0 5%;
}

.slant-content h2 {
    color: white !important;
    font-size: clamp(2rem, 8vw, 7rem) !important;
    font-weight: 900;
    line-height: 0.85;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -3px;
    pointer-events: none;
}

.slant-item:hover {
    flex: 4;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    margin: 0 !important;
    z-index: 20;
}

.slant-item:hover .slant-bg {
    filter: brightness(0.2) grayscale(100%) blur(15px);
    transform: scale(1.05);
}

.slant-container:hover .slant-item:not(:hover) {
    flex: 0.4;
    opacity: 0.15;
}

.slant-item:hover .slant-content {
    opacity: 1;
}
/* 2. BASE WEDGE STYLING */
.slant-item {
    position: relative;
    flex: 1;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.3, 1);
    cursor: pointer;
    overflow: hidden;
}

/* 3. THE SLANT CUTOUTS (Creates the 1/2/3 look) */
.slant-item:nth-child(1) { clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); margin-right: -10%; }
.slant-item:nth-child(2) { clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%); margin-left: -10%; margin-right: -10%; }
.slant-item:nth-child(3) { clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); margin-left: -10%; }

/* 4. BACKGROUND IMAGES & INITIAL STATE */
.slant-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.6s ease;
    filter: brightness(0.8); /* Slightly dimmed by default */
}

.expert-bg { background-image: url('https://sanfordjetjackson.com/wp-content/uploads/2026/03/expertled.webp'); }
.branded-bg { background-image: url('https://sanfordjetjackson.com/wp-content/uploads/2026/03/adcontent.webp'); }
.filmmaking-bg { background-image: url('https://sanfordjetjackson.com/wp-content/uploads/2026/03/filmmaking.webp'); }

/* 5. THE MASSIVE BOLD TEXT OVERLAY */
.slant-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.4s ease;
    padding: 0 5%;
}

.slant-content h2 {
    color: white;
    font-size: clamp(3rem, 10vw, 8rem); /* Massive responsive text */
    font-weight: 900;
    line-height: 0.85;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -4px;
    pointer-events: none; /* Allows mouse to still "hit" the image underneath */
}

/* 6. HOVER INTERACTIONS */

/* Expand the active wedge */
.slant-item:hover {
    flex: 4; /* Pushes others far away */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    margin: 0 !important;
    z-index: 20;
}

/* ACTIVE FILTER: Dim, B&W, and Blur the image on hover */
.slant-item:hover .slant-bg {
    filter: brightness(0.2) grayscale(100%) blur(15px);
    transform: scale(1.1);
}

/* Shrink and fade the non-hovered items */
.slant-container:hover .slant-item:not(:hover) {
    flex: 0.4;
    opacity: 0.15;
    filter: blur(2px);
}

/* Show the text */
.slant-item:hover .slant-content {
    opacity: 1;
}

/* MOBILE FIX: Stack them vertically on small screens */
@media (max-width: 768px) {
    .slant-container {
        flex-direction: column;
        height: auto;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        left: 0;
    }
    .slant-item {
        height: 33vh;
        clip-path: none !important;
        margin: 0 !important;
    }
    .slant-content h2 {
        font-size: 3rem;
    }
}
/* Forces the custom section to stay visible above the page background */
.wp-block-custom-html {
    position: relative;
    z-index: 10 !important;
    display: block !important;
    width: 100% !important;
}

/* This tells the hidden WordPress containers to stop squishing our custom code */
.entry-content > .wp-block-custom-html {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    max-width: none !important;
}

/* Kills any padding the theme might be adding to the main page body */
.page-id-334 .entry-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Force the HTML block and its container to explode to 100% */
.page-id-334 .wp-block-group.alignfull, 
.page-id-334 .wp-block-custom-html {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure the slant container fills that new space */
.slant-container {
    display: flex;
    width: 100% !important; /* It will now fill the Full-Width Group */
    height: 85vh; 
    background: #000;
    overflow: hidden;
    position: relative;
    margin: 0;
}