/*
 * Shared alignment for card collections.
 * Cards remain left-aligned internally while collections and incomplete rows
 * are centered within their available content area.
 */

ul.link-grid {
  justify-content: center;
}

.article-flow:has(> .hall-card-grid),
.article-flow:has(> .visual-record-grid),
.article-flow:has(> .card-grid),
.article-flow:has(> .record-grid),
.article-flow:has(> .chronology-record-grid),
.article-flow:has(> .faction-record-grid) {
  max-width: none;
}

.hall-card-grid,
.visual-record-grid,
.deity-record-grid,
.card-grid,
.record-grid,
.chronology-record-grid,
.faction-record-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
}

.hall-card-grid > .hall-placeholder-card {
  flex: 0 1 calc((100% - 2rem) / 3);
  min-width: 0;
  text-align: left;
}

.visual-record-grid > .visual-record-card,
.deity-record-grid > .visual-record-card {
  flex: 0 1 calc((100% - 1.7rem) / 3);
  max-width: 340px;
  min-width: 0;
  text-align: left;
}

.card-grid > *,
.record-grid > *,
.chronology-record-grid > *,
.faction-record-grid > * {
  flex: 0 1 340px;
  min-width: 0;
  text-align: left;
}

@media (max-width: 980px) {
  .hall-card-grid > .hall-placeholder-card {
    flex-basis: calc((100% - 1rem) / 2);
  }

  .visual-record-grid > .visual-record-card,
  .deity-record-grid > .visual-record-card {
    flex-basis: calc((100% - 0.85rem) / 2);
    max-width: 250px;
  }

  .card-grid > *,
  .record-grid > *,
  .chronology-record-grid > *,
  .faction-record-grid > * {
    flex-basis: calc((100% - 1rem) / 2);
    max-width: 340px;
  }
}

@media (max-width: 640px) {
  .hall-card-grid > .hall-placeholder-card,
  .visual-record-grid > .visual-record-card,
  .deity-record-grid > .visual-record-card,
  .card-grid > *,
  .record-grid > *,
  .chronology-record-grid > *,
  .faction-record-grid > * {
    flex-basis: 100%;
    max-width: none;
  }
}