.video-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;              /* space *inside* the card */
    border: 1px solid #ccc;     /* thin grey border */
    border-radius: 8px;         /* optional, soft corners */
    background: #fff;           /* optional, clean background */
    margin-bottom: 1rem;        /* space *between* cards */
}
.video-card a {
    color: inherit;              /* use the surrounding text color */
    text-decoration: none;       /* remove underline */
}

.video-card a:hover {
    color: inherit;              /* don’t turn red or blue */
    text-decoration: none;       /* keep it clean on hover */
}
.thumb-9x16 {
    width:75px;                /* pick your width */
    aspect-ratio: 9 / 16;       /* forces vertical box */
    overflow:hidden;
    border-radius:12px;
}
.thumb-9x16 img{
    width:100%;
    height:100%;
    object-fit:cover;           /* crops off the side padding */
    object-position:center;     /* tweak if faces are off-center */
}
.meta { max-width: none; }
.date {text-align:left;  font: 600 0.9rem system-ui; opacity:.75; margin-bottom:.25rem; }
.video-title {text-align:left; font: 600 1.25rem system-ui; font-weight: bold; margin-bottom:.25rem; }
.video-story-line {text-align:center; font: 600 1.25rem system-ui; font-weight: bold; margin-bottom:.25rem; }
.video-description { text-align:left; font: 12px system-ui; opacity:.75; margin-bottom:.25rem; }
.col-12.col-md-6.d-flex {
    margin-bottom: 1rem;   /* restores the row gap */
}
.video-wrapper-small {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;              /* keeps layout clean */
    margin: 0;
    padding: 0;
}
.video-wrapper-small iframe {
    height: 300px;
    width: calc(300px * 9 / 16);   /* maintain 9:16 aspect ratio */
    border: none;
    display: block;
}
.story-image-thumbnail {
    height: 200px;
    width: calc(200px * 9 / 16);   /* maintain 9:16 aspect ratio */
    /*min-height: 160px;*/
    border: none;
    display: block;
    margin: 0 auto 0 0;
    padding-left: 16px;
    padding-right: 4px;
}
.nav-button {
    min-width: 60px;
    width: 60px;
}
.nav-button-container {
    display: flex;
    justify-content: center;   /* center horizontally */
    align-items: center;        /* center vertically (optional) */
}
/* The wrapper fills the viewport and centers the video */
.tpf-video-wrapper-9x16 {
    height: 100vh;                 /* full window height */
    width: 100%;                   /* take the full width */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;              /* keeps layout clean */
    margin: 0;
    padding: 0;
}

/* The iframe becomes a perfect 9:16 box, driven by height */
.tpf-video-wrapper-9x16 iframe {
    height: 100vh;                 /* full window height */
    width: calc(100vh * 9 / 16);   /* maintain 9:16 aspect ratio */
    max-width: 100vw;              /* don’t overflow horizontally */
    max-height: 100vh;             /* don’t exceed viewport */
    border: none;
    display: block;
}


/* === Overall story page wrapper === */

.tpf-story-page {
    background: #fdebc7;            /* your overall page color */
    padding: 32px 80px;             /* outer breathing room */
}
/* story outer row */
.tpf-story-page.vc_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 32px 0;   /* vertical only, no extra left/right */
}
/* Center the entire story content and give wide-screen margins */
.tpf-story-inner {
    max-width: 1100px;   /* adjust between 900–1200 depending on taste */
    margin: 0 auto;
    padding: 32px 40px 48px;
    background: #fff7e4;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    /* new */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.tpf-video-date {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 20px;
}
.tpf-video-description {
    text-align: left;
    font-size: 18px;
    font-weight: normal;
    padding-bottom: 20px;
}

/* === HERO LAYOUT: title/description left, video right === */

/* Collapse WPBakery spacing INSIDE hero, but not on the row itself */
.tpf-story-hero .wpb_column,
.tpf-story-hero .vc_column-inner,
.tpf-story-hero .wpb_wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* Main hero row */
.tpf-story-hero {
    display: flex;
    align-items: flex-start;
    column-gap: 80px;
    margin-bottom: 24px;
    padding-bottom: 0px;
    border-bottom: 1px solid rgba(0,0,0,0.15);
}

/* First column (text) – give it more space, shove it to the left */
.tpf-story-hero .wpb_column:nth-child(1) {
    flex: 2 1 0;          /* ~2/3 width */
}

/* Second column (video) – smaller, right-aligned */
.tpf-story-hero .wpb_column:nth-child(2) {
    flex: 1 1 0;          /* ~1/3 width */
    display: flex;
    justify-content: flex-end;
}

/* Text spacing */
.tpf-story-hero p {
    margin-bottom: 14px;
}
.tpf-story-hero p:last-child {
    margin-bottom: 0;
}

/* === VIDEO: force 9:16 using a wrapper on the video column === */

/* Make sure your video column has class "tpf-story-hero-video" in WPBakery */
.tpf-story-hero-video {
    position: relative;
    aspect-ratio: 9 / 16;  /* tall shorts shape */
    max-width: 260px;      /* tweak to taste */
    width: 100%;
}

/* Make iframe fill that 9:16 box */
.tpf-story-hero-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: block;
}


/* === Per-section layout (thumb + paragraph) === */

.tpf-story-section {
    display: flex;
    /*gap: 24px;
    margin-bottom: 32px;*/
    align-items: flex-start;
}

.tpf-story-thumb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.tpf-story-text p {
    margin-top: 0;
    line-height: 1.5;
}

@media (min-width: 1200px) {
    .video-description { text-align:left; font: 18px system-ui; opacity:.75; margin-bottom:.25rem; }

}
@media (min-width: 992px) {
    .tpf-story-section {
        font-size: 18px;
    }
}
/* On *very* wide screens, let the content be a bit wider */
@media (min-width: 1500px) {
    .tpf-story-inner {
        max-width: 1200px;
        margin: 0 auto;
        border-radius: 18px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        /* new */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* On narrow screens: skinny margins / simpler styling */
@media (max-width: 768px) {
     /* make the inner cream card fill the width and be centered */
    body.body-no-background .tpf-story-inner {
        max-width: 100%;
        width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 24px 16px 40px;   /* equal left/right padding */

        position: static;          /* cancel left:50% trick */
        transform: none;
    }

    .tpf-story-page {
        padding: 16px 8px;
    }


    .tpf-story-inner {
        max-width: 100%;
        padding: 20px 16px 28px;
        border-radius: 18px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        margin: 0 auto;
        /* new */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .story-image-thumbnail {
        height: 150px;
        width: calc(150px * 9 / 16);   /* maintain 9:16 aspect ratio */
        padding-left: 0px;
        padding-right: 4px;
    }


    .tpf-story-section {
        /*flex-direction: column;*/
        gap: 16px;
    }

    .tpf-story-thumb {
        max-width: 220px;
    }
/* === Mobile: stack hero, center video === */
    .tpf-story-hero {
        display: block;
        padding-bottom: 20px;
        padding-left:30px;
        padding-right:30px;
    }

    .tpf-story-hero .wpb_column {
        width: 100%;
    }

    .tpf-story-hero-video {
        margin: 12px auto 0;
        max-width: 320px;
    }
}