/*
 * Masuria Esport - "Mecze" (matches) section (assets/css/sections/matches.css)
 * Markup: template-parts/sections/matches.php. Requires tokens.css, base.css (.msr-container).
 * Design (Figma 1:588, 1440 px): bg #09090b, padding 128 / 96, two columns gap 48 (next match ~816, recent ~384).
 * Deviation: both crests use the MSR logo (right one dimmed), the design had placeholder icons.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

.msr-matches {
  padding-block: var(--msr-section-py-fluid);
  background-color: var(--msr-surface-alt);
  scroll-margin-top: var(--msr-space-32); /* ADDED: not in design - keeps a direct #mecze link clear of the fixed header */
}

.msr-matches__inner {
  display: grid;
  grid-template-columns: minmax(0, 2.125fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* ADDED: one column only - do not stretch the card / list across the full layout */
.msr-matches--single .msr-matches__inner {
  grid-template-columns: minmax(0, 816px);
  justify-content: center;
}

.msr-matches__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.msr-matches__col--recent {
  gap: 24px;
}

.msr-matches__title {
  margin: 0;
  color: var(--msr-white);
  font-family: var(--msr-font-heading);
  font-size: 1.875rem;
  font-style: italic;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-wrap: balance;
}

.msr-matches__col--next .msr-matches__title {
  margin-bottom: 40px;
}

/* ==========================================================================
   Next match card
   ========================================================================== */

.msr-matches__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 48px;
  overflow: hidden;
  border: 1px solid rgba(197, 160, 89, 0.2);
  background-color: var(--msr-surface);
}

.msr-matches__card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background-color: var(--msr-gold);
}

.msr-matches__teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.msr-matches__team {
  display: flex;
  flex: 0 0 160px;
  flex-direction: column;
  align-self: flex-start; /* ADDED: both crests level when one name wraps ("MASURIA ESPORT") or has no region */
  align-items: center;
  min-width: 0;
  text-align: center;
}

.msr-matches__crest {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 128px;
  height: 128px;
  margin-bottom: 24px;
  border: 4px solid var(--msr-gold);
  border-radius: 50%;
  background-color: #0a0a0a;
}

.msr-matches__crest--away {
  border-color: #3f3f46;
  background-color: #27272a;
}

.msr-matches__crest-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 60px;
}

.msr-matches__crest--away .msr-matches__crest-img {
  opacity: 0.5;
}

/* ADDED: not in design - uploaded opponent logo (the design had a placeholder icon) */
.msr-matches__crest--away .msr-matches__crest-img--logo {
  width: 72px;
  height: 72px;
  max-width: none;
  object-fit: contain;
  opacity: 1;
}

