/* Event banner shared safety contract. Visual design belongs to variants. */
.soa-event-banner,
.soa-event-banner *,
.soa-event-banner *::before,
.soa-event-banner *::after {
  box-sizing: border-box;
}

.soa-event-banner {
  container-type: inline-size;
  max-width: 100%;
  overflow: clip;
  overflow-wrap: anywhere;
  width: 100%;
  word-break: normal;
}

.soa-event-banner :is(img, svg, video, canvas) {
  height: auto;
  max-width: 100%;
}

.soa-event-banner :is(.soa-event-banner__header, .soa-event-banner__body, .soa-event-banner__match-list, .soa-event-banner__match, .soa-event-banner__countdown, .soa-event-banner__footer, .soa-event-banner__aside) {
  min-width: 0;
}

.soa-event-banner :is(.soa-event-banner__label, .soa-event-banner__title, .soa-event-banner__meta, .soa-event-banner__copy, .soa-event-banner__division, .soa-event-banner__fighters, .soa-event-banner__countdown-label, .soa-event-banner__date, .soa-event-banner__time, .soa-event-banner__aside-label, .soa-event-banner__aside-value, .soa-event-banner__aside-meta, .soa-event-banner__aside-date, .soa-countdown) {
  display: block;
  max-width: 100%;
}

.soa-event-banner [hidden] {
  display: none !important;
}

/*
 * wpautop は記事本文のインライン要素の間にある改行を <br> へ変換する。
 * バナーは grid と flex で組んでいるため、混入した <br> がそのまま項目として数えられ、
 * カウントダウンの数字が別行へ落ちたり、高さが100px以上伸びたりする。
 * バナー内で意図的な改行は使わないので、まとめて無効化する。
 */
.soa-event-banner br {
  display: none;
}

.soa-countdown {
  font-variant-numeric: tabular-nums;
}

.soa-countdown.is-complete,
.soa-countdown.is-error {
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .soa-event-banner,
  .soa-event-banner *,
  .soa-event-banner *::before,
  .soa-event-banner *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}