/*
 * Masuria Esport - "Wybierz swoją drogę" section (assets/css/cooperation/paths.css)
 * Markup: template-parts/cooperation/paths.php. Requires tokens.css, base.css, components.css
 * (.msr-container, .msr-eyebrow, .msr-section-title(--lg,--center), .msr-title-bar, .msr-btn, .msr-icon).
 * Design (1440 px): #0a0a0a section, padding 128px 96px, centred header (eyebrow + H2 48/48 + gold bar), 80px gap,
 * then two 600 x 600 cards (48px gap) that exactly fill the 1248px container. Founder card: gold primary button,
 * full width. Partner card: identical geometry, gold-outline button, a faint 400x400 decorative glyph bottom-right
 * (~2% opacity, optional per the design brief).
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

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

.msr-coop-paths {
  background-color: var(--msr-bg);
}

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

/* ==========================================================================
   Header: centred eyebrow + H2 + gold title bar
   ========================================================================== */

.msr-coop-paths__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--msr-space-16);
}

/* ==========================================================================
   Cards: 2 columns, 48px gap, 600 x 600 each
   ========================================================================== */

.msr-coop-paths__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--msr-gap-lg); /* 48 */
}

.msr-coop-paths__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden; /* clips the decorative glyph to the card */
  padding: var(--msr-space-48) var(--msr-space-48) 21px; /* 21px bottom - no matching token */
  border: 1px solid var(--msr-border-subtle);
  background-color: var(--msr-surface);
}

@media (min-width: 901px) {
  .msr-coop-paths__card {
    height: 600px; /* fixed square card, as in the design */
  }
}

.msr-coop-paths__card-top {
  position: relative;
  z-index: var(--msr-z-raised); /* paints above the partner card's decorative glyph */
  display: flex;
  flex-direction: column;
  gap: var(--msr-gap-md); /* 32 */
}

.msr-coop-paths__card-head {
  display: flex;
  align-items: center;
  gap: var(--msr-gap-xs); /* 16 */
}

/* Fixed 40px height, width follows the file (38.42 or 39.05px) */
.msr-coop-paths__icon {
  width: auto;
  height: 40px;
}

/*
 * Title: single continuous string (this theme's convention - a heading that merely wrapped in the design is stored
 * as one string). Constrains the wrap width to match the Figma text box next to the icon; no manual <br>.
 */
.msr-coop-paths__card-title {
  max-width: 290px;
  margin: 0;
  color: var(--msr-white);
  font-size: 2rem; /* 32px - no matching fs token */
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-40); /* 40/32 */
  text-transform: uppercase;
}

.msr-coop-paths__card-lead {
  margin: 0;
  color: var(--msr-white-50);
  font-size: var(--msr-fs-18);
  line-height: 1.5; /* 27/18 - no matching line-height token */
}

.msr-coop-paths__list {
  display: flex;
  flex-direction: column;
  gap: var(--msr-space-16);
  padding-top: var(--msr-space-8);
  margin: 0;
  list-style: none;
}

.msr-coop-paths__item {
  display: flex;
  align-items: flex-start;
  gap: var(--msr-space-16);
  color: rgba(255, 255, 255, 0.8); /* the white-alpha ladder in tokens.css skips 80% */
  font-size: var(--msr-fs-16);
  line-height: var(--msr-lh-24);
}

/* Fixed 16px height, width follows the file (14.0023px) */
.msr-coop-paths__check {
  flex: none;
  width: auto;
  height: 16px;
  margin-top: 0.4em; /* ADDED: not in design - optically centres the small check against the first text line */
}

.msr-coop-paths__button {
  position: relative;
  z-index: var(--msr-z-raised);
  width: 100%;
  padding: var(--msr-space-20) 0;
  font-size: var(--msr-fs-16); /* the card button is 16px, not the .msr-btn default of 14px */
}

/*
 * Partner card button: the design shows a gold outline (border/text #c5a059, transparent fill), not the site's
 * usual white .msr-btn--ghost - recoloured here on top of the shared modifier's structure/padding.
 */
.msr-coop-paths__button--partner {
  border-color: var(--msr-gold);
  background-color: transparent;
  color: var(--msr-gold);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (hover: hover) {
  .msr-coop-paths__button--partner:hover {
    border-color: var(--msr-gold-hover);
    background-color: var(--msr-gold-10);
  }
}

/* ---- Partner card: faint decorative glyph in the bottom-right corner ---- */

.msr-coop-paths__decor {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 400px;
  opacity: 0.02;
  pointer-events: none;
}

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

@media (max-width: 900px) {
  .msr-coop-paths__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .msr-coop-paths__card {
    height: auto;
  }
}

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

@media (max-width: 480px) {
  .msr-coop-paths__card {
    padding: var(--msr-space-32) var(--msr-space-24) var(--msr-space-24);
  }
}