/* Document Card
 *
 * A section's template catalogue as a grid of document-shaped cards. A card never shows what the
 * template holds: it names the template and a few facts about it, and opens the page holding the
 * rest.
 */

.doc-card-grid {
  display: grid;
  /* A column count the grid works out from the space it has, so the cards keep one width at every
     width of page and no breakpoint has to name the counts. */
  grid-template-columns: repeat(auto-fill, minmax(var(--size-56), 1fr)); /* 224px */
  gap: var(--size-3);
}

.doc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  aspect-ratio: 4 / 5; /* Portrait, like the page it stands for */
  padding: var(--size-3) var(--size-3) var(--size-2);
  background-color: var(--color-surface);
  border: var(--border) solid var(--color-border);
  border-radius: var(--rounded-md) 0 var(--rounded-md) var(--rounded-md); /* Square where it folds */

  &:hover {
    border-color: var(--color-border-dark);
  }

  /* The add tile is itself the anchor; every other card is opened by the link on its name. */
  &:focus-visible,
  &:has(.doc-card__link:focus-visible) {
    outline: var(--border-2) solid var(--color-selected-dark);
  }
}

/* The folded corner. The outer half is the page behind, covering the card's own corner; the inner
   half is the flap, and the two borders are its fold. */
.doc-card::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--border) * -1);
  inset-inline-end: calc(var(--border) * -1);
  inline-size: var(--size-5);
  block-size: var(--size-5);
  background: linear-gradient(225deg, var(--color-bg) 0 50%, var(--color-border-light) 50% 100%);
  border-inline-start: var(--border) solid var(--color-border);
  border-block-end: var(--border) solid var(--color-border);
  border-end-start-radius: var(--rounded-xs);
}

/* The name and the facts read as one block, set apart from the ruled lines below them. */
.doc-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
}

.doc-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  /* The name is free text in a card of fixed height: break a word with nowhere to wrap rather
     than spill past the fold, and stop at three lines rather than push the ruled lines and the
     buttons out of the bottom of the card. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* The name links to the template's page, and the pseudo-element stretches that one link over the
   whole card so the sheet is clickable without a second link wrapping the first. */
.doc-card__link {
  color: inherit;
  text-decoration: none;

  /* Raised, because the ruled lines are masked and a mask paints its element as high as an
     un-layered absolute box would — without this the lines take the clicks over them. */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
}

.doc-card__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--size-2_5);
  row-gap: var(--size-0_5);
}

.doc-card__fact-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.doc-card__fact-value {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* Ruled lines where the template's own text would be, fading out towards the buttons. */
.doc-card__lines {
  flex: 1;
  min-block-size: var(--size-5);
  background: repeating-linear-gradient(to bottom,
      var(--color-border-light) 0 var(--border),
      transparent var(--border) calc(var(--size-3) + var(--border)));
  mask-image: linear-gradient(to bottom, black 30%, transparent 80%);
}

.doc-card__actions {
  position: relative; /* Above the name's stretched link, so the buttons take their own clicks */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: var(--size-1);
  border-block-start: var(--border) solid var(--color-border-light);
  padding-block-start: var(--size-1_5);
}

/* The tile that starts a new template: the same sheet drawn as an outline, and no fold — nothing
   is written on it yet. */
.doc-card--add {
  align-items: center;
  justify-content: center;
  gap: var(--size-1_5);
  padding: 0;
  background-color: transparent;
  border-style: dashed;
  border-radius: var(--rounded-md);
  color: var(--color-text-subtle);

  &::before {
    display: none;
  }

  &:hover {
    color: var(--color-primary);
  }
}

.doc-card__add-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}