/* ============================================================
   오늘의 YouTV 뉴스 - the block at the top of the Toronto front page
   ------------------------------------------------------------
   Only what VideoHotTV.css does not already say is here: the width of
   the three columns, the notice strip above them, and the title row.
   The cards themselves are that file's (.hottv-card and the rest), so a
   change to a card shows in both blocks at once.
   ============================================================ */

/* This block sits directly under the header's black strip. Without a gap
   above, the notice reads as part of that strip; without one below, the
   banner that follows it carries only its own 20px and the two run
   together as one lump. */
.mainvid-wrap {
    padding-top: 18px;
    padding-bottom: 24px;
}

/* ---------- the notice above the videos ----------
   One centred line. There is no picture here, so the line has to carry the
   strip on its own - hence a size well above the body text and full weight.
   Colour stays the same near-black as every other heading: a second colour
   on the widest thing on the page would be read as a warning. */
.mainvid-notice {
    display: block;
    padding: 6px 16px 20px;
    text-align: center;
    color: #222222;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.mainvid-notice:hover,
.mainvid-notice:focus {
    color: #f44336;
    text-decoration: none;
}

/* ---------- 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. */
@media (max-width: 700px) {
    .mainvid-notice {
        font-size: 17px;
        padding-bottom: 16px;
    }
}

@media (max-width: 480px) {
    .mainvid-notice {
        font-size: 15px;
    }
}