/* ==========================================================================
   video-cards.css — THE single source of truth for video card + grid styling.
   Created 2026-08-18.

   WHY THIS FILE EXISTS
   The same card CSS was duplicated inline across index.php, trending.php,
   hottest.php, recommended.php, tag.php and interracial.php, and it had drifted
   into THREE different title sizes:
       .card-title a { font-size:.75rem }   ← 5 pages (on the ANCHOR)
       .card-title   { font-size:.8rem  }   ← includes/video_card.php (22 pages)
       (nothing at all)                     ← interracial.php, so its <h6>
                                              fell back to Bootstrap's 1rem —
                                              the "bigger bold titles" Will spotted.
   Every page now loads THIS file and defines none of it locally.

   HOW IT LOADS
   includes/asset_links.php → mp_video_card_css(), guarded to emit once per
   request. Called from includes/nav.php (so every page on the site gets it,
   the same site-wide hook the "watched" badge already uses) and from
   includes/video_card.php (so a page that renders cards without the nav —
   admin/preview surfaces — still gets styled).

   RULE: never re-inline these rules in a page. Tune them HERE and the whole
   site moves together. See [[feedback_reuse_components]].
   ========================================================================== */

/* --- Card shell ---------------------------------------------------------- */
.video-card {
    background: #111;
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* --- Title ---------------------------------------------------------------
   Sized on the BLOCK, not the inline <a>, so wrapped title lines don't inherit
   Bootstrap's big heading line-height. font-size AND font-weight are set
   explicitly because pages render this element as h3, h5 or h6 — pinning both
   makes the heading level irrelevant, which is what stops the drift coming back. */
.video-card .card-title {
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: .25rem;
}
.video-card .card-title a { color: #fff; text-decoration: none; }
.video-card .card-title a:hover { color: #e89086; }

/* --- Meta row (views / likes) --------------------------------------------
   White so the eye + heart icons stay visible on the dark card. */
.video-card .video-meta { color: #fff; font-size: .7rem; }
.video-card .video-meta i { color: #fff; }
.video-card .card-text,
.video-card small { color: #ccc; }

/* --- Thumbnail ----------------------------------------------------------- */
.video-thumbnail-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
}
.video-thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-thumbnail-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, .85);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: bold;
}

/* --- Recommended badge ---------------------------------------------------
   Amber is CANONICAL (Will, 2026-08-12: "needs to be consistent if it appears
   anywhere out of the recommend page"). Was a peach gradient in the shared
   component while six page-level copies used amber. */
.recommended-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255, 193, 7, .9);
    color: #000;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: bold;
    z-index: 10;
}