/*
 * Masuria Esport - "Współpraca" page: closing call-to-action section (assets/css/cooperation/cta.css)
 * Markup: template-parts/cooperation/cta.php. Requires tokens.css, base.css, components.css
 * (.msr-container, .msr-section-title(--xl/--center), .msr-btn(--primary/--lg)).
 * Design (1440 px): full-bleed square photo at 10% opacity (desaturated) under a bottom-to-top #0a0a0a
 * gradient, padding 160px 96px, centred column: H2 60/60 with a gold <strong> accent, a 768px lead, a
 * primary large button with gold glow. Structurally identical to the home page's own CTA
 * (assets/css/sections/cta.css), minus the trust-line list.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

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

.msr-coop-cta {
  position: relative;
  overflow: hidden; /* the photo layer is absolute and full-bleed */
  padding-block: var(--msr-section-py-lg-fluid); /* 160 at >= 1440 */
  background-color: var(--msr-bg);
}

/* ==========================================================================
   Background: square source photo (10% opacity, desaturated) + gradient fade
   ========================================================================== */

.msr-coop-cta__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The 1024x1024 source, centred and covering the wide section (same convention as .msr-cta__img) */
.msr-coop-cta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.1;
  filter: grayscale(1);
}

.msr-coop-cta__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--msr-gradient-cta-fade); /* #0a0a0a -> rgba(10,10,10,.9) -> #0a0a0a, bottom to top */
}

/* ==========================================================================
   Content: centred column, 24px gap
   ========================================================================== */

.msr-coop-cta__inner {
  position: relative;
  z-index: var(--msr-z-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--msr-gap-sm); /* 24 */
}

/* H2: .msr-section-title--xl (60/60, -0.05em) - fluid so it still fits a phone (60px at >= 1440) */
.msr-coop-cta__title {
  padding-right: 0.05em; /* Figma centres the glyphs without the trailing -3px letter-space; same trick as the home CTA */
  font-size: clamp(2.5rem, 4.1667vw, var(--msr-fs-60)); /* ADDED: not in design - fluid below 1440 */
  text-wrap: balance;
}

.msr-coop-cta__title strong {
  color: var(--msr-gold);
  font-weight: inherit;
}

/* Lead: Inter 400 22/33 at 60% white, 768px measure */
.msr-coop-cta__lead {
  max-width: 768px;
  color: var(--msr-white-60);
  font-size: 1.375rem; /* 22px: not part of the shared scale (nearest tokens are --msr-fs-20 / --msr-fs-24) */
  line-height: 1.5; /* 33 / 22 */
  text-align: center;
}

.msr-coop-cta__action {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: var(--msr-space-24);
}

/*
 * Button: the shared .msr-btn--lg as in the design. Figma leaves the label's trailing letter-space out
 * of the box, so the glyphs sit centred (same fix as .msr-cta .msr-btn--lg in the home CTA).
 */
.msr-coop-cta .msr-btn--lg {
  padding-right: calc(var(--msr-space-64) - var(--msr-ls-widest)); /* 64px - 0.2em */
}

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

@media (max-width: 640px) {
  /* The 451px button would overflow a phone: smaller type and padding, may wrap on very narrow screens */
  .msr-coop-cta .msr-btn--lg {
    max-width: 100%;
    padding: var(--msr-space-20) var(--msr-space-24);
    font-size: var(--msr-fs-16);
    letter-spacing: var(--msr-ls-wider);
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .msr-coop-cta__lead {
    font-size: var(--msr-fs-18);
  }
}