/* g5sol character sliders — main page only (PC .pm-main / mobile .m2-main)
 * Swiper 11 (js/vendor/swiper) + js/g5sol_charswiper.js. Card design stays in g5sol_pm.css / g5sol_m2.css.
 * Per view: 1.3 (<768) · 2.5 (768–1023) · 4 (>=1024), gap 12px. Progressbar pagination, arrows >=1024 + fine pointer only. */

/* ---- tokens per root (existing theme tokens only) ---- */
.pm-main .g5cs {
  --g5cs-gap: 12px;
  --g5cs-per: 1.3;
  --g5cs-accent: var(--g5-accent);
  --g5cs-track: var(--g5-line);
  --g5cs-surface: var(--g5-surface);
  --g5cs-ink: var(--g5-ink-2);
  --g5cs-line: var(--g5-line);
  --g5cs-shadow: var(--g5-shadow);
  --g5cs-bleed: 6px;           /* room for card hover lift + shadow inside overflow:hidden */
}
.m2-main .g5cs {
  --g5cs-gap: 12px;
  --g5cs-per: 1.3;
  --g5cs-accent: var(--m2-accent);
  --g5cs-track: var(--m2-line);
  --g5cs-surface: var(--m2-surface);
  --g5cs-ink: var(--m2-ink-2);
  --g5cs-line: var(--m2-line);
  --g5cs-shadow: var(--m2-shadow);
}
@media (min-width: 768px) { .pm-main .g5cs, .m2-main .g5cs { --g5cs-per: 2.5; } }
@media (min-width: 1024px) { .pm-main .g5cs, .m2-main .g5cs { --g5cs-per: 4; } }

:is(.pm-main, .m2-main) .g5cs { position: relative; min-width: 0; }
:is(.pm-main, .m2-main) .g5cs__swiper { margin: 0; }
.pm-main .g5cs__swiper { margin: calc(var(--g5cs-bleed) * -1); padding: var(--g5cs-bleed); }
.m2-main .g5cs__swiper { padding: 4px 16px 4px; }   /* cards run to the section card edge, like the old strip */

/* slide width = Swiper's own formula, so the pre-init / no-JS layout matches the initialised one */
:is(.pm-main, .m2-main) .g5cs__slide {
  width: calc((100% - var(--g5cs-gap) * (var(--g5cs-per) - 1)) / var(--g5cs-per));
  height: auto;               /* equal-height cards (wrapper stretches) */
  display: flex;
  box-sizing: border-box;
}
:is(.pm-main, .m2-main) .g5cs__slide > * { width: 100%; min-width: 0; }
.m2-main .g5cs__slide > .m2-char-card { flex: 1 1 auto; }
.pm-main .g5cs__slide > .pm-card, .pm-main .g5cs__slide > .pm-nc, .pm-main .g5cs__slide > .pm-create { flex: 1 1 auto; }
.pm-main .g5cs__slide--empty .pm-empty { margin: 0; }

