#codex-tabs .codex-tab-btn[hidden] { display: none; }

#codex-tab-videos {
    padding: clamp(16px, 3vw, 40px) clamp(2px, 2vw, 24px);
    background: radial-gradient(ellipse at 50% 0, rgba(226, 185, 95, .08), transparent 65%);
}

.codex-video-card {
    width: min(100%, 980px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(226, 185, 95, .28);
    border-radius: 16px;
    background: linear-gradient(135deg, #101e2b, #060d16 65%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35), 0 0 35px rgba(226, 185, 95, .04);
}

.codex-video-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    border-bottom: 1px solid rgba(226, 185, 95, .2);
}

.codex-video-portrait {
    width: 58px;
    height: 70px;
    flex: 0 0 auto;
    object-fit: cover;
    object-position: center 17%;
    border: 1px solid rgba(226, 185, 95, .45);
    border-radius: 8px;
}

.codex-video-heading { min-width: 0; }
.codex-video-hero {
    color: #e2b95f;
    font: 700 .7rem/1.5 "Montserrat", sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.codex-video-heading h2 {
    margin: 7px 0 0;
    color: #f3efe7;
    font: 700 clamp(1.05rem, 2.3vw, 1.65rem)/1.3 "Montserrat", sans-serif;
}
.codex-video-badge {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    margin-left: auto;
    border: 1px solid rgba(226, 185, 95, .3);
    border-radius: 50%;
    color: #e2b95f;
    background: rgba(226, 185, 95, .06);
    font-size: .85rem;
}

.codex-video-player { aspect-ratio: 16 / 9; background: #000; }
.codex-video-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.codex-video-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 26px;
    border-top: 1px solid rgba(226, 185, 95, .15);
    color: #8097a6;
    font: 500 .75rem/1.5 "Montserrat", sans-serif;
}
.codex-video-footer a { color: #e2b95f; text-decoration: none; }
.codex-video-footer a:hover { color: #ffe1a0; text-decoration: underline; }
.codex-video-footer a:focus-visible { outline: 2px solid #e2b95f; outline-offset: 5px; }

@media (max-width: 600px) {
    .codex-video-card { border-radius: 10px; }
    .codex-video-header { gap: 12px; padding: 16px; }
    .codex-video-portrait { width: 42px; height: 52px; }
    .codex-video-badge { display: none; }
    .codex-video-footer { padding: 14px 16px; font-size: .68rem; }
}