/* Cards
 * -------------------------------------------------------------------------- */

.card {
  background: var(--color-bg--card);
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 3rem var(--color-shadow);

  .bulk-actions { left: 0; }
}

.card__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  text-indent: -9999px;
}

.card__button {
  position: relative;
  z-index: 2; /* for button_to used with .card__link */
}

.card__edit[open] ~ .card__header,
.card__delete[open] ~ .card__header {
  display: none;
}

.card__content {
  padding: 1.5em;
  width: 100%;

  .entry__body { margin: 0; }
}

.card__actions {
  position: absolute;
  top: 0;
  right: 0.25em;
}

.card__actions-trigger::before {
  background-size: 65%;
}

.card__footer {
  display: none;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 0.5em;
  z-index: 0;

  .collection-cards &,
  .breakout-cards & {
    display: block;
  }

  &::after {
    content: ' ';
    width: 2.7em;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, var(--color-bg--sheet-transparent) 0%, var(--color-bg--entry-sheet) 80%);
    z-index: 1;
  }
}

/* Cards
 * -------------------------------------------------------------------------- */

.stacked-cards .card {
  box-shadow: 0 1px 8px var(--color-shadow);
  border-radius: 1rem;
  margin-bottom: 6px;
  position: absolute;
  top: 6.5rem;
  left: 2rem;
  right: 2rem;
  bottom: 2rem;
  max-height: 20rem;
  overflow: hidden;
  z-index: 0;

  &:nth-child(1) { transform: rotate(1deg); }
  &:nth-child(2) { margin-top: 1rem; transform: rotate(-1deg); }
  &:nth-child(3) { margin-top: 2rem; transform: rotate(2deg); }
  &:nth-child(4) { margin-top: 3rem; transform: rotate(1deg); }
  &:nth-child(5) { margin-top: 4rem; transform: rotate(-2deg); }

  .card__link { display: none; }
}

.collection-cards {
  display: inline-grid;
  justify-items: center;
  padding: 1.5rem;
  white-space: nowrap;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fill, 19rem);
  grid-gap: 1rem;

  @media (max-width: 39.95em) {
    padding: 1rem var(--page-padding);
    margin-left: var(--negative-page-padding);
    margin-right: var(--negative-page-padding);
  }

  .card {
    width: 19rem;
    height: 6em;
    order: 1;
    line-height: 1.3;
    word-wrap: break-word;
    padding: 0.25em;
    white-space: normal;
    text-align: left;
    box-shadow: 0 0 5px var(--color-shadow--dark);
    background: var(--color-bg--entry-sheet);

    @media (min-width: 40em) {
      box-shadow: 0 0 2rem var(--color-shadow);
    }

    .card__content { padding: 0.5em; }
  }

  .card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    line-height: 1.2;
    padding-bottom: 0.1em;
  }
}