/*
 * EATV theme overrides, loaded by layouts/themes/eatv after the NewsEdge style.css.
 * Selectors start with `body` so they outrank style.css's `h2.title-…-dark a` rules.
 */

/* The few rules of normalize.css and main.css (no longer loaded) that Bootstrap 5's reboot does not set itself. */
button,
input,
optgroup,
select,
textarea {
    color: inherit;
}

input[type="search"] {
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

audio,
canvas,
iframe,
video {
    vertical-align: middle;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

:root {
    --eatv-headline: #4c2f8a;
    --eatv-hover: #e53935;
    --eatv-byline: #c62828;
    --eatv-muted: #646464;
}

/* Headlines: every dark headline in the theme, linked or not. Headlines over images (-light) stay white. */
body .title-regular-dark,
body .title-regular-dark a,
body .title-medium-dark,
body .title-medium-dark a,
body .title-semibold-dark,
body .title-semibold-dark a,
body .title-bold-dark,
body .title-bold-dark a {
    color: var(--eatv-headline);
}

body .title-regular-dark a:hover,
body .title-medium-dark a:hover,
body .title-semibold-dark a:hover,
body .title-bold-dark a:hover {
    color: var(--eatv-hover);
}

/* Story style 2: headline, dateline and byline, leading, then the full-width image. */
.eatv-story-headline {
    color: var(--eatv-headline);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
}

.eatv-story-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 28px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.eatv-story-date {
    color: var(--eatv-muted);
    font-size: 11px;
}

.eatv-story-byline,
.eatv-story-byline a {
    color: var(--eatv-byline);
    font-size: 15px;
}

.eatv-story-byline a:hover {
    color: var(--eatv-headline);
}

.eatv-story-leading {
    color: #111111;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 25px;
}

@media (max-width: 767px) {
    .eatv-story-headline {
        font-size: 28px;
    }

    .eatv-story-leading {
        font-size: 16px;
    }
}

/* Breadcrumb, minimal variant: one line of crumbs separated by bars, no background or visible title. */
.eatv-breadcrumb {
    padding: 18px 0;
}

.eatv-breadcrumb-trail {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    color: #333333;
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    text-transform: uppercase;
}

.eatv-breadcrumb-trail li {
    min-width: 0;
}

.eatv-breadcrumb-trail li + li::before {
    content: '|';
    margin: 0 8px;
}

.eatv-breadcrumb-trail a {
    color: #333333;
}

.eatv-breadcrumb-trail a:hover {
    color: var(--eatv-headline);
}

.eatv-breadcrumb-trail [aria-current='page'] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * The search page (/search), after IPP Media's: a centred search bar, the tabs and the section filter over a rule,
 * the result count and the sort, then rows of text with the picture on the right. Square corners throughout.
 */
.eatv-search,
.eatv-search-results {
    background: #ffffff;
}

.eatv-search {
    padding: 45px 0 30px;
}

.eatv-search__form {
    display: flex;
    max-width: 610px;
    margin: 0 auto;
}

.eatv-search__field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.eatv-search__field input {
    box-sizing: border-box; /* normalize.css makes search inputs content-box, which pushed it over the button */
    width: 100%;
    height: 40px;
    padding: 0 90px 0 12px;
    border: 1px solid #dedede;
    border-radius: 0;
    background: #f7f7f7;
    color: #111111;
    font-size: 15px;
}

.eatv-search__field input:focus {
    outline: none;
    border-color: var(--eatv-headline);
    background: #ffffff;
}

.eatv-search__field input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.eatv-search__clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    background: none;
    color: #8a8a8a;
    font-size: 14px;
}

.eatv-search__clear:hover {
    color: #111111;
}

.eatv-search__submit {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 0;
    background: var(--eatv-hover);
    color: #ffffff;
    font-size: 16px;
}

.eatv-search__submit:hover {
    background: var(--eatv-headline);
}

.eatv-search__prompt {
    margin-bottom: 60px;
    color: var(--eatv-muted);
    text-align: center;
}

.eatv-search-results {
    padding-bottom: 40px;
}

.eatv-search__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 30px;
    padding: 0 20px;
    border-bottom: 2px solid #9a9a9a;
}

.eatv-search__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-search__tabs a {
    display: block;
    padding: 10px 0 8px;
    border-bottom: 2px solid transparent;
    color: var(--eatv-headline);
    font-size: 16px;
}

.eatv-search__tabs a small {
    font-size: 11px;
}

.eatv-search__tabs a.is-active {
    border-bottom-color: var(--eatv-hover);
    color: #141414;
}

.eatv-search__tabs a:hover {
    color: var(--eatv-hover);
}

.eatv-search__select {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.eatv-search__select label {
    margin: 0;
    color: #555555;
    font-size: 12px;
    font-weight: 400;
}

.eatv-search__select select {
    height: 30px;
    min-width: 115px;
    padding: 0 8px;
    border: 1px solid #dedede;
    border-radius: 0;
    background-color: #ffffff;
    color: #141414;
    font-size: 12px;
}

.eatv-search__select .eatv-search__sort {
    border-color: var(--eatv-headline);
    background-color: var(--eatv-headline);
    color: #ffffff;
    font-weight: 600;
}

.eatv-search__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 30px;
    padding: 8px 35px 20px;
}

.eatv-search__summary p {
    max-width: 230px;
    margin: 0;
    color: #141414;
    font-size: 15px;
    text-align: center;
}

.eatv-search__summary strong {
    display: block;
    font-weight: 400;
}

.eatv-search-row {
    display: flex;
    gap: 12px;
    padding: 0 0 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid #c8c8c8;
}

.eatv-search-row__body {
    flex: 1;
    min-width: 0;
}

.eatv-search-row__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.eatv-search-row__title a {
    color: var(--eatv-headline);
}

.eatv-search-row__title a:hover {
    color: var(--eatv-hover);
}

.eatv-search-row__excerpt {
    margin: 0 0 12px;
    color: #212529;
    font-size: 15px;
    line-height: 1.6;
}

