/*
 * Masuria Esport - "Współpraca" hero section (assets/css/cooperation/hero.css)
 * Markup: template-parts/cooperation/hero.php. Requires tokens.css, base.css, components.css (.msr-container, .msr-btn).
 * Design (1440 px): 850 px tall, full-bleed square photo at 40% opacity with a gradient fade to top (solid #0a0a0a at
 * both edges, 60% dark at the vertical centre, so the photo reads brightest through the middle band); content column
 * at x=96, max 896px, vertically centred: eyebrow (14/16, 6px tracking) + h1 (72/85, 4 lines, last 2 gold) + lead
 * (20/32), then two buttons. The fixed header overlays the hero, so no space is reserved for it here - same
 * convention as assets/css/sections/hero.css.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

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

.msr-coop-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 850px;
  overflow: hidden;
  background-color: var(--msr-bg);
}

/* ==========================================================================
   Background: square source photo (40% opacity) + gradient fade
   ========================================================================== */

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

.msr-coop-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.4;
}

.msr-coop-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Figma: gradient to top, #0a0a0a at both edges, 60% dark at the 50% stop; no matching --msr-bg-* alpha token */
  background: linear-gradient(to top, var(--msr-bg) 0%, rgba(10, 10, 10, 0.6) 50%, var(--msr-bg) 100%);
}

/* ==========================================================================
   Content column: x=96 (container gutter), max 896px, vertically centred in the section
   ========================================================================== */

.msr-coop-hero__inner {
  position: relative;
  z-index: var(--msr-z-raised);
}

.msr-coop-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--msr-gap-md); /* 32 */
  max-width: 896px;
}

.msr-coop-hero__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--msr-gap-xs); /* 16 */
  width: 100%;
}

/* Eyebrow: Inter 700 14/16, 6px tracking (0.4286em - .msr-eyebrow is sized for 12px text, so it is not reused here) */
.msr-coop-hero__eyebrow {
  margin: 0;
  color: var(--msr-gold);
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-14);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-16);
  letter-spacing: 0.4286em; /* 6px @ 14px */
  text-transform: uppercase;
}

/* Headline: 4 block lines, the first two white, the last two gold */
.msr-coop-hero__title {
  width: 100%;
  color: var(--msr-white);
  font-size: clamp(2.75rem, 5vw, var(--msr-fs-72)); /* ADDED: not in design - fluid below 1440; 72px from 1440 up */
  font-weight: var(--msr-fw-black);
  line-height: 1.1806; /* 85/72 - no named line-height token matches this ratio */
  text-transform: uppercase; /* ADDED: not in design - the design copy is typed in capitals; keeps CMS-edited text consistent */
}

.msr-coop-hero__line {
  display: block;
}

.msr-coop-hero__line--accent {
  color: var(--msr-gold);
}

/* Lead: Inter 400 20/32, 60% white */
.msr-coop-hero__lead {
  width: 100%;
  max-width: 672px;
  color: var(--msr-white-60);
  font-size: var(--msr-fs-20);
  line-height: var(--msr-lh-relaxed); /* 32.5, closest token to the design's 32 */
}

/* Buttons: both at the .msr-btn default size (20px/48px padding), primary gold + ghost outline */
.msr-coop-hero__actions {
  display: flex;
  flex-wrap: wrap; /* ADDED: not in design - lets the buttons wrap on narrow screens */
  align-items: center;
  gap: var(--msr-gap-sm); /* 24 */
  width: 100%;
  padding-top: var(--msr-space-16);
}

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

@media (max-width: 1024px) {
  .msr-coop-hero {
    min-height: 720px;
    /* the fixed header overlays the section: keep the text clear of it */
    padding-block: calc(var(--msr-header-h) + var(--msr-adminbar-h)) var(--msr-space-64);
  }
}

@media (max-width: 768px) {
  .msr-coop-hero {
    min-height: 0;
    padding-top: calc(var(--msr-header-h) + var(--msr-adminbar-h) + var(--msr-space-40)); /* content-driven height: breathing room under the header */
    padding-bottom: var(--msr-space-96);
  }

  .msr-coop-hero__lead {
    font-size: 1.125rem; /* 18px */
  }
}

@media (max-width: 480px) {
  .msr-coop-hero {
    padding-bottom: var(--msr-space-48);
  }

  .msr-coop-hero__lead {
    font-size: var(--msr-fs-16);
    line-height: var(--msr-lh-24);
  }

  .msr-coop-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--msr-space-16);
  }

  .msr-coop-hero__actions .msr-btn {
    width: 100%;
    padding-inline: var(--msr-space-24);
  }
}