/*
 * Masuria Esport - "Współpraca" page: benefits ("Founders") section (assets/css/cooperation/benefits.css)
 * Markup: template-parts/cooperation/benefits.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: heading (max 672px) + lead (max 540px)
 * on the left, the faint "Founders" watermark on the right, both bottom-aligned; an 80px gap below, then a
 * single row of 4 equal-width cards (bg #1a1a1a, 1px hairline border, ~40px padding, 24px gaps).
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

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

.msr-coop-benefits {
  background-color: var(--msr-surface-alt); /* #09090b, same fill as the home page's requirements section */
}

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

/* ==========================================================================
   Header row: heading + lead on the left, watermark on the right, bottom-aligned
   ========================================================================== */

.msr-coop-benefits__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--msr-gap-lg); /* 48 */
}

.msr-coop-benefits__intro {
  display: flex;
  flex-direction: column;
  gap: var(--msr-space-16);
  max-width: 672px;
  min-width: 0;
}

/* 48px from .msr-section-title--lg; Figma's own leading is 72px (1.5), not the component's default 1 (--msr-lh-none) */
.msr-coop-benefits__title {
  line-height: 1.5; /* Figma: leading-[72px] at 48px, not part of the shared line-height scale (nearest token is --msr-lh-none) */
}

/* Lead: Inter 400 18/28, white 50%, narrower than the heading column (Figma: max-w-[540px]) */
.msr-coop-benefits__lead {
  max-width: 540px;
  color: var(--msr-white-50);
  font-size: var(--msr-fs-18);
  line-height: var(--msr-lh-28);
}

.msr-coop-benefits__watermark {
  flex: none;
  text-align: right;
}

/* ==========================================================================
   Cards: one row of 4 equal-width cards
   ========================================================================== */

.msr-coop-benefits__grid {
  display: flex;
  gap: var(--msr-space-24);
}

.msr-coop-benefits__card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 23px; /* Figma: gap between icon / title / text */
  min-width: 0;
  padding: var(--msr-space-40);
  border: 1px solid var(--msr-border-subtle);
  background-color: var(--msr-surface);
}

/* Fixed 48px width (all four icons share it), height follows the file (48.9 or 49.2px) */
.msr-coop-benefits__icon {
  width: 48px;
  height: auto;
}

/* Title: Barlow Condensed 700 italic 20/28, white, no tracking (face and style come from base.css) */
.msr-coop-benefits__card-title {
  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% */
.msr-coop-benefits__card-text {
  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
   4 columns -> 2x2 (<= 1024) -> header stacks (<= 900) -> 1 column (<= 600)
   ========================================================================== */

@media (max-width: 1024px) {
  .msr-coop-benefits__grid {
    flex-wrap: wrap;
  }

  .msr-coop-benefits__card {
    flex: 1 1 calc(50% - var(--msr-space-24) / 2);
    min-width: 240px;
  }
}

@media (max-width: 900px) {
  .msr-coop-benefits__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--msr-space-16);
  }

  .msr-coop-benefits__intro {
    max-width: none;
  }

  .msr-coop-benefits__watermark {
    text-align: left;
  }
}

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

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

  .msr-coop-benefits__card {
    flex: 1 1 auto;
  }
}