/*
 * Masuria Esport - shared components (components.css)
 * Only elements that appear in more than one section. Section layouts live in assets/css/sections/*.css, header.css, footer.css.
 * Requires tokens.css + base.css. Values are the exact desktop values from the Figma specs.
 * Anything marked "ADDED: not in design" is a robustness / accessibility extra that does not change the desktop look.
 */

/* ==========================================================================
   Button  .msr-btn
   Element: <a class="msr-btn msr-btn--primary"> or <button class="msr-btn ...">. Sizes come from content (no fixed widths).
   Modifiers:  colour  --primary | --ghost      size  (default) | --sm | --lg

   size     padding      font (Inter 700)   tracking  where                         resulting box
   default  20px 48px    14px / 20px        0.1em     hero buttons                  primary 283 x 60, ghost 245 x 62 (1px border)
   --sm     12px 32px    12px / 16px        0.1em     nav "DOLACZ DO MSR"           180 x 40
   --lg     24px 64px    18px / 28px        0.2em     CTA "APLIKUJ PRZEZ CLANAREA"  451 x 76 (+ gold glow when --primary)
   ========================================================================== */

.msr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--msr-space-20) var(--msr-space-48);
  border: 0;
  border-radius: var(--msr-radius-none);
  background-color: transparent;
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-14);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-20);
  letter-spacing: var(--msr-ls-wider);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* ADDED: not in design - state transitions */
  transition:
    background-color var(--msr-duration) var(--msr-ease),
    border-color var(--msr-duration) var(--msr-ease),
    box-shadow var(--msr-duration) var(--msr-ease),
    transform var(--msr-duration-fast) var(--msr-ease);
}

/* Colour variants */
.msr-btn--primary {
  background-color: var(--msr-gold);
  color: var(--msr-on-gold);
}

.msr-btn--ghost {
  border: 1px solid var(--msr-border-strong); /* the 1px border makes it 2px taller than the primary button, as in the design */
  background-color: var(--msr-white-05);
  color: var(--msr-white);
  -webkit-backdrop-filter: blur(var(--msr-blur-ghost));
  backdrop-filter: blur(var(--msr-blur-ghost));
}

/* Size variants */
.msr-btn--sm {
  padding: var(--msr-space-12) var(--msr-space-32);
  font-size: var(--msr-fs-12);
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-wider);
}

.msr-btn--lg {
  padding: var(--msr-space-24) var(--msr-space-64);
  font-size: var(--msr-fs-18);
  line-height: var(--msr-lh-28);
  letter-spacing: var(--msr-ls-widest);
}

.msr-btn--primary.msr-btn--lg {
  box-shadow: var(--msr-glow-gold);
}

/* ADDED: not in design - hover / active / disabled states, kept subtle */
@media (hover: hover) {
  .msr-btn--primary:hover {
    background-color: var(--msr-gold-hover);
  }

  .msr-btn--primary.msr-btn--lg:hover {
    box-shadow: var(--msr-glow-gold-hover);
  }

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

.msr-btn:active {
  transform: translateY(1px);
}

.msr-btn[disabled],
.msr-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Section title  .msr-section-title
   Barlow Condensed 700 italic, white. Default = 36/40, tracking 0.05em (process, offer).
   Modifiers:  --lg  48/48, -0.025em (requirements H2)    --xl  60/60, -0.05em (CTA H2)
               --xxl  72/90, -0.05em (Kontakt H2)          --center  text-align: center
   Put on the <h2> itself; wrapping / max-width / nowrap is the section's business.
   ========================================================================== */

.msr-section-title {
  margin: 0;
  color: var(--msr-white);
  font-family: var(--msr-font-heading);
  font-size: var(--msr-fs-36);
  font-style: italic;
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-40);
  letter-spacing: var(--msr-ls-wide);
  text-transform: uppercase; /* ADDED: not in design - the design copy is typed in capitals; keeps CMS-edited text consistent */
}

