/* -------------------------------------------------------
EPTV BASE
--------------------------------------------------------*/

/* For the block anchor can fill the area */
.eptv-block { position: relative; }

.eptv-block p {
    color: var(--black-666);
    margin: 0;
}

.eptv-border-right { border-right: 1px solid var(--white-e6); }

.eptv-article-image-container { position: relative; }
.eptv-media-icon {
    position: absolute;
    bottom: 8px;
    left: 8px;
}
.eptv-media-icon img { display: block; }

.eptv-block a { position: relative; z-index: 1; }
a.eptv-title-anchor { position: static; z-index: 0; }
@media all and (max-width: 750px) { a.eptv-title-anchor { position: initial; } }

a.eptv-title-anchor::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

.eptv-category-tags-container { padding: 0 0 8px; line-height: 14px; }
.eptv-category-tag {
    background-color: var(--green);
    color: white;
    font-weight: 600;
    padding: 1px 12px 1px;
    margin-top: 4px;
    display: inline-block;
}
.eptv-category-tag:hover { background-color: var(--green-hover); }

.eptv-title-anchor { padding: 4px 0 0 0; }

.eptv-hero-feat-title:hover,
.eptv-block:hover .eptv-title-anchor {
    /* text-decoration: underline; */
    color: var(--black-444);
}
.eptv-block:hover img.cropped { filter: brightness(110%); }

.eptv-hr-full-grid { padding: 0 16px; grid-column: 1 / span 12; }
.eptv-hr-triple { padding: 0 16px 4px; grid-column: 1 / span 12; }
.eptv-hr-triple:last-child { padding: 0 16px; grid-column: 1 / span 12; }

@media all and (max-width: 750px) {
    .eptv-hr-triple.hero-hrs { padding: 0; }
}



/* -------------------------------------------------------
FEATURED - FIRST BLOCK
--------------------------------------------------------*/

