/*!
 * Manga Taxonomy Grid — "masonry" layout
 * CSS multi-column staggering. Cards keep their natural height, so covers with
 * different aspect ratios pack tightly without any JavaScript measuring pass.
 */

.mtg-layout--masonry {
  display: block;
  column-count: 4;
  column-gap: var(--mtg-gap);
}

.mtg-layout--masonry .mtg-item {
  display: block;
  break-inside: avoid;
  page-break-inside: avoid; /* older Firefox */
  margin: 0 0 var(--mtg-gap);
}

.mtg-layout--masonry .mtg-card {
  height: auto;
}

/* Natural height: let the image define the box instead of a fixed ratio. */
.mtg-layout--masonry .mtg-thumb {
  aspect-ratio: auto;
  height: auto;
}

.mtg-layout--masonry .mtg-img {
  height: auto;
  object-fit: contain;
}

/* Terms without artwork still need a box, or the column collapses. */
.mtg-layout--masonry .mtg-placeholder {
  aspect-ratio: 3 / 4;
  height: auto;
}

.mtg-layout--masonry .mtg-body {
  text-align: left;
}

@media (max-width: 1024px) {
  .mtg-layout--masonry { column-count: 3; }
}

@media (max-width: 700px) {
  .mtg-layout--masonry { column-count: 2; }
}

@media (max-width: 420px) {
  .mtg-layout--masonry { column-count: 1; }
}

/* Explicit column choices from the settings screen. */
.mtg-layout--masonry.mtg-cols--2 { column-count: 2; }
.mtg-layout--masonry.mtg-cols--3 { column-count: 3; }
.mtg-layout--masonry.mtg-cols--4 { column-count: 4; }
.mtg-layout--masonry.mtg-cols--5 { column-count: 5; }
.mtg-layout--masonry.mtg-cols--6 { column-count: 6; }

/* The explicit choices outrank the plain responsive rules above, so they need
   their own breakpoints. */
@media (max-width: 1024px) {
  .mtg-layout--masonry.mtg-cols--4,
  .mtg-layout--masonry.mtg-cols--5,
  .mtg-layout--masonry.mtg-cols--6 { column-count: 3; }
}

@media (max-width: 700px) {
  .mtg-layout--masonry.mtg-cols--3,
  .mtg-layout--masonry.mtg-cols--4,
  .mtg-layout--masonry.mtg-cols--5,
  .mtg-layout--masonry.mtg-cols--6 { column-count: 2; }
}

@media (max-width: 420px) {
  .mtg-layout--masonry.mtg-cols--2,
  .mtg-layout--masonry.mtg-cols--3,
  .mtg-layout--masonry.mtg-cols--4,
  .mtg-layout--masonry.mtg-cols--5,
  .mtg-layout--masonry.mtg-cols--6 { column-count: 1; }
}

@media print {
  .mtg-layout--masonry { column-count: 3; }
}