/*
 * Small additions on top of the legacy stylesheet, which is minified and not
 * worth editing. Loaded after it, so these rules win.
 */

/* The legacy site stored raw embed markup with fixed pixel dimensions. A ratio
   box keeps the player filling its container at every width instead. */
.detail-embed .video-frame {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    background: #000;
}

.detail-embed .video-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The legacy icon font predates the rebrand, so the X mark is an inline SVG and
   needs to line up with the font icons beside it. */
.tw-footer .icon-x {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
}

/* .media-index is itself floated in the legacy stylesheet. A float already
   contains its own children, but block elements after it are laid out as if it
   were not there, so a following heading or pager lands beside the last card
   rather than below the grid. The legacy pages never hit this because they only
   ever had one grid per page; the search results have two. */
.media-index + h2,
.media-index + .row,
.media-index + ul.pagination,
.media-index + .tag-description-none {
    clear: both;
}

/* Both switchers float left in the legacy stylesheet, so the period row lands
   beside the sort row and the two run into each other. The period refines the
   sort above it, so it belongs on its own line underneath. */
.short-date {
    clear: both;
}