.eatv-search-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.eatv-search-row__section {
    color: var(--eatv-hover);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.eatv-search-row__section:hover {
    color: var(--eatv-headline);
}

.eatv-search-row__meta .eatv-card__meta ul {
    margin: 0;
}

.eatv-search-row__meta .eatv-card__meta li {
    color: #6c757d;
    font-size: 14px;
}

.eatv-search-row__meta .eatv-card__meta li::before {
    content: '\f017';
    margin-right: 6px;
    color: var(--eatv-hover);
    font-family: FontAwesome;
}

.eatv-search-row__media {
    position: relative;
    flex: 0 0 155px;
    align-self: flex-start;
    margin-top: 3px;
    border: 1px solid #dee2e6;
}

.eatv-search-row__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.eatv-search__empty {
    padding: 20px 0 40px;
    color: var(--eatv-muted);
}

.eatv-search__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.eatv-search__pages p {
    margin: 0;
    color: #555555;
    font-size: 13px;
}

.eatv-search__pages ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-search__pages li a,
.eatv-search__pages li span {
    display: block;
    min-width: 32px;
    padding: 5px 8px;
    margin-left: -1px;
    border: 1px solid #dee2e6;
    color: var(--eatv-headline);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.eatv-search__pages li a:hover {
    background: #f1f1f1;
}

.eatv-search__pages .is-active {
    position: relative;
    border-color: var(--eatv-headline);
    background: var(--eatv-headline);
    color: #ffffff;
}

.eatv-search__pages .is-disabled,
.eatv-search__pages .is-gap {
    color: #9a9a9a;
}

@media only screen and (max-width: 575px) {
    .eatv-search {
        padding: 25px 0 20px;
    }

    .eatv-search__bar,
    .eatv-search__summary {
        padding-right: 0;
        padding-left: 0;
    }

    .eatv-search__summary p {
        max-width: none;
        text-align: left;
    }

    .eatv-search__summary strong {
        display: inline;
    }

    .eatv-search-row__title {
        font-size: 16px;
    }

    .eatv-search-row__excerpt {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: 14px;
    }

    .eatv-search-row__media {
        flex-basis: 110px;
    }
}

/* The header's search box: hidden by style.css until its button opens it (is-open), with square corners. */
.header-search-light .search-input {
    border-radius: 0;
}

.header-search-light .search-input.is-open {
    display: block;
}

/*
 * Image captions on the story page: the story image (.eatv-figure) and the images Contenido's editor
 * puts in the body (figure.ql-image-figure > figcaption.ql-image-caption) share one look.
 */
.eatv-figure,
.story-body figure.ql-image-figure {
    margin: 0 0 30px;
}

.story-body figure.ql-image-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.eatv-caption,
.story-body figcaption.ql-image-caption {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    background: #f4f1f9;
    border-left: 3px solid var(--eatv-headline);
    color: #4a4a4a;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
}

.eatv-caption::before,
.story-body figcaption.ql-image-caption::before {
    content: '\f030';
    flex: none;
    color: var(--eatv-headline);
    font-family: FontAwesome;
    font-style: normal;
}

/* An empty caption from the editor (only its placeholder) shows nothing. */
.story-body figcaption.ql-image-caption:empty {
    display: none;
}

/* Image credit (e.g. "AFP via Getty Images"), over the bottom-left corner of the story image. Story page only. */
.eatv-image-credit {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 100%;
    padding: 6px 10px;
    background: rgba(17, 17, 17, 0.72);
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Story style 3's banner keeps its headline bottom-left, so the credit sits bottom-right there. */
.eatv-image-credit--right {
    left: auto;
    right: 0;
    z-index: 1;
}

/*
 * Body images with a credit: Contenido's editor writes <figure data-credit> with the image, a
 * span.ql-image-credit and the figcaption. The image and the credit share the first grid row, so the
 * credit sits over the image's bottom-left corner and never over the caption below.
 */
.story-body figure.ql-image-figure {
    display: grid;
}

.story-body figure.ql-image-figure > img,
.story-body figure.ql-image-figure > .ql-image-credit {
    grid-row: 1;
    grid-column: 1;
}

.story-body .ql-image-credit {
    align-self: end;
    justify-self: start;
    max-width: 100%;
    padding: 6px 10px;
    background: rgba(17, 17, 17, 0.72);
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Feature video on the story page: plays in place of the story image, the feature image as its poster. */
.eatv-story-video {
    display: block;
    width: 100%;
    max-height: 75vh;
    background: #000000;
}

/* On a video the controls run along the bottom, so the credit moves to the top corner. */
.eatv-image-credit--top {
    top: 0;
    bottom: auto;
    z-index: 1;
}

/* Story style 3 with a feature video: the video replaces the banner, the headline sits under it. */
.eatv-video-banner {
    background: #111111;
}

.eatv-video-banner .eatv-story-video {
    max-height: 80vh;
}

.eatv-video-banner__content {
    padding: 25px 0 30px;
}

.eatv-video-banner__title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 15px;
}

@media (max-width: 767px) {
    .eatv-video-banner__title {
        font-size: 26px;
    }
}

/* ▶ badge on listing images of stories that have a feature video (shared/video-badge). */
.eatv-media-link {
    position: relative;
    display: block;
}

.eatv-video-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    background: rgba(17, 17, 17, 0.72);
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    pointer-events: none;
}

.eatv-video-badge .fa {
    margin-left: 3px;
}

/* Videos in the story body: a <video> player (Post::bodyHtml()) or another embed such as YouTube, full width. */
.story-body .story-body-video,
.story-body iframe.ql-video {
    display: block;
    width: 100%;
    margin: 0 0 30px;
    border: 0;
    background: #000000;
}

.story-body iframe.ql-video {
    aspect-ratio: 16 / 9;
    height: auto;
}

/*
 * Captioned body videos from the EATV publish editor: <figure class="ql-video-figure"> with the <video>, an optional
 * span.ql-image-credit and the figcaption (styled with the image captions above). The credit shares the video's grid
 * cell and sits at the top, since the player's controls run along the bottom.
 */
.story-body figure.ql-video-figure {
    display: grid;
    margin: 0 0 30px;
}

.story-body figure.ql-video-figure > video,
.story-body figure.ql-video-figure > .ql-image-credit {
    grid-row: 1;
    grid-column: 1;
}

.story-body figure.ql-video-figure > video {
    display: block;
    width: 100%;
    max-height: 75vh;
    background: #000000;
}

.story-body figure.ql-video-figure > .ql-image-credit {
    align-self: start;
    z-index: 1;
}

/* Must Watch: a video file opened in the popup (main.js .popup-video). */
.mfp-video-popup {
    position: relative;
    width: min(960px, 92vw);
    margin: 0 auto;
}

.mfp-video-popup video {
    display: block;
    width: 100%;
    max-height: 80vh;
    background: #000000;
}

/*
 * Must Watch (home page video gallery): the template's sizes whatever the images are. The featured video keeps the
 * 770×556 shape; each listed video is a compact row with a fixed-width thumbnail as tall as the row.
 */
.eatv-must-watch__featured > img {
    aspect-ratio: 770 / 556;
    object-fit: cover;
}

/*
 * Beside the list (large screens), the featured video is exactly as tall as the listed videos: its column stretches
 * with the row, and the image fills it out of the flow, so the image's own height never sets the row's.
 */
@media (min-width: 992px) {
    .eatv-must-watch__featured {
        position: relative;
        height: 100%;
        min-height: 360px;
        overflow: hidden;
    }

    .eatv-must-watch__featured > img {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
    }

    /* The image is positioned now, so the template's gradient and the play button go back above it. */
    .eatv-must-watch__featured::before {
        z-index: 1;
    }

    .eatv-must-watch__featured .play-btn {
        z-index: 2;
    }
}

.eatv-must-watch__item {
    align-items: stretch;
    min-height: 150px;
}

.eatv-must-watch__thumb {
    flex: 0 0 145px;
    align-self: stretch;
}

.eatv-must-watch__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eatv-must-watch__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

@media (max-width: 575px) {
    .eatv-must-watch__thumb {
        flex-basis: 110px;
    }
}

/* An all-black page (the video page): the layout's body class eatv-dark turns the header black too; the footer already is. */
body.eatv-dark,
.eatv-dark .top-bar-top,
.eatv-dark .top-bar-bottom,
.eatv-dark .main-menu-area,
.eatv-dark .header-style2 .stick {
    background-color: #000000 !important;
}

.eatv-dark .top-bar-top {
    border-bottom-color: #222222 !important;
}

.eatv-dark .main-menu-area {
    border-bottom: 1px solid #222222;
}

.eatv-dark ul.news-info-list li,
.eatv-dark ul.header-social li a {
    color: #a8a8a8;
}

.eatv-dark .header-style2 .main-menu-area .ne-main-menu nav > ul > li > a {
    color: #ffffff;
}

.eatv-dark .header-style2 .main-menu-area .ne-main-menu nav > ul > li > a.is-highlight {
    color: #6fcf7f;
}

.eatv-dark .header-style2 .main-menu-area .ne-main-menu nav > ul > li > a:hover,
.eatv-dark .header-style2 .main-menu-area .ne-main-menu nav > ul > li.active > a {
    text-decoration-color: #e53935;
}

.eatv-dark .header-style2 .main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu {
    background-color: #111111;
}

.eatv-dark .header-style2 .main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu > li a,
.eatv-dark .header-style2 .main-menu-area .ne-main-menu nav ul .active ul.ne-dropdown-menu > li a {
    color: #ffffff;
}

.eatv-dark .header-style2 .main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu > li a:hover,
.eatv-dark .header-style2 .main-menu-area .ne-main-menu nav ul li ul.ne-dropdown-menu > li a:focus {
    color: #ffffff;
    background-color: #2a2a2a;
}

.eatv-dark .header-style2 .header-action-item ul li {
    border-right-color: #333333;
}

.eatv-dark .header-style2 .header-action-item ul li .search-button i,
.eatv-dark .header-search-light button {
    color: #ffffff;
}

.eatv-dark .header-style2 .offcanvas-menu-btn a.menu-bar span,
.eatv-dark .header-style2 .offcanvas-menu-btn a.menu-times span {
    background-color: #ffffff;
}

/* The video page (/watch/…), laid out like a BBC video page: black, the player and its story left, "Explore more" right. */
.eatv-watch {
    padding: 24px 0 40px;
    background: #000000;
    color: #e8e8e8;
}

.eatv-watch__player {
    position: relative;
}

.eatv-watch__player video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.eatv-watch__unmute {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 8px 14px;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    color: #111111;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.eatv-watch__title {
    margin: 18px 0 14px;
    color: #ffffff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}

.eatv-watch__summary p {
    margin: 0 0 14px;
    color: #e0e0e0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.5;
}

.eatv-watch__link {
    color: #ffffff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    text-decoration: underline;
}

.eatv-watch__link:hover {
    color: var(--eatv-hover);
}

.eatv-watch__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 6px 0 14px;
    padding: 0;
    list-style: none;
    color: #a8a8a8;
    font-size: 13px;
}

.eatv-watch__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.eatv-watch__tags a,
.eatv-watch__tags span {
    display: inline-block;
    padding: 10px 16px;
    background: #3a3b3e;
    color: #f2f2f2;
    font-size: 15px;
}

.eatv-watch__tags a:hover {
    background: #4c4d51;
    color: #ffffff;
}

.eatv-watch__share {
    padding: 0;
    border: 0;
    background: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.eatv-watch__copied {
    margin-left: 10px;
    color: #a8a8a8;
    font-size: 13px;
}

.eatv-watch-more__heading {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.eatv-watch-more {
    margin: 0;
    padding: 0 8px 0 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-color: #ffffff transparent;
    scrollbar-width: thin;
}

.eatv-watch-more li + li {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #3a3b3e;
}

.eatv-watch-more__item {
    display: flex;
    gap: 14px;
    color: #ffffff;
}

.eatv-watch-more__item:hover .eatv-watch-more__title {
    text-decoration: underline;
}

.eatv-watch-more__thumb {
    position: relative;
    flex: 0 0 176px;
}

.eatv-watch-more__thumb img {
    display: block;
    width: 176px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.eatv-watch-more__play {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #000000;
    color: #ffffff;
    font-size: 13px;
}

.eatv-watch-more__title {
    color: #ffffff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 19px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

@media (max-width: 991px) {
    .eatv-watch-more__heading {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .eatv-watch__title {
        font-size: 24px;
    }

    .eatv-watch-more__thumb,
    .eatv-watch-more__thumb img {
        flex-basis: 130px;
        width: 130px;
    }

    .eatv-watch-more__title {
        font-size: 16px;
    }
}

/* The play button on Must Watch's featured video (instead of the template's play.png). */
.eatv-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto;
    background: rgba(17, 17, 17, 0.6);
    border: 3px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-size: 28px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.eatv-play-icon .fa {
    margin-left: 5px;
}

.play-btn:hover .eatv-play-icon {
    background: var(--eatv-hover);
    transform: scale(1.08);
}

@media (max-width: 575px) {
    .eatv-play-icon {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }
}

/* Schedule page (/schedule), laid out like eatv.tv/schedule. */
.eatv-schedule {
    --eatv-schedule-tab: #c2418b;
    --eatv-schedule-tab-active: #d26fa9;
    --eatv-schedule-date: #c58bcf;
    --eatv-schedule-title: #6fa8dc;
    padding: 30px 0 50px;
    background: #ffffff;
}

.eatv-schedule__heading {
    margin: 0 0 20px;
    font-size: 44px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--eatv-headline);
}

.eatv-schedule__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--eatv-schedule-tab);
}

.eatv-schedule__day {
    display: block;
    padding: 14px 6px;
    text-align: center;
    font-size: 17px;
    color: #ffffff;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.eatv-schedule__day:first-child {
    border-left: 0;
}

.eatv-schedule__day:hover,
.eatv-schedule__day:focus,
.eatv-schedule__day.is-active {
    color: #ffffff;
    background: var(--eatv-schedule-tab-active);
}

.eatv-schedule__date {
    margin: 26px 0 18px;
    font-size: 28px;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--eatv-schedule-date);
}

.eatv-schedule__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-schedule__item {
    display: grid;
    grid-template-columns: 115px 215px 1fr;
    gap: 0 45px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid #e8e8e8;
}

.eatv-schedule__time {
    font-size: 28px;
    color: #111111;
}

.eatv-schedule__logo {
    display: block;
    width: 215px;
    aspect-ratio: 215 / 155;
    padding: 8px;
    box-sizing: border-box;
    object-fit: contain;
    background: #f2f2f2;
}

.eatv-schedule__title {
    margin: 6px 0 4px;
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--eatv-schedule-title);
}

.eatv-schedule__description {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    color: #111111;
}

.eatv-schedule__empty {
    padding: 20px 0;
    color: var(--eatv-muted);
}

@media (max-width: 767px) {
    .eatv-schedule__heading {
        font-size: 32px;
    }

    .eatv-schedule__days {
        display: flex;
        overflow-x: auto;
    }

    .eatv-schedule__day {
        flex: 0 0 auto;
        padding: 12px 14px;
        font-size: 15px;
    }

    .eatv-schedule__date {
        font-size: 20px;
    }

    .eatv-schedule__item {
        grid-template-columns: 60px 110px 1fr;
        gap: 0 14px;
    }

    .eatv-schedule__time {
        font-size: 18px;
    }

    .eatv-schedule__logo {
        width: 110px;
    }

    .eatv-schedule__title {
        margin-top: 0;
        font-size: 17px;
    }

    .eatv-schedule__description {
        font-size: 14px;
    }
}

/* Shows page (/shows), laid out like eatv.tv/shows: four cards a row, each a cover over a red bar with when it airs. */
.eatv-shows {
    --eatv-shows-red: #d10000;
    --eatv-shows-dark: #333333;
    padding: 30px 0 50px;
    background: #ffffff;
}

.eatv-shows__heading {
    margin: 0 0 20px;
    font-size: 44px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--eatv-shows-red);
}

.eatv-shows__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 45px 25px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-shows__card {
    display: flex;
    flex-direction: column;
}

.eatv-shows__cover {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f2f2f2;
}

.eatv-shows__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

a.eatv-shows__cover:hover img {
    transform: scale(1.04);
}

.eatv-shows__bar {
    display: flex;
    align-items: stretch;
    min-height: 32px;
    background: var(--eatv-shows-red);
}

.eatv-shows__airing {
    flex: 1;
    align-self: center;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.3;
    color: #ffffff;
}

.eatv-shows__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    background: var(--eatv-shows-dark);
}

