/*
 * Masuria Esport - "Dziennik bojowy" (battle log) section (assets/css/sections/battle-log.css)
 * Markup: template-parts/sections/battle-log.php. Requires tokens.css, base.css, components.css (.msr-container, .msr-eyebrow, .msr-title-bar, .msr-btn--primary/--lg, .msr-icon).
 * Design (1440 px): 1734 px tall, page-dark ground with a 1000 x 600 gold radial glow at the top centre, padding 128px 96px.
 * Header (768px column): eyebrow + 80x4 gold bar, H2 Inter 900 60/75 (gold accent), lead 20/32.5; then a 96px gap and the timeline:
 * a 1024px column starting 531px from the top, a 1px gold-to-transparent axis in the middle, rows of two 512px columns (96px between rows),
 * a 448px card (64px from the axis) on one side, the date (or "next step" label) on the other and a 16px dot on the axis.
 * Rows alternate (odd: card right, even: card left); the watermark, badge and look follow the stage (done / current / next), not the position.
 * Footer: 80px below the timeline, the large gold button, then the "apply" link (text only; the design's line + icon were removed on request).
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

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

.msr-battle-log {
  --msr-battle-log-glow: rgba(197, 160, 89, 0.08); /* the design's 8% gold at the centre of the top glow */
  --msr-battle-log-dot-glow: 0 0 20px rgba(197, 160, 89, 0.6);
  --msr-battle-log-axis-gap: clamp(32px, 4.4445vw, 64px); /* 64px between the axis and a card / date; ADDED: not in design - narrower below 1440 */
  --msr-battle-log-row-gap: 96px;
  --msr-battle-log-card-pad: clamp(24px, 2.7778vw, var(--msr-space-40));

  position: relative;
  overflow: hidden; /* the glow layer is a fixed 1000px wide */
  background-color: var(--msr-bg);
}

/* Decorative glow: 1000 x 600, centred at the top, radial gold 8% -> 0 at 70% (its own edge is visible in the design, so it is not blurred) */
.msr-battle-log::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1000px;
  height: 600px;
  background: radial-gradient(ellipse 500px 300px at 50% 50%, var(--msr-battle-log-glow) 0%, var(--msr-gold-00) 70%);
  transform: translateX(-50%);
  pointer-events: none;
}

.msr-battle-log__inner {
  position: relative; /* paints above the glow */
  padding-block: var(--msr-section-py-fluid); /* 128 at >= 1440 */
}

/* ==========================================================================
   Header: eyebrow + bar (16px) + 24px + H2 + 32px + lead, then 96px to the timeline
   ========================================================================== */

.msr-battle-log__head {
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 6.6667vw, var(--msr-space-96)); /* ADDED: not in design - fluid below 1440 */
  text-align: center;
}

.msr-battle-log__eyebrow {
  text-align: center;
}

.msr-battle-log__bar {
  margin-bottom: 0;
}

/* H2: Inter 900 60/75, -1.5px, uppercase; <strong> = gold accent */
.msr-battle-log__title {
  padding-top: var(--msr-space-24);
  padding-right: 0.025em; /* Figma centres the glyphs without the trailing -1.5px letter-space; this cancels it (same trick as .msr-cta__title) */
  padding-bottom: var(--msr-space-32);
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: clamp(2rem, 4.1667vw, var(--msr-fs-60)); /* ADDED: not in design - fluid below 1440 */
  font-style: normal;
  font-weight: var(--msr-fw-black);
  line-height: 1.25; /* 75 / 60 */
  letter-spacing: var(--msr-ls-tight); /* -0.025em = -1.5px */
  text-transform: uppercase;
  overflow-wrap: break-word; /* ADDED: not in design */
}

.msr-battle-log__title strong {
  color: var(--msr-gold);
  font-weight: inherit;
}

.msr-battle-log__lead {
  max-width: 720px; /* the design's text is ~708px wide; wraps greedily after "od" */
  margin-inline: auto;
  color: var(--msr-white-50);
  font-size: var(--msr-fs-20);
  line-height: var(--msr-lh-relaxed); /* 32.5 */
}

/* ==========================================================================
   Timeline: 1024px column, axis in the middle, rows 96px apart, 48px padding below the last row
   ========================================================================== */

.msr-battle-log__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--msr-battle-log-row-gap);
  max-width: 1024px;
  margin-inline: auto;
  padding-bottom: var(--msr-space-48);
}