/* ---- no-JS / Swiper-missing fallback: native horizontal scroll + snap ---- */
:is(.pm-main, .m2-main) .g5cs__swiper:not(.swiper-initialized) {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
:is(.pm-main, .m2-main) .g5cs__swiper:not(.swiper-initialized) > .swiper-wrapper { gap: var(--g5cs-gap); }
:is(.pm-main, .m2-main) .g5cs__swiper:not(.swiper-initialized) .g5cs__slide { scroll-snap-align: start; }
.m2-main .g5cs__swiper:not(.swiper-initialized) { scroll-padding: 0 16px; }
:is(.pm-main, .m2-main) .g5cs:not(.is-swiper) .g5cs__nav,
:is(.pm-main, .m2-main) .g5cs:not(.is-swiper) .g5cs__bar { display: none; }

/* ---- progress bar (Swiper pagination type: progressbar) ---- */
:is(.pm-main, .m2-main) .g5cs__bar.swiper-pagination-progressbar {
  position: relative;
  top: auto; left: auto;
  width: auto;
  height: 3px;
  background: var(--g5cs-track);
  border-radius: 3px;
  overflow: hidden;
}
.pm-main .g5cs__bar.swiper-pagination-progressbar { margin-top: 16px; }
.m2-main .g5cs__bar.swiper-pagination-progressbar { margin: 10px 16px 16px; }
:is(.pm-main, .m2-main) .g5cs__bar .swiper-pagination-progressbar-fill { background: var(--g5cs-accent); border-radius: 3px; }
:is(.pm-main, .m2-main) .g5cs__bar.swiper-pagination-lock { display: none; }
.m2-main .g5cs:has(.g5cs__bar.swiper-pagination-lock) .g5cs__swiper { padding-bottom: 16px; }

/* ---- arrows: PC (>=1024 + mouse) only ---- */
:is(.pm-main, .m2-main) .g5cs__nav { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :is(.pm-main, .m2-main) .g5cs__nav {
    position: absolute;
    z-index: 5;
    top: var(--g5cs-nav-top, 40%);
    width: 40px; height: 40px;
    margin: 0; padding: 0;
    display: grid; place-items: center;
    border: 1px solid var(--g5cs-line);
    border-radius: 50%;
    background: var(--g5cs-surface);
    color: var(--g5cs-ink);
    box-shadow: var(--g5cs-shadow);
    cursor: pointer;
    transition: color .15s, border-color .15s, opacity .15s;
  }
  :is(.pm-main, .m2-main) .g5cs__nav--prev { left: -20px; }
  :is(.pm-main, .m2-main) .g5cs__nav--next { right: -20px; }
  :is(.pm-main, .m2-main) .g5cs__nav .ht-ico { width: 20px; height: 20px; }
  :is(.pm-main, .m2-main) .g5cs__nav--prev .ht-ico { transform: rotate(180deg); }
  :is(.pm-main, .m2-main) .g5cs__nav:hover:not(:disabled) { color: var(--g5cs-accent); border-color: var(--g5cs-accent); }
  :is(.pm-main, .m2-main) .g5cs__nav:focus-visible { outline: 2px solid var(--g5cs-accent); outline-offset: 2px; }
  :is(.pm-main, .m2-main) .g5cs__nav.swiper-button-disabled,
  :is(.pm-main, .m2-main) .g5cs__nav:disabled { opacity: .35; cursor: default; box-shadow: none; }
  :is(.pm-main, .m2-main) .g5cs__nav.swiper-button-lock { display: none; }
  .m2-main .g5cs__nav--prev { left: 4px; }
  .m2-main .g5cs__nav--next { right: 4px; }
}
/* arrow vertical centre = middle of the 3:4 media (card slider) / middle of the row card (new slider) */
.pm-main .g5cs--card { container-type: inline-size; }
.pm-main .g5cs--card .g5cs__nav { --g5cs-nav-top: calc((100cqw - 36px) / 6 - 20px); }
.pm-main .g5cs--nc .g5cs__nav { --g5cs-nav-top: calc(50% - 20px - 10px); }

/* P3 2026-09-25: PC main only — hide the disabled end arrow (prev at start / next at end), keep its layout box.
 * Scoped under .pm-main (PC container); never .g5-ht / .lg alone, which the mobile main (.m2-main) shares. */
.pm-main .g5cs__nav.swiper-button-disabled,
.pm-main .g5cs__nav:disabled,
.pm-main .lg .lg__nav.swiper-button-disabled { visibility: hidden; }

/* card hover lift stays inside the slider bleed; keep the focus ring visible */
:is(.pm-main, .m2-main) .g5cs__slide > a:focus-visible { outline: 2px solid var(--g5cs-accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { :is(.pm-main, .m2-main) .g5cs .swiper-wrapper { transition-duration: 0ms !important; } }