.msr-matches__team-name {
  max-width: 100%;
  color: var(--msr-white);
  font-family: var(--msr-font-heading);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.msr-matches__team-region {
  margin-top: 4px;
  color: var(--msr-white-40);
  font-family: var(--msr-font-body);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.12px;
  text-transform: uppercase;
}

.msr-matches__center {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.msr-matches__format {
  margin-bottom: 24px;
  padding: 8px 24px;
  border: 1px solid var(--msr-white-10);
  background-color: var(--msr-white-05);
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 6px;
  text-transform: uppercase;
}

.msr-matches__vs {
  margin-bottom: 8px;
  color: var(--msr-gold);
  font-family: var(--msr-font-heading);
  font-size: 3.75rem;
  font-style: italic;
  font-weight: 900;
  line-height: 60px;
  letter-spacing: -2.1px;
}

.msr-matches__date {
  margin: 0;
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.msr-matches__countdown {
  margin: 16px 0 0;
  color: var(--msr-white-40);
  font-family: var(--msr-font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.01em;
}

.msr-matches__competition {
  margin: 4px 0 0;
  color: var(--msr-white-30);
  font-family: var(--msr-font-body);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 15px;
  text-transform: uppercase;
}

.msr-matches__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.msr-matches__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16.5px 40px;
  border: 1px solid transparent;
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color var(--msr-duration) var(--msr-ease),
    border-color var(--msr-duration) var(--msr-ease);
}

.msr-matches__btn--primary {
  background-color: var(--msr-gold);
  color: var(--msr-on-gold);
}

.msr-matches__btn--secondary {
  border-color: var(--msr-white-10);
  background-color: var(--msr-white-05);
}

@media (hover: hover) {
  .msr-matches__btn--primary:hover {
    background-color: var(--msr-gold-hover);
  }

  .msr-matches__btn--secondary:hover {
    border-color: var(--msr-white-40);
    background-color: var(--msr-white-10);
  }
}

/* ==========================================================================
   Recent matches
   ========================================================================== */

.msr-matches__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.msr-matches__row {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--msr-white-05);
  background-color: var(--msr-surface);
  color: var(--msr-white);
  text-decoration: none;
  transition: border-color var(--msr-duration) var(--msr-ease);
}

.msr-matches__result {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  height: 40px;
  padding-inline: 4px;
  border-radius: 4px;
  background-color: var(--msr-white-10);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--msr-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.msr-matches__row--win .msr-matches__result {
  background-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.msr-matches__row--loss .msr-matches__result {
  background-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* ADDED: not in design - small opponent crest next to the result (logo, else the dimmed MSR logo) */
.msr-matches__row-logo {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid #3f3f46;
  border-radius: 50%;
  background-color: #27272a;
}

.msr-matches__row-logo-img {
  display: block;
  width: auto;
  height: 14px;
  opacity: 0.5;
}

.msr-matches__row-logo-img--logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 1;
}

.msr-matches__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.msr-matches__versus {
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.msr-matches__score {
  color: var(--msr-gold);
}

.msr-matches__row-competition {
  color: var(--msr-white-30);
  font-family: var(--msr-font-body);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 15px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Chevron ">" 10 x 16 drawn with borders (no matching icon in the theme) */
.msr-matches__chevron {
  position: relative;
  flex: 0 0 10px;
  width: 10px;
  height: 16px;
}

.msr-matches__chevron::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--msr-white-30);
  border-right: 2px solid var(--msr-white-30);
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
  margin-left: -3px;
}

a.msr-matches__row:focus-visible {
  outline: 2px solid var(--msr-gold);
  outline-offset: 2px;
}

@media (hover: hover) {
  a.msr-matches__row:hover {
    border-color: var(--msr-gold-30);
  }
}

.msr-matches__all {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--msr-white-10);
  background-color: transparent;
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 3px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color var(--msr-duration) var(--msr-ease);
}

@media (hover: hover) {
  .msr-matches__all:hover {
    border-color: var(--msr-gold-30);
  }
}

/* ==========================================================================
   Equal columns (DEVIATION, user request 2026-10-20: the design had a shorter list)
   Side by side, the recent list starts at the top edge of the next-match card and its last row
   (or the "all" button) ends at the card's bottom edge, whatever the card holds (with or without
   buttons, countdown, competition). Rows share the free height; when the list needs more room than
   the card, the card grows instead and centres its content.
   ========================================================================== */

@media (min-width: 1101px) {
  .msr-matches__inner {
    align-items: stretch;
  }

  .msr-matches--single .msr-matches__inner {
    align-items: start;
  }

  .msr-matches__col--recent {
    gap: 0;
  }

  .msr-matches__col--recent .msr-matches__title {
    margin-bottom: 40px; /* same as the next-match title, so the list and the card start level */
  }

  .msr-matches__card {
    flex: 1 1 auto;
    justify-content: center;
  }

  .msr-matches__list {
    flex: 1 1 auto;
  }

  .msr-matches__item {
    display: flex;
    flex: 1 1 0;
  }

  .msr-matches__row {
    flex: 1 1 auto;
    min-height: 72px; /* 40 px badge + 16 px each side: the floor before the card has to grow */
    padding-block: 0;
  }

  .msr-matches__all {
    margin-top: 24px;
  }
}

/* ==========================================================================
   Responsive (ADDED: not in design)
   ========================================================================== */

@media (max-width: 1100px) {
  .msr-matches__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
  }

  .msr-matches--single .msr-matches__inner {
    grid-template-columns: minmax(0, 816px);
  }
}

@media (max-width: 820px) {
  .msr-matches__card {
    gap: 32px;
    padding: 32px 24px 32px 28px;
  }

  .msr-matches__teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 16px;
  }

  .msr-matches__team {
    flex-basis: auto;
  }

  .msr-matches__crest {
    width: 88px;
    height: 88px;
    margin-bottom: 16px;
  }

  .msr-matches__crest-img {
    height: 42px;
  }

  .msr-matches__crest--away .msr-matches__crest-img--logo {
    width: 52px;
    height: 52px;
  }

  .msr-matches__team-name {
    font-size: 1.25rem;
    line-height: 28px;
    letter-spacing: 0.1em;
  }

  .msr-matches__center {
    grid-column: 1 / -1;
    order: 3;
  }

  .msr-matches__format {
    letter-spacing: 0.3em;
  }
}

@media (max-width: 480px) {
  .msr-matches__title {
    font-size: 1.5rem;
    line-height: 32px;
    letter-spacing: 0.1em;
  }

  .msr-matches__col--next .msr-matches__title {
    margin-bottom: 24px;
  }

  .msr-matches__card {
    padding: 24px 16px 24px 20px;
  }

  .msr-matches__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .msr-matches__btn {
    width: 100%;
    padding-inline: 16px;
  }

  .msr-matches__date {
    font-size: 1.125rem;
    letter-spacing: 0.1em;
  }

  .msr-matches__row {
    gap: 12px;
    padding: 16px;
  }
}