/*
 * Masuria Esport - "Pierwsza piatka" (roster) section (assets/css/sections/roster.css)
 * Markup: template-parts/sections/roster.php. Requires tokens.css, base.css, components.css (.msr-section-title, .msr-title-bar, .msr-btn--primary, .msr-icon).
 * Design (Figma 1:379, 1440 px): padding 128 48, gap 96, hairline top/bottom. Title 48/48 + 96x4 gold bar; five 236.8 x 548 cards (gap 24, container 1280);
 * "looking for a coach" banner 1280 x 500 inside a 48px-padded band (so cards -> banner = 96 + 48, banner -> section end = 128 + 48).
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

/* ==========================================================================
   Section
   ========================================================================== */

.msr-roster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--msr-space-96);
  padding: var(--msr-section-py-fluid) clamp(16px, 3.3333vw, 48px); /* 128 48 at >= 1440 (ADDED: fluid below) */
  border-block: 1px solid var(--msr-border-subtle);
  background-color: var(--msr-bg);
  scroll-margin-top: var(--msr-space-32); /* ADDED: not in design - keeps a direct #pierwsza-piatka link clear of the fixed header */
}

.msr-roster__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* H2: .msr-section-title--lg is 48/48 with -0.025em; the design uses +2.4px (0.05em) here */
.msr-roster__title {
  letter-spacing: var(--msr-ls-wide);
  text-wrap: balance;
}

.msr-roster__bar {
  width: 96px;
}

/* ==========================================================================
   Cards: 5 x 236.8 (gap 24, max 1280)
   ========================================================================== */

.msr-roster__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--msr-space-24);
  width: 100%;
  max-width: 1280px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.msr-roster__card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex: 0 1 236.8px;
  min-width: 0;
  min-height: 548px;
  overflow: hidden;
  border: 1px solid var(--msr-border);
  background-color: var(--msr-surface);
}

/* Photo: 400px, greyscale only (the design lays a white saturation layer over it) */
.msr-roster__media {
  position: relative;
  flex: none;
  height: 400px;
}

.msr-roster__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  filter: grayscale(1);
}

/* Gradient from the bottom: #0a0a0a -> transparent at 50%, 80% opacity */
.msr-roster__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--msr-bg) 0%, rgba(10, 10, 10, 0) 50%);
  opacity: 0.8;
  pointer-events: none;
}

.msr-roster__role {
  position: absolute;
  z-index: var(--msr-z-raised);
  top: 19px;
  left: var(--msr-space-16);
  padding: 2.5px var(--msr-space-8);
  border: 1px solid var(--msr-gold-30);
  background-color: rgba(10, 10, 10, 0.8);
  color: var(--msr-gold);
  font-size: var(--msr-fs-10);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-15);
  letter-spacing: var(--msr-ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Text block starts at y = 320, i.e. it overlaps the lower 80px of the photo */
.msr-roster__body {
  position: relative;
  z-index: var(--msr-z-raised);
  display: flex;
  flex-direction: column;
  gap: var(--msr-space-4);
  margin-top: -80px;
  padding: var(--msr-space-24);
}

.msr-roster__name {
  display: flex;
  align-items: center;
  gap: var(--msr-space-8);
  margin: 0;
  color: var(--msr-white-40);
  font-size: var(--msr-fs-10);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-15);
  letter-spacing: var(--msr-ls-wider);
  text-transform: uppercase;
}

.msr-roster__flag {
  display: block;
  flex: none;
  width: 16px;
  height: 12px;
}

.msr-roster__nick {
  margin: 0;
  padding-bottom: var(--msr-space-12);
  color: var(--msr-white);
  font-family: var(--msr-font-heading);
  font-size: 2.1797rem; /* 34.875px */
  font-style: italic;
  font-weight: var(--msr-fw-extrabold);
  line-height: var(--msr-lh-40);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.msr-roster__nick-link {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .msr-roster__nick-link:hover {
    color: var(--msr-gold);
  }
}

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

/* Stats: hairline, then two rows (label left, value right) */
.msr-roster__stats {
  display: flex;
  flex-direction: column;
  gap: var(--msr-space-8);
  padding-top: var(--msr-space-16);
  border-top: 1px solid var(--msr-border);
}

.msr-roster__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--msr-space-8);
  margin: 0;
  font-size: var(--msr-fs-10);
  line-height: var(--msr-lh-15);
  letter-spacing: var(--msr-ls-wider);
  text-transform: uppercase;
}

.msr-roster__stat-label {
  color: var(--msr-white-40);
  font-weight: var(--msr-fw-regular);
}

.msr-roster__stat-value {
  color: var(--msr-white);
  font-weight: var(--msr-fw-bold);
}

