/* =========================================================================
   Canonical component: Media frame (Requirement 3.8)

   `.tkc-media` is an aspect-ratio box that crops whatever it contains. The
   ratio is the one thing a composition is allowed to change, and it changes it
   by setting `--tkc-media-ratio` -- not by declaring `aspect-ratio`, and never
   by the `padding-top: 42%` percentage trick the current `custom.css` uses,
   which is exactly the hand-tuned spacing the token layer retires.

     .session-tile__thumb { --tkc-media-ratio: 4 / 3 }

   The frame owns overflow, radius, and the sizing of its child; the child needs
   no class of its own, so a thumbnail emitted by a shortcode or by Hugo's image
   render hook drops in unchanged. Compositions add layout only: they may not
   declare `background`, `border`, `border-radius`, `box-shadow`, or `padding`.

   Every declared value reaches `assets/css/tokens.css` through `var(--tkc-...)`
   (Requirements 3.6, 9.5), with two exceptions that are not design decisions:
   `100%` fills the frame the token already sized, and `0` strips the legacy
   border a browser puts on a framed `<img>` or `<iframe>`.

   There is no ratio token, and there should not be: a ratio is a property of
   one piece of content, not a site-wide scale, and adding one would put a
   fourth number family outside the caps of Requirement 3.12. The default below
   is the component's own contract, stated once, so a composition that forgets
   to set a ratio still renders a frame rather than a collapsed box.
   ========================================================================= */

.tkc-media {
  --tkc-media-ratio: 16 / 9;

  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--tkc-media-ratio);
  border-radius: var(--tkc-radius-md);
  background-color: var(--tkc-color-surface);
}

/* `object-fit: cover` is what makes the crop a crop: the child fills the frame
   on both axes and the overflow is clipped, so two frames of the same ratio
   agree to the pixel whatever their contents' intrinsic sizes are. */
.tkc-media > img,
.tkc-media > video,
.tkc-media > iframe,
.tkc-media > svg,
.tkc-media > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
}

/* A logo or a diagram must not be cropped; it is fitted inside the same frame
   instead. Still a ratio decision, still made by one class, no new geometry. */
.tkc-media-fit > img,
.tkc-media-fit > video,
.tkc-media-fit > svg,
.tkc-media-fit > picture > img {
  object-fit: contain;
}

/* -------------------------------------------------------------------------
   Reduced motion (Requirement 3.10)

   The frame declares no transition and no animation, so there is no duration to
   zero. The rule is stated rather than omitted because a media frame is the
   element a reveal animation is most often attached to: whatever the
   composition layer adds, the frame and its child are held in their final
   visible state here.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tkc-media,
  .tkc-media > * {
    transition-duration: 0s;
    transition-delay: 0s;
    animation-duration: 0s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    opacity: 1;
    transform: none;
    visibility: visible;
  }
}