/* =========================================================================
   Tiles: layout only (Requirements 5.5, 3.8)

   The paired stylesheet for `partials/tile.html` and `partials/tile-grid.html`.
   It declares no `background`, `border`, `border-radius`, `box-shadow`, or
   `padding` -- not one. Those belong to the four canonical components the tile
   markup already carries:

     .tkc-card     the raised surface, its hairline, its radius, its padding
     .tkc-media    the aspect-ratio frame and the crop
     .tkc-heading  the title and byline type
     .tkc-btn      the action

   That restriction is the mechanism behind Requirement 5.5, not a style
   preference: a document tile and a video tile in one row agree within a CSS
   pixel because every value that could differ between them is declared once, in
   a shared component, rather than tuned per variant. The legacy sheet this
   replaces set `padding-top: 42%` on the video frame and `aspect-ratio: 16 / 9`
   on the thumbnail frame, so the two boxes were the same height only by
   arithmetic coincidence.

   Every declared value reaches `assets/css/tokens.css` through `var(--tkc-...)`
   (Requirements 3.6, 9.5). The bare numbers here are `0`, which carries no design
   decision, `100%`, which fills a box a token already sized, `1fr`, a grid unit,
   and the `16 / 9` ratio -- a property of one piece of content rather than a
   site-wide scale, which is why `media.css` states there is no ratio token and
   should not be one.
   ========================================================================= */

/* -------------------------------------------------------------------------
   The row
   ------------------------------------------------------------------------- */

/* `auto-fit` with a `min()` floor is what makes one row become one column on a
   narrow viewport without a media query: the floor is four `--tkc-space-8`
   steps (256px), and `min(100%, ...)` keeps a single tile from overflowing a viewport
   narrower than the floor. `stretch` is what equalizes the two tiles' heights,
   so the pixel agreement Requirement 5.5 asks for does not depend on the two
   bodies holding the same amount of text. */
.tkc-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--tkc-space-8) * 4)), 1fr));
  align-items: stretch;
  gap: var(--tkc-space-4);
  width: 100%;
  margin-block: var(--tkc-space-2) var(--tkc-space-5);
}

/* -------------------------------------------------------------------------
   One tile
   ------------------------------------------------------------------------- */

/* A column: frame, then body. `stretch` on the row gives every tile the same
   outer height, and the body below claims the slack, so the frames stay aligned
   across the row whatever the titles do. */
.tkc-tile {
  display: flex;
  flex-direction: column;
  gap: var(--tkc-space-4);
}

/* The one ratio, declared once, read by both variants -- the shared
   `--tkc-media-ratio` of Requirement 5.5. `media.css` owns what the frame does
   with it; changing the crop for every tile on the site is this one line. */
.tkc-tile-media {
  --tkc-media-ratio: 16 / 9;
}

/* The theme's `screen.css` puts `margin: 1.75em 0` on `iframe` and on
   `.fluid-width-video-wrapper`, which would push the video frame down relative
   to the document frame and break the height match. The frame's child fills the
   frame, so a margin on either is meaningless here. */
.tkc-tile-media,
.tkc-tile-media > * {
  margin: 0;
}

/* The glyph fallback for a document tile with no thumbnail. Centered in the
   frame the same way an image fills it, so the tile keeps its geometry. */
.tkc-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--tkc-size-700);
  line-height: var(--tkc-leading-tight);
}

/* -------------------------------------------------------------------------
   The body
   ------------------------------------------------------------------------- */

/* Centered, and growing to fill the height the row handed the tile. `gap`
   carries the internal rhythm, which is why the title and byline zero their
   heading margins below: two spacing mechanisms stacked is how the current
   layout drifts between tiles. */
.tkc-tile-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tkc-space-2);
  text-align: center;
}

.tkc-tile-title,
.tkc-tile-speaker {
  margin-block: 0;
}

/* The action sits at the end of the body whatever the title's height, so the
   buttons line up across the row. */
.tkc-tile-cta {
  align-self: center;
}

/* -------------------------------------------------------------------------
   The handout link beneath a session's tiles
   ------------------------------------------------------------------------- */

.tkc-tile-downloads {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin-block: 0 var(--tkc-space-5);
}

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

   The layout declares no transition and no animation of its own -- the card's
   hover elevation and the button's color change are declared in their own
   components, which zero themselves under `reduce`. The rule is stated rather
   than omitted because a tile row is the element a staggered reveal is most
   often attached to: whatever is added above this file, every tile and every
   part of one is held in its final visible state here.
   ------------------------------------------------------------------------- */

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