/* Axis: 1px, gold at the top fading out downwards (the design's 1 x 866 px image: gold -> white 10% at the middle -> transparent) */
.msr-battle-log__timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  background: linear-gradient(to bottom, var(--msr-gold) 0%, var(--msr-white-10) 50%, transparent 100%);
  pointer-events: none;
}

/* ---- Row: two 512px columns, content centred vertically against the card ---- */

.msr-battle-log__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

/* Card on the right (odd rows): date left, right-aligned against the axis; card right */
.msr-battle-log__row--card-right .msr-battle-log__meta {
  grid-column: 1;
  margin-right: var(--msr-battle-log-axis-gap);
  text-align: right;
}

.msr-battle-log__row--card-right .msr-battle-log__card {
  grid-column: 2;
  margin-left: var(--msr-battle-log-axis-gap);
}

/* Card on the left (even rows): card left, date right, left-aligned against the axis */
.msr-battle-log__row--card-left .msr-battle-log__meta {
  grid-column: 2;
  margin-left: var(--msr-battle-log-axis-gap);
  text-align: left;
}

.msr-battle-log__row--card-left .msr-battle-log__card {
  grid-column: 1;
  margin-right: var(--msr-battle-log-axis-gap);
}

.msr-battle-log__meta,
.msr-battle-log__card {
  grid-row: 1;
}

/* Upcoming step: the whole row (card, label, dot) is dimmed. The reveal animation never sets opacity, so this resting value survives (see animations.css). */
.msr-battle-log__row--next {
  opacity: 0.4;
}

/* ---- Date / "next step" label: Inter 700 14/20, 0.1em (1.4px), gold at 80% ---- */

.msr-battle-log__meta {
  color: var(--msr-gold);
  font-size: var(--msr-fs-14);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-20);
  letter-spacing: var(--msr-ls-wider);
  text-transform: uppercase;
  opacity: 0.8;
}

.msr-battle-log__meta--label {
  color: var(--msr-white-30);
  opacity: 1;
}

/* ---- Dot on the axis: 16px, gold with a glow; the upcoming step is an empty ring ---- */

.msr-battle-log__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: var(--msr-radius-full);
  background-color: var(--msr-gold);
  box-shadow: var(--msr-battle-log-dot-glow);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.msr-battle-log__row--next .msr-battle-log__dot {
  border: 2px solid var(--msr-white-20);
  background-color: var(--msr-bg);
  box-shadow: none;
}

/* ==========================================================================
   Card: 448px, #1a1a1a, 1px hairline, padding 40, title + text 14.75px apart
   ========================================================================== */

.msr-battle-log__card {
  position: relative;
  isolation: isolate; /* keeps the watermark (z-index -1) above the card background but below its text */
  display: flex;
  flex-direction: column;
  gap: 13.25px;
  /* 40 at >= 1440 (ADDED: not in design - smaller below). Title 0.75px lower, text 0.75px higher and the card 0.75px taller than the
     reference code's 40 / 14.75 / 40: the geometry measured on the Figma screenshot (heights 197.75 / 229.75 / 197.75) wins over the code's numbers. */
  padding: calc(var(--msr-battle-log-card-pad) + 0.75px) var(--msr-battle-log-card-pad) calc(var(--msr-battle-log-card-pad) + 1.5px);
  overflow: hidden;
  border: 1px solid var(--msr-border-subtle);
  border-radius: var(--msr-radius-sm);
  background-color: var(--msr-surface);
  /* ADDED: not in design - hover state of a card that links to its post */
  transition:
    border-color var(--msr-duration) var(--msr-ease),
    box-shadow var(--msr-duration) var(--msr-ease);
}

/* Current step: gold hairline plus a faint outer ring */
.msr-battle-log__row--current .msr-battle-log__card {
  border-color: var(--msr-gold-30);
  box-shadow: 0 0 0 1px var(--msr-gold-10);
}

.msr-battle-log__card-head {
  display: flex;
  align-items: center;
  gap: var(--msr-space-12);
}

.msr-battle-log__card-title {
  min-width: 0;
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-24);
  font-style: normal;
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-32);
  letter-spacing: 0.025em; /* 0.6px */
  text-transform: uppercase;
  overflow-wrap: break-word; /* ADDED: not in design */
}

.msr-battle-log__excerpt {
  color: var(--msr-white-40);
  font-size: var(--msr-fs-14);
  line-height: var(--msr-lh-relaxed); /* 22.75 */
}

.msr-battle-log__row--current .msr-battle-log__excerpt {
  color: var(--msr-white-60);
}

