/*
 * Masuria Esport - hero section (assets/css/sections/hero.css)
 * Markup: template-parts/sections/hero.php. Requires tokens.css, base.css, components.css (.msr-container, .msr-btn, .msr-watermark--outline).
 * Design (1440 px): 850 px tall from y=0, full-bleed photo at 40% opacity + gradient fade, outlined "MSR" watermark clipped at the right edge,
 * text column at x=96 (h1 72/90, lead 20/32.5, two buttons). The fixed header overlays the hero, so no space is reserved for it.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

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

.msr-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 850px;
  overflow: hidden; /* the watermark starts 50px inside the right edge and runs off it: it must never widen the page */
  background-color: var(--msr-bg);
}

/* ==========================================================================
   Background: photo (40% opacity) + gradient fade into the page colour
   ========================================================================== */

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

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

.msr-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--msr-gradient-hero-fade); /* rgba(10,10,10,.4) 0% -> #0a0a0a 90%: the last 10% is solid, so the hero merges into the next section */
}

/* ==========================================================================
   Watermark "MSR": Barlow Condensed 900, 300px, outline only (component .msr-watermark--outline)
   Text origin 50px left of the right edge and 150px above the top, so only a sliver of the "M" shows in the corner.
   ========================================================================== */

.msr-hero__watermark {
  position: absolute;
  top: -150px;
  left: calc(100% - 50px);
}

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

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

.msr-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--msr-gap-sm);
  max-width: 896px;
  padding-top: var(--msr-space-80);
}

/* Headline: two block lines, the first white, the rest gold */
.msr-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-extrabold);
  line-height: 1.25; /* 90/72 = var(--msr-lh-90) at 72px; proportional so it scales with the clamp */
  letter-spacing: -0.0107em; /* Figma -0.7734px @ 72px: the screenshot's line widths (371 / 424px) match this, not the per-line -0.1719px in the code */
  text-transform: uppercase; /* ADDED: not in design - the design copy is typed in capitals; keeps CMS-edited text consistent */
}

.msr-hero__line {
  display: block;
}

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

/* Lead: Inter 300 20/32.5 at 60% white; <em> = Inter 600 italic white */
.msr-hero__lead {
  width: 100%;
  max-width: 672px;
  padding-top: var(--msr-space-8);
  color: var(--msr-white-60);
  font-size: var(--msr-fs-20);
  font-weight: var(--msr-fw-light);
  line-height: var(--msr-lh-relaxed);
}

.msr-hero__lead em {
  color: var(--msr-white);
  font-style: italic;
  font-weight: var(--msr-fw-semibold);
}

/* ADDED: not in design - <strong> is allowed by msr_kses_inline() but the design only uses <em> */
.msr-hero__lead strong {
  color: var(--msr-white);
  font-weight: var(--msr-fw-semibold);
}

/* Buttons: primary 283 x 60, ghost 245 x 62 (1px border); centred so the 2px difference splits evenly */
.msr-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);
  width: 100%;
  padding-top: var(--msr-space-24);
}

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

/* Desktop: the design's button row is 60px high (24px padding + 60px), the 62px ghost button overflows it by 1px on each side */
@media (min-width: 1025px) {
  .msr-hero__actions {
    flex-wrap: nowrap; /* a single flex line takes the container's 60px cross size (a wrapping line would grow to 62px) */
    height: calc(var(--msr-space-24) + 60px);
  }
}

@media (max-width: 1024px) {
  .msr-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);
  }

  .msr-hero__content {
    padding-top: 0;
  }
}

@media (max-width: 768px) {
  .msr-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-hero__lead {
    font-size: 1.125rem; /* 18px */
  }
}

@media (max-width: 480px) {
  .msr-hero {
    padding-bottom: var(--msr-space-48); /* lowered 2026-09-22 (user request): mobile section gaps felt oversized */
  }

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

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

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