/* This site's own additions to the theme, loaded on every page after style.css and
 * responsive.css so it can override either. Page-specific CSS does not belong here
 * -- that goes in its own file behind base.html's `styles` block.
 *
 * What lives here: the 所有分类 dropdown, the 5-wide video grid, the detail page's
 * metadata overrides, the footer's copyright line, and the tag chip. The chip is back to one consumer --
 * `video/single-video.html` -- now that /tags is a word cloud rather than a list of
 * chips; it stays because the detail page's own overrides for it are here anyway. */

/*================================================
所有分类 mega dropdown
================================================*/
/* A plain single-column dropdown, like the theme's own, but as wide as the longest
 * category in it instead of the theme's flat 210px -- these are Chinese studio names
 * of very different lengths, and 起点传媒／性视界传媒 is more than twice the width of
 * 抖阴. It stopped needing to be a multi-column panel when the list was capped at
 * `catalog.DROPDOWN_CATEGORIES`.
 *
 * These selectors carry the theme's own specificity plus a class, so they win without
 * !important -- except for the properties the theme sets inside its `li:hover` rule at
 * the same specificity, which is why width and position are repeated in both blocks
 * below. */
header#gen-header .gen-bottom-header .navbar .navbar-nav li .sub-menu.gen-mega-menu,
header#gen-header .gen-bottom-header .navbar .navbar-nav li:hover .sub-menu.gen-mega-menu {
    width: max-content;
    /* Only a safety net: a category long enough to reach this wraps instead of
     * running off the screen. */
    max-width: 90vw;
    /* Anchored to the right edge: this is the last menu item but one, so a dropdown
     * opening leftwards would run off the viewport. */
    left: auto;
    right: 0;
    padding: 8px 0;
    /* 20 items is a tall list. It clears the header on a normal window; on a short
     * one this scrolls rather than putting the last categories off the bottom of the
     * screen where nothing can reach them. */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

/* This is what makes the content width above mean "the longest category". The theme
 * floats every `li` in the navbar left and makes it inline-block (`style.css:2362`) --
 * for the horizontal top-level menu, but the selector reaches these items too. Under
 * max-content sizing, floats all line up on one row, so the dropdown asked for the
 * summed width of all twenty names (1794px, i.e. the 90vw cap) and then wrapped them
 * back into rows. Unfloated blocks make max-content the widest single item. */
header#gen-header .gen-bottom-header .navbar .navbar-nav li .sub-menu.gen-mega-menu li {
    display: block;
    float: none;
}

header#gen-header .gen-bottom-header .navbar .navbar-nav li .sub-menu.gen-mega-menu li a {
    display: block;
    padding: 5px 14px;
    line-height: 1.7;
    /* One line each. The width above is derived from the longest name, so nothing has
     * to wrap -- and a wrapped name would break the rhythm of the rows. */
    white-space: nowrap;
}

/* Below the theme's collapse breakpoint the menu is a stacked full-width panel, so a
 * content-sized box pinned to the right of it makes no sense. */
@media (max-width: 1023px) {
    header#gen-header .gen-bottom-header .navbar .navbar-nav li .sub-menu.gen-mega-menu,
    header#gen-header .gen-bottom-header .navbar .navbar-nav li:hover .sub-menu.gen-mega-menu {
        width: 100%;
        min-width: 0;
        max-width: none;
        right: auto;
        left: 0;
        max-height: 50vh;
    }
}

/*================================================
Tag chips
================================================*/
.gen-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gen-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    background: var(--black-color);
    color: var(--white-color);
    font-size: 14px;
    line-height: 1.9;
    transition: background .2s ease, border-color .2s ease;
}

