/* Home section: trending (templates/site/home/trending.html). Paths are relative to static/home/, so kit art is ../kit/... */
/* The reference's "Choose your legend" band, from the 05_Apex_Tactical_UI asset IDs.
   Header: the Latest guides header (kit/home/guides/section_header_latest_news, sized exactly like -38's guides head),
   with View all games and hex_plus_symbol (the rest of the games) on its right. The header stays in the column.
   Tiles: five per row (2 x 2 at <=900), each as tall as a feature card: --axtr-h is a linear fit of the feature cards'
   content-driven height to the column width (measured at 390-1920), computed on the band against the section, so it
   follows the column while the band itself breaks out halfway to min(1560px, 100vw - 32px), centered. Neighbouring tiles
   share their slanted edge with a 2 px seam, so the five tiles take the band's whole width.
   Frame: class_recon_card (236x211, baked text painted out), scaled uniformly by --u (one source px). A tile is
   narrower than the asset's own 256:211 shape, so its plain middle is stretched vertically: source row 100 (left edge,
   empty art window, right edge) is repeated over --m and sheared along the card's own 0.289 slant, so both slanted
   edges stay straight. Wider tiles need less of that stretch.
   --u solves width = 195u + 0.289 * height (the card's 256 px slanted extent at 211 rows); --s is the shear offset.
   The thumbnail fills the art window (source 37..249 x 18..149 plus the stretch) and runs to the frame's true edge,
   which also hides the asset's truncated top-right corner. */