.eatv-shows__action {
    font-size: 22px;
    line-height: 1;
    color: #ffffff;
}

.eatv-shows__action:hover,
.eatv-shows__action:focus {
    color: var(--eatv-hover);
}

.eatv-shows__empty {
    grid-column: 1 / -1;
    padding: 20px 0;
    color: var(--eatv-muted);
}

@media (max-width: 991px) {
    .eatv-shows__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .eatv-shows__heading {
        font-size: 32px;
    }

    .eatv-shows__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 16px;
    }
}

@media (max-width: 420px) {
    .eatv-shows__grid {
        grid-template-columns: 1fr;
    }
}

/* Show profile (/shows/{show}): a dark hero with the banner behind the name and the promo, then the about text,
   episodes and stories beside the week's airings and the presenters. */
.eatv-profile {
    --eatv-shows-red: #d10000;
    --eatv-shows-dark: #333333;
    padding-bottom: 50px;
    background: #ffffff;
}

.eatv-profile__hero {
    position: relative;
    padding: 18px 0 34px;
    margin-bottom: 30px;
    color: #ffffff;
    background-color: #1d1236;
    background-position: center;
    background-size: cover;
}

.eatv-profile__hero.has-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 10, 40, 0.94) 0%, rgba(20, 10, 40, 0.86) 50%, rgba(20, 10, 40, 0.8) 100%);
    /* The banner is mood, not content: blurred so its own lettering never competes with the title. */
    backdrop-filter: blur(10px);
}

.eatv-profile__hero > .container {
    position: relative;
}

.eatv-profile__crumbs {
    margin-bottom: 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.eatv-profile__crumbs a {
    color: #ffffff;
}

.eatv-profile__crumbs a:hover {
    color: var(--eatv-hover);
}

.eatv-profile__intro {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 30px;
    align-items: center;
}

.eatv-profile__title {
    margin: 0 0 12px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    color: #ffffff;
}

.eatv-profile__airing {
    margin: 0 0 10px;
    font-size: 17px;
    color: #ffffff;
}

.eatv-profile__next {
    margin: 0 0 18px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
}

.eatv-profile__badge {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}

.eatv-profile__next.is-live .eatv-profile__badge {
    background: var(--eatv-shows-red);
}

.eatv-profile__social {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-profile__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 17px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

.eatv-profile__social a:hover {
    background: var(--eatv-shows-red);
}

.eatv-profile__media video,
.eatv-profile__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.eatv-profile__section-title {
    margin: 0 0 16px;
    padding-bottom: 8px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--eatv-headline);
    border-bottom: 2px solid var(--eatv-shows-red);
}

.eatv-profile__section-title--link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.eatv-profile__all {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    color: var(--eatv-shows-red);
}

.eatv-profile__about {
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 1.65;
    color: #222222;
}

#episodes {
    margin-bottom: 32px;
    scroll-margin-top: 20px;
}

.eatv-profile__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.eatv-profile__episode,
.eatv-profile__story {
    display: block;
    color: #111111;
}

.eatv-profile__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f2f2f2;
}

.eatv-profile__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.eatv-profile__episode:hover .eatv-profile__thumb img,
.eatv-profile__story:hover .eatv-profile__thumb img {
    transform: scale(1.04);
}

.eatv-profile__play {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 14px;
    color: #ffffff;
    background: rgba(17, 17, 17, 0.75);
}

.eatv-profile__episode:hover .eatv-profile__play {
    background: var(--eatv-shows-red);
}

.eatv-profile__card-title {
    display: block;
    margin-top: 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--eatv-headline);
}

.eatv-profile__episode:hover .eatv-profile__card-title,
.eatv-profile__story:hover .eatv-profile__card-title {
    color: var(--eatv-hover);
}

.eatv-profile__card-date {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--eatv-muted);
}

.eatv-profile__box {
    margin-bottom: 26px;
    padding: 18px 20px;
    background: #f5f5f5;
    border-top: 3px solid var(--eatv-shows-red);
}

.eatv-profile__box-title {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--eatv-headline);
}

.eatv-profile__week {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin: 0 0 14px;
    font-size: 15px;
}

.eatv-profile__week dt {
    font-weight: 600;
    color: #111111;
}

.eatv-profile__week dd {
    margin: 0;
    color: #333333;
}

.eatv-profile__more {
    font-weight: 600;
    color: var(--eatv-shows-red);
}

