/* RIVET · Cross-Functional skills block (.xfs), shared by the four role pages (gtm-operators,
   gtm-engineers, gtm-architects, gtm-leaders). One markup pattern: a sec-head, an ordered list of the
   ten Cross-Functional AI-Powered Skills (source: courses.json, group "Cross-Functional"), and two
   links out. Cards have no border (white on the page ground with shadow-card); no magenta here, the
   page keeps its one magenta action in the closing band. Prices are <span data-usd> so site.js
   renders the visitor's currency (EGP 3,300 a skill by default). */

.xfs__list{ list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(5,minmax(0,1fr)); counter-reset:xfs; }
.xfs__item{ display:flex; min-width:0; }
.xfs__card{ position:relative; display:flex; flex-direction:column; gap:10px; width:100%; min-height:100%;
  padding:18px 18px 16px; border-radius:var(--radius-card,12px); background:var(--white,#fff);
  box-shadow:var(--shadow-card,0 1px 2px rgba(0,0,0,.06),0 8px 24px -12px rgba(0,0,0,.18));
  color:var(--ink,#000); text-decoration:none;
  transition:transform var(--dur-instant,120ms) var(--ease-standard,ease), box-shadow var(--dur-instant,120ms) var(--ease-standard,ease); }
.xfs__card:hover{ transform:translateY(-2px); }
.xfs__card:focus-visible{ outline:3px solid var(--focus-ring,#3B06D4); outline-offset:2px; }
.xfs__n{ font:500 var(--fs-meta,.75rem)/1 var(--font-mono,'IBM Plex Mono',monospace); letter-spacing:.08em;
  color:var(--ink-muted,#4A4A68); font-variant-numeric:tabular-nums; }
.xfs__name{ font:600 1rem/1.3 var(--font-sans,'IBM Plex Sans',sans-serif); color:var(--ink,#000); margin:0;
  overflow-wrap:break-word; hyphens:auto; }
.xfs__meta{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 10px;
  font:500 var(--fs-micro,.6875rem)/1.4 var(--font-mono,'IBM Plex Mono',monospace); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted,#4A4A68); }
.xfs__price{ font:600 .8125rem/1.2 var(--font-mono,'IBM Plex Mono',monospace); letter-spacing:0; text-transform:none;
  color:var(--ink,#000); font-variant-numeric:tabular-nums; white-space:nowrap; }
.xfs__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:clamp(20px,2.4vw,28px); }
.xfs__note{ margin:0; color:var(--ink-muted,#4A4A68); font-size:var(--fs-small,.875rem); line-height:1.5; }

@media (max-width:1180px){ .xfs__list{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:900px){ .xfs__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){
  .xfs__list{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .xfs__card{ flex-direction:row; align-items:center; gap:12px; padding:14px 16px; }
  .xfs__name{ flex:1 1 auto; font-size:.9375rem; }
  .xfs__meta{ margin-top:0; flex:none; flex-direction:column; align-items:flex-end; gap:2px; }
  .xfs__meta .xfs__fmt{ display:none; }
  .xfs__foot .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ .xfs__card{ transition:none; } .xfs__card:hover{ transform:none; } }