/*
 * Masuria Esport - closing call-to-action section (assets/css/sections/cta.css)
 * Markup: template-parts/sections/cta.php. Requires tokens.css, base.css, components.css (.msr-container, .msr-section-title--xl/--center, .msr-btn--primary/--lg).
 * Design (1440 px): 648 px tall (160 + 328 + 160), full-bleed trophy photo at 10% opacity (desaturated) under a bottom-to-top #0a0a0a gradient,
 * centred column with a 24px gap: H2 60/60, lead 20/28 (576px), primary large button with gold glow, then a trust line of three badges and two 4px dots.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

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

.msr-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: trophy photo (10% opacity, black & white) + gradient fade
   ========================================================================== */

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

/* Figma: 1440px-wide image, vertically centred = object-fit: cover; a white saturation layer desaturates it (grayscale is indistinguishable at 10%) */
.msr-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-cta__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--msr-gradient-cta-fade); /* #0a0a0a 0% -> rgba(10,10,10,.9) 50% -> #0a0a0a 100%, bottom to top */
}

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

.msr-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) - the size is fluid so it still fits a phone (60px at >= 1440) */
.msr-cta__title {
  padding-right: 0.05em; /* Figma centres the glyphs without the trailing -3px letter-space; this cancels it (screenshot: title 2px further left) */
  font-size: clamp(2.5rem, 4.1667vw, var(--msr-fs-60)); /* ADDED: not in design - fluid below 1440 */
  text-wrap: balance;
}

/* Lead: Inter 400 20/28 at 60% white, 576px measure. Wraps greedily on purpose: "podstaw." on its own second line is in the screenshot. */
.msr-cta__lead {
  max-width: 576px;
  color: var(--msr-white-60);
  font-size: var(--msr-fs-20);
  line-height: var(--msr-lh-28);
  text-align: center;
}

/*
 * Button: the shared .msr-btn--lg (24px 64px, 18/28, 0.2em) as in the design. The screenshot's button is 448.5px wide, not the 451.4px of
 * the reference code: Figma leaves the label's trailing 3.6px letter-space out of the box, so the glyphs sit centred (65.9px each side).
 */
.msr-cta .msr-btn--lg {
  padding-right: calc(var(--msr-space-64) - var(--msr-ls-widest)); /* 64px - 0.2em */
}

/* Button block: 24px above the button, 16px between button and trust line */
.msr-cta__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--msr-space-16);
  width: 100%;
  padding-top: var(--msr-space-24);
}

/* ==========================================================================
   Trust line: three badges, 4px dots between them (16px on each side)
   ========================================================================== */

.msr-cta__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--msr-space-16) 36px; /* 16 + 4 dot + 16 between the badges */
  padding-top: var(--msr-space-16);
}

.msr-cta__trust-item {
  position: relative;
  color: var(--msr-white-30);
  font-size: var(--msr-fs-12);
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-wider);
  text-align: center;
  text-transform: uppercase; /* ADDED: not in design - the design copy is typed in capitals; keeps CMS-edited text consistent */
  text-wrap: balance;
}

.msr-cta__trust-item + .msr-cta__trust-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -20px; /* centre of the 36px gap */
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: var(--msr-radius-full);
  background-color: var(--msr-white-30);
}

/*
 * The design's badges are fixed-width Figma text boxes (165.709 / 123.863 / 162.547px) that wrap every badge onto two centred lines;
 * the screenshot shows that, so the three default badges keep those box widths. A longer or shorter copy simply fills the box.
 */
.msr-cta__trust-item:nth-child(1) {
  max-width: 13.809em; /* 165.709 / 12 */
}

.msr-cta__trust-item:nth-child(2) {
  max-width: 10.322em; /* 123.863 / 12 */
}

.msr-cta__trust-item:nth-child(3) {
  max-width: 13.546em; /* 162.547 / 12 */
}

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

@media (max-width: 640px) {
  /* The badges no longer fit in one row: stack them, single lines, no dots */
  .msr-cta__trust {
    flex-direction: column;
    gap: var(--msr-space-8);
  }

  .msr-cta__trust-item:nth-child(n) {
    max-width: none;
  }

  .msr-cta__trust-item + .msr-cta__trust-item::before {
    display: none;
  }

  /* The 451px button would overflow a phone: smaller type and padding, may wrap on very narrow screens */
  .msr-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-cta__lead {
    font-size: var(--msr-fs-18);
  }
}