/* SummerToons — "Seri Kesiti" gallery layout fix (2026-09-18, r3)
   Loaded AFTER mauve-toons.css and mauve-home-r2.css, same selectors/
   specificity, so it overrides by plain source order — no !important beyond
   what the canonical rules already use.

   WHY THIS IS A SEPARATE, REVISIONED FILE (not just an edit to
   mauve-toons.css): mauve-toons.css is served through Cloudflare with
   `cache-control: max-age=315360000` and CF ignores the `?ver=` query string
   for CSS, so an in-place edit to that file does not reliably reach real
   visitors and there is no CF purge access on this site. The identical rules
   below ALSO exist in mauve-toons.css itself (so the canonical source stays
   correct/consistent for anyone reading it), but this small file — at a URL
   Cloudflare has never cached before — is what actually delivers the change.
   Bump the filename (r1 -> r2 -> r3 -> ...) the same way mauve-home-rN.css /
   chat.rN.css do whenever these bytes change again. r1/r2 are left in place,
   unreferenced, per the same convention as mauve-home-r1.css.

   r1 root cause: mauve-reading.js's foldIntoTabs() strips `.bixbox` when it
   moves the "Seri Kesiti" box into its own tab panel, but the grid/tile
   rules were scoped to `.bixbox.image-list.st-kesit` and stopped matching —
   full-resolution images rendered unconstrained, overlapping the panel
   below. r1 fixed that by dropping the `.bixbox.` requirement.

   r2: theme's legacy `#gallery {margin:15px !important; height:245px
   !important;}` was still winning on margin/height; overridden here.
   grid-template-columns switched auto-fill -> auto-fit, min tile 150 -> 200px
   so a short gallery's tiles stretch to fill the row. Panel padding trimmed.
   r2 also cloned the genre/tag chips into this panel — REMOVED in r3 below,
   owner wants Seri Kesiti to contain only the gallery, nothing else. */

.bixbox.image-list #gallery.owl-carousel { display: block; }
.st-kesit-grid,
.image-list.st-kesit #gallery {
  display: grid !important;
  margin: 0 !important;
  height: auto !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.image-list.st-kesit #gallery > a {
  display: block; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--st-border); background: var(--st-surface);
  aspect-ratio: 3 / 4;
}
.image-list.st-kesit #gallery > a img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .image-list.st-kesit #gallery > a:hover img { transform: scale(1.05); }
}
@media (max-width: 560px) {
  .st-kesit-grid, .image-list.st-kesit #gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.mauve-series-kesit-panel {
  box-sizing: border-box;
  padding: 18px 16px 22px;
  border: 1px solid rgba(186, 112, 255, .14);
  border-radius: 12px;
  background: rgba(17, 7, 27, .9);
}
.mauve-series-kesit-panel .releases { border-bottom-color: rgba(186, 112, 255, .14); padding: 0 0 14px; margin-bottom: 16px; }
.mauve-series-kesit-panel .releases h2 { color: #f0ecfa !important; margin: 0 !important; }

body.mauve-series-page .postbody.full:has(.tsinfo.bixbox) .mauve-series-kesit-panel {
  order: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}