/* =========================================================
   VIDEO PAGE
========================================================= */

.video-page {
    background: #fff;
    padding: 20px 0 30px;
}


/* =========================================================
   VIDEO LISTING
========================================================= */

.video-listing {
    width: 100%;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.video-page-header {
    margin-bottom: 18px;
}

.video-page-header h1 {
    margin: 0;

    color: #006d46;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.3;
}

.video-header-line {
    width: 30px;

    height: 3px;

    background: #30d87b;

    margin-top: 7px;
}


/* =========================================================
   VIDEO GRID
========================================================= */

.video-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

    width: 100%;
}


/* =========================================================
   VIDEO CARD
========================================================= */

.video-card {

    background: #fff;

    border: 1px solid #e1eee9;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Hover */

.video-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   VIDEO WRAPPER
========================================================= */

.video-wrapper {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #eef7f3;

    overflow: hidden;
}


/* YouTube iframe */

.video-wrapper iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

    display: block;
}


/* =========================================================
   VIDEO CARD CONTENT
========================================================= */

.video-card-content {

    padding: 12px 14px 14px;

    background: #fff;
}


/* =========================================================
   VIDEO DATE
========================================================= */

.video-date {

    color: #80948e;

    font-size: 11px;

    line-height: 1.4;

    margin-bottom: 5px;
}

.video-date i {

    color: #0a9b5c;

    margin-right: 4px;
}


/* =========================================================
   VIDEO TITLE
========================================================= */

.video-title {

    margin: 0;

    color: #006d46;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.4;

    word-break: break-word;
}


/* =========================================================
   EMPTY VIDEO
========================================================= */

.video-empty {

    grid-column: 1 / -1;

    padding: 50px 20px;

    text-align: center;

    color: #80948e;

    border: 1px solid #e1eee9;

    border-radius: 8px;

    background: #f9fcfa;
}

.video-empty i {

    display: block;

    color: #31d77c;

    font-size: 35px;

    margin-bottom: 10px;
}

.video-empty p {

    margin: 0;

    font-size: 15px;
}


/* =========================================================
   PAGINATION
========================================================= */

.video-pagination {

    width: 100%;

    text-align: center;

    margin-top: 25px;
}

.video-pagination .pagination {

    margin: 0;
}


/* =========================================================
   MOST READ STORIES SIDEBAR
========================================================= */

.video-sidebar {

    background: #fff;

    border: 1px solid #e1eee9;

    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   SIDEBAR HEADER
========================================================= */

.video-sidebar > header {

    background:
        linear-gradient(
            135deg,
            #f1faf6 0%,
            #e5f5ee 100%
        );

    padding: 13px 15px;

    border-bottom: 1px solid #dcece6;
}

.video-sidebar > header h2 {

    margin: 0;

    color: #006d46;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.4;
}


/* Header Icon */

.video-sidebar > header h2:before {

    content: "\f03a";

    font-family: FontAwesome;

    color: #0a9b5c;

    font-size: 15px;

    margin-right: 7px;
}


/* =========================================================
   SIDEBAR CONTENT
========================================================= */

.video-sidebar .section-content {

    padding: 5px 12px;
}


/* =========================================================
   MOST READ ITEM
========================================================= */

.video-sidebar .section-content article {

    padding: 12px 5px;

    border-bottom: 1px solid #edf3f0;

    transition:
        background 0.2s ease,
        padding 0.2s ease;
}


/* Remove last border */

.video-sidebar .section-content article:last-child {

    border-bottom: 0;
}


/* Hover */

.video-sidebar .section-content article:hover {

    background: #f7fcfa;

    padding-left: 9px;

    padding-right: 9px;

    border-radius: 5px;
}


/* =========================================================
   SIDEBAR DATE
========================================================= */

.video-sidebar .section-content .date {

    margin: 0 0 5px;

    padding: 0;

    color: #82958f;

    font-size: 10px;

    line-height: 1.4;
}

.video-sidebar .section-content .date i {

    color: #0a9b5c;

    margin-right: 4px;
}


/* =========================================================
   SIDEBAR TITLE
========================================================= */

.video-sidebar .section-content article header {

    margin: 0;

    padding: 0;
}

.video-sidebar .section-content article header a {

    display: block;

    color: #006d46;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.45;

    text-decoration: none;

    transition: color 0.2s ease;
}

.video-sidebar .section-content article header a:hover {

    color: #0a9b5c;

    text-decoration: none;
}


/* =========================================================
   SIDEBAR POSITION
========================================================= */

#page-sidebar {

    width: 100%;
}

.video-sidebar {

    width: 100%;
}


/* =========================================================
   DESKTOP SPACING
========================================================= */

@media (min-width: 992px) {

    .video-sidebar {

        margin-left: 5px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .video-grid {

        gap: 15px;
    }

    .video-title {

        font-size: 15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .video-page {

        padding: 15px 0 25px;
    }


    /* One column */

    .video-grid {

        grid-template-columns: 1fr;

        gap: 15px;
    }


    /* Header */

    .video-page-header h1 {

        font-size: 24px;
    }


    /* Card */

    .video-card {

        width: 100%;
    }


    /* Title */

    .video-title {

        font-size: 15px;
    }


    /* Sidebar */

    .video-sidebar {

        margin-top: 20px;
    }


    .video-sidebar > header h2 {

        font-size: 17px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .video-card-content {

        padding: 10px 12px 12px;
    }

    .video-title {

        font-size: 14px;
    }

    .video-date {

        font-size: 10px;
    }

}