/*
 * Typecho dynamic adapter for the 91cgw-web sports static implementation.
 * Baseline: 91cgw-web 0d260cc494e7409d667c5977c8a0ff6d3f85314b..HEAD.
 * Sports banners use frontend compact PC spacing and 91sp H5 column rules.
 * Keep visual rules in sports-category.css / sports-live.css; only dynamic
 * template, pagination and product-requirement differences belong here.
 */

/* 复用普通页 Logo，按导航实际显示的图形尺寸对齐。 */
body.schedule-page .schedule-brand {
  width: 158px;
  height: 64px;
}

/* 原图上下有透明留白，等比铺满并居中裁去留白，保留完整 Logo 图形。 */
body.schedule-page .schedule-brand img {
  object-fit: cover;
  object-position: center;
}

body.schedule-page .schedule-header,
body.schedule-page .schedule-header__inner {
  height: 88px;
}

@media (max-width: 720px) {
  /* H5 的 Logo 与分类导航上下排列，预留完整高度，避免放大后挤压导航。 */
  body.schedule-page .schedule-header,
  body.schedule-page .schedule-header__inner {
    height: 120px;
  }

  body.schedule-page .schedule-brand {
    margin-bottom: 4px;
  }
}

/* 恢复普通分类页介绍链接的颜色；悬停继续使用主题默认样式。 */
body.schedule-page #foot-menu .footer-desc a {
  color: #1abc9c;
}

.schedule-brand--text {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.page-nav .page-navigator > li.disabled span {
  display: inline-block;
  padding: 0.625rem 1rem;
  border: 1px solid #555;
  border-radius: 0.5rem;
  color: #666;
  cursor: not-allowed;
}

.schedule-page .page-nav {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
  column-gap: 10px;
  align-items: center;
  width: min(100%, 520px);
  height: auto;
  min-height: 42px;
  line-height: normal;
  margin: 20px auto 0;
}

.schedule-page .page-jump {
  position: static;
  left: auto;
  top: auto;
  grid-column: 2;
  grid-row: 1;
  width: auto;
  min-width: 0;
  transform: none;
  z-index: auto;
}

.schedule-page .page-jump #pageForm {
  width: auto;
}

.schedule-page .page-navigator {
  display: contents;
}

.schedule-page .page-navigator > .prev,
.schedule-page .page-navigator > .next {
  float: none;
}

.schedule-page .page-navigator > .prev {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.schedule-page .page-navigator > .next {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.schedule-page .page-navigator > li {
  min-width: 70px;
  margin: 0;
}

.schedule-page .page-navigator > li > a,
.schedule-page .page-navigator > li > span,
.page-nav .page-navigator > li.disabled span {
  box-sizing: border-box;
  display: grid;
  width: 70px;
  height: 42px;
  padding: 0 10px;
  place-items: center;
  border: 1px solid #555;
  border-radius: 6px;
  line-height: 1;
  white-space: nowrap;
}

.schedule-page .page-navigator > li > a {
  border-color: #aaa;
  background: transparent;
  color: #eee;
}

/* The dynamic modal is appended at page level and positioned in viewport coordinates. */
.schedule-modal {
  position: fixed;
}

.schedule-modal__panel {
  height: min(354px, calc(100dvh - 32px));
}

.schedule-modal__games {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.has-schedule-modal {
  overflow: hidden;
}

/* Align shared banners and footer contents with the 1072px sports content line. */
body.schedule-page #body-bottom > .container,
body.schedule-page #foot-menu > .container,
body.schedule-page #footer > .container {
  width: calc(100% - 32px);
  max-width: 1072px;
  margin-right: auto;
  margin-left: auto;
}

/* Keep the frontend bottom banners' compact PC gap; use 91sp H5 breakpoints.
   Apply both to upper/lower banners so their widths remain equal.
   Scope the PGX grid to this page so the global banner layout is unchanged. */
body.schedule-page {
  --sports-ad-columns: 2;
  --sports-ad-gap: 0.5rem;
  --sports-ad-radius: 8px;
}

body.schedule-page .schedule-banners,
body.schedule-page .sports-ad-row,
body.schedule-page .sports-bottom-ads-slot .horizontal-banner {
  display: grid;
  grid-template-columns: repeat(var(--sports-ad-columns), minmax(0, 1fr));
  gap: var(--sports-ad-gap);
}

body.schedule-page .schedule-banners a,
body.schedule-page .sports-ad-row a,
body.schedule-page .sports-bottom-ads-slot .horizontal-banner a {
  display: block;
  min-width: 0;
  margin: 0;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: var(--sports-ad-radius);
}

body.schedule-page .schedule-banners a img,
body.schedule-page .sports-ad-row a img,
body.schedule-page .sports-bottom-ads-slot .horizontal-banner a img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
}

body.schedule-page #body-bottom > .container {
  width: min(calc(100% - 40px), 1072px);
  padding-right: 0;
  padding-left: 0;
}