.eatv-profile__people {
    margin-bottom: 32px;
}

.eatv-profile__presenters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-profile__presenter {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px;
    background: #f5f5f5;
}

.eatv-profile__presenter:only-child {
    grid-column: 1 / -1;
}

.eatv-profile__photo {
    flex: none;
    width: 96px;
    height: 96px;
    object-fit: cover;
}

.eatv-profile__photo.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #bbbbbb;
    background: #e3e3e3;
}

.eatv-profile__presenter-name {
    margin: 2px 0 2px;
    font-size: 17px;
    font-weight: 700;
    color: #111111;
}

.eatv-profile__presenter-role {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--eatv-shows-red);
}

.eatv-profile__presenter-bio {
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
}

.eatv-profile__presenter-bio p,
.eatv-profile__presenter-bio ul,
.eatv-profile__presenter-bio ol {
    margin: 0 0 6px;
}

.eatv-profile__others {
    margin-top: 20px;
}

@media (max-width: 991px) {
    .eatv-profile__intro {
        grid-template-columns: 1fr;
    }

    .eatv-profile__title {
        font-size: 36px;
    }
}

@media (max-width: 575px) {
    .eatv-profile__title {
        font-size: 28px;
    }

    .eatv-profile__grid,
    .eatv-profile__presenters {
        grid-template-columns: 1fr;
    }
}

/* ShowCase show profile (template "showcase"): a hero fading into the page with the heading and buttons, a row of full
   episodes, a grid of clips (5 a row), the social links, the featured clip, then the Classic blocks below. */
.eatv-showcase__hero {
    position: relative;
    padding: 18px 0 70px;
    margin-bottom: 10px;
    color: #ffffff;
    background-color: var(--eatv-headline);
    background-position: center;
    background-size: cover;
}

.eatv-showcase__hero.has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Darkened for the heading, then faded into the white page below. */
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, #ffffff 100%),
        linear-gradient(90deg, rgba(29, 18, 54, 0.88) 0%, rgba(29, 18, 54, 0.55) 60%, rgba(29, 18, 54, 0.3) 100%);
}

.eatv-showcase__hero > .container {
    position: relative;
    min-height: 260px;
}

.eatv-showcase__heading {
    max-width: 720px;
    margin: 40px 0 10px;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.05;
    color: #ffffff;
}

.eatv-showcase__name {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.eatv-showcase__name::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 3px;
    margin-right: 10px;
    vertical-align: middle;
    background: var(--eatv-shows-red);
}

.eatv-showcase__airing {
    margin: 0 0 22px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
}

.eatv-showcase__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.eatv-showcase__button {
    display: inline-block;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    border: 2px solid #ffffff;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.eatv-showcase__button:hover,
.eatv-showcase__button:focus {
    color: #ffffff;
    background: var(--eatv-headline);
    border-color: var(--eatv-headline);
}

.eatv-showcase__button.is-primary {
    background: var(--eatv-shows-red);
    border-color: var(--eatv-shows-red);
}

.eatv-showcase__button.is-primary:hover,
.eatv-showcase__button.is-primary:focus {
    background: var(--eatv-headline);
    border-color: var(--eatv-headline);
}

.eatv-showcase__section {
    margin-bottom: 40px;
    scroll-margin-top: 20px;
}

.eatv-showcase__section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 8px;
    font-size: 24px;
    font-weight: 800;
    color: var(--eatv-headline);
    border-bottom: 2px solid var(--eatv-shows-red);
}

.eatv-showcase__arrows {
    display: flex;
    gap: 6px;
}

.eatv-showcase__arrow {
    width: 34px;
    height: 34px;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
    background: var(--eatv-headline);
    border: 0;
    cursor: pointer;
}

.eatv-showcase__arrow:hover,
.eatv-showcase__arrow:focus {
    background: var(--eatv-shows-red);
}

/* Five cards in view; more scroll sideways (arrows or swipe). */
.eatv-showcase__row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 4 * 18px) / 5);
    gap: 18px;
    margin: 0;
    padding: 0 0 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    list-style: none;
}

.eatv-showcase__row > li {
    scroll-snap-align: start;
}

.eatv-showcase__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-showcase__card {
    display: block;
    color: #111111;
}

.eatv-showcase__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f2f2f2;
}

.eatv-showcase__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.eatv-showcase__card:hover .eatv-showcase__thumb img {
    transform: scale(1.04);
}

.eatv-showcase__play {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 12px;
    color: #ffffff;
    background: var(--eatv-shows-red);
}

.eatv-showcase__play.is-large {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: 72px;
    height: 72px;
    font-size: 26px;
    transform: translate(-50%, -50%);
}

.eatv-showcase__card:hover .eatv-showcase__play,
.eatv-showcase__featured-media:hover .eatv-showcase__play {
    background: var(--eatv-headline);
}

.eatv-showcase__length {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: rgba(17, 17, 17, 0.8);
}

.eatv-showcase__date,
.eatv-showcase__meta {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--eatv-muted);
}

.eatv-showcase__tag {
    color: var(--eatv-shows-red);
    text-transform: uppercase;
}

.eatv-showcase__title {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--eatv-headline);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.eatv-showcase__card:hover .eatv-showcase__title {
    color: var(--eatv-hover);
}

.eatv-showcase__follow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 24px;
    margin-bottom: 40px;
    padding: 22px 20px;
    background: var(--eatv-headline);
}

.eatv-showcase__follow-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
}

.eatv-showcase__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-showcase__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 20px;
    color: var(--eatv-headline);
    background: #ffffff;
}

.eatv-showcase__social a:hover,
.eatv-showcase__social a:focus {
    color: #ffffff;
    background: var(--eatv-shows-red);
}

.eatv-showcase__featured {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 34px;
    align-items: center;
    margin-bottom: 44px;
    padding: 26px;
    background: #f5f3fa;
    border-left: 4px solid var(--eatv-shows-red);
}

.eatv-showcase__featured-media {
    position: relative;
    display: block;
    overflow: hidden;
}

.eatv-showcase__featured-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.eatv-showcase__eyebrow {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--eatv-shows-red);
}

.eatv-showcase__featured-title {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--eatv-headline);
}

.eatv-showcase__featured-description {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
}

.eatv-showcase__next {
    margin: 0 0 16px;
    font-size: 15px;
    color: #333333;
}

.eatv-showcase__next .eatv-profile__badge {
    background: var(--eatv-headline);
}

.eatv-showcase__next.is-live .eatv-profile__badge {
    background: var(--eatv-shows-red);
}

@media (max-width: 1199px) {
    .eatv-showcase__row {
        grid-auto-columns: calc((100% - 3 * 18px) / 4);
    }

    .eatv-showcase__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .eatv-showcase__heading {
        font-size: 38px;
    }

    .eatv-showcase__row {
        grid-auto-columns: calc((100% - 2 * 18px) / 3);
    }

    .eatv-showcase__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .eatv-showcase__featured {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .eatv-showcase__hero > .container {
        min-height: 200px;
    }

    .eatv-showcase__heading {
        margin-top: 24px;
        font-size: 30px;
    }

    .eatv-showcase__row {
        grid-auto-columns: 70%;
    }

    .eatv-showcase__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 14px;
    }

    .eatv-showcase__featured {
        padding: 16px;
    }

    .eatv-showcase__featured-title {
        font-size: 22px;
    }
}

/* Entertainment and Sport show profiles (eatv-profile--accented): in the show's accent colour (--show-accent, set
   inline), black (eatv-profile--dark, the page's header and footer too) or white (eatv-profile--light) as the show
   picks; the hero stays dark in both. The shared profile blocks (about, stories, airings, more shows, ShowCase cards)
   follow through their variables, the rest through the --p-* colours below. */
.eatv-profile--dark {
    --p-bg: #000000;
    --p-text: #e8e8e8;
    --p-strong: #ffffff;
    --p-soft: #d8d8d8;
    --p-muted: #a8a8a8;
    --p-bio: #bdbdbd;
    --p-surface: #141414;
    --p-surface-2: #1c1c1c;
    --p-control: #2a2a2a;
    --p-band: #111111;
    --p-line: #222222;
    --p-scroll: #444444;
    --p-icon: #3a3a3a;
    --p-hero-end: #000000;
}

.eatv-profile--light {
    --p-bg: #ffffff;
    --p-text: #333333;
    --p-strong: #111111;
    --p-soft: #333333;
    --p-muted: #646464;
    --p-bio: #555555;
    --p-surface: #f5f5f5;
    --p-surface-2: #ececec;
    --p-control: #e2e2e2;
    --p-band: #f3f3f3;
    --p-line: #e3e3e3;
    --p-scroll: #c4c4c4;
    --p-icon: #c4c4c4;
    /* The hero ends dark above the white page instead of fading into it. */
    --p-hero-end: rgba(0, 0, 0, 0.8);
}

.eatv-profile--accented {
    --eatv-shows-red: var(--show-accent);
    --eatv-headline: var(--p-strong);
    --eatv-hover: var(--show-accent);
    --eatv-muted: var(--p-muted);
    background: var(--p-bg);
    color: var(--p-text);
}