/* "W TOKU" badge: Inter 900 10/15 on gold; it is only as wide as its longest word, so the label breaks into two lines as in the design */
.msr-battle-log__badge {
  flex: none;
  width: min-content;
  padding: var(--msr-space-4) 12.11px var(--msr-space-4) var(--msr-space-8); /* Figma: pl 8 / pr 12.11, measured on the screenshot */
  background-color: var(--msr-gold);
  color: var(--msr-on-gold);
  font-size: var(--msr-fs-10);
  font-weight: var(--msr-fw-black);
  line-height: var(--msr-lh-15);
  letter-spacing: var(--msr-ls-tighter); /* -0.5px */
  text-align: left;
  text-transform: uppercase;
}

/* The title link covers the whole card, so the card is one big click target */
.msr-battle-log__card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.msr-battle-log__card-link:focus-visible {
  outline: 0; /* the ring is drawn around the card instead (the link box is only the title) */
}

.msr-battle-log__card:has(.msr-battle-log__card-link:focus-visible) {
  outline: 2px solid var(--msr-gold);
  outline-offset: 3px;
}

@media (hover: hover) {
  .msr-battle-log__card:has(.msr-battle-log__card-link:hover) {
    border-color: var(--msr-gold-30);
    box-shadow: 0 0 0 1px var(--msr-gold-10);
  }
}

/* ---- Watermarks: done = 96px person at the top right (5%), current = 80px crosshair at the top left (opacity is in the SVG) ---- */

.msr-battle-log__mark {
  position: absolute;
  top: var(--msr-space-16);
  z-index: var(--msr-z-behind);
  pointer-events: none;
}

.msr-battle-log__row--done .msr-battle-log__mark {
  right: var(--msr-space-16);
  opacity: 0.05;
}

.msr-battle-log__row--current .msr-battle-log__mark {
  left: var(--msr-space-16);
}

/* ==========================================================================
   Footer: 80px padding, gold button, 32px, apply link
   ========================================================================== */

.msr-battle-log__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--msr-space-32);
  padding-top: var(--msr-space-80);
}

/* "APLIKUJ JAKO TRENER" - text only. Requested deviation from the Figma design, which adds a 40x1 line and a 16px bolt icon after it. */
.msr-battle-log__apply {
  color: var(--msr-white-50);
  font-size: var(--msr-fs-14);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-20);
  letter-spacing: 2px;
  text-transform: uppercase;
  /* ADDED: not in design - hover state */
  transition: color var(--msr-duration) var(--msr-ease);
}

@media (hover: hover) {
  .msr-battle-log__apply:hover {
    color: var(--msr-white);
  }
}

/* ==========================================================================
   Responsive (ADDED: not in design) - the 1440 px pixels above are unchanged
   <= 900: one column, the axis moves to the left, dots sit on it, the date is above the card
   ========================================================================== */

@media (max-width: 900px) {
  .msr-battle-log {
    --msr-battle-log-row-gap: 48px;
  }

  .msr-battle-log__timeline::before {
    left: 7.5px; /* centre of the 16px dots */
  }

  .msr-battle-log__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--msr-space-12);
    padding-left: var(--msr-space-40);
  }

  /* Either side: date above, card full width, everything left-aligned */
  .msr-battle-log__row--card-right .msr-battle-log__meta,
  .msr-battle-log__row--card-left .msr-battle-log__meta {
    margin: 0;
    text-align: left;
  }

  .msr-battle-log__row--card-right .msr-battle-log__card,
  .msr-battle-log__row--card-left .msr-battle-log__card {
    margin: 0;
  }

  /* Dot at the vertical centre of the date line (10px = half of its 20px line) */
  .msr-battle-log__dot {
    top: 10px;
    left: 0;
    transform: translateY(-50%);
  }

  .msr-battle-log__footer {
    padding-top: var(--msr-space-48);
  }
}

@media (max-width: 640px) {
  .msr-battle-log__lead {
    font-size: var(--msr-fs-18);
  }

  /* Title no longer shares the row with the badge (the card is only ~200px wide at 320) */
  .msr-battle-log__card-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .msr-battle-log__card-title {
    font-size: var(--msr-fs-20);
    line-height: var(--msr-lh-28);
  }

  /* The large button would overflow a phone: smaller type and padding, may wrap on very narrow screens */
  .msr-battle-log__more {
    max-width: 100%;
    padding: var(--msr-space-20) var(--msr-space-24);
    font-size: var(--msr-fs-16);
    letter-spacing: var(--msr-ls-wider);
    white-space: normal;
  }

  .msr-battle-log__apply {
    text-align: center;
  }
}