/* ---------------------------------------------------------------------------
   featured-v2.css - a bottom scrim behind the three Featured stacking cards'
   headings.

   THE DEFECT (pre-ship review, finding H5). The three full-bleed stacking cards
   in section_featured set white type directly on photography with nothing
   between:

       Pakistan Army      / PMA LONG COURSE
       Pakistan Air Force / GD PILOT AND AERONAUTICAL ENGINEERING
       Pakistan Navy      / CADET ENTRY AND SHORT SERVICE COMMISSION

   .video-card_title is `position:absolute; bottom:5em`, i.e. it sits over the
   bottom of the frame, and two of the three frames are BRIGHT there - the PAF
   card's poster is a pilot beside a JF-17 under a high-key sky, and it is worse
   once the hover video starts playing, because the video is a moving image and
   the heading has to stay legible over every frame of it rather than over one.
   "GD PILOT AND AERONAUTICAL ENGINEERING" is the longest of the three and lands
   squarely on the brightest part.

   The page already owns the answer and uses it eleven cards away: the module
   carousel's .card-overlay, straight out of the vendored Webflow sheet, is

       .card-overlay { z-index: 1; background-image:
                       linear-gradient(#0000 60%, #00000080);
                       width:100%; height:100%; position:absolute; inset:0% }

   - transparent for the top 60 % of the card, ramping to 50 % black at the
   bottom edge. That gradient is reproduced here EXACTLY rather than tuned by
   eye, because the point is that the two card families read as one language.
   The only thing that differs is where it is attached.

   ---------------------------------------------------------------------------
   WHY A PSEUDO-ELEMENT ON .featured_link, AND NOT A .card-overlay DIV.

   The module cards can carry a real <div class="card-overlay"> because
   feature_card() in _build/localize.py authors their markup outright. The
   Featured cards do not: their markup is the scrape's, and STRUCTURAL EDIT 9
   only swaps the media inside it. More importantly, they render two DIFFERENT
   elements at different widths:

       .video-card.hide-tablet-mobile   the poster + hover video   (desktop)
       img.image.show-tablet            a plain full-bleed <img>   (tablet/mobile)

   A scrim inside .video-card-visual would therefore cover the desktop card and
   miss the phone entirely - which is the width where the heading is largest
   relative to the frame and the reading is hardest. .featured_link is the one
   element that is `position:relative; width:100%; height:100%` around both, so
   one rule covers both cases. It owns no ::before of its own (grepped across
   the vendored sheet, every inline <style> block in index.html and all ten
   linked stylesheets - one .featured_link rule exists in total, and it declares
   no pseudo-elements).

   ---------------------------------------------------------------------------
   THE STACKING ORDER IS THE PART TO BE CAREFUL WITH, and it is three elements
   deep inside .featured_link's stacking context:

       ::before (this file)            z-index 1   the scrim
       .video-card::after             z-index 2   the inline <style>'s inset
                                                  #0E1547 glow - transparent in
                                                  the middle, so it does not
                                                  matter which side of the scrim
                                                  it lands on
       .video-card_title              z-index 3   raised HERE, from the sheet's 1

   The title has to be raised because a ::before is painted as if it were the
   element's LAST child for equal z-index values, and .video-card_title is the
   FIRST child - so at the sheet's z-index:1 the scrim would have covered the
   heading it exists to make readable. 3 rather than 2 so it also clears the
   inset-glow pseudo-element and the order is unambiguous by inspection.

   Scoped to .featured_list so it cannot reach .video-card_title anywhere else;
   the class also appears on the module carousel's siblings.

   pointer-events:none because .featured_link is a link to /eligibility and the
   whole card is the target; a scrim that swallowed the click would be a
   conversion bug that looks like nothing at all.

   Linked by STRUCTURAL EDIT 51, BEFORE cta-v2.css, which must stay the last
   <link> in <head> (see edit 26). Nothing here competes with that file.
   --------------------------------------------------------------------------- */

.featured_list .featured_item .featured_link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(#0000 60%, #00000080);
}

.featured_list .featured_item .video-card_title {
  z-index: 3;
}

/* ---------------------------------------------------------------------------
   THE TOUCH-DEVICE CARD VIDEO. Injected by assets/js/cardvideo-v2.js, which only
   ever runs on a device that fails "(hover: hover) and (pointer: fine)" - so this
   element does not exist on desktop and these rules match nothing there.

   IT OCCUPIES THE STILL'S SLOT EXACTLY. img.image.show-tablet is
   position:absolute / inset:0 / object-fit:cover inside the position:relative
   .featured_link, and so is this; the video is appended as the link's LAST child,
   so with both at z-index:auto DOM order paints it directly over the still. The
   scrim above (z-index 1) and .video-card_title (z-index 3) both still sit on top,
   which is the whole reason for putting it here rather than inside .video-card.

   OPACITY 0 UNTIL IT IS ACTUALLY RUNNING. The class is added on the `playing`
   event, never on play() being called - so a refused autoplay (iOS Low Power Mode)
   simply leaves the still visible underneath and there is no failure state to
   design for. No prefers-reduced-motion guard is needed on the transition: the
   script returns before creating the element at all under reduced motion.

   pointer-events:none for the same reason as the scrim above - .featured_link is a
   link and the whole card is its target.
   --------------------------------------------------------------------------- */

.featured_list .featured_item .featured_link .card-video-touch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.featured_list .featured_item .featured_link .card-video-touch.is-playing {
  opacity: 1;
}