.eatv-profile--accented .eatv-profile__about,
.eatv-profile--accented .eatv-profile__week dd,
.eatv-profile--accented .eatv-showcase__next {
    color: var(--p-soft);
}

.eatv-profile--accented .eatv-profile__week dt {
    color: var(--p-strong);
}

.eatv-profile--accented .eatv-profile__about a {
    color: var(--show-accent);
}

.eatv-profile--accented .eatv-profile__box {
    background: var(--p-surface);
}

.eatv-profile--accented .eatv-profile__thumb,
.eatv-profile--accented .eatv-showcase__thumb {
    background: var(--p-surface-2);
}

.eatv-profile--accented .eatv-showcase__card {
    color: var(--p-strong);
}

.eatv-profile--accented .eatv-showcase__section-title {
    border-bottom-color: var(--p-control);
}

.eatv-profile--accented .eatv-showcase__section-title::after {
    content: none;
}

.eatv-profile--accented .eatv-showcase__row {
    scrollbar-color: var(--p-scroll) transparent;
}

.eatv-profile--accented .eatv-showcase__arrow {
    color: var(--p-strong);
    background: var(--p-control);
}

.eatv-profile--accented .eatv-showcase__arrow:hover,
.eatv-profile--accented .eatv-showcase__arrow:focus {
    color: #ffffff;
    background: var(--show-accent);
}

.eatv-profile--accented .eatv-showcase__card:hover .eatv-showcase__play {
    background: var(--show-accent);
}

.eatv-profile--accented .eatv-showcase__next .eatv-profile__badge {
    background: #2a2a2a;
}

.eatv-profile--accented .eatv-showcase__next.is-live .eatv-profile__badge {
    background: var(--show-accent);
}

.eatv-profile--accented .pagination-btn-wrapper ul li a {
    color: var(--p-strong);
    background-color: var(--p-surface-2);
}

.eatv-profile--accented .pagination-btn-wrapper ul li a:hover,
.eatv-profile--accented .pagination-btn-wrapper ul .active a {
    color: #ffffff;
    background-color: var(--show-accent);
}

/* Entertainment show profile (template "entertainment"): the promo playing muted behind the name, a clip mosaic, more
   clips, the full episodes row, the hosts as portraits, then the shared blocks. The hero buttons (eatv-hero-button),
   mosaic (eatv-mosaic, eatv-tile), clip grid (eatv-clip-grid) and Follow band (eatv-follow) are Sport's too. */
.eatv-ent__hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 560px;
    margin-bottom: 30px;
    overflow: hidden;
    background: #000000;
}

.eatv-ent__promo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark at the bottom and left for the text, fading into the black page. */
.eatv-ent__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 75%, var(--p-hero-end) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}

.eatv-ent__hero-text {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 18px 0 30px;
}

.eatv-ent__crumbs {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    z-index: 1;
}

.eatv-ent__title {
    max-width: 760px;
    margin: 0 0 8px;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    color: #ffffff;
}

.eatv-ent__title::after {
    content: '';
    display: block;
    width: 70px;
    height: 5px;
    margin-top: 14px;
    background: var(--show-accent);
}

.eatv-ent__heading {
    max-width: 640px;
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}

.eatv-ent__airing {
    margin: 0 0 20px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
}

.eatv-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.eatv-hero-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    border: 2px solid #ffffff;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.eatv-hero-button:hover,
.eatv-hero-button:focus {
    color: #000000;
    background: #ffffff;
}

.eatv-hero-button.is-primary {
    background: var(--show-accent);
    border-color: var(--show-accent);
}

.eatv-hero-button.is-primary:hover,
.eatv-hero-button.is-primary:focus {
    color: #000000;
    background: #ffffff;
    border-color: #ffffff;
}

.eatv-ent__sound {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 42px;
    height: 42px;
    font-size: 18px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.eatv-ent__sound:hover,
.eatv-ent__sound:focus {
    background: var(--show-accent);
    border-color: var(--show-accent);
}

/* The featured clip over two rows on the left, four beside it. */
.eatv-mosaic {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-mosaic > .is-featured {
    grid-row: span 2;
}

/* Fewer than 5 clips: the others stacked in one column beside the featured clip, which spans them all. */
@media (min-width: 992px) {
    .eatv-mosaic.is-count-1 {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .eatv-mosaic.is-count-2,
    .eatv-mosaic.is-count-3,
    .eatv-mosaic.is-count-4 {
        grid-template-columns: 2fr 1fr;
    }

    .eatv-mosaic.is-count-1 > .is-featured,
    .eatv-mosaic.is-count-2 > .is-featured {
        grid-row: auto;
    }

    .eatv-mosaic.is-count-4 > .is-featured {
        grid-row: span 3;
    }
}

.eatv-tile {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    color: #ffffff;
    background: var(--p-surface-2);
}

.eatv-tile img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.eatv-tile:hover img {
    transform: scale(1.04);
}

.eatv-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.9) 100%);
}

.eatv-tile__text {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 50px;
    z-index: 1;
}

.eatv-tile .eatv-showcase__play,
.eatv-tile .eatv-showcase__length {
    z-index: 1;
}

.eatv-tile .eatv-showcase__play {
    left: 14px;
    bottom: 12px;
}

.eatv-tile__tag {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--show-accent);
}

.eatv-tile__title {
    display: -webkit-box;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.is-featured .eatv-tile__title {
    font-size: 28px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.eatv-tile:hover .eatv-tile__title {
    text-decoration: underline;
    text-decoration-color: var(--show-accent);
}

.eatv-clip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The hosts as tall portraits, four a row, the role in the accent colour. */
.eatv-ent__hosts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-ent__portrait {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    font-size: 64px;
    color: var(--p-icon);
    background: var(--p-surface-2);
    border-bottom: 4px solid var(--show-accent);
}

.eatv-ent__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eatv-ent__host-name {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 800;
    color: var(--p-strong);
}

.eatv-ent__host-role {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--show-accent);
}

.eatv-ent__host-bio {
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.5;
    color: var(--p-bio);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.eatv-ent__host-bio p {
    margin: 0 0 6px;
}

.eatv-follow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 10px 0 40px;
    padding: 26px 30px;
    background: var(--show-accent);
    scroll-margin-top: 90px;
}

.eatv-follow__title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
}

.eatv-follow__social {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-follow__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 18px;
    color: var(--show-accent);
    background: #ffffff;
}

.eatv-follow__social a:hover,
.eatv-follow__social a:focus {
    color: #ffffff;
    background: #000000;
}

@media (max-width: 1199px) {
    .eatv-ent__title {
        font-size: 52px;
    }
}

@media (max-width: 991px) {
    .eatv-ent__hero {
        min-height: 460px;
    }

    .eatv-mosaic {
        grid-template-columns: 1fr 1fr;
    }

    .eatv-mosaic > .is-featured {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .eatv-clip-grid,
    .eatv-ent__hosts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .eatv-ent__hero {
        min-height: 380px;
    }

    .eatv-ent__crumbs {
        display: none;
    }

    .eatv-ent__title {
        font-size: 36px;
    }

    .eatv-ent__heading {
        font-size: 18px;
    }

    .is-featured .eatv-tile__title {
        font-size: 20px;
    }

    .eatv-clip-grid,
    .eatv-ent__hosts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eatv-follow {
        padding: 20px;
    }
}

/* Sport show profile (template "sport"), a matchday page: the banner hero with the competitions beside the next airing
   and its countdown, the fixtures strip, the highlights mosaic, the news and full episodes lists, the panel. */
.eatv-sport__hero {
    position: relative;
    padding: 18px 0 44px;
    background-color: #0b0b0b;
    background-position: center;
    background-size: cover;
}

.eatv-sport__hero.has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, var(--p-hero-end) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0.45) 100%);
}

.eatv-sport__hero > .container {
    position: relative;
}

.eatv-sport__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 30px;
    align-items: end;
    min-height: 300px;
}

.eatv-sport__title {
    margin: 0 0 10px;
    padding-left: 16px;
    font-size: 56px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    text-transform: uppercase;
    color: #ffffff;
    border-left: 8px solid var(--show-accent);
}

.eatv-sport__heading {
    max-width: 640px;
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
}

.eatv-sport__airing {
    margin: 0 0 16px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
}

.eatv-sport__competitions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.eatv-sport__competitions li {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--show-accent);
}

.eatv-sport__next {
    padding: 20px 22px;
    background: rgba(0, 0, 0, 0.75);
    border-top: 4px solid var(--show-accent);
}

.eatv-sport__next-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--show-accent);
}

.eatv-sport__live-dot {
    width: 10px;
    height: 10px;
    background: var(--show-accent);
    animation: eatv-sport-pulse 1.4s ease-in-out infinite;
}

@keyframes eatv-sport-pulse {
    50% {
        opacity: 0.3;
    }
}

.eatv-sport__next-time {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
}