.msr-roster__stat-value.msr-roster__gold {
  color: var(--msr-gold);
}

/* Socials: 16px icons (block starts at y = 498, right under the text block), 24px below */
.msr-roster__socials {
  display: flex;
  align-items: flex-start;
  gap: var(--msr-space-16);
  margin: 0;
  padding: 0 var(--msr-space-24) var(--msr-space-24);
  list-style: none;
}

.msr-roster__social {
  display: flex;
  padding-block: var(--msr-space-4);
}

.msr-roster__social a,
.msr-roster__social span {
  display: block;
  line-height: 0;
}

.msr-roster__social-icon {
  width: auto;
  height: 16px;
  opacity: 0.4; /* the icon files are white */
}

@media (hover: hover) {
  .msr-roster__social a:hover .msr-roster__social-icon {
    opacity: 1;
  }
}

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

/* ==========================================================================
   Coach banner: 1280 x 500 in a 48px-padded band
   ========================================================================== */

.msr-roster__coach-wrap {
  width: 100%;
  max-width: 1280px;
  padding-block: var(--msr-space-48);
}

.msr-roster__coach {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid var(--msr-border);
  background-color: var(--msr-surface);
}

/* Arena photo: 30% opacity, greyscale, multiplied with #4d4d4d (= x0.302), under a vertical gradient */
.msr-roster__coach-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.msr-roster__coach-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.3;
  filter: grayscale(1) brightness(0.302);
}

.msr-roster__coach-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.2) 50%, rgba(10, 10, 10, 0.9) 100%);
}

/* Decorative corners 128 x 128, 32px in from the edge */
.msr-roster__corner {
  position: absolute;
  width: 128px;
  height: 128px;
  pointer-events: none;
}

.msr-roster__corner--bl {
  bottom: var(--msr-space-32);
  left: var(--msr-space-32);
  border-bottom: 1px solid var(--msr-gold-20);
  border-left: 1px solid var(--msr-gold-20);
}

.msr-roster__corner--tr {
  top: var(--msr-space-32);
  right: var(--msr-space-32);
  border-top: 1px solid var(--msr-gold-20);
  border-right: 1px solid var(--msr-gold-20);
}

/* Bottom-right watermark: logo + 1x24 divider + brand name, 20% opacity (the design's icon is a "?" placeholder, so the theme logo is used) */
.msr-roster__brand-mark {
  width: auto;
  height: 32px;
}

.msr-roster__brand {
  position: absolute;
  right: var(--msr-space-32);
  bottom: var(--msr-space-32);
  display: flex;
  align-items: center;
  gap: var(--msr-space-12);
  opacity: 0.2;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.msr-roster__brand-divider {
  width: 1px;
  height: 24px;
  background-color: var(--msr-white-20);
}

.msr-roster__brand-name {
  color: var(--msr-white);
  font-size: var(--msr-fs-10);
  font-weight: var(--msr-fw-black);
  line-height: var(--msr-lh-15);
  letter-spacing: 0.2em; /* 2px */
  text-transform: uppercase;
  white-space: nowrap;
}

/* Content column: max 896, 0 48 padding */
.msr-roster__coach-inner {
  position: relative;
  z-index: var(--msr-z-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 896px;
  padding: var(--msr-space-48);
}

.msr-roster__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--msr-space-16);
  margin: 0 0 var(--msr-space-24);
  color: var(--msr-gold);
  font-size: var(--msr-fs-12);
  font-weight: var(--msr-fw-bold);
  line-height: 1.5; /* 18px */
  letter-spacing: 0.3333em; /* 4px */
  text-align: center;
  text-transform: uppercase;
}

.msr-roster__kicker::before,
.msr-roster__kicker::after {
  content: '';
  flex: none;
  width: 64px;
  height: 1px;
  background-color: var(--msr-gold-30);
}

.msr-roster__kicker-text {
  padding-left: 0.3333em; /* no trailing letter-space in the design: keeps the glyphs centred between the lines */
}

.msr-roster__coach-title {
  margin: 0 0 var(--msr-space-16);
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: clamp(36px, 8vw, 72px);
  font-style: italic;
  font-weight: var(--msr-fw-black);
  line-height: 1.25; /* 90px at 72 */
  letter-spacing: -0.032em; /* design says -3.6px, but its true Inter Black Italic is wider than the synthesised slant here: -0.032em reproduces the measured 685px line */
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 15px rgba(197, 160, 89, 0.4);
  text-wrap: balance;
}

.msr-roster__coach-text {
  max-width: 680px;
  margin: 0 0 var(--msr-space-40);
  color: var(--msr-white-60);
  font-size: var(--msr-fs-18);
  font-weight: 500;
  line-height: 1.625; /* 29.25px */
  letter-spacing: -0.0029em; /* -0.0527px */
  text-align: center;
}

