/* Flexbox fallbacks preserve the editorial layout in older rendering engines. */
.dhk-hero,
.dhk-about,
.dhk-scope,
.dhk-video-grid,
.dhk-lead-story,
.dhk-story-grid {
    display: flex;
}

.dhk-hero {
    display: grid;
}

.dhk-hero-copy,
.dhk-hero-visual,
.dhk-about > div {
    flex: 1;
}

.dhk-about,
.dhk-scope,
.dhk-video-grid,
.dhk-lead-story,
.dhk-story-grid {
    display: grid;
}

.dhk-video-grid,
.dhk-story-grid {
    flex-wrap: wrap;
}

.dhk-scope > div {
    flex: 1;
}

.dhk-video-card,
.dhk-story-card {
    flex: 1 1 30%;
}

.dhk-video-card-featured {
    flex-basis: 64%;
}

.dhk-lead-image {
    flex: 1.15;
}

.dhk-lead-story > div {
    flex: .85;
}

@media (max-width: 1000px) {
    .dhk-hero,
    .dhk-about,
    .dhk-lead-story {
        display: block;
    }

    .dhk-video-card,
    .dhk-story-card {
        flex-basis: 46%;
    }

    .dhk-video-card-featured {
        flex-basis: 100%;
    }
}

@media (max-width: 700px) {
    .dhk-scope,
    .dhk-video-grid,
    .dhk-story-grid {
        display: block;
    }

    .dhk-video-card,
    .dhk-story-card {
        margin-bottom: 22px;
    }
}

/* Keep the complete YouTube frame visible at every card size. */
.dhk-video-player {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #07151c;
}

.dhk-video-player button,
.dhk-video-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
}

.dhk-video-player img,
.dhk-video-card-featured .dhk-video-player img {
    width: 100%;
    height: 100% !important;
    object-fit: contain;
    background: #07151c;
}