.eatv-sport__countdown {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}

.eatv-sport__next-link {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.eatv-sport__next-link:hover {
    color: var(--show-accent);
}

/* Upcoming matches in a band under the hero, sideways on small screens. */
.eatv-sport__fixtures {
    margin-bottom: 34px;
    padding: 18px 0;
    background: var(--p-band);
    border-top: 1px solid var(--p-line);
    border-bottom: 1px solid var(--p-line);
}

.eatv-sport__fixtures .container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.eatv-sport__fixtures-title {
    flex: none;
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--show-accent);
}

.eatv-sport__fixture-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 270px);
    gap: 12px;
    flex: 1;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-color: var(--p-scroll) transparent;
    scrollbar-width: thin;
}

.eatv-sport__fixture {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    background: var(--p-surface-2);
    border-left: 3px solid var(--p-control);
}

.eatv-sport__fixture.is-live {
    border-left-color: var(--show-accent);
}

.eatv-sport__fixture-competition {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--p-muted);
}

.eatv-sport__fixture-teams {
    font-size: 15px;
    font-weight: 800;
    color: var(--p-strong);
}

.eatv-sport__versus {
    margin: 0 4px;
    font-weight: 400;
    color: var(--show-accent);
}

.eatv-sport__fixture-time {
    font-size: 13px;
    color: var(--p-soft);
}

.eatv-sport__fixture.is-live .eatv-sport__fixture-time {
    font-weight: 700;
    color: var(--show-accent);
}

/* The news and full episodes as lists: a small image, the title and the date. */
.eatv-sport__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-sport__list li + li {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--p-line);
}

.eatv-sport__item {
    display: flex;
    gap: 14px;
    color: var(--p-strong);
}

.eatv-sport__item-thumb {
    position: relative;
    flex: 0 0 150px;
    overflow: hidden;
    background: var(--p-surface-2);
}

.eatv-sport__item-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.eatv-sport__item-title {
    display: -webkit-box;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--p-strong);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.eatv-sport__item:hover .eatv-sport__item-title {
    color: var(--show-accent);
}

.eatv-sport__item-meta {
    display: block;
    font-size: 13px;
    color: var(--p-muted);
}

/* The presenters as pundits: a square photo beside the name and role, three a row. */
.eatv-sport__panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-sport__pundit {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--p-surface);
    border-bottom: 3px solid var(--show-accent);
}

.eatv-sport__pundit-photo {
    display: flex;
    flex: 0 0 76px;
    align-items: center;
    justify-content: center;
    height: 76px;
    overflow: hidden;
    font-size: 32px;
    color: var(--p-icon);
    background: var(--p-surface-2);
}

.eatv-sport__pundit-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eatv-sport__pundit-name {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: var(--p-strong);
}

.eatv-sport__pundit-role {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--show-accent);
}

@media (max-width: 991px) {
    .eatv-sport__intro {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-top: 40px;
    }

    .eatv-sport__title {
        font-size: 44px;
    }

    .eatv-sport__fixtures .container {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .eatv-sport__panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eatv-sport__list {
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .eatv-sport__title {
        font-size: 34px;
    }

    .eatv-sport__item-thumb {
        flex-basis: 110px;
    }

    .eatv-sport__panel {
        grid-template-columns: 1fr;
    }
}

/* Home › Shows: every card's image cropped to the custom covers' 760×490, so a pinned show's 4:3 cover lines up. */
.eatv-feature-shows .img-overlay-70 > img {
    width: 100%;
    aspect-ratio: 760 / 490;
    object-fit: cover;
}

/* The footer (Contenido's Footer page), black, laid out like eatv.tv's: the logo, about line and social links, then
   columns whose title and links take the column's colour (--footer-color), the links underlined and separated by
   slashes, then the copyright. Square corners throughout. */
.eatv-footer {
    background-color: #000000;
    color: #b5b5b5;
    padding: 56px 0 22px;
}

.eatv-footer__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    padding-bottom: 36px;
    border-bottom: 1px solid #262626;
}

.eatv-footer__logo img {
    display: block;
    max-height: 48px;
    width: auto;
}

.eatv-footer__about {
    flex: 1 1 320px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #b5b5b5;
}

.eatv-footer__social {
    display: flex;
    gap: 8px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.eatv-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #3a3a3a;
    color: #ffffff;
    font-size: 16px;
    transition: background-color 0.2s, border-color 0.2s;
}

.eatv-footer__social a:hover,
.eatv-footer__social a:focus-visible {
    background-color: #d10000;
    border-color: #d10000;
    color: #ffffff;
}

.eatv-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px 64px;
    padding: 40px 0 8px;
}

.eatv-footer__title {
    margin: 0 0 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--footer-color);
    color: var(--footer-color);
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.eatv-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 2.5;
}

.eatv-footer__links li {
    display: inline;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 300;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--footer-color);
}

.eatv-footer__links li::after {
    content: '/';
    margin: 0 8px 0 6px;
    font-weight: 500;
}

.eatv-footer__links a,
.eatv-footer__links span {
    color: var(--footer-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
}

.eatv-footer__links span {
    opacity: 0.8;
}

.eatv-footer__links a:hover,
.eatv-footer__links a:focus-visible {
    color: #ffffff;
    text-decoration-color: #ffffff;
}

.eatv-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid #262626;
}

.eatv-footer__copyright {
    margin: 0;
    font-size: 13px;
    color: #8c8c8c;
}

