/* Workflow cards (HubDB): ported from Concept 4, "Workflows" (design-concepts/home-2026-10/c4/index.html),
   with the section's responsive and reduced-motion rules. The template sets each card's --card field colour
   and --tilt by position. Logical properties, so Arabic mirrors; the hand-placed tilts mirror with the
   layout too (DESIGN.md, The Room To Translate Rule). */

/* Workflows */
.wf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); margin-top: clamp(40px, 5vw, 64px); }
[dir="rtl"] .wf-grid { --tilt-dir: -1; }
.wf {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 24px 22px; border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  rotate: calc(var(--tilt, 0deg) * var(--tilt-dir, 1));
  transition: rotate 280ms var(--ease-out), translate 280ms var(--ease-out);
}
/* The lift shadow is pre-drawn on ::before and fades in (opacity, not box-shadow). The card straightens and rises
   only when motion is welcome, and keyboard focus lifts it (:focus-visible), a click does not. */
.wf::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none;
  transition: opacity 280ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .wf:hover::before { opacity: 1; }
}
/* A strip under the card covers the 6px it rises, so a pointer resting on the bottom edge keeps the hover */
.wf::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 0; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wf:hover { rotate: 0deg; translate: 0 -6px; }
  .wf:hover::after { height: 7px; }
}
.wf:has(.h3 a:focus-visible)::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .wf:has(.h3 a:focus-visible) { rotate: 0deg; translate: 0 -6px; }
}
/* With an industry filter (the industry pages) every card has the same five parts, so each spans five rows of the
   grid (logos, title, description, categories, link) and the rows line up across cards (DESIGN.md, The Level Row
   Rule). Inside a card the rows keep the card's own 14px gap; the grid's gap still separates rows of cards. */
.wf-grid.is-level .wf { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; }
@supports not (grid-template-rows: subgrid) {
  .wf-grid.is-level .wf { display: flex; }
}
.wf-logos { display: flex; padding-inline-start: 10px; }
.wf-logo {
  position: relative;
  width: 44px; height: 44px; margin-inline-start: -10px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--logo-bg); border: 3px solid var(--card);
  box-shadow: 0 3px 6px -2px rgb(11 30 51 / 0.3);
}
.wf-logo:first-child { z-index: 2; }
.wf-logo img { width: 24px; height: 24px; }
.wf-logo.fill img { width: 100%; height: 100%; object-fit: cover; }
.wf .h3 { font-size: 1.28rem; }
.wf .h3 a { text-decoration: none; }
.wf .h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.wf .h3 a:focus-visible { outline: none; }
.wf .h3 a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 4px; }
.wf-desc { font-size: 16px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.wf-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-ind { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.wf-open { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.wf-open .i { width: 18px; height: 18px; }
/* No rows in this language's table, or none matching the filters (not in the concept) */
.wf-empty { margin-top: clamp(40px, 5vw, 64px); color: var(--ink-soft); }

/* Responsive */
@media (max-width: 1023px) {
  .wf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .wf-grid { grid-template-columns: minmax(0, 1fr); }
  .wf { rotate: calc(var(--tilt, 0deg) * var(--tilt-dir, 1) / 2); }
}

/* Reduced motion: no travel, instant lift */
@media (prefers-reduced-motion: reduce) {
  .wf, .wf-open .i { transition: none; }
}