/* card.css — the one card of Friendly-Apps (owner 2026-10-31, 1018c-Q743 a: the first step of the design system, ahead of G1; Q731).
   Every card of both sites takes its look from here: the project cards of dev-pe (.w-project), the plain cards of the pages (.card), Lleu's
   area cards (.g-lleu-card), π's large cards (.g-menu-group with room) and the logo menu's cards (.lm-card with room) — and every new one
   (.fa-card). Parts: a head (icon or graphic + title, a line below), entries, a tag; states: hover/focus (accent edge), planned (dashed).
   The files keep only their own layout. Tokens with fallbacks, so the file works on every page. Identical copy in friendly-apps-home and site.
   version: 1.0.0 · created 2026-10-31 by Pascal Ehlig, ITS · edited 2026-10-31 by Pascal Ehlig, ITS */
:root{--fa-card-radius:14px;--fa-card-pad:14px 16px;--fa-card-gap:8px;--fa-card-min:13.5rem;--fa-card-shadow:0 1px 3px rgb(16 42 67 / .06);
  --fa-card-shadow-hover:0 6px 18px rgb(16 42 67 / .12)}
.fa-card,.card,.w-project,.g-lleu-card,.pi-menu[data-g-big] .g-menu-group{box-sizing:border-box;min-width:0;background:var(--surface,#fff);color:var(--text,inherit);
  border:1px solid var(--border,#d9dee5);border-radius:var(--fa-card-radius);box-shadow:var(--fa-card-shadow);
  transition:border-color var(--dur,.18s),box-shadow var(--dur,.18s),transform var(--dur,.18s)}
.fa-card,.card,.w-project{display:flex;flex-direction:column;gap:var(--fa-card-gap);padding:var(--fa-card-pad)}
.fa-card:hover,.card:hover,.w-project:hover,a.g-lleu-card:hover,button.g-lleu-card:hover,.pi-menu[data-g-big] .g-menu-group:hover{border-color:var(--accent,#fb683e);box-shadow:var(--fa-card-shadow-hover)}
a.fa-card:hover,a.g-lleu-card:hover,button.g-lleu-card:hover{transform:translateY(-1px)}
.fa-card:focus-visible,.fa-card:focus-within,.g-lleu-card:focus-visible{outline:3px solid var(--focus,#2563eb);outline-offset:2px}
.fa-card:focus-within:not(:focus-visible):not(:has(:focus-visible)){outline:none}
.fa-card-head{display:flex;align-items:center;gap:10px;margin:0 0 4px;padding-bottom:10px;border-bottom:1px solid var(--border,#d9dee5);font-size:1rem;font-weight:700}
.fa-card-head .icon,.fa-card-head img,.fa-card-head svg{width:26px;height:26px;flex:none;color:var(--accent,currentColor)}
.fa-card-list{list-style:none;margin:0;padding:0}.fa-card-list>li{display:flex;align-items:center;gap:8px;min-height:40px}
.fa-card-tag{padding:0 8px;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--sunken,#eef1f4);color:var(--muted,#5b6b7b)}
.fa-card.is-planned,.g-lleu-area.is-planned .g-lleu-card{border-style:dashed;box-shadow:none;background:transparent;color:var(--muted,#5b6b7b)}
.fa-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--fa-card-min)),1fr));gap:12px;align-items:stretch}
.fa-card[data-size="s"]{--fa-card-pad:10px 12px;--fa-card-gap:6px}
@container (min-width:46rem){.lm-mega .lm-card{box-sizing:border-box;background:var(--surface,#fff);border:1px solid var(--border,#d9dee5);border-radius:var(--fa-card-radius);
  box-shadow:var(--fa-card-shadow);transition:border-color var(--dur,.18s),box-shadow var(--dur,.18s)}
  .lm-mega .lm-card:hover{border-color:var(--accent,#fb683e);box-shadow:var(--fa-card-shadow-hover)}}
@media (prefers-reduced-motion:reduce){.fa-card,.card,.w-project,.g-lleu-card,.pi-menu[data-g-big] .g-menu-group,.lm-mega .lm-card{transition:none;transform:none!important}}