/* ============================================================
   오늘의 YouTV 뉴스
   ------------------------------------------------------------
   Two screens share this file, because they share a look: the block at
   the top of the Toronto front page (MainVideoFeature) and the list the
   '더보기' link opens (VideoIntro's lvHotTV). Their title rows are
   identical and are written once, below.

   Only what VideoHotTV.css does not already say is here. The cards
   themselves are that file's (.hottv-card and the rest), so a change to
   a card shows on both screens at once.
   ============================================================ */

/* The gap below is for the banner that follows, which carries only its
   own 20px - without this the two run together as one lump. Above, the
   header's notice strip leaves its own space above. */
.mainvid-wrap {
    padding-top: 18px;
    padding-bottom: 24px;
}

/* The notice strip that used to be described here is now on every page,
   drawn by the header - see SiteNotice.css. */

/* ---------- the three columns ----------
   Left two cards - one large - right two cards.

   The ratio is not chosen by eye. Every picture is 16:9 and every title is
   held to a fixed number of lines (VideoHotTV.css), so a column's height
   follows from its width; at this ratio the bottom of two stacked cards
   meets the bottom of the single large one. Change the ratio and that
   meeting comes apart.

   The two side columns are equal because they hold the same card. What is
   left over after the pictures is spread between the cards rather than
   stretching them (.hottv-side, space-between), so a small error in the
   ratio is absorbed instead of showing as a ragged bottom edge. */
.hottv.mainvid {
    grid-template-columns: 1fr 2.37fr 1fr;
}

/* ---------- the title row ----------
   오늘의 YouTV 뉴스 on the left; at the right end the bold label, the
   neighbourhoods, and '더보기'.

   '더보기' is last because the '전체' tab that used to end this row is
   gone. It keeps the same size and weight as the neighbourhood names: a
   row of things at three different sizes makes the eye stop to work out
   which one matters most. */
.mainvid-titlebar h1 {
    text-transform: none;
}

.mainvid-titlebar h1 .hottv-tabs {
    align-items: baseline;
}

/* The bold label. It is not something to press, so it is given no red rule
   underneath - on this row that rule means 'you are here'.

   Both this and the tab below have to undo style.css's '.title-section h1
   span', which draws that red rule under every span in a title row. The
   transparent border keeps the row from shifting when a rule does appear. */
.mainvid-titlebar h1 .mainvid-tablabel {
    display: inline-block;
    margin-right: 6px;
    color: #222222;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    padding-right: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid transparent;
}

/* The neighbourhood a visitor is already in arrives as a span rather than a
   link (VideoCards.MainTitle), so it needs the tab's looks stated for a
   span as well - the rules in VideoHotTV.css are written for 'a.hottv-tab'. */
.mainvid-titlebar h1 span.hottv-tab {
    display: inline-block;
    color: #222222;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    padding-right: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid transparent;
}

.mainvid-titlebar h1 span.hottv-tab.is-on {
    font-weight: 700;
    border-bottom-color: #f44336;
}

/* No underline on the two that are links. It is stated here rather than left
   to bootstrap's reset: the rule that removes it lives in a file this block
   does not ask for, and a browser's own underline under these names reads as
   a second rule competing with the red one that marks the current place. */
.mainvid-titlebar h1 a.hottv-tab,
.mainvid-titlebar h1 a.hottv-tab:hover,
.mainvid-titlebar h1 a.hottv-tab:focus {
    text-decoration: none;
}

/* '더보기' wears the tab's looks but must not take the 16px that
   VideoHotTV.css puts to the left of it - here it is not standing next to
   the section name, and the row already spaces its own items. */
.mainvid-titlebar h1 a.mainvid-more {
    margin-left: 0;
}

/* ---------- narrow screens ----------
   VideoHotTV.css already unfolds .hottv into a single column and lays the
   side cards out in a row; with two side columns that gives the large one
   on top and two rows of two beneath it, which is what is wanted. Only the
   notice needs to come down in size - at 21px it ran to three lines on a
   phone and pushed the videos off the first screenful. */


/* ============================================================
   The '더보기' list
   ------------------------------------------------------------
   Three cards across the whole page (the side column is dropped -
   WideContent.css), with a banner across the grid after every second
   row. Everything here is held under .newstv-more: the plain .newstv
   grid is also the front page's 아하TV strip and NEWS TV, and those two
   must not pick these rules up.
   ============================================================ */

/* The banner sits inside the grid rather than beside it, so that it
   keeps the grid's own gaps and lands exactly between two rows of
   cards. 1 / -1 is 'from the first column line to the last', which
   stays right when the grid drops to two columns and then one. */
.newstv-more .newstv-banner {
    grid-column: 1 / -1;
    margin: 6px 0 10px;
    line-height: 0;
}

.newstv-more .newstv-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* The date keeps its place on the left and the neighbourhood goes to
   the right end of the same line. They are one row rather than two
   because the cards' heights have to stay equal across a row, and a
   line that only some cards have would break that - a video with no
   neighbourhood written on it shows nothing here. */
.newstv-more .hottv-date {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

/* Darker and heavier than the date beside it. It answers a different
   question - not when, but whose - so it should not read as a second
   half of the date. */
.newstv-more .newstv-region {
    color: #222222;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* On a phone the cards lie on their side (VideoHotTV.css, 560px) and
   the text column is narrow; a long date and a neighbourhood on one
   line start to crowd. Let them stack there. */
@media (max-width: 560px) {
    .newstv-more .hottv-date {
        display: block;
    }

    .newstv-more .newstv-region {
        display: block;
        margin-top: 2px;
    }
}