/*
 * Typecho dynamic adapter for the 91cgw-web sports static implementation.
 * Baseline: 91cgw-web 0d260cc494e7409d667c5977c8a0ff6d3f85314b..HEAD.
 * Keep visual rules in sports-category.css / sports-live.css; only dynamic
 * template, pagination and product-requirement differences belong here.
 */

.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;
}

@media (max-width: 820px) {
  /* 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;
  }

  /* Keep mixed-ratio banner creatives fully visible on narrow screens. */
  body.schedule-page #body-bottom .horizontal-banner a img {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
  }
}

/* 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;
  }
}