assets/css/codebook.css

/* ============================================
   Category Page Fixes
   (centers representative video & removes empty space)
   ============================================ */

body.category-page {
    padding: 20px;
}

/* Use the same "app card" look, but single-column and roomy */
.category-app {
    grid-template-columns: 1fr !important;
    max-width: 1200px;
}

/* Representative segment area: center content */
body.category-page .video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

/* Make the representative grid behave like a centered single card */
body.category-page .video-wrapper .video-grid {
    width: 100%;
    display: grid;
    justify-content: center;
    /* centers the column */
    grid-template-columns: minmax(320px, 760px);
    gap: 14px;
}

/* Video card should not stretch weirdly */
body.category-page .video-item {
    width: 100%;
    max-width: 760px;
}

/* Let the representative video be larger and consistent */
body.category-page .video-item video {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    /* prevents aggressive crop */
    border-radius: 14px;
}

/* Tighten spacing between sections so it feels less "floating" */
body.category-page .card {
    margin-top: 0;
}

/* Make the table area feel aligned */
body.category-page .table-card {
    width: 100%;
    overflow-x: auto;
}

/* On small screens, just go full width */
@media (max-width: 700px) {
    body.category-page .video-wrapper .video-grid {
        grid-template-columns: 1fr;
    }

    body.category-page .video-item {
        max-width: none;
    }

    body.category-page .video-item video {
        max-height: 320px;
    }
}