/* Dot Problem Cards (#658). Values from Version 4 ("4 HVAD SKAL I HAVE LØST?"). Tokens, the
   section head, the tag, the chips and the text link come from the shared building blocks
   (#653, docs/dl-ui.md).

   The grid gives three columns at most, then two, then one: a column is never narrower than
   300px or a third of the row. Each card takes two rows of the grid, its main part and its
   footer, and shares them with its neighbours through subgrid. The footer lines therefore stand
   level across a row even when one footer wraps onto two lines (seen at 768 and 1024px, where
   "Informationssikkerhed" and "Se hvordan" do not fit side by side). A browser without subgrid
   gets a flex column with the footer pushed to the bottom: level unless a footer wraps. */

.dlpc {
  color: var(--dl-ink);
  padding: var(--dl-section-y) 0;
}

.dlpc :where(.dlpc__head) {
  max-width: 720px;
}

.dlpc__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, calc((100% - 40px) / 3))), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.dlpc__item {
  display: flex;
  margin: 0;
  padding: 0;
}

/* The whole card is one link. Stated as a class plus a pseudo-class, so the theme's
   a:hover/a:focus colour and __dist's underline do not reach it (docs/dl-ui.md). */
.dlpc__card,
.dlpc__card:visited {
  background-color: var(--dl-hvid);
  border: 1px solid var(--dl-ink-6);
  border-radius: var(--dl-radius-card);
  box-shadow: var(--dl-shadow-card);
  box-sizing: border-box;
  color: var(--dl-ink);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 16px 26px;
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}

a.dlpc__card:hover,
a.dlpc__card:focus {
  box-shadow: var(--dl-shadow-float);
  color: var(--dl-ink);
  text-decoration: none;
  transform: translateY(-2px);
}

a.dlpc__card:focus-visible {
  outline: var(--dl-focus);
  outline-offset: 3px;
}

.dlpc__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
}

.dlpc__art {
  align-items: center;
  background-color: var(--dl-bg-card);
  border-radius: 16px;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  height: 150px;
  justify-content: center;
  padding: 16px;
}

.dlpc__img {
  display: block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

.dlpc__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 12px;
}

.dlpc .dlpc__tag {
  align-self: flex-start;
  padding: 4px 12px;
}

/* The theme sets every h1-h6 in spoofbold 700 with !important; size, colour and spacing are
   ours. */
.dlpc .dlpc__title {
  color: var(--dl-ink);
  font-family: var(--dl-font-display);
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
  text-transform: none;
}

.dlpc__desc {
  color: var(--dl-ink-2);
  font-family: var(--dl-font-body);
  font-size: 15px;
  line-height: var(--dl-body-lh);
}

.dlpc__foot {
  align-items: baseline;
  border-top: 1px solid var(--dl-ink-6);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--dl-font-body);
  font-size: 14px;
  gap: 4px 12px;
  justify-content: space-between;
  margin: auto 12px 0;
  padding-top: 12px;
}

.dlpc__module {
  color: var(--dl-ink-3);
}

/* When the module name and "Se hvordan" do not fit side by side, "Se hvordan" moves to a line
   of its own, still on the right, instead of the name breaking mid-word (seen at 1024px). */
.dlpc__more {
  color: var(--dl-ink);
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}

/* The arrow is drawn here, as on the shared text link, so the copy has none. */
.dlpc__more::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  transition: transform .15s ease;
}

a.dlpc__card:hover .dlpc__more::after {
  transform: translateX(3px);
}

/* Main part and footer on two shared rows. The card keeps its own 12px between them; the
   grid's 20px stays between rows of cards. */
@supports (grid-template-rows: subgrid) {
  .dlpc__item {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .dlpc__card,
  .dlpc__card:visited {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 12px;
  }

  /* Stretched over the row from its top, so every divider starts on the same line. */
  .dlpc__foot {
    margin-top: 0;
  }
}

/* Grey row under the cards: label, chips and the link to all use cases. */
.dlpc__browse {
  align-items: center;
  background-color: var(--dl-bg-soft);
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 40px;
  padding: 20px 24px;
}

.dlpc .dlpc__browse-label {
  color: var(--dl-ink-2);
  font-family: var(--dl-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.dlpc__chips {
  display: flex;
  flex: 1 1 400px;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dlpc__chip-item {
  margin: 0;
  padding: 0;
}

.dlpc .dlpc__all {
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .dlpc__card,
  .dlpc__more::after {
    transition: none;
  }

  a.dlpc__card:hover,
  a.dlpc__card:focus,
  a.dlpc__card:hover .dlpc__more::after {
    transform: none;
  }
}