/* Home section: features (templates/site/home/features.html). Paths are relative to static/home/, so kit art is ../kit/... */
/* Each card is the user's feature_card_* asset (baked text painted out, icon kept), drawn on ::before as a vertical 9-slice:
   the width is locked to the asset's own scale (cqw), so nothing distorts; the plain band under the icon (rows 131-155) tiles instead of stretching
   (round: whole tiles at the same scale), and the art is made seamless there: the band's last rows fade into the rows above it, the bottom slice fades in from it. */
.ax-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 20px; }
.ax-feats .ax-feat { --nw: 230; --t: 131; --b: 44; --by: 4.59cqw; --bx: 26%; --art: url("../kit/home/features/feature_card_drop_in.webp?v=3");
  position: relative; isolation: isolate; container-type: inline-size; display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease)); }
.ax-feats .is-loot-up { --nw: 218; --b: 50; --by: 7.57cqw; --bx: 27.3%; --art: url("../kit/home/features/feature_card_loot_up.webp?v=3"); }
.ax-feats .is-squad-up { --nw: 220; --b: 43; --by: 4.32cqw; --bx: 27.5%; --art: url("../kit/home/features/feature_card_squad_up.webp?v=3"); }
.ax-feats .is-climb-higher { --nw: 210; --b: 48; --by: 6.9cqw; --bx: 28.3%; --art: url("../kit/home/features/feature_card_climb_higher.webp?v=3"); }
.ax-feats .ax-feat::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 0 solid transparent;
  border-image: var(--art) var(--t) 1 var(--b) 1 fill / calc(var(--t) * 100cqw / var(--nw)) calc(100cqw / var(--nw)) calc(var(--b) * 100cqw / var(--nw)) calc(100cqw / var(--nw)) stretch round; }
/* Cyber Eden ASSET-0087 lens flare (reds shifted to the card red), centred on each card's own red bar (native x 14-105, rows 186-193). */
.ax-feats .ax-feat::after { content: ""; position: absolute; z-index: -1; left: calc(var(--bx) - 27.5cqw); bottom: calc(var(--by) - 8cqw); width: 55cqw; height: 16cqw; pointer-events: none;
  background: url("../kit/home/features/CE-0087_Red_Lens_Flare.webp?v=2") center / 100% 100% no-repeat; }
/* Text starts below the tallest top slice (131/210 = 62.4cqw) and ends above every card's red bar, so all four line up. */
.ax-feats .ax-feat strong { margin-top: 63cqw; padding-inline: 8%; color: #fff; font: 700 24px/1.05 var(--ax-font-title); letter-spacing: 0; }
.ax-feats .ax-feat > span { margin-top: 8px; padding-inline: 9%; color: #d0d0d0; font: 500 14px/1.45 var(--ax-font-body); }
.ax-feats .ax-feat-more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 10px; margin-bottom: 12cqw; color: var(--ax-red); font: 700 14px/1 var(--ax-font-ui); font-style: normal; letter-spacing: .04em; text-transform: uppercase; transition: color .2s; }
.ax-feats .ax-feat-more img { width: 22px; height: auto; transition: transform .2s var(--ease), scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease); }
.ax-feats .ax-feat:hover, .ax-feats .ax-feat:focus-visible { filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); }
.ax-feats .ax-feat:hover .ax-feat-more, .ax-feats .ax-feat:focus-visible .ax-feat-more { color: #fff; }
.ax-feats .ax-feat:hover .ax-feat-more img, .ax-feats .ax-feat:focus-visible .ax-feat-more img { transform: translateX(3px); }
.ax-feats .ax-feat:hover, .ax-feats .ax-feat:focus-visible { z-index: 1; scale: var(--ax-hover-scale, 1.06); }
.ax-feats .ax-feat { -webkit-tap-highlight-color: transparent; }
.ax-feats .ax-feat:is(:focus, :focus-visible) { outline: none; }
/* The chevron is the card's own picture (the icon is baked into the card art): it zooms and turns (site-apex.css --ax-art-*). */
.ax-feats .ax-feat:is(:hover, :focus-visible) .ax-feat-more img { scale: var(--ax-art-zoom, 1.1); rotate: var(--ax-art-turn, -3deg); }
/* Hover size + neighbour shift (site-wide spec): the hovered card grows above the row and its neighbours slide away from it.
   scale/translate are their own properties, so the hover scale and the scroll reveal's translate animation never fight; cards still waiting on the reveal are not pushed. */
@media (hover: hover) and (min-width: 901px) {
  .ax-feats .ax-feat:is(:hover, :focus-visible) ~ .ax-feat:not(.reveal-wait) { translate: var(--ax-hover-push, 14px) 0; }
  .ax-feats .ax-feat:not(.reveal-wait):has(~ .ax-feat:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
}

@media (max-width: 900px) {
  .ax-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ax-feats { gap: 10px; }
  .ax-feats .ax-feat strong { font-size: 18px; padding-inline: 6%; }
  .ax-feats .ax-feat > span { margin-top: 6px; padding-inline: 6%; font-size: 12.5px; }
  .ax-feats .ax-feat-more { padding-top: 8px; font-size: 12px; }
  .ax-feats .ax-feat-more img { width: 18px; }
}

/* Inline BARRAGE / Discord marks in the card text: 12% larger than the site default, the extra height taken back by negative
   block margins and the drop matched, so each mark keeps its centre on the line and the line spacing stays put. */
.ax-feats .ax-feat .inline-wordmark { height: calc(max(2em, 36px) * 1.12); margin-block: calc(max(2em, 36px) * -.06); vertical-align: calc(-.62em - max(2em, 36px) * .06); }
.ax-feats .ax-feat .inline-discord { height: calc(max(1.6em, 34px) * 1.12); margin-block: calc(max(1.6em, 34px) * -.06); vertical-align: calc(-.48em - max(1.6em, 34px) * .06); }