/* Home section: guides + paid partners (templates/site/home/guides.html). Paths are relative to static/home/, so kit art is ../kit/... */
/* The reference's LATEST NEWS row, built from the user's asset IDs in kit/home/guides:
   section_header_latest_news (its baked text painted out, "Latest guides" live over it), chevron_triple_right on the View all link,
   Cyber Eden ASSET-0014 (the CONFIRM dialog) as each card: guide_card_window, its window cut along the inner red line, masks our
   scene + banner art, and guide_card_frame (the asset with that window and its baked text, buttons and close box cut out) sits on top. Title and date sit under the card. All links use the site-wide hover spec. */
.axgd-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.axgd-title { position: relative; container-type: inline-size; flex: 0 1 560px; min-width: 0; margin: 0; }
.axgd-title img { display: block; width: 100%; height: auto; }
.axgd-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; }
.axgd-all { flex: none; display: flex; align-items: center; gap: 8px; color: var(--ax-red-2); font: 700 16px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: color .2s, scale .2s var(--ease, ease); }
.axgd-all img { width: auto; height: 14px; transition: transform .2s var(--ease, ease), filter .2s, scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease); }
/* View all: grows, its chevron art glows along its shape, steps right, zooms and turns (--ax-art-*). */
.axgd-all:hover, .axgd-all:focus-visible { z-index: 1; color: #fff; scale: var(--ax-hover-scale, 1.06); }
.axgd-all:is(:hover, :focus-visible) img { filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); }
.axgd-all:is(:hover, :focus-visible) img { scale: var(--ax-art-zoom, 1.1); rotate: var(--ax-art-turn, -3deg); }
.axgd-all:hover img, .axgd-all:focus-visible img { transform: translateX(3px); }

.axgd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Hover: grow (--ax-hover-scale); the cards beside it in the same row step aside by --ax-hover-push.
   The glow sits on the card art (.axgd-thumb) so it follows the frame's shape, not the card's box; a partner card has no art, so it glows itself.
   scale/translate are separate properties so they compose with the scroll reveal. */
.axgd-card { display: flex; flex-direction: column; transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease, ease), scale .2s var(--ease, ease), translate .25s var(--ease, ease)); }
.axgd-card:hover, .axgd-card:focus-visible { z-index: 1; scale: var(--ax-hover-scale, 1.06); }
.axgd-card:is(:hover, :focus-visible) .axgd-thumb, .axgd-card:not(:has(.axgd-thumb)):is(:hover, :focus-visible) { filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); }
@media (min-width: 1101px) {
  .axgd-card:is(:hover, :focus-visible) ~ .axgd-card { translate: var(--ax-hover-push, 14px) 0; }
  .axgd-card:has(~ .axgd-card:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
}
/* No white focus or tap box: keyboard focus shows the same art-following glow as hover. */
.axgd-card, .axgd-all { -webkit-tap-highlight-color: transparent; }
.axgd-card:is(:focus, :focus-visible), .axgd-all:is(:focus, :focus-visible) { outline: none; }
.axgd-thumb { position: relative; display: block; aspect-ratio: 342 / 196; transition: var(--ax-hover-t, filter .2s); }
.axgd-art { position: absolute; inset: 0; isolation: isolate; overflow: hidden; mask: url("../kit/home/guides/guide_card_window.webp?v=1") 0 0 / 100% 100% no-repeat; }
.axgd-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.axgd-logo { position: absolute; left: 50%; top: 50%; width: 58%; height: auto; translate: -50% -50%; }
/* Picture hover (site-wide spec, vars in site-apex.css): the scene and banner art zoom and turn inside the card's own mask; frame and text stay still. */
.axgd-bg, .axgd-logo { transition: scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease); }
.axgd-card:is(:hover, :focus-visible) :is(.axgd-bg, .axgd-logo) { scale: var(--ax-art-zoom, 1.1); rotate: var(--ax-art-turn, -3deg); }
.axgd-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.axgd-body { display: grid; gap: 6px; padding: 12px 2px 0; }
.axgd-body strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #fff; font: 700 18px/1.2 var(--ax-font-title); }
/* Room inside the line clamp's clip for the larger wordmark; the negative margin keeps the layout where it was. */
.axgd-body strong:has(.inline-wordmark) { padding-block: 2px; margin-block: -2px; }
.axgd-body strong .inline-wordmark { height: 1.36em; margin: -.08em .05em; vertical-align: -.28em; filter: none; }
.axgd-body time, .axgd-body small { color: #8f8f97; font: 700 13px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .axgd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Two per row: only the card sharing the hovered card's row steps aside. */
@media (min-width: 641px) and (max-width: 1100px) {
  .axgd-card:nth-child(odd):is(:hover, :focus-visible) + .axgd-card { translate: var(--ax-hover-push, 14px) 0; }
  .axgd-card:nth-child(odd):has(+ .axgd-card:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
}
@media (max-width: 760px) {
  .axgd-grid { gap: 10px; }
}
@media (max-width: 640px) {
  .axgd-head { flex-wrap: wrap; gap: 10px; }
  .axgd-title { flex-basis: 100%; }
  .axgd-grid { grid-template-columns: 1fr; }
}