/*
 * Masuria Esport - "Czego oczekujemy?" section (assets/css/sections/requirements.css)
 * Markup: template-parts/sections/requirements.php. Requires tokens.css, base.css, components.css (.msr-container, .msr-section-title--lg, .msr-watermark, .msr-icon).
 * Design (1440 px): solid #09090b, padding 128px 96px, header row (two 600px columns, 48px gap, aligned to the bottom: H2 + lead on the left,
 * the right-aligned "WYMAGANIA" watermark on the right), an 80px gap, then a 3 x 2 grid of cards (400px wide, 24px gaps).
 * The Tailwind export says 2 columns; the screenshot and the geometry (cards at x = 96 / 520 / 944) say 3.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

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

.msr-requirements {
  background-color: var(--msr-surface-alt); /* #09090b: the only section with its own fill */
}

.msr-requirements__inner {
  display: flex;
  flex-direction: column;
  gap: var(--msr-gap-xl); /* 80 between header row and grid */
  padding-block: var(--msr-section-py-fluid); /* 128 at >= 1440 */
}

/* ==========================================================================
   Header row: two equal columns, 48px gap, bottom-aligned (the watermark's baseline box ends where the lead ends)
   ========================================================================== */

.msr-requirements__head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--msr-gap-lg); /* 48 */
}

.msr-requirements__intro {
  display: flex;
  flex-direction: column;
  gap: var(--msr-space-16);
  min-width: 0;
}

/* 48/48 -0.025em comes from .msr-section-title--lg. ADDED: not in design - scales down on phones (48px from 600px up) */
.msr-requirements__title {
  font-size: clamp(2rem, 8vw, var(--msr-fs-48));
}

/* Lead: Inter 400 18/28, white 50%. One paragraph, wraps naturally in the 600px column ("... analityczny" / "umysł.") */
.msr-requirements__lead {
  color: var(--msr-white-50);
  font-size: var(--msr-fs-18);
  line-height: var(--msr-lh-28);
}

/*
 * Watermark "WYMAGANIA": Syncopate 60/60, gold, opacity 0.1 (all from .msr-watermark), right-aligned, ~461px wide.
 * ADDED: not in design - the size follows the viewport below 1440 px so the word always fits its half of the header row.
 */
.msr-requirements__watermark {
  justify-self: end;
  max-width: 100%;
  font-size: clamp(2rem, 4.1667vw, var(--msr-fs-60));
  text-align: right;
}

/* ==========================================================================
   Cards: 3 columns x 24px gap, each 400 x ~230
   ========================================================================== */

.msr-requirements__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Design: two rows of 230.25px inside a 484.5px grid (the cards' natural height is ~229px, taller when the text wraps more) */
  grid-auto-rows: minmax(230.25px, auto);
  gap: var(--msr-space-24);
}

.msr-requirements__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.3px;
  /* 42.75 / 40 / 40 / 40; ADDED: not in design - the side padding tightens below 1440 px (2.7778vw = 40px at 1440) */
  padding: 42.75px clamp(24px, 2.7778vw, 40px) var(--msr-space-40);
  border: 1px solid var(--msr-border-subtle);
  background-color: var(--msr-surface);
}

/* Fixed 30px height, width from the SVG file (30 or 37.5px); the fills (gold) are baked into the files */
.msr-requirements__icon {
  width: auto;
  height: 30px;
}

/* Title: Barlow Condensed 700 italic 20/28, white, no tracking (face and style come from base.css) */
.msr-requirements__card-title {
  width: 100%;
  color: var(--msr-white);
  font-size: var(--msr-fs-20);
  line-height: var(--msr-lh-28);
  text-transform: uppercase; /* ADDED: not in design - the design copy is typed in capitals; keeps CMS-edited text consistent */
}

/* Text: Inter 400 14/22.75, white 40%, 11.45px above it (three lines at the 318px text width of a 400px card) */
.msr-requirements__card-text {
  width: 100%;
  padding-top: 11.45px;
  color: var(--msr-white-40);
  font-size: var(--msr-fs-14);
  line-height: var(--msr-lh-relaxed); /* 22.75px */
}

/* ==========================================================================
   Responsive (ADDED: not in design) - the 1440 px pixels above are unchanged
   3 columns -> 2 columns (<= 1024); header stacks (<= 900); 1 column (<= 600)
   ========================================================================== */

@media (max-width: 1024px) {
  .msr-requirements__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  /* Header stacks (the 331px H2 no longer fits half of the row): the watermark drops below the lead, still right-aligned and faint */
  .msr-requirements__head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--msr-space-16);
  }

  .msr-requirements__watermark {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
}

@media (max-width: 768px) {
  .msr-requirements__inner {
    gap: var(--msr-gap-lg); /* 48 */
  }
}

@media (max-width: 600px) {
  .msr-requirements__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
}

@media (max-width: 480px) {
  .msr-requirements__card {
    padding-block: var(--msr-space-32);
  }
}