/* HUB-005 - live-tile.css
   The state of a gallery tile once its app is live. New rules only; load after demo.css.

   Nothing here changes a "Coming Soon" tile: every rule that changes how a tile looks needs
   .is-live, so the hub adds one class per tile plus the small markup change in REPORT.md and
   nothing else. (Anchor rules only match an <a> that exists on a live tile.)

   Why the long selectors: site.css line 171 paints a link underline as a background
   (main :is(p,li,dd) a:not(.btn):not(.link-arrow), specificity 0,2,3) on every link inside
   a list item in main, and line 172 grows it on hover (0,3,3). The card rules below repeat
   main/ul/li and carry three classes (0,3,4), so they win; the hover reset is (0,4,4).
   Do not simplify these selectors (docs/handover/DEMO-SUBDOMAIN.md, section 2).

   No orange: the live-tile state uses no orange at all. Since 29 Oct the demo site follows
   the live site's design system, rule 1: "Orange only on buttons. Never on lines, borders,
   bars, progress fills, headings or text". This page has no button, so --action never
   appears here. The 3 px hover/focus edge is the accent blue instead:
   - on the cards (white/pale surface) var(--accent) = #2A4BB0 light, #8FA6EE dark (7.7:1
     on white, 7.4:1 on the dark #0E163D), the site's own mark colour;
   - on the featured tile (navy field) a literal #8FA6EE, which reads on navy (7.2:1);
     light --accent #2A4BB0 is 2.2:1 on navy and would disappear, and no token is that
     light in both themes, so the one literal colour in this file lives in that rule and
     is named there.
   Colours and sizes come from the site tokens; the only absolute colours are that navy
   edge and the two shadow colours, which no token covers. */


/* ---------- 1. featured tile ----------
   <article class="g-feature"> becomes <a class="g-feature is-live" href="/slug/">.
   The grid, the navy field and the screenshot are already demo.css's job. */

main a.g-feature.is-live{
  color:var(--on-navy);                  /* keeps a:hover's --accent-text off the navy field */
  text-decoration:none;
  background-image:none;                 /* never the link underline as a background */
  -webkit-tap-highlight-color:transparent;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  main a.g-feature.is-live:hover{
    transform:translateY(-2px);          /* the lift: transform only, so nothing reflows */
    box-shadow:0 20px 46px rgba(2,6,26,.38),inset 0 -3px 0 #8FA6EE;   /* 3 px accent edge on the navy field */
  }
  main a.g-feature.is-live:hover .demo-url{color:var(--on-navy)}
}

main a.g-feature.is-live:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:4px;                    /* outside the tile; .wrap keeps 16 px at 390 and 24 px above */
  box-shadow:0 20px 46px rgba(2,6,26,.38),inset 0 -3px 0 #8FA6EE;
}


/* ---------- 2. cards ----------
   <li class="g-card"> becomes <li class="g-card is-live"> and one anchor fills it:
   <a class="g-card-link" href="/slug/"> ... shot ... body ... </a>.
   The anchor carries the whole card, so the keyboard ring is the tile, not the name. */

main ul.g-grid > li.g-card > a.g-card-link{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
  color:inherit;                         /* keeps a:hover's --accent-text off every card label */
  text-decoration:none;
  background-image:none;                 /* clears site.css line 171's underline gradient */
  -webkit-tap-highlight-color:transparent;
}
main ul.g-grid > li.g-card > a.g-card-link:hover{background-image:none}   /* and line 172's grown gradient */

/* one card in a group (demo.css .g-grid.is-single): shot beside the text */
.g-grid.is-single .g-card > a.g-card-link{flex-direction:row}

main ul.g-grid > li.g-card.is-live{
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
main ul.g-grid > li.g-card.is-live:focus-within{
  transform:translateY(-2px);
  box-shadow:var(--shadow),0 14px 30px rgba(2,6,26,.16),inset 0 -3px 0 var(--accent);
}
main ul.g-grid > li.g-card.is-live:focus-within .demo-url{color:var(--accent-text)}

@media (hover:hover) and (pointer:fine){
  main ul.g-grid > li.g-card.is-live:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow),0 14px 30px rgba(2,6,26,.16),inset 0 -3px 0 var(--accent);
  }
  main ul.g-grid > li.g-card.is-live:hover .demo-url{color:var(--accent-text)}
}

main ul.g-grid > li.g-card > a.g-card-link:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:-4px;                   /* inside the card: .g-card is overflow:hidden, so an outside ring is clipped */
  border-radius:calc(var(--radius-lg) - 1px);
}

/* a live tile must not still say "Coming Soon": the markup change removes the span, this hides a
   stale one if the hub flips the class first */
main ul.g-grid > li.g-card.is-live .demo-status,
main a.g-feature.is-live .demo-status{display:none}


/* ---------- 3. narrower screens ----------
   demo.css stacks the single-card group at 760px; the anchor inside it follows. */

@media (max-width:760px){
  .g-grid.is-single .g-card > a.g-card-link{flex-direction:column}
}


/* ---------- 4. reduced motion ----------
   No movement at all: no lift. The accent edge, the deeper shadow, the colour change and the
   focus ring stay, so hover and focus are still clear. (site.css line 213 also stops every
   transition under reduce; this block keeps the transform off even if that changes.) */

@media (prefers-reduced-motion:reduce){
  main a.g-feature.is-live,
  main ul.g-grid > li.g-card.is-live{transition:none}

  main a.g-feature.is-live:hover,
  main a.g-feature.is-live:focus-visible,
  main ul.g-grid > li.g-card.is-live:hover,
  main ul.g-grid > li.g-card.is-live:focus-within{transform:none}
}