.msr-roster__coach-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23.5px;
}

/* Button: shared .msr-btn--primary (gold, 20px 48px, 14px) with ExtraBold, 2px tracking and an arrow 12px to the right */
.msr-roster__btn {
  gap: var(--msr-space-12);
  font-weight: var(--msr-fw-extrabold);
  line-height: 1.5; /* 21px */
  letter-spacing: 0.1429em; /* 2px */
  color: #000;
  white-space: normal;
}

.msr-roster__btn-arrow {
  width: auto;
  height: 14px;
}

.msr-roster__perks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--msr-space-8) var(--msr-space-32);
  margin: 0;
  padding: 0;
  list-style: none;
}

.msr-roster__perk {
  display: flex;
  align-items: center;
  gap: var(--msr-space-8);
  color: var(--msr-white-40);
  font-size: 0.6875rem; /* 11px */
  font-weight: var(--msr-fw-bold);
  line-height: 1.5; /* 16.5px */
  letter-spacing: 0.1818em; /* 2px */
  text-transform: uppercase;
}

.msr-roster__perk-icon {
  width: auto;
  height: 11px;
}

/* ==========================================================================
   Responsive (ADDED: not in design) - 1440 px pixels above are unchanged
   ========================================================================== */

/* 1200-1375: the five cards shrink to fit one row instead of wrapping */
@media (min-width: 1200px) {
  .msr-roster__grid {
    flex-wrap: nowrap;
  }
}

/* The watermark would run into the perks row when the banner is narrower than ~1100px */
@media (max-width: 1099px) {
  .msr-roster__brand {
    display: none;
  }
}

/* 768-1199: three cards per row, the rest wrapped and centred (3 + 2) */
@media (max-width: 1199px) {
  .msr-roster__grid {
    max-width: 758.4px; /* 3 x 236.8 + 2 x 24 */
  }

  .msr-roster__card {
    flex: 0 1 min(236.8px, calc((100% - 48px) / 3));
  }
}

/* < 768: two cards per row, tighter gaps */
@media (max-width: 767px) {
  .msr-roster {
    gap: var(--msr-space-48);
  }

  .msr-roster__grid {
    max-width: none;
    gap: var(--msr-space-12);
  }

  .msr-roster__card {
    flex: 0 1 calc((100% - 12px) / 2);
  }

  .msr-roster__body {
    padding: var(--msr-space-16);
  }

  .msr-roster__socials {
    padding-inline: var(--msr-space-16);
  }

  .msr-roster__coach-wrap {
    padding-block: 0;
  }

  .msr-roster__coach-inner {
    padding: var(--msr-space-48) var(--msr-space-20);
  }

  .msr-roster__corner {
    width: 64px;
    height: 64px;
  }

  .msr-roster__corner--bl {
    bottom: var(--msr-space-16);
    left: var(--msr-space-16);
  }

  .msr-roster__corner--tr {
    top: var(--msr-space-16);
    right: var(--msr-space-16);
  }

  .msr-roster__brand {
    display: none; /* would collide with the content on a phone */
  }

  .msr-roster__kicker::before,
  .msr-roster__kicker::after {
    width: 24px;
  }

  .msr-roster__coach-text {
    font-size: var(--msr-fs-16);
  }

  .msr-roster__perks {
    gap: var(--msr-space-8) var(--msr-space-16);
  }
}

@media (max-width: 479px) {
  .msr-roster__nick {
    font-size: 1.75rem; /* 28px */
    line-height: 1.25;
  }

  /* 527px = the height of a complete card here (smaller nick, 16px padding): cards with less data (no ELO / socials) keep it, so rows stay equal */
  .msr-roster__card {
    min-height: 527px;
  }
}

/* ==========================================================================
   Graceful degradation (ADDED: not in design) - cards with missing data
   ========================================================================== */

/* No photo: dark panel with a faint silhouette, same 400px as the photo (the gradient ::after still applies) */
.msr-roster__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #232323 0%, #141414 70%);
}

.msr-roster__silhouette {
  display: block;
  width: 62%;
  height: auto;
  fill: var(--msr-white-05);
}

/* Socials sit at the bottom of the card, so a card without a stats block or with fewer rows keeps the same icon line */
.msr-roster__socials {
  margin-top: auto;
}

/* No name and no flag: an empty line keeps the nick on the same baseline as in the neighbouring cards. The flag-only line is 12px tall: same 15px minimum. */
.msr-roster__name,
.msr-roster__name-spacer {
  min-height: var(--msr-lh-15);
}

.msr-roster__name-spacer {
  display: block;
}