/* =========================================================
   CHARACTER ROWS
   Carousel grid sizing for character rows.
   ========================================================= */

/* ---------------------------------------------------------
   Carousel grid.

   Reading guide:
   - Row shell/theme styles live in css/character-row-shell.css.
   - Row deck card polish lives in css/character-row-deck.css.
   - Scroll progress and arrow hints live in css/character-row-feedback.css.
   --------------------------------------------------------- */

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: clamp(240px, 24vw, 340px);
  gap: 0.92rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: none !important;
  scroll-padding-inline: 0 !important;
  padding-inline: 0.08rem 0.56rem;
  padding-top: 0.65rem;
  padding-bottom: 1rem;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  cursor: grab;
  /* Let touch visitors swipe the card row sideways without trapping normal page scrolling. */
  touch-action: pan-x pan-y pinch-zoom;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-card,
body[data-page="secondarycharacters"] #secondary-characters .secondary-character-card img {
  -webkit-user-drag: none;
  user-select: none;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-grid.is-pointer-dragging {
  cursor: grabbing;
  scroll-snap-type: none !important;
}


body[data-page="secondarycharacters"] #secondary-characters .secondary-character-grid::-webkit-scrollbar {
  height: 22px;
}


body[data-page="secondarycharacters"] #secondary-characters .secondary-character-grid::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}


body[data-page="secondarycharacters"] #secondary-characters .secondary-character-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 224, 156, 0.88), rgba(122, 186, 232, 0.78));
  border: 4px solid rgba(0, 0, 0, 0.28);
}


@media (max-width: 767px) {
  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-grid {
    grid-auto-columns: clamp(218px, 80vw, 304px);
    gap: 0.68rem;
    padding-inline: 0 0.36rem;
    padding-top: 0.58rem;
    padding-bottom: 1.1rem;
  }
}


@media (max-width: 430px) {
  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-grid {
    grid-auto-columns: clamp(220px, 84vw, 312px);
    padding-inline: 0 0.32rem;
  }
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster .secondary-character-grid {
  --secondary-deck-card-width: clamp(205px, 22vw, 300px);
  --secondary-deck-gap: clamp(0.04rem, 0.28vw, 0.28rem);
  --secondary-deck-side-pad: max(0.8rem, calc((100% - var(--secondary-deck-card-width)) / 2));
  position: relative;
  z-index: 1;
  grid-auto-columns: var(--secondary-deck-card-width);
  gap: var(--secondary-deck-gap);
  padding: clamp(0.8rem, 1.4vw, 1.05rem) var(--secondary-deck-side-pad) clamp(1rem, 1.8vw, 1.35rem);
  overflow-y: visible;
  scroll-padding-inline: var(--secondary-deck-side-pad);
  scroll-behavior: smooth;
  perspective: none;
}

body[data-page="secondarycharacters"] #secondary-characters.is-search-filtering .secondary-character-roster .secondary-character-grid {
  justify-content: center;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster .secondary-character-grid {
  scrollbar-width: none;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster .secondary-character-grid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (min-width: 768px) {
  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster .secondary-character-grid {
    --secondary-deck-card-width: clamp(320px, 33vw, 500px);
    --secondary-deck-gap: clamp(0.04rem, 0.24vw, 0.32rem);
    padding-top: clamp(0.95rem, 1.35vw, 1.3rem);
    padding-bottom: clamp(1.12rem, 1.55vw, 1.55rem);
  }
}

@media (min-width: 1400px) {
  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster .secondary-character-grid {
    --secondary-deck-card-width: clamp(440px, 26vw, 560px);
  }
}

@media (min-width: 1800px) {
  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster .secondary-character-grid {
    --secondary-deck-card-width: clamp(500px, 25vw, 620px);
  }
}

@media (max-width: 767px) {
  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster .secondary-character-grid {
    --secondary-deck-card-width: clamp(178px, 66vw, 244px);
    --secondary-deck-gap: 0.12rem;
    --secondary-deck-side-pad: max(0.55rem, calc((100% - var(--secondary-deck-card-width)) / 2));
    padding-top: 0.7rem;
    padding-bottom: 1rem;
    scroll-snap-type: none !important;
    scroll-behavior: auto;
    touch-action: pan-x pan-y pinch-zoom;
    cursor: auto;
  }
}

@media (pointer: fine) {
  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster .secondary-character-grid {
    scroll-behavior: auto;
  }
}