/* --------------------------------------------------------------- linkbox
 * templates/ui/linkbox.html, design system «Linkbox»: a filled card in
 * surface-subtle (porcelain) without a frame, rounding or shadow and with
 * a fixed inner spacing (MAR-FLA-01, MAR-FLA-02); the title, a meta line in
 * micro, the «›» at the right edge in web.action.text (WEB-KOM-03,
 * WEB-MIK-08). On hover the title and the «›» turn web.action.text-hover.
 * .linkbox__sub is the old name of .linkbox__meta. */
@layer ui {
.linkbox {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  border: 0; background: var(--surface-subtle);
  padding: var(--s-4) var(--s-5); font-size: var(--t-small); color: var(--text-primary);
}
.linkbox::after { content: "›"; flex: none; color: var(--text-accent); font-size: var(--t-h2); line-height: 1; }
.linkbox:hover { color: var(--text-primary); }
.linkbox:hover .linkbox__title, .linkbox:hover::after { color: var(--corum-dark); }
.linkbox__meta, .linkbox__sub { display: block; margin-top: var(--s-1); font-size: var(--t-micro); color: var(--text-secondary); }
/* A document in several languages: the box itself leads nowhere, its
   «DE» / «EN» downloads do (ui/tool.html dl_links) - no «›», no hover. */
.linkbox--files::after { content: none; }
.linkbox--files:hover .linkbox__title { color: inherit; }

/* Several side by side. auto-fill, not auto-fit: a lone box keeps its
   column width instead of stretching across the page. */
.linkboxes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-4); margin-bottom: var(--s-6);
}
}  /* @layer ui */