.gen-chip:hover,
.gen-chip:focus {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.gen-chip-count {
    font-size: 11px;
    opacity: .6;
}

/* In the detail page's metadata table the label beside it is an inline-block of a
 * fixed width, so the chip list has to stay inline or it drops onto its own line. */
.gen-extra-data .gen-chip-list {
    display: inline-flex;
    vertical-align: top;
    max-width: calc(100% - 90px);
}

/*================================================
Detail page metadata labels
================================================*/
/* The theme gives every label in this block a 175px inline-block, sized for English
 * ("Release Date :", "Running Time :"). Both labels here are two Chinese characters,
 * so 120px of that was empty and the value looked detached from what named it.
 *
 * min-width rather than width, so the two still line up as a column and a longer
 * label than these would push its own value across instead of being clipped. */
.gen-extra-data ul li span:first-child {
    width: auto;
    min-width: 60px;
    padding-right: 10px;
}

/* The theme lays this block and the share icons out with `justify-content:
 * space-between`, which leaves the metadata content-sized -- so the tag chips wrapped
 * onto a second line with most of the row still empty beside them. Letting it take
 * the free space is what makes the chip list's max-width above resolve against
 * something useful. */
.gen-after-excerpt .gen-extra-data {
    flex: 1 1 auto;
    min-width: 0;
}

/* ...and the share block opposite it keeps its width, so the tags wrap instead of
 * crushing it. One video carries 21 tags, which squeezed the heading into a column of
 * single characters. Only the wide layout needs this: the theme stacks the two blocks
 * below its own breakpoint. */
.gen-after-excerpt .gen-socail-share {
    flex-shrink: 0;
}

.gen-after-excerpt .gen-socail-share h4 {
    white-space: nowrap;
}

/*================================================
Video grid, 5 across
================================================*/
/* Replaces the owl carousels the homepage rails used to be, and the Bootstrap row
 * behind the detail page's 更多类似: both show every video at once instead of hiding
 * most of them behind a drag or a fourth column. One class for both, because both
 * now lay out the same card at the same width. */
.gen-video-grid {
    display: grid;
    /* minmax(0, ...), not a bare 1fr. `1fr` means `minmax(auto, 1fr)`, and that auto
     * minimum is the widest the *contents* refuse to go below -- here the 240px
     * intrinsic width of a thumbnail (the theme sets no width on card images) and a
     * title the theme keeps on one line with white-space: nowrap. Five of those come
     * out five different widths, each sized by its longest title, and the row runs
     * past the window: measured on the homepage at a 1440px viewport, columns of
     * 256/367/329/299/366px in a document 2084px wide, with not one title ever
     * truncated because the column grew instead. A 0 minimum makes every column
     * exactly one fifth of the width available, whatever is in it. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* The gutter the carousels used (data-margin="30"), now in both directions. */
    gap: 30px;
}

/* The cards carry their own 30px bottom margin, which on top of the row gap above
 * would space the rows twice as far apart as the columns. min-width: 0 is the same
 * point as the track minimum above, applied to the item itself. */
.gen-video-grid .gen-carousel-movies-style-2,
.gen-video-grid .gen-carousel-movies-style-3 {
    margin-bottom: 0;
    min-width: 0;
}

/* Fill the column. The theme leaves card images at their intrinsic size under a
 * global `img { max-width: 100% }`, which only stops one overflowing -- a thumbnail
 * narrower than its column would sit short of the card's right edge and make the
 * row of images look ragged. Every scraped thumbnail is 240x180, so one width gives
 * every card the same height too. */
.gen-video-grid .gen-movie-contain .gen-movie-img img {
    width: 100%;
}

/* Five columns only where five columns fit. 1199 is the theme's own container step
 * (`style.css` snaps `.container` from a fluid 95% to 960px there); the rest are
 * simply where a column stops being wide enough for a card, down to 479 -- the
 * theme's phone breakpoint, where a card is the whole screen. Measured card widths:
 * 312px at a 1920 window, 244px at 1440, 210px at 1100, 270px at 900, 225px at 500. */
@media (max-width: 1199px) {
    .gen-video-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .gen-video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .gen-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 479px) {
    .gen-video-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A card in this grid is a fifth of the container rather than a quarter -- 244px
 * against 312px in a 1440px window -- so the type comes down with it. Scoped to the
 * grid rather than put on the card classes because it is the grid that decides the
 * width: a card dropped back into a Bootstrap column, which is where all of these
 * started, should still be at the theme's size.
 *
 * These match the class count of the theme rules they override (both card styles
 * declare the same values), and this file loads after style.css -- so they win with
 * no !important. Nothing reflows: a title stays on one line and is cut off with an
 * ellipsis, so the smaller size only fits ~3 more characters in before the cut. */
.gen-video-grid .gen-movie-contain .gen-movie-info h3 {
    font-size: 16px;
    line-height: 24px;
    /* Restated from the theme rather than inherited from it, because the fixed
     * column width above is only half of what keeps a long title inside its card --
     * these three are the other half, and a theme refresh must not silently drop
     * them. A title too long for the column ends in "...". */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gen-video-grid .gen-movie-contain .gen-movie-meta-holder ul li {
    font-size: 13px;
    /* Also the gap either side of the theme's dot separator, or the three meta items
     * every card in this grid carries (views, duration, category) no longer fit on
     * the one line they are clipped to. */
    margin-right: 10px;
    padding-right: 10px;
}

/*================================================
Footer copyright
================================================*/
/* The copyright band's background is --primary-color, but the theme only ever set a
 * text colour on the dead `<a href="#">` it wrapped the line in
 * (`style.css:3134`) -- so with the notice as a plain span it would inherit the body's
 * --secondary-color, #cecfd1 on #e91e63, which is 2.79:1 and under the 4.5:1 small
 * text is meant to have. White is 4.35:1 on that pink: still short of AA, but it is
 * the theme's own pairing everywhere else and the closest thing to legible without
 * repainting the band. */
.gen-copyright-footer .gen-copyright {
    color: var(--white-color);
}

/*================================================
Listing pagination
================================================*/
/* The strip under a listing's grid. The theme leaves its `ul` a bare `display: flex`,
 * so it sat against the left edge of the page. */
.gen-pagination .page-numbers {
    justify-content: center;
    /* A guard, not something normally seen: nine items (首页 / 上一页 / five numbers /
     * 下一页 / 尾页) come to 539px, which fits every width the theme's container has --
     * and below 767px the theme hides the four text links (`style.css:2050`), leaving
     * five numbers. This is only so that a wider strip wraps instead of making the
     * page scroll sideways. The row gap shows only once it has. */
    flex-wrap: wrap;
    row-gap: 10px;
}

.gen-pagination {
    /* The grid zeroes the cards' own bottom margin, which is what used to hold the
     * strip off the last row of cards. */
    margin-top: 30px;
}