.eptv-hero-featured-video {
    grid-column: 1 / span 8;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

.eptv-article-video-container { grid-column: 1 / span 8; grid-row: 1; padding: 0 16px; }
.eptv-article-video-container video { display: block; }
.eptv-hero-feat-title { grid-column: 1 / span 5; grid-row: 2; padding: 14px 16px 0; }
.eptv-hero-feat-cats-text { grid-column: 6 / span 3; grid-row: 2; padding: 20px 16px 0; }

.eptv-hero-featured-video p {
    padding-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eptv-hero-feat-3hrs {
    grid-column: 1 / span 8;
    padding: 0 16px 1px;
    align-self: end;
}
.eptv-hero-feat-3hrs hr { margin-top: 4px; }

/* RESPONSIVE */

@media all and (max-width: 1024px) {
    .eptv-hero-feat-title { font-size: 28px; line-height: 32px; }
}

@media all and (max-width: 750px) {

    .eptv-hero-featured-video {
        grid-column: 1 / span 12;
        padding: 0;
        border-right: none;
    }
    .eptv-article-video-container { padding: 0; }
    .eptv-hero-featured-video .eptv-category-tags-container { display: none; }

    .eptv-hero-featured-video .eptv-hero-feat-title {
        grid-column: 1 / span 12;
        display: block;
        font-size: 28px;
        line-height: 32px;
        padding: 8px 24px;
    }

    .eptv-hero-featured-video .eptv-hero-feat-cats-text {
        grid-column: 1 / span 12;
        grid-row: 3;
        padding: 8px 24px 0;
    }

    .eptv-hero-feat-3hrs { padding: 24px 0; }
    .eptv-hero-feat-3hrs hr:nth-child(2),
    .eptv-hero-feat-3hrs hr:nth-child(3) { display: none; }

}



/* -------------------------------------------------------
FEATURED - SMALL BLOCKS LIST
--------------------------------------------------------*/

.eptv-hero-featured-list-container {
    grid-column: 9 / span 4;
}

.eptv-featured-list-block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 16px;
}
.eptv-featured-list-block:last-child { margin-bottom: 0; }

.eptv-article-image-container { grid-column: 1 / span 2; padding: 0 16px; }
.eptv-hero-featured-list-container .eptv-media-icon { left: 24px; }

.eptv-title-anchor { grid-column: 3 / span 2; }

.eptv-featured-list-block div.crop { height: 88px; }

.eptv-featured-list-block .eptv-title-anchor {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 16px 0 0;
    height: 82px;
}

.eptv-featured-list-block p { display: none; }

@media all and (max-width: 1024px) {
    .fbl-06 { display: none; }
}

@media all and (max-width: 750px) {

    .eptv-featured-list-block { margin-bottom: 24px; }
    .eptv-hero-featured-list-container { grid-column: 1 / span 12; }
    .eptv-article-image-container { padding: 0 16px 0 24px; }
    .eptv-featured-list-block div.crop { height: 84px; }
    .eptv-hero-featured-list-container .eptv-media-icon { left: 30px; }
    .eptv-featured-list-block .eptv-title-anchor { padding: 0 24px 0 0; }
    .eptv-hero-featured-list-container { border-bottom: 1px solid var(--white-e6); }

}



/* -------------------------------------------------------
RADIO BANNER
--------------------------------------------------------*/

.eptv-section-label {
    grid-column: 1 / span 12;
    margin: 0;
    padding: 0 16px 12px;
}

.eptv-radio-live-bullet {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: var(--green);
    margin: 0 8px;
    position: relative;
    top: 1px;
    transition: background-color 2s ease;
}

.eptv-epr-banner-container {
    grid-column: 1 / span 12;
    background-color: var(--white-f2);
    position: relative;
}
.eptv-epr-banner-container:hover { background-color: #f5f5f5; }

.eptv-epr-banner-container .grid { height: 128px; padding: 0 16px; }

.eptv-epr-banner-logo {
    grid-column: 1 / span 3;
    display: flex;
    align-items: center;
}
.eptv-epr-banner-logo img { max-height: 40px; }
.eptv-epr-banner-mobile-logo { display: none; }

.eptv-epr-banner-team-photo {
    grid-column: 4 / span 2;
    position: relative;
}
.eptv-epr-banner-team-photo .epr-ban-team-image-bg { display: none; }
.eptv-epr-banner-team-photo .epr-ban-team-image {
    background-color: initial;
    position: absolute;
    bottom: 0;
    /* height: initial; */
    height: 160px;
    width: 100%;
    object-fit: cover;
    /* object-fit: contain;
    object-position: bottom; */
}

.eptv-epr-banner-text {
    grid-column: 6 / span 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 16px;
}

.epr-ban-team-name { padding-top: 4px; }

.eptv-epr-banner-play-container {
    grid-column: 10 / span 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.eptv-epr-banner-play-container div { text-align: right; }
.eptv-epr-banner-play-container img { width: 80px; margin-left: 8px; }

.eptv-epr-banner-container a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.eptv-epr-banner-mobile-play-container { display: none; }

@media all and (max-width: 1024px) {
    .eptv-epr-banner-logo { display: none; }
    .eptv-epr-banner-team-photo { grid-column: 5 / span 4; grid-row: 1; }
    .eptv-epr-banner-team-photo .epr-ban-team-image { max-height: 180px; }
    .eptv-epr-banner-text { grid-column: 1 / span 6; grid-row: 1; padding: 0; }
}

@media all and (max-width: 750px) {
    .eptv-section-label { padding: 0 24px 12px; }
    .eptv-epr-banner-container { margin: 0 24px; }
    .eptv-epr-banner-container .grid { height: 216px; padding: 0; }
    .eptv-epr-banner-mobile-logo { display: block; }

    .eptv-epr-banner-logo {
        grid-column: 1 / span 12;
        display: initial;
        align-items: initial;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
    }
    .eptv-epr-banner-team-photo .epr-ban-team-image-bg {
        background-color: initial;
        display: initial;
        position: absolute;
        bottom: 0;
        right: 0;
        object-fit: cover;
        object-position: center;
    }
    .eptv-epr-banner-team-photo {
        grid-column: 1 / span 12;
        display: flex;
        justify-content: center;
    }
    .eptv-epr-banner-team-photo .epr-ban-team-image { max-height: initial; height: 108%; }

    .eptv-epr-banner-text,
    .eptv-epr-banner-play-container { display: none; }

    .eptv-epr-banner-mobile-play-container {
        display: flex;
        height: 72px;
        align-items: center;
        padding: 0 24px;
    }

    .eptv-epr-banner-mobile-play-container img { width: 48px; margin-right: 8px; }

}



/* -------------------------------------------------------
EPTV - MEDIUM BLOCKS
--------------------------------------------------------*/

.eptv-feat-hr { grid-row: 2 / span 1; }

.eptv-medium-block {
    grid-column-end: span 3;
    padding: 0 16px;
}

.eptv-medium-block .eptv-article-image-container { padding: 0; }
.eptv-medium-block div.crop { height: 144px; }

.title-text-box {
    padding: 8px 0 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 70px;
    margin-bottom: 16px;
}

.eptv-medium-block p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 100px;
}

.medium-block-hrs { grid-column: 1 / span 12; padding: 24px 16px 0; }
.medium-block-hrs hr { margin-top: 4px; }

/* RESPONSIVE */

@media all and (max-width: 1024px) {
    .eptv-medium-block { grid-column-end: span 4; }
    .mb-3 { border-right: none; }
    .mb-4 { display: none; }
    .eptv-medium-block div.crop { height: 88px; }
}

@media all and (max-width: 750px) {

    .eptv-medium-block { grid-column-end: span 6; }
    .eptv-medium-block .epd-article-image-container .crop { height: 88px; }
    .title-text-box { -webkit-line-clamp: 4; height: 92px; }
    .eptv-medium-block p { display: none; }

    .mb-1, .mb-2 { border-right: none; }
    .mb-4 { display: initial; }

    /* Padding corrections */
    .mb-1, .mb-3 { padding: 8px 12px 8px 24px; }
    .mb-2, .mb-4 { padding: 8px 24px 8px 12px; }

    .medium-block-hrs { padding: 0; }

}



/* TO REVIEW >>>

Refactor all EPD and EPTV homepages having in mind:
> Proper class naming, descriptive and not repeatable in other pages
> Avoid repiting CSS code, make base code as independent and reusable as possible
> Avoid overcomplicated stuff, make it simple.

*/