@property --axtr-h { syntax: "<length>"; inherits: true; initial-value: 0px; }
#trending, .axtr-sec { container-type: inline-size; }
.axtr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.axtr-title { position: relative; container-type: inline-size; flex: 0 1 560px; min-width: 0; margin: 0; }
.axtr-title img { display: block; width: 100%; height: auto; }
.axtr-title span { position: absolute; left: calc(100cqw * 90 / 713); top: calc(100cqw * 14 / 713); color: #fff; font: 400 calc(100cqw * 40 / 713)/1 var(--ax-font-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.axtr-actions { display: flex; flex: none; align-items: center; gap: 14px; }
.axtr-more { display: inline-flex; flex: none; align-items: center; gap: 8px; color: var(--ax-red-2); font: 700 16px/1 var(--ax-font-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.axtr-more img { width: auto; height: 14px; transition: scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease), translate .2s var(--ease); }
.axtr-more:hover, .axtr-more:focus-visible { color: #fff; }
.axtr-plus { flex: none; display: block; width: 40px; }
.axtr-plus img { display: block; width: 100%; height: auto; transition: scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease); }

.axtr-band { --g: 2px; --bw: calc((100cqw + min(1560px, 100vw - 32px)) / 2); --axtr-h: calc(.4035 * (100cqw - 48px) / 4 + 204.7px);
  container-type: inline-size; display: flex; align-items: center; width: var(--bw); margin-left: calc((100cqw - var(--bw)) / 2); }
.axtr-card { --h: var(--axtr-h); --run: calc(.289 * var(--h)); --row: calc((100cqw - 4 * var(--g) - var(--run)) / 5);
  position: relative; container-type: size; flex: none; display: block; width: calc(var(--row) + var(--run)); height: var(--h); color: #fff; }
.axtr-card + .axtr-card { margin-left: calc(var(--g) - var(--run)); }
.axtr-card:nth-child(n + 6) { display: none; }
.axtr-card > * { --u: calc((100cqw - .289 * 100cqh) / 195); --m: calc(100cqh - 211 * var(--u)); --s: calc(.289 * var(--m)); }
.axtr-fx { position: absolute; inset: 0; }
.axtr-fx i { position: absolute; width: calc(236 * var(--u)); }
/* The asset is cut off at x 229 above row ~94, so its top-right corner (the slanted right border) is missing. It is rebuilt
   under .axtr-top from the frame's own plain pixels: .axtr-cap repeats row 101's red border (cols 224-235) up the slant to
   row 10, and .axtr-ext stretches the top bar's plain column 219 (rows 10-18) out to that border, ending inside it. */
.axtr-fx .axtr-ext { left: calc(var(--s) + 228 * var(--u)); top: calc(10 * var(--u)); width: calc(22.5 * var(--u)); height: calc(9 * var(--u)); border-image: url("../kit/home/trending/class_recon_card.webp?v=2") 10 16 192 219 fill / 0; }
.axtr-fx .axtr-cap { left: calc(var(--s) + 224 * var(--u)); top: calc(10 * var(--u)); width: calc(12 * var(--u)); height: calc(91 * var(--u) + 1px); border-image: url("../kit/home/trending/class_recon_card.webp?v=2") 101 0 109 224 fill / 0; transform: skewX(-16.12deg); transform-origin: 0 100%; }
.axtr-top { left: var(--s); top: 0; height: calc(100 * var(--u)); background: url("../kit/home/trending/class_recon_card.webp?v=2") 0 0 / calc(236 * var(--u)) calc(211 * var(--u)) no-repeat; }
.axtr-mid { left: var(--s); top: calc(100 * var(--u) - 1px); height: calc(var(--m) + 2px); border-image: url("../kit/home/trending/class_recon_card.webp?v=2") 100 0 110 0 fill / 0; transform: skewX(-16.12deg); transform-origin: 0 0; }
.axtr-bot { left: 0; bottom: 0; height: calc(111 * var(--u)); background: url("../kit/home/trending/class_recon_card.webp?v=2") 0 calc(-100 * var(--u)) / calc(236 * var(--u)) calc(211 * var(--u)) no-repeat; }
/* The thumbnail zooms and turns on hover (--ax-art-zoom / --ax-art-turn / --ax-art-t from site-apex.css) inside a window that
   stays put: the image carries its own clip, which would turn with it, so each window corner is mapped back through the image's
   scale and rotate (about its centre). --axtr-k (0 -> 1, registered so it animates) drives both, keeping them in step. */
@property --axtr-k { syntax: "<number>"; inherits: false; initial-value: 0; }
.axtr-art { --A: calc(212 * var(--u) + var(--s)); --B: calc(131 * var(--u) + var(--m));
  --t: calc(var(--ax-art-turn, -3deg) * var(--axtr-k)); --z: calc(1 + (var(--ax-art-zoom, 1.1) - 1) * var(--axtr-k)); --c: cos(var(--t)); --n: sin(var(--t));
  --x1: calc(37 * var(--u) + var(--s) - var(--A) / 2); --x3: calc(var(--A) / 2 - 38 * var(--u) - var(--s));
  position: absolute; left: calc(37 * var(--u)); top: calc(18 * var(--u)); width: var(--A); height: var(--B); object-fit: cover;
  scale: var(--z); rotate: var(--t); transition: --axtr-k var(--ax-art-t, .5s ease);
  clip-path: polygon(
    calc(var(--A) / 2 + (var(--x1) * var(--c) - var(--B) / 2 * var(--n)) / var(--z)) calc(var(--B) / 2 + (-1 * var(--x1) * var(--n) - var(--B) / 2 * var(--c)) / var(--z)),
    calc(var(--A) / 2 + (var(--A) / 2 * var(--c) - var(--B) / 2 * var(--n)) / var(--z)) calc(var(--B) / 2 + (-1 * var(--A) / 2 * var(--n) - var(--B) / 2 * var(--c)) / var(--z)),
    calc(var(--A) / 2 + (var(--x3) * var(--c) + var(--B) / 2 * var(--n)) / var(--z)) calc(var(--B) / 2 + (-1 * var(--x3) * var(--n) + var(--B) / 2 * var(--c)) / var(--z)),
    calc(var(--A) / 2 + (-1 * var(--A) / 2 * var(--c) + var(--B) / 2 * var(--n)) / var(--z)) calc(var(--B) / 2 + (var(--A) / 2 * var(--n) + var(--B) / 2 * var(--c)) / var(--z))); }
.axtr-card:is(:hover, :focus-visible) .axtr-art { --axtr-k: 1; }
.axtr-info { position: absolute; left: calc(44 * var(--u)); bottom: calc(7 * var(--u)); width: calc(130 * var(--u)); height: calc(51 * var(--u)); display: grid; align-content: center; gap: calc(4 * var(--u)); }
.axtr-info strong { display: -webkit-box; overflow: hidden; color: #fff; font: 700 max(12px, calc(16 * var(--u)))/1.1 var(--ax-font-title, var(--ax-font-body)); letter-spacing: 0; text-transform: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.axtr-info small { overflow: hidden; color: #cfcfd2; font: 700 max(10px, calc(11 * var(--u)))/1 var(--ax-font-ui); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
/* Site-wide hover/light-up (vars from site-apex.css). The card link itself is unclipped (only its art is), so the glow shows in full
   and, being a drop-shadow of the tile's painted pixels, follows the slanted frame. The kit art has its alpha haze (1-11) cleared so
   the glow never outlines the files' rectangles.
   A hovered tile also grows over its slanted neighbours, and the tiles before / after it shift away by --ax-hover-push.
   scale and translate are their own properties, so they compose with the margins and the scroll reveal.
   View all games and the + push each other apart the same way, and their pictures (the chevron, the hex +) zoom and turn.
   None of this is gated on prefers-reduced-motion: the site's user browses with Windows "Animation effects" off, which alone
   matches that query, and wants the hover motion (as with the ambient loops in site-motion.css). */
.axtr-card, .axtr-plus, .axtr-more { transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease)), color .2s; }
.axtr-card:hover, .axtr-card:focus-visible, .axtr-plus:hover, .axtr-plus:focus-visible, .axtr-more:hover, .axtr-more:focus-visible { filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); }
.axtr-card:hover, .axtr-card:focus-visible, .axtr-plus:hover, .axtr-plus:focus-visible, .axtr-more:hover, .axtr-more:focus-visible { scale: var(--ax-hover-scale, 1.06); }
.axtr-card:hover, .axtr-card:focus-visible, .axtr-plus:hover, .axtr-plus:focus-visible { z-index: 1; }
/* No white focus box or tap flash (site-polish.css :focus-visible outline): focus shows the red glow above instead. */
.axtr-card, .axtr-plus, .axtr-more { -webkit-tap-highlight-color: transparent; }
:is(.axtr-card, .axtr-plus, .axtr-more):is(:focus, :focus-visible) { outline: none; }
.axtr-card:hover ~ .axtr-card, .axtr-card:focus-visible ~ .axtr-card { translate: var(--ax-hover-push, 14px) 0; }
.axtr-card:has(~ .axtr-card:hover), .axtr-card:has(~ .axtr-card:focus-visible) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
.axtr-more:is(:hover, :focus-visible) ~ .axtr-plus { translate: var(--ax-hover-push, 14px) 0; }
.axtr-more:has(~ .axtr-plus:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
.axtr-more:is(:hover, :focus-visible) img { translate: 3px 0; scale: var(--ax-art-zoom, 1.1); rotate: var(--ax-art-turn, -3deg); }
.axtr-plus:is(:hover, :focus-visible) img { scale: var(--ax-art-zoom, 1.1); rotate: var(--ax-art-turn, -3deg); }

@media (max-width: 900px) {
  /* Two tiles per row (2 x 2) at the two-column feature cards' height. */
  .axtr-band { --axtr-h: calc(.75 * (100cqw - 16px) / 2 + 98px); flex-wrap: wrap; row-gap: 10px; }
  .axtr-card { --row: calc((100cqw - .5px - var(--g) - var(--run)) / 2); }
  .axtr-card:nth-child(odd) { margin-left: 0; }
  .axtr-card:nth-child(n + 5) { display: none; }
}
@media (max-width: 760px) {
  .axtr-band { --axtr-h: calc(.632 * (100cqw - 10px) / 2 + 119px); }
  .axtr-info { gap: 2px; }
  .axtr-info strong { -webkit-line-clamp: 1; }
}
@media (max-width: 640px) {
  .axtr-head { flex-wrap: wrap; gap: 10px; }
  .axtr-title { flex-basis: 100%; }
}
}