/* Shared Notion-style gallery proportions for Sections, Pages, and Rules. */
.wayfarer-gallery,
.glossary-section-grid,
.rule-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.wayfarer-card,
.glossary-section-card,
article.rule-card,
.atlas-page-card {
  box-sizing: border-box;
  aspect-ratio: 1;
}

.gallery-sort-item {
  position: relative;
  min-width: 0;
}

.gallery-sort-item > .glossary-section-card,
.gallery-sort-item > .wayfarer-card {
  display: grid;
  width: 100%;
}

.gallery-sort-item.is-dragging {
  z-index: 4;
  opacity: .55;
}

.gallery-sort-handle {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #9a958b;
  background: transparent;
  box-shadow: none;
  font-size: 18px;
  line-height: 1;
  opacity: .25;
  cursor: grab;
  transition: opacity .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.gallery-sort-item:hover > .gallery-sort-handle,
.gallery-sort-handle:focus-visible {
  background: rgba(255, 254, 250, .82);
  box-shadow: 0 1px 5px rgba(34, 45, 62, .1);
  opacity: .82;
}

.gallery-sort-handle:active {
  background: rgba(255, 254, 250, .94);
  opacity: 1;
  cursor: grabbing;
}

.wayfarer-card,
.glossary-section-card,
article.rule-card,
.atlas-page-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 68px;
}

.wayfarer-card {
  grid-template-rows: minmax(0, 1fr) 52px;
}

.wayfarer-card__art,
.glossary-section-card__art,
.wayfarer-card__image,
.glossary-section-card__image,
.atlas-page-card__image {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.wayfarer-card__image,
.glossary-section-card__image,
.atlas-page-card__image {
  display: block;
  object-fit: cover;
}

.wayfarer-card__blank,
.glossary-section-card__blank {
  display: block;
  min-height: 0;
  background: #fffefa;
}

.glossary-section-card__label {
  min-height: 0;
  padding-block: 0;
}

article.rule-card {
  grid-template-rows: minmax(0, 1fr) 68px !important;
}

article.rule-card > .rule-card__cover-link {
  height: 100%;
}

.rule-card__cover,
.rule-card__cover-placeholder {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

.rule-card__cover-placeholder {
  background: #fffefa !important;
}

.rule-card__cover-placeholder > span {
  display: none !important;
}

.atlas-page-card {
  overflow: hidden;
  border: 1px solid var(--rg-line, #ded7c8);
  border-radius: 9px;
  color: var(--rg-navy, #102a50);
  background: #fffefa;
  box-shadow: 0 2px 8px rgba(34, 45, 62, .04);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}

.atlas-page-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(38, 48, 61, .12);
}

.atlas-page-card__cover {
  display: block;
  min-height: 0;
  background: #fffefa;
}

.atlas-page-card__label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border-top: 1px solid var(--rg-line, #ded7c8);
}

.wayfarer-card.is-compact,
.glossary-section-card.is-compact,
.atlas-page-card.is-compact,
article.rule-card.is-compact {
  aspect-ratio: auto;
  grid-template-rows: 68px;
}

.wayfarer-card.is-compact {
  grid-template-rows: 68px;
}

article.rule-card.is-compact {
  grid-template-rows: 68px !important;
}

.is-compact .wayfarer-card__label,
.is-compact .glossary-section-card__label,
.is-compact .atlas-page-card__label,
article.rule-card.is-compact > .rule-card__label {
  height: auto;
  min-height: 0;
  border-top: 0;
}

@media (max-width: 1180px) {
  .wayfarer-gallery,
  .glossary-section-grid,
  .rule-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  .wayfarer-gallery,
  .glossary-section-grid,
  .rule-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .wayfarer-gallery,
  .glossary-section-grid,
  .rule-card-grid {
    grid-template-columns: 1fr;
  }
}