.msr-section-title--lg {
  font-size: var(--msr-fs-48);
  line-height: var(--msr-lh-none);
  letter-spacing: var(--msr-ls-tight);
}

.msr-section-title--xl {
  font-size: var(--msr-fs-60);
  line-height: var(--msr-lh-none);
  letter-spacing: var(--msr-ls-tighter);
}

.msr-section-title--xxl {
  font-size: var(--msr-fs-72);
  line-height: var(--msr-lh-90);
  letter-spacing: var(--msr-ls-tighter);
}

.msr-section-title--center {
  text-align: center;
}

/*
 * Title bar  .msr-title-bar  - 80 x 4 gold underline, 16px below the heading, centred.
 * Use as an empty <span class="msr-title-bar" aria-hidden="true"></span> right after the heading; override the margin to align left.
 */
.msr-title-bar {
  display: block;
  width: 80px;
  height: 4px;
  margin: var(--msr-space-16) auto 0;
  background-color: var(--msr-gold);
}

/* ==========================================================================
   Eyebrow  .msr-eyebrow
   Small gold label with very wide tracking: Inter 700, 12/16, 0.5em, uppercase (process subtitle "FAZA: REKRUTACJA I FUNDAMENTY").
   ========================================================================== */

.msr-eyebrow {
  margin: 0;
  color: var(--msr-gold);
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-12);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-eyebrow);
  text-transform: uppercase;
}

/* ==========================================================================
   Watermark  .msr-watermark
   Big decorative word. Purely visual: give the element aria-hidden="true". Position / offsets / clipping belong to the section.
   The opacity is part of the component - do NOT set it again on a wrapper.
   Default (filled)   Syncopate 400, 60/60, gold, opacity 0.10           -> requirements "WYMAGANIA" (right aligned by its section)
   --outline          Barlow Condensed 900 upright, 300/300, transparent fill + thin white stroke, opacity 0.20  -> hero "MSR"
   --solid            Barlow Condensed 800 upright, 120/120, solid white, opacity 0.10 (inherited)  -> contact "MSR"
   ========================================================================== */

.msr-watermark {
  display: none !important;
  margin: 0;
  color: var(--msr-gold);
  font-family: var(--msr-font-brand);
  font-size: var(--msr-fs-60);
  font-style: normal;
  font-weight: var(--msr-fw-regular);
  line-height: var(--msr-lh-none);
  letter-spacing: var(--msr-ls-normal);
  text-transform: none;
  white-space: nowrap;
  opacity: 0.1;
  /* ADDED: not in design - decoration must not be selectable or block clicks */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.msr-watermark--outline {
  color: transparent;
  font-family: var(--msr-font-heading);
  font-size: var(--msr-fs-300);
  font-style: normal;
  font-weight: var(--msr-fw-black);
  letter-spacing: var(--msr-ls-watermark);
  opacity: 0.2;
  /* ADDED: not in design - the design says "transparent fill" but does not give the stroke; 1px white hairline matches the screenshot */
  -webkit-text-stroke: 1px var(--msr-white-50);
}

.msr-watermark--solid {
  color: var(--msr-white);
  font-family: var(--msr-font-heading);
  font-size: var(--msr-fs-120);
  font-style: normal;
  font-weight: var(--msr-fw-extrabold);
  /* line-height, letter-spacing and opacity (0.1) are unchanged from the default */
}

/* ==========================================================================
   Icon  .msr-icon
   For <img> / <svg> icons. Their SVG files bake in the colours and use preserveAspectRatio="none", so ALWAYS give an exact size:
   either width/height attributes (preferred, e.g. width="37.5" height="30") or a size modifier below. Never `auto`.
   ========================================================================== */

.msr-icon {
  display: block;
  flex: none;
  max-width: none;
}

.msr-icon--16 {
  width: 16px;
  height: 16px;
}

.msr-icon--24 {
  width: 24px;
  height: 24px;
}

.msr-icon--30 {
  width: 30px;
  height: 30px;
}