.eatv-footer__top {
    font-size: 13px;
    color: #8c8c8c;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eatv-footer__top:hover,
.eatv-footer__top:focus-visible {
    color: #ffffff;
}

@media (max-width: 575px) {
    .eatv-footer {
        padding-top: 40px;
    }

    .eatv-footer__social {
        margin-left: 0;
    }

    .eatv-footer__links li {
        font-size: 17px;
    }
}

/* The header's logo (Contenido's Header page): any proportions, kept to the logo row's height. */
.eatv-header__logo {
    display: block;
    max-height: 90px;
    max-width: 100%;
    width: auto;
}

/* The mobile bar's logo (the footer's, main.js): any proportions, kept to the bar's height. */
.mean-container .mean-bar .mobile-menu-nav-back .logo-mobile img {
    display: block;
    max-height: 40px;
    max-width: 160px;
    width: auto;
}

/* Ads (Contenido's Ads page, Shared\AdSlot): the image fitted to its placement, centred, under a small
   "Advertisement" label. An empty placement takes no room. */
.eatv-ad.is-empty {
    display: none;
}

.eatv-ad__box {
    margin: 0 auto;
    text-align: center;
}

.eatv-ad__label {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.eatv-ad__link,
.eatv-ad__link:hover {
    display: block;
}

.eatv-ad__image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.eatv-ad--header .eatv-ad__box {
    margin-right: 0;
}

.eatv-ad--mobile-banner {
    padding: 10px 16px;
    background-color: #f5f5f5;
}

.eatv-ad--home-billboard,
.eatv-ad--home-billboard-lower {
    padding: 30px 15px;
}

.eatv-ad--in-story {
    margin: 24px 0 28px;
}

.eatv-ad--sidebar,
.eatv-ad--home-sidebar {
    margin-bottom: 40px;
}

/* Each placement only where it fits: the header banner on computers, the phone banner on phones. */
@media (min-width: 992px) {
    .eatv-ad--mobile-banner {
        display: none;
    }
}

/* Ads on the Shows pages: the grid's billboard spans every column; a profile's banner sits under its hero; on a black
   profile the label is lighter. */
.eatv-shows__grid > .eatv-shows__ad {
    grid-column: 1 / -1;
}

.eatv-shows__ad .eatv-ad:not(.is-empty) {
    padding: 10px 0;
}

div.eatv-shows__ad .eatv-ad:not(.is-empty) {
    padding-top: 40px;
}

.eatv-profile__ad .eatv-ad:not(.is-empty) {
    padding: 28px 0 4px;
}

.eatv-profile aside .eatv-ad--show-sidebar {
    margin-top: 30px;
}

.eatv-profile--dark .eatv-ad__label {
    color: #8c8c8c;
}

/* The video page's box (black page): under Explore more, the label lighter. */
.eatv-watch .eatv-ad--video-sidebar:not(.is-empty) {
    margin-top: 28px;
}

.eatv-dark .eatv-ad__label {
    color: #8c8c8c;
}

/* Share box (SiteSetting share): each network in its own colour, Copy link copies the address and says so. */
.eatv-share ul.social-default li {
    margin-bottom: 4px;
}
.post-share-area.eatv-share ul.social-default li .eatv-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 48px;
    height: 44px;
    padding: 0 12px;
    line-height: 1;
    border: 2px solid var(--eatv-share-color, #333333);
    background: var(--eatv-share-color, #333333);
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease-out, color 0.3s ease-out;
}
.post-share-area.eatv-share ul.social-default li .eatv-share__link:hover,
.post-share-area.eatv-share ul.social-default li .eatv-share__link:focus-visible {
    background: transparent;
    color: var(--eatv-share-color, #333333);
}
.eatv-share__link--facebook { --eatv-share-color: #516eab; }
.eatv-share__link--x { --eatv-share-color: #000000; }
.eatv-share__link--whatsapp { --eatv-share-color: #128c4b; }
.eatv-share__link--linkedin { --eatv-share-color: #0a66c2; }
.eatv-share__link--telegram { --eatv-share-color: #1d8cc4; }
.eatv-share__link--email { --eatv-share-color: #555555; }
.eatv-share__link--copy { --eatv-share-color: #333333; }
.eatv-share__copied {
    font-size: 13px;
    font-weight: 600;
}
[x-cloak] {
    display: none !important;
}
/* On the black pages (video, dark show profiles). */
.eatv-dark .eatv-share {
    background: #141414;
    box-shadow: none;
}
.eatv-dark .eatv-share p {
    color: #ffffff;
}
.eatv-dark .eatv-share .eatv-share__link--x { --eatv-share-color: #3a3a3a; }
.eatv-dark .post-share-area.eatv-share ul.social-default li .eatv-share__link:hover,
.eatv-dark .post-share-area.eatv-share ul.social-default li .eatv-share__link:focus-visible {
    color: #ffffff;
    border-color: #ffffff;
}

/* An author without a photo: a square of their initials. */
.eatv-author-initials {
    display: inline-flex;
    flex: 0 0 100px;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
}

/* Brand logos the icon font lacks (X, Instagram, TikTok; <x-brand-icon>), sized and aligned like a Font Awesome icon. */
.eatv-brand-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* ---------------------------------------------------------------- Story cards (components/eatv/post-card, post-row)
 * The picture with no badge on it, then the headline, a short summary and when | section, in the theme's own type and
 * colours (title-medium-dark, post-date-dark). Only the layout is set here. Square corners. */

.eatv-card {
    margin-bottom: 30px;
}

.eatv-card__media,
.eatv-row__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #e9e9e9;
}

.eatv-card__media img,
.eatv-row__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.eatv-card:hover .eatv-card__media img,
.eatv-row:hover .eatv-row__media img {
    transform: scale(1.03);
}

.eatv-card__body {
    padding-top: 15px;
}

.eatv-card__title {
    margin-bottom: 10px;
}

.eatv-card--sm .eatv-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.eatv-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin-bottom: 10px;
    font-size: 14px;
}

.eatv-card__meta {
    margin-bottom: 0;
}

/* "20 minutes ago | Sport": a pipe between the date and the section, in the date's own colour. */
.eatv-card__meta ul li {
    margin-right: 0;
    font-size: 12px;
}

.eatv-card__meta ul li + li::before {
    content: '|';
    margin: 0 8px;
}

.eatv-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 30px;
}

@media (max-width: 575px) {
    .eatv-row {
        gap: 12px;
    }

    .eatv-row .eatv-card__excerpt {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* Home hero row, grid and mosaic designs (HeroSliderDesign, picked in Contenido): the first story is the large lead,
   the others tiles, each a headline over its darkened image. Beside the on-air panel they fill its height, as the
   carousel does; on phones they stack, the lead first at full width. .is-count-N places fewer stories than the design has room for. */
.eatv-hero-tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
}

.eatv-hero-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #111111;
}

.eatv-hero-tile--lead {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}

.eatv-hero-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eatv-hero-tile::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 75%;
    background: linear-gradient(transparent, rgba(17, 17, 17, 0.9));
    pointer-events: none;
}

.eatv-hero-tile__text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 14px 16px;
}

.eatv-hero-tile__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.eatv-hero-tile__title a {
    color: #ffffff;
}

.eatv-hero-tile__title a:hover {
    color: var(--eatv-hover);
}

.eatv-hero-tile--lead .eatv-hero-tile__text {
    padding: 24px 26px;
}

.eatv-hero-tile--lead .eatv-hero-tile__title {
    font-size: 24px;
    line-height: 1.35;
}

/* Phones: the lead, then the tiles two a row; the grid's wide story, and a tile left alone in its row, take the full width. */
@media (max-width: 767px) {
    .eatv-hero-tiles--grid .eatv-hero-tile:nth-child(2),
    .eatv-hero-tiles--grid .eatv-hero-tile:nth-child(odd):last-child,
    .eatv-hero-tiles--mosaic .eatv-hero-tile:nth-child(even):last-child {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 9;
    }

    .eatv-hero-tile--lead .eatv-hero-tile__title {
        font-size: 20px;
    }
}

@media (max-width: 575px) {
    .eatv-hero-tile__text,
    .eatv-hero-tile--lead .eatv-hero-tile__text {
        padding: 10px 12px;
    }

    .eatv-hero-tile__title {
        font-size: 14px;
    }

    .eatv-hero-tile--lead .eatv-hero-tile__title {
        font-size: 18px;
    }
}

/* Beside the on-air panel: as tall as the panel, the lead down the left and the tiles in two rows on the right. */
@media (min-width: 768px) {
    .slider-fill-col > .eatv-hero-tiles {
        position: absolute;
        top: 0;
        right: 2px;
        bottom: 0;
        left: 2px;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    }

    .eatv-hero-tiles .eatv-hero-tile {
        aspect-ratio: auto;
    }

    .eatv-hero-tiles .eatv-hero-tile--lead {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .eatv-hero-tiles.is-count-1 .eatv-hero-tile--lead {
        grid-column: 1 / -1;
    }

    /* Grid (NewsEdge Home 1): the lead on half the width, one wide story above two small ones. */
    .eatv-hero-tiles--grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .eatv-hero-tiles--grid .eatv-hero-tile:nth-child(2) {
        grid-column: 2 / 4;
        grid-row: 1;
    }

    .eatv-hero-tiles--grid.is-count-2 .eatv-hero-tile:nth-child(2) {
        grid-row: 1 / 3;
    }

    .eatv-hero-tiles--grid.is-count-3 .eatv-hero-tile:nth-child(3) {
        grid-column: 2 / 4;
    }

    /* Mosaic (NewsEdge Home 4 and 5): the lead on five twelfths, four tiles two by two. */
    .eatv-hero-tiles--mosaic {
        grid-template-columns: minmax(0, 10fr) minmax(0, 7fr) minmax(0, 7fr);
    }

    .eatv-hero-tiles--mosaic.is-count-2 .eatv-hero-tile:nth-child(2) {
        grid-column: 2 / 4;
        grid-row: 1 / 3;
    }

    .eatv-hero-tiles--mosaic.is-count-3 .eatv-hero-tile:not(:first-child),
    .eatv-hero-tiles--mosaic.is-count-4 .eatv-hero-tile:nth-child(4) {
        grid-column: 2 / 4;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .eatv-hero-tile__title {
        font-size: 14px;
    }

    .eatv-hero-tile--lead .eatv-hero-tile__title {
        font-size: 20px;
    }
}

/* Home hero row, banner design (NewsEdge Home 6): one story across the whole width, darkened at the bottom, with its
   byline and headline in line with the page; Now on TV and Today follow in a band below (.eatv-hero-band). */
.eatv-hero-banner {
    position: relative;
    aspect-ratio: 1920 / 695;
    max-height: 640px;
    width: 100%;
    overflow: hidden;
    background: #111111;
}

.eatv-hero-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eatv-hero-banner::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 70%;
    background: linear-gradient(transparent, rgba(17, 17, 17, 0.85));
}

.eatv-hero-banner__text {
    position: absolute;
    right: 0;
    bottom: 60px;
    left: 0;
    z-index: 2;
}

.eatv-hero-banner__title {
    max-width: 80%;
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.3;
    color: #ffffff;
}

.eatv-hero-banner__title a {
    color: #ffffff;
}

.eatv-hero-banner__title a:hover,
.eatv-hero-live__headline a:hover {
    color: var(--eatv-hover);
}

.eatv-hero-band {
    margin: 24px 0;
}

@media (max-width: 991px) {
    .eatv-hero-banner__text {
        bottom: 30px;
    }

    .eatv-hero-banner__title {
        max-width: 100%;
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .eatv-hero-banner {
        aspect-ratio: 4 / 3;
    }

    .eatv-hero-banner__text {
        bottom: 16px;
    }

    .eatv-hero-banner__title {
        font-size: 22px;
    }
}

/* Home hero row, live design (NewsEdge Home 7's row, no carousel): the pinned lead (1200 × 814) with a LIVE label on
   the left, the newest stories on a white column on the right, reloaded every minute; Now on TV and Today below. */
.eatv-hero-live {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    background: #ffffff;
}

.eatv-hero-live.is-lead-only {
    grid-template-columns: minmax(0, 1fr);
}

.eatv-hero-live__lead {
    position: relative;
    aspect-ratio: 1200 / 814;
    background: #111111;
}

.eatv-hero-live__lead img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eatv-hero-live__lead::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 70%;
    background: linear-gradient(transparent, rgba(17, 17, 17, 0.9));
    pointer-events: none;
}

.eatv-hero-live__text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 40px 50px;
}

.eatv-hero-live__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 5px 12px;
    background: #d10000;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* The live signal's square dot pulses. */
.eatv-hero-live__badge span {
    width: 8px;
    height: 8px;
    background: #ffffff;
    animation: eatv-live-pulse 1.4s ease-in-out infinite;
}

@keyframes eatv-live-pulse {
    50% {
        opacity: 0.2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eatv-hero-live__badge span {
        animation: none;
    }
}

.eatv-hero-live__headline {
    margin: 0;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.35;
    color: #ffffff;
}

.eatv-hero-live__headline a {
    color: #ffffff;
}

.eatv-hero-live__list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 20px;
    padding: 30px 36px;
}

.eatv-hero-live__item {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.eatv-hero-live__thumb {
    display: block;
    aspect-ratio: 124 / 88;
}

.eatv-hero-live__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eatv-hero-live__body .eatv-card__meta ul li {
    margin-bottom: 6px;
}

.eatv-hero-live__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.45;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

@media (max-width: 1199px) {
    .eatv-hero-live__text {
        padding: 24px 28px;
    }

    .eatv-hero-live__headline {
        font-size: 24px;
    }

    .eatv-hero-live__list {
        padding: 20px;
    }

    .eatv-hero-live__item {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 12px;
    }

    .eatv-hero-live__title {
        font-size: 14px;
    }
}

/* Tablets and phones: the lead, then the list under it. */
@media (max-width: 991px) {
    .eatv-hero-live {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .eatv-hero-live__lead {
        aspect-ratio: 4 / 3;
    }

    .eatv-hero-live__text {
        padding: 14px 16px;
    }

    .eatv-hero-live__headline {
        font-size: 20px;
    }
}

/* Home hero row, slider design: laid out like eatv.tv's home slider. Each slide is the picture with its headline on a
   dark bar, sliding together (js/eatv-hero-slider.js, Owl Carousel); round arrows on the sides. Beside the on-air
   panel it fills the panel's height, as the grid and mosaic do; on phones it keeps eatv.tv's 760 : 370. */
.eatv-hero-carousel__slide {
    position: relative;
    display: block;
    aspect-ratio: 760 / 370;
    overflow: hidden;
    background: #111111;
    color: #ffffff;
}

.eatv-hero-carousel__slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eatv-hero-carousel .owl-stage {
    transition-timing-function: linear !important;
}

.eatv-hero-carousel__caption {
    position: absolute;
    right: 10%;
    bottom: 0;
    left: 10%;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.67);
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    color: #ffffff;
}

.eatv-hero-carousel__slide:hover .eatv-hero-carousel__caption {
    color: #ffffff;
}

.eatv-hero-carousel .owl-nav .owl-prev,
.eatv-hero-carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    z-index: 2;
    margin: 0;
    padding: 0 !important;
    border: 0;
    background: none !important;
    font-size: 52px !important;
    line-height: 1;
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transform: translateY(-50%);
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.eatv-hero-carousel .owl-nav .owl-prev {
    left: 10px;
}

.eatv-hero-carousel .owl-nav .owl-next {
    right: 10px;
}

.eatv-hero-carousel .owl-nav .owl-prev:hover,
.eatv-hero-carousel .owl-nav .owl-next:hover,
.eatv-hero-carousel .owl-nav .owl-prev:focus-visible,
.eatv-hero-carousel .owl-nav .owl-next:focus-visible {
    opacity: 1;
}

/* Before Owl starts (and without JavaScript) only the first slide shows. */
.eatv-hero-carousel:not(.owl-loaded) > :not(:first-child) {
    display: none;
}

@media (min-width: 768px) {
    .slider-fill-col > .eatv-hero-carousel {
        position: absolute;
        top: 0;
        right: 2px;
        bottom: 0;
        left: 2px;
    }

    .slider-fill-col > .eatv-hero-carousel,
    .slider-fill-col > .eatv-hero-carousel > :first-child,
    .slider-fill-col > .eatv-hero-carousel .owl-stage-outer,
    .slider-fill-col > .eatv-hero-carousel .owl-stage,
    .slider-fill-col > .eatv-hero-carousel .owl-item,
    .slider-fill-col > .eatv-hero-carousel .eatv-hero-carousel__slide {
        height: 100%;
    }

    .slider-fill-col > .eatv-hero-carousel .owl-stage {
        display: flex;
    }

    .slider-fill-col > .eatv-hero-carousel .eatv-hero-carousel__slide {
        aspect-ratio: auto;
    }
}

@media (max-width: 767px) {
    .eatv-hero-carousel__caption {
        right: 0;
        left: 0;
        padding: 10px 14px;
        font-size: 17px;
        line-height: 22px;
    }

    .eatv-hero-carousel .owl-nav .owl-prev,
    .eatv-hero-carousel .owl-nav .owl-next {
        font-size: 40px !important;
    }
}

/* The ☰ drawer beside the search box (Eatv\Layouts\OffcanvasMenu): Now on TV, the TV pages, every section, the
   Exclusives menus, the footer's linked columns, the social links, then the location and the copyright. */
.eatv-drawer {
    padding-top: 0;
}

.eatv-drawer__body {
    padding: 64px 24px 32px;
    color: #ffffff;
}

.eatv-drawer__on-air {
    display: block;
    margin-bottom: 8px;
    padding: 14px 16px;
    background: #4c2f8a;
    color: #ffffff;
}

.eatv-drawer__on-air:hover,
.eatv-drawer__on-air:focus {
    background: #e53935;
    color: #ffffff;
}

.eatv-drawer__live {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.eatv-drawer__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    background: #ef3340;
    vertical-align: 1px;
    animation: eatv-live-pulse 1.6s ease-in-out infinite;
}

.eatv-drawer__on-air:hover .eatv-drawer__dot {
    background: #ffffff;
}

.eatv-drawer__programme {
    display: block;
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.eatv-drawer__time,
.eatv-drawer__next {
    display: block;
    font-size: 13px;
    opacity: 0.85;
}

.eatv-drawer__next {
    margin-top: 8px;
}

.eatv-drawer__title {
    margin: 24px 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #444444;
    color: #9a9a9a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.eatv-drawer__links,
.eatv-drawer__sublinks,
.eatv-drawer__social {
    margin: 0;
    padding: 0;
    list-style: none;
}

.eatv-drawer__links a,
.eatv-drawer__sublinks a {
    display: block;
    padding: 7px 0;
    color: #ffffff;
    font-size: 15px;
}

.eatv-drawer__links a:hover,
.eatv-drawer__links a:focus,
.eatv-drawer__sublinks a:hover,
.eatv-drawer__sublinks a:focus {
    color: #ef3340;
}

.eatv-drawer__row {
    display: flex;
    align-items: center;
}

.eatv-drawer__row > a {
    flex: 1;
}

.eatv-drawer__toggle {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9a9a9a;
    font-size: 18px;
}

.eatv-drawer__toggle:hover,
.eatv-drawer__toggle:focus {
    color: #ffffff;
}

.eatv-drawer__sublinks {
    padding-left: 14px;
    border-left: 2px solid #4c2f8a;
}

.eatv-drawer__sublinks a {
    padding: 5px 0;
    color: #cccccc;
    font-size: 14px;
}

.eatv-drawer__exclusive i {
    margin-right: 8px;
    color: #f5b301;
}

.eatv-drawer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 6px;
}

.eatv-drawer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #3a3a3a;
    color: #ffffff;
    font-size: 16px;
}

.eatv-drawer__social a:hover,
.eatv-drawer__social a:focus {
    background: #e53935;
    color: #ffffff;
}

.eatv-drawer__bottom {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid #444444;
    color: #9a9a9a;
    font-size: 12px;
}

.eatv-drawer__bottom p {
    margin: 0 0 4px;
}

@media (prefers-reduced-motion: reduce) {
    .eatv-drawer__dot {
        animation: none;
    }
}

/* The hero slider's Live TV design: the station's YouTube live stream beside the on-air panel, LIVE and its title
   on a dark bar below; "Tap for sound" over the player until the reader unmutes it. */
.eatv-hero-tv {
    background: #000000;
}

.eatv-hero-tv__player {
    position: relative;
    aspect-ratio: 16 / 9;
}

.eatv-hero-tv__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.eatv-hero-tv__sound {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 10px 16px;
    border: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.eatv-hero-tv__sound:hover,
.eatv-hero-tv__sound:focus {
    background: #d10000;
}

.eatv-hero-tv__sound i {
    margin-right: 6px;
}

.eatv-hero-tv__caption {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    color: #ffffff;
}

.eatv-hero-tv__badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: #d10000;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.eatv-hero-tv__badge span {
    width: 8px;
    height: 8px;
    background: #ffffff;
    animation: eatv-live-pulse 1.4s ease-in-out infinite;
}

.eatv-hero-tv__title {
    margin: 0;
    overflow: hidden;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
    .eatv-hero-tv__badge span {
        animation: none;
    }
}

@media (max-width: 767px) {
    .eatv-hero-tv__title {
        font-size: 15px;
    }
}