/*
 * Masuria Esport - "Jeden projekt. Wspólna ambicja." section (assets/css/cooperation/alliance.css)
 * Markup: template-parts/cooperation/alliance.php. Requires tokens.css, base.css, components.css
 * (.msr-container, .msr-section-title(--lg,--center)).
 * Design (1440 px): #09090b section with a subtle radial gold glow, padding 128px 96px, centred H2, 64px gap, then a
 * 3-box flow diagram (max 1152px, centred): two 287px dark boxes (initiator / partner role) either side of a
 * 315 x 260 solid-gold "MASURIA ESPORT" box, joined by 64px gradient dividers, 33.7px gaps between every element.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

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

.msr-coop-alliance {
  position: relative;
  background-color: var(--msr-surface-alt);
}

/* Decorative glow: a subtle radial gold gradient behind the whole diagram (no dedicated token for this section) */
.msr-coop-alliance__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 400px at 50% 50%, var(--msr-gold-05) 0%, var(--msr-gold-00) 100%);
  pointer-events: none;
}

.msr-coop-alliance__inner {
  position: relative; /* paints above the glow */
  padding-block: var(--msr-section-py-fluid); /* 128 at >= 1440 */
}

.msr-coop-alliance__title {
  padding-bottom: var(--msr-space-64);
}

/* ==========================================================================
   Flow diagram
   ========================================================================== */

.msr-coop-alliance__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* ADDED: not in design - lets boxes wrap instead of overflowing on narrow screens */
  gap: 33.7px; /* Figma value; no matching spacing token */
  max-width: 1152px;
  margin-inline: auto;
}

.msr-coop-alliance__box {
  width: 287px;
  margin: 0;
  padding: var(--msr-space-32);
  border: 1px solid var(--msr-border);
  border-radius: var(--msr-radius-sm); /* 2px */
  background-color: var(--msr-surface);
  text-align: center;
}

.msr-coop-alliance__label {
  margin: 0 0 var(--msr-space-8);
  color: var(--msr-gold);
  font-size: 0.625rem; /* --msr-fs-10 */
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-wider); /* 1px @ 10px = 0.1em */
  text-transform: uppercase;
}

.msr-coop-alliance__box-title {
  margin: 0 0 var(--msr-space-16);
  color: var(--msr-white);
  font-size: var(--msr-fs-24);
  font-weight: var(--msr-fw-bold);
}

/* Initiator title is a link to clanarea.com: looks like the plain title, gold on hover / keyboard focus */
.msr-coop-alliance__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.msr-coop-alliance__link:hover,
.msr-coop-alliance__link:focus-visible {
  color: var(--msr-gold);
}

.msr-coop-alliance__link:focus-visible {
  outline: 2px solid var(--msr-gold);
  outline-offset: 4px;
}

.msr-coop-alliance__text {
  margin: 0;
  color: var(--msr-white-40);
  font-size: var(--msr-fs-14);
  line-height: var(--msr-lh-20);
}

.msr-coop-alliance__divider {
  flex: none;
  width: 64px;
  height: 1px;
}

.msr-coop-alliance__divider--left {
  background: linear-gradient(to right, var(--msr-white-10), var(--msr-gold));
}

.msr-coop-alliance__divider--right {
  background: linear-gradient(to left, var(--msr-white-10), var(--msr-gold));
}

/* ---- Centre box: larger, solid gold fill, dark text. Content width (315 - 44*2 = 227px) wraps "MASURIA ESPORT"
   into two lines on its own, so the title is rendered plain with no manual <br> ---- */

.msr-coop-alliance__box--center {
  width: 315px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px; /* no matching spacing token */
  border: 0;
  border-radius: var(--msr-radius-sm);
  background-color: var(--msr-gold);
  box-shadow: 0 0 30px rgba(197, 160, 89, 0.15); /* no matching token - --msr-glow-gold uses a different radius/alpha */
}

.msr-coop-alliance__center-title {
  margin: 0 0 var(--msr-space-8);
  color: var(--msr-on-gold);
  font-size: 1.65rem; /* Figma 26.4px - a scaled component instance, no matching fs token */
  font-weight: var(--msr-fw-black);
  line-height: 1.333; /* 35.2 / 26.4 */
  text-transform: uppercase;
}

.msr-coop-alliance__center-label {
  margin: 0;
  color: rgba(10, 10, 10, 0.7);
  font-size: 0.9625rem; /* Figma 15.4px - a scaled component instance, no matching fs token */
  font-weight: var(--msr-fw-bold);
}

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

@media (max-width: 900px) {
  .msr-coop-alliance__row {
    flex-direction: column;
  }

  .msr-coop-alliance__divider {
    width: 1px;
    height: 48px;
  }

  .msr-coop-alliance__divider--left {
    background: linear-gradient(to bottom, var(--msr-white-10), var(--msr-gold));
  }

  .msr-coop-alliance__divider--right {
    background: linear-gradient(to top, var(--msr-white-10), var(--msr-gold));
  }

  .msr-coop-alliance__box,
  .msr-coop-alliance__box--center {
    width: 100%;
    max-width: 340px;
  }
}

@media (max-width: 768px) {
  .msr-coop-alliance__inner {
    padding-block: var(--msr-section-py-fluid);
  }
}

@media (max-width: 480px) {
  .msr-coop-alliance__title {
    padding-bottom: var(--msr-space-48);
  }
}