/* Mobile sidebar matches: compact rail, filters and card metadata. */

/* Late mobile-placement refinements extracted from the legacy layer. */
.sidebar-matches-card--mobile-placement .sidebar-matches-card__header {
  margin-inline: -12px;
}

@media (max-width: 999.98px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__mobile-rail {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 12px;
    scroll-snap-type: x proximity;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured {
    flex-basis: 206px;
    scroll-snap-align: start;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__format {
    padding: 0 5px;
    border-radius: 7px;
    line-height: 1;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__team-name,
  .sidebar-matches-card--mobile-placement .sidebar-match-row__team-name {
    display: -webkit-box;
    min-height: 1.4em;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 700px) {
  .sidebar-matches-card--mobile-placement .sidebar-match-featured {
    flex-basis: 196px;
  }
}

@media (max-width: 860px) {
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status {
    max-width: 58px;
    min-height: 16px;
    padding: 0 5px;
    border-radius: 7px;
    font-size: 0.5rem;
    letter-spacing: 0;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--live::before {
    width: 4px;
    height: 4px;
    flex-basis: 4px;
    box-shadow: 0 0 0 2px color-mix(in srgb, #d94a3a 8%, transparent);
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__format {
    min-width: 34px;
    min-height: 16px;
    padding: 0 5px;
    border-radius: 7px;
    font-size: 0.5rem;
  }
}

@media (max-width: 700px) {
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 40px;
    padding-inline: 5px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__format {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: max-content;
    padding-inline: 5px;
  }
}

/* === Mobile matches header: compact segmented control === */
@media (max-width: 999.98px) {
  .sidebar-matches-card--mobile-placement {
    padding: 8px 12px 9px !important;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header {
    display: grid;
    grid-template-columns: max-content auto minmax(0, 1fr);
    grid-template-areas: "titles controls spacer";
    align-items: center;
    justify-content: start;
    box-sizing: border-box;
    min-height: 36px;
    margin: -8px -12px 6px !important;
    padding: 0 14px !important;
    column-gap: 10px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__titles {
    grid-area: titles;
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__title,
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__title-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    line-height: 1;
  }

  .sidebar-matches-card--mobile-placement.has-live-matches .sidebar-matches-card__title::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    box-shadow: 0 0 0 3px color-mix(in srgb, #d94a3a 10%, transparent);
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__controls {
    grid-area: controls;
    align-self: center;
    justify-self: start;
    display: flex;
    align-items: center;
    height: 24px;
    margin-left: 0;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__filters {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: none;
    height: 24px;
    min-height: 24px;
    margin: 0;
    padding: 1px;
    gap: 1px;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--line) 62%, transparent);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--surface-muted) 58%, var(--surface-strong));
    box-shadow: none;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__filter {
    width: auto;
    min-width: 26px;
    height: 22px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: var(--radius-inner);
    font-size: 0.6rem;
    line-height: 1;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__filter.is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 48%, transparent);
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__filter[data-match-filter="all"] {
    min-width: 34px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__filter[data-match-filter="tier1"] {
    min-width: 26px;
    padding-inline: 5px;
    font-size: 0.74rem;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__mobile-rail {
    gap: 7px;
    margin-top: 0 !important;
    padding-bottom: 0;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured {
    padding: 6px !important;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__top {
    margin-bottom: 5px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status,
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__format {
    min-height: 18px;
    font-size: 0.48rem;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__body {
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__team {
    grid-template-rows: 28px 16px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__logo,
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__logo--fallback {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__team-name {
    min-height: 16px;
    font-size: 0.6rem;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__center {
    width: 52px !important;
    min-width: 52px !important;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__score {
    grid-template-columns: 1ch 8px 1ch;
    width: 52px !important;
    font-size: 1.14rem;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__score-label {
    min-height: 12px;
    padding-inline: 4px;
    font-size: 0.38rem;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__submeta {
    font-size: 0.58rem;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__mobile-time {
    font-size: 0.96rem;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__mobile-stage {
    font-size: 0.54rem;
  }
}

@media (max-width: 640px) {
  .sidebar-matches-card--mobile-placement {
    padding: 8px 10px 9px !important;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header {
    min-height: 34px;
    margin: -8px -10px 6px !important;
    padding-inline: 12px !important;
    column-gap: 9px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__title,
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__title-link {
    min-height: 23px;
    font-size: 0.94rem;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__controls,
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__filters {
    height: 23px;
    min-height: 23px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__filter {
    height: 21px;
    min-height: 21px;
    padding-inline: 6px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__filter[data-match-filter="all"] {
    min-width: 32px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__filter[data-match-filter="tier1"] {
    min-width: 25px;
    padding-inline: 5px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured {
    flex-basis: 170px !important;
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
  }
}

/* Mobile matches block: premium compact "All matches" action in header. */
.sidebar-matches-card__header-all-link {
  display: none;
}

@media (max-width: 999.98px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link {
    grid-area: spacer;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
      border-color 160ms ease,
      background 160ms ease,
      color 160ms ease,
      transform 160ms ease,
      box-shadow 160ms ease;
  }



  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:active {
    transform: translateY(1px);
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


@media (max-width: 380px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header {
    column-gap: 7px;
  }


}

/* Mobile matches block: calmer premium header action. */
@media (max-width: 999.98px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link {
    border-color: rgba(203, 213, 225, 0.82);
  }




}

@media (max-width: 640px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link {
    padding-inline: 9px 8px;
  }
}

@media (max-width: 380px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link {
    padding-inline: 8px 7px;
  }
}

/* Mobile matches block: tune the "All matches" button radius to match the UI rhythm. */
@media (max-width: 999.98px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link,
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:hover,
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:focus-visible {
    border-radius: 10px;
  }
}

@media (max-width: 640px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link,
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:hover,
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:focus-visible {
    border-radius: 9px;
  }
}

@media (max-width: 380px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link,
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:hover,
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:focus-visible {
    border-radius: 8px;
  }
}

/* Mobile matches block: quiet text action for the full matches link. */
@media (max-width: 999.98px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link {
    gap: 5px;
    min-height: 26px;
    padding: 0 3px 0 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: color-mix(in srgb, var(--text-soft) 74%, var(--text));
    box-shadow: none;
    font-size: 0.66rem;
    font-weight: 840;
    letter-spacing: -0.015em;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:hover,
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:focus-visible {
    border-color: transparent;
    background: transparent;
    color: color-mix(in srgb, var(--accent) 46%, var(--text));
    box-shadow: none;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 14%, transparent);
    outline-offset: 3px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-arrow {
    margin-left: 1px;
    color: color-mix(in srgb, var(--accent) 50%, var(--text-soft));
    font-size: 0.86rem;
    font-weight: 860;
    line-height: 1;
    opacity: 0.86;
    transform: translateY(-0.5px);
    transition:
      color 160ms ease,
      opacity 160ms ease,
      transform 160ms ease;
  }

  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:hover .sidebar-matches-card__header-all-arrow,
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link:focus-visible .sidebar-matches-card__header-all-arrow {
    color: var(--accent);
    opacity: 1;
    transform: translate(1px, -0.5px);
  }
}

@media (max-width: 640px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link {
    min-height: 26px;
    padding-right: 2px;
    padding-left: 7px;
    border-radius: 8px;
    font-size: 0.62rem;
  }
}

@media (max-width: 380px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__header-all-link {
    gap: 4px;
    padding-left: 5px;
    font-size: 0.59rem;
  }
}


/* Mobile matches block: adaptive status/date badges inside match cards. */
@media (max-width: 999.98px) {
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__top {
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status {
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    flex: 0 0 auto;
    justify-content: center;
    gap: 4px;
    padding-inline: 6px;
    white-space: nowrap;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--live {
    padding-left: 6px;
    padding-right: 7px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--live::before {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--upcoming,
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--finished,
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--unknown,
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--canceled,
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--postponed {
    padding-inline: 7px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__competition {
    max-width: calc(100% - 78px) !important;
  }
}

@media (max-width: 640px) {
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status {
    min-height: 17px;
    padding-inline: 5px;
    border-radius: 7px;
    font-size: 0.48rem;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--live {
    padding-left: 5px;
    padding-right: 6px;
  }

  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--upcoming,
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--finished,
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--unknown,
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--canceled,
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__status--postponed {
    padding-inline: 6px;
  }
}

@media (max-width: 380px) {
  .sidebar-matches-card--mobile-placement .sidebar-match-featured__competition {
    max-width: calc(100% - 72px) !important;
  }
}

/* Mobile matches block: keep tournament names visible after adaptive badges. */
@media (max-width: 999.98px) {
  .sidebar-matches-card--mobile-placement .sidebar-matches-card__mobile-rail .sidebar-match-featured__competition {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
    text-align: left;
    transform: none;
  }
}