body.schedule-page.sports-detail #body-bottom > .container {
  width: calc(100% - 96px);
}

.sports-bottom-ads-slot {
  --sports-ad-placeholder-height: var(--sports-ad-desktop-height);
  margin-top: 24px;
}

body.schedule-page .sports-bottom-ads-slot .horizontal-banner {
  padding: 0;
}

@media (max-width: 820px) {
  body.schedule-page.sports-detail {
    --sports-ad-columns: 1;
    --sports-ad-gap: 10px;
  }

  body.schedule-page.sports-detail .sports-bottom-ads-slot {
    --sports-ad-placeholder-height: var(--sports-ad-mobile-height);
  }

  .sports-bottom-ads-slot {
    margin-top: 10px;
  }

  body.schedule-page.sports-detail #body-bottom > .container {
    width: calc(100% - 32px);
  }

  /* The shared container adds another 20px inset on H5; sports content
     already owns its 16px page gutter, so keep bottom banners on that line. */
  body.schedule-page #body-bottom > .container {
    padding-right: 0;
    padding-left: 0;
  }

}

@media (max-width: 720px) {
  body.schedule-page:not(.sports-detail) {
    --sports-ad-columns: 1;
    --sports-ad-gap: 9px;
    --sports-ad-radius: 5px;
  }

  body.schedule-page:not(.sports-detail) .sports-bottom-ads-slot {
    --sports-ad-placeholder-height: var(--sports-ad-mobile-height);
  }

  body.schedule-page #body-bottom > .container {
    width: calc(100% - 2rem);
  }
}

/* The runtime common stylesheet gives the footer negative side margins. */
body.schedule-page.desktop.chrome #footer,
body.schedule-page #footer {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

/* Dynamic chat messages and feedback retain the static page presentation. */
.sports-chat__message .sports-chat__nick {
  color: var(--sports-teal);
}

.sports-chat__message .sports-chat__text {
  display: inline;
  margin: 0 0 0 5px;
  color: #e3e3e3;
  word-break: break-all;
}

.sports-chat__message--join .sports-chat__text {
  color: var(--sports-orange);
}

.sports-chat__composer-main {
  display: contents;
}

.sports-chat__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 2px 0;
  color: #888;
  font-size: 11px;
}

.sports-chat__tip {
  color: var(--sports-teal);
  font-size: 11px;
}

.sports-chat__tip[hidden] {
  display: none;
}

.sports-video .dplayer-full-in-icon {
  display: none !important;
}

@media (max-width: 720px) {
  .schedule-match__competition {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .schedule-match__team--home {
    justify-content: flex-end;
  }

  .schedule-match__team--away {
    justify-content: flex-start;
  }

  .schedule-page .page-nav {
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    column-gap: 6px;
    width: 100%;
  }

  .schedule-page .page-navigator > li {
    min-width: 58px;
  }

  .schedule-page .page-navigator > li > a,
  .schedule-page .page-navigator > li > span,
  .page-nav .page-navigator > li.disabled span {
    width: 58px;
    height: 33px;
    padding: 0 6px;
  }

  .schedule-page .page-jump form {
    gap: 6px;
  }

  .schedule-page .page-jump input {
    width: 44px;
    height: 33px;
    padding: 0 5px;
  }

  .schedule-page .page-jump button {
    min-width: 43px;
    height: 33px;
    padding: 0 7px;
  }

  /* Product requirement: H5 does not render an online-viewer affordance. */
  .sports-chat__head {
    grid-template-columns: 1fr;
  }

  .sports-viewer-count {
    display: none;
  }
}

@media (max-width: 370px) {
  .schedule-filter,
  .schedule-status-filter {
    gap: 4px;
  }

  .schedule-status-filter a {
    padding-inline: 6px;
  }

  .schedule-page .schedule-league-trigger {
    flex: 1 1 84px;
    min-width: 84px;
    padding-inline: 6px;
  }

  .schedule-page .schedule-league-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .schedule-league-trigger > img:first-child {
    display: none;
  }
}