/* =============================================================
   Video Index Page — page-specific styles
   Loaded only on video-index.php
   ============================================================= */

.video-list-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-areas:
        "thumb main"
        "thumb extra";
    column-gap: 15px;
    width: 100%;
    align-items: start;
}

.video-thumb-link {
    grid-area: thumb;
}

.video-thumb {
    width: 220px;
    max-width: 100%;
    display: block;
    border-radius: 6px;
}

.video-main {
    grid-area: main;
}

.video-extra {
    grid-area: extra;
}

/* =============================================================
   Compact layout: kicks in when the main content column
   gets cramped (tablet portrait, large phones landscape)
   ============================================================= */
@media (max-width: 853px) {
    .video-list-item {
        grid-template-columns: 42% 1fr;
        grid-template-areas:
            "thumb main"
            "extra extra";
        column-gap: 12px;
        row-gap: 8px;
    }

    .ccp-headline-link {
        line-height: 1.15;
        margin-bottom: 0;
    }

    .ccp-sub-heading {
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .ccp-category-label {
        font-size: 0.9em;
    }

    .video-thumb {
        width: 100%;
    }

    .video-extra {
        padding-top: 2px;
    }

    .ccp-date {
        display: block;
        text-align: left;
        margin-top: 1px;
        font-size: 0.7em;
    }

    .video-list-item.has-subheading .ccp-headline-link {
        font-size: 1.0em;
    }

    .video-list-item.has-subheading .ccp-sub-heading {
        font-size: 0.8em;
    }

    .video-list-item.no-subheading .ccp-headline-link {
        font-size: 0.8em;
    }
}