/* SPORTS SURIN V114 — mascot horizontal wrap, homepage + admin preview.
   Overrides older V102/V104 styles. No upload logic or database changes. */

/* Homepage: a single horizontal line until available width is used up. */
html body.public-site.page-index .home-mascot-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}
html body.public-site.page-index .home-mascot-container > .home-mascot-strip {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: flex-end !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 18px 22px !important;
  width: 100% !important;
  max-width: 1100px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
html body.public-site.page-index .home-mascot-strip > .home-mascot-figure {
  display: flex !important;
  flex: 0 0 min(var(--mascot-item-width, 160px), 40vw) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: min(var(--mascot-item-width, 160px), 40vw) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
html body.public-site.page-index .home-mascot-strip > .home-mascot-figure > .home-mascot-image {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}
html body.public-site.page-index .home-mascot-caption {
  width: 100% !important;
  text-align: center !important;
}
@media (max-width: 640px) {
  html body.public-site.page-index .home-mascot-container > .home-mascot-strip {
    gap: 14px 12px !important;
  }
  html body.public-site.page-index .home-mascot-strip > .home-mascot-figure {
    flex-basis: min(var(--mascot-item-width, 160px), 38vw) !important;
    width: min(var(--mascot-item-width, 160px), 38vw) !important;
  }
}

/* Admin: existing mascots display as a multi-column gallery, not a long list. */
body.admin-body .mascot-admin-panel .mascot-admin-preview {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.admin-body .mascot-admin-panel .mascot-admin-preview > .mascot-preview-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.admin-body .mascot-admin-panel .mascot-preview-list > .mascot-preview-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body.admin-body .mascot-admin-panel .mascot-preview-item img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 150px !important;
  object-fit: contain !important;
}
@media (max-width: 400px) {
  body.admin-body .mascot-admin-panel .mascot-admin-preview > .mascot-preview-list {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  }
}