/*
 * Masuria Esport - "Dziennik bojowy" archive page, the posts page (assets/css/battle-log-archive.css)
 * Markup: home.php. Behaviour: assets/js/log-filter.js. Loaded only where is_home() is true (inc/enqueue.php).
 * Requires tokens.css, base.css, components.css (.msr-eyebrow, .msr-title-bar, .msr-icon).
 * Design (1440 px, Figma frame "Dziennik Bojowy - Full Page"):
 * - Hero 700 px tall: gold radial glow (800 px circle, 10% -> 0 at 70%), a 736 px column (eyebrow + 80x4 bar, H1 Inter 900 72/79.2 in two lines with the
 *   second one gold, lead 20/32.5 in three lines) centred below the 96 px the fixed header covers.
 * - Filters: 32 px tall row of 4 buttons, 16 px apart, directly below the hero (y 700); the timeline starts 64 px lower.
 * - Timeline: a 1152 px column (128 px padding below), a 1 px axis in the middle of the page (gold 62% at the top -> white 6% at the middle -> transparent),
 *   rows of 568 | 16 (dot) | 568 px with 96 px between them, 504 px cards (64 px from the axis) on one side, date / label on the other.
 *   Rows alternate (odd: card right, even: card left); done = date + "done" badge + 128 px person, current = gold frame + "in progress" badge + 96 px crosshair,
 *   next / planned = faded, 67.5 x 60 trophy on the last card.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

/* ==========================================================================
   Page
   ========================================================================== */

.msr-log-archive {
  --msr-log-archive-glow: radial-gradient(circle 800px at 50% 50%, var(--msr-gold-10) 0%, var(--msr-gold-00) 70%);
  --msr-log-archive-axis: linear-gradient(to bottom, rgba(197, 160, 89, 0.62) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 100%);
  --msr-log-archive-card-bg: linear-gradient(134.8deg, var(--msr-surface) 0%, #0f0f0f 100%);
  --msr-log-archive-dot-glow: 0 0 20px rgba(197, 160, 89, 0.8);
  --msr-log-archive-axis-gap: clamp(24px, 4.4445vw, 64px); /* 64 px between the axis and a card / date; ADDED: not in design - narrower below 1440 */
  --msr-log-archive-row-gap: clamp(48px, 6.6667vw, var(--msr-space-96));
  --msr-log-archive-card-pad: clamp(20px, 2.2223vw, var(--msr-space-32));

  position: relative;
  background-color: var(--msr-bg);
}

/* ==========================================================================
   Hero: 700 px, the fixed header (97 px) overlays its top; the design's padding-top is 96 px
   ========================================================================== */

.msr-log-archive__hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 700px;
  padding-top: var(--msr-space-96);
  background-image: var(--msr-log-archive-glow);
}

.msr-log-archive__hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--msr-space-32);
  width: 100%;
  max-width: 896px; /* the design's column is 736..896 px wide with 32 px padding */
  padding-inline: var(--msr-space-32);
  text-align: center;
}

/* Eyebrow: Inter 700 12/16, 8 px tracking (wider than the shared 0.5em), then the 80 x 4 bar 16 px below */
.msr-log-archive__eyebrow {
  padding-left: 8px; /* Figma centres the glyphs without the trailing letter-space; this balances it */
  letter-spacing: 8px;
  text-align: center;
}

/* H1: Inter 900 72/79.2, -3.6px, uppercase; <strong> = gold second line */
.msr-log-archive__title {
  padding-right: 0.05em; /* Figma centres the glyphs without the trailing -3.6px letter-space; this cancels it (same trick as .msr-battle-log__title) */
  color: var(--msr-white);
  font-family: var(--msr-font-body);
  font-size: clamp(1.75rem, 5vw, var(--msr-fs-72)); /* ADDED: not in design - fluid below 1440 */
  font-style: normal;
  font-weight: var(--msr-fw-black);
  line-height: 1.1; /* 79.2 / 72 */
  letter-spacing: var(--msr-ls-tighter); /* -0.05em = -3.6px */
  text-transform: uppercase;
  overflow-wrap: break-word; /* ADDED: not in design */
}

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

.msr-log-archive__lead {
  max-width: 672px; /* wraps greedily after "esportowej." and "w", as in the design */
  color: var(--msr-white-50);
  font-size: var(--msr-fs-20);
  line-height: var(--msr-lh-relaxed); /* 32.5 */
}

/* ==========================================================================
   Filters (ADDED: not in design - only the resting look of the four buttons is): 12/16 Inter 700, 1.2px, padding 8 24, radius 2
   Without JavaScript the bar is hidden (there is nothing to filter with); with it, the bar is reserved
   (no layout shift) and revealed by log-filter.js once the buttons work.
   ========================================================================== */

.msr-log-archive__filters {
  display: none;
  flex-wrap: wrap;
  gap: var(--msr-space-8) var(--msr-space-16);
  justify-content: center;
  padding-inline: var(--msr-gutter);
}

html.msr-js .msr-log-archive__filters {
  display: flex;
  visibility: hidden;
}

html.msr-js .msr-log-archive__filters.is-ready {
  visibility: visible;
}

.msr-log-archive__filter {
  padding: var(--msr-space-8) var(--msr-space-24);
  border: 0;
  border-radius: var(--msr-radius-sm);
  background-color: var(--msr-white-05);
  color: var(--msr-white-60);
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-12);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-16);
  letter-spacing: 1.2px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* ADDED: not in design - state transitions */
  transition:
    background-color var(--msr-duration) var(--msr-ease),
    color var(--msr-duration) var(--msr-ease);
}

.msr-log-archive__filter[aria-pressed='true'] {
  background-color: var(--msr-gold);
  color: var(--msr-on-gold);
}

@media (hover: hover) {
  .msr-log-archive__filter:hover {
    background-color: var(--msr-white-10);
    color: var(--msr-white);
  }

  .msr-log-archive__filter[aria-pressed='true']:hover {
    background-color: var(--msr-gold-hover);
    color: var(--msr-on-gold);
  }
}

/* ==========================================================================
   Timeline: 1152 px column, axis in the middle, rows 96 px apart, 128 px below the last row
   ========================================================================== */

.msr-log-archive__track {
  position: relative;
  width: min(1152px, calc(100% - 2 * var(--msr-gutter)));
  margin: var(--msr-space-64) auto 0;
  padding-bottom: var(--msr-section-py-fluid); /* 128 at >= 1440 */
}

/* Axis: 1px, the full height of the track (the 128 px below the last row included) */
.msr-log-archive__track::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  background: var(--msr-log-archive-axis);
  pointer-events: none;
}

.msr-log-archive__timeline {
  position: relative; /* rows paint above the axis */
  display: flex;
  flex-direction: column;
  gap: var(--msr-log-archive-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Row: 568 | 16 (dot) | 568, everything centred vertically against the card ---- */

.msr-log-archive__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
  align-items: center;
}

.msr-log-archive__meta,
.msr-log-archive__dot,
.msr-log-archive__card {
  grid-row: 1;
}

.msr-log-archive__dot {
  grid-column: 2;
}

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

.msr-log-archive__row--card-right .msr-log-archive__card {
  grid-column: 3;
  margin-left: var(--msr-log-archive-axis-gap);
}

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

.msr-log-archive__row--card-left .msr-log-archive__card {
  grid-column: 1;
  margin-right: var(--msr-log-archive-axis-gap);
}

/* Upcoming steps are faded as a whole (card, label, dot): next 40%, planned 40 / 30 / 20% the further ahead.
   The reveal animation never sets opacity, so these resting values survive (see animations.css). */
.msr-log-archive__row--next,
.msr-log-archive__row--planned {
  opacity: 0.4;
}

.msr-log-archive__row--fade-2 {
  opacity: 0.3;
}

.msr-log-archive__row--fade-3 {
  opacity: 0.2;
}

/* ---- Date / side label: Inter 700 14/20, 1.4px; padding 2.5 / 1.5 as in the design ---- */

.msr-log-archive__meta {
  padding-top: 2.5px;
  padding-bottom: 1.5px;
  color: var(--msr-gold);
  font-size: var(--msr-fs-14);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-20);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.msr-log-archive__row--next .msr-log-archive__meta,
.msr-log-archive__row--planned .msr-log-archive__meta {
  color: var(--msr-white-30);
}

.msr-log-archive__row--planned .msr-log-archive__meta {
  font-style: italic;
}

/* The design labels the first upcoming card of a stage only ("Planowane" once); the others keep the label for screen readers */
.msr-log-archive__row:not(.msr-log-archive__row--lead) .msr-log-archive__meta--label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Dot on the axis: 16 px with a 4 px page-coloured ring; done / current: gold + glow; upcoming: empty ring ---- */

.msr-log-archive__dot {
  width: 16px;
  height: 16px;
  border: 4px solid var(--msr-bg);
  border-radius: var(--msr-radius-full);
  background-color: var(--msr-gold);
  box-shadow: var(--msr-log-archive-dot-glow);
  pointer-events: none;
}

.msr-log-archive__row--next .msr-log-archive__dot,
.msr-log-archive__row--planned .msr-log-archive__dot {
  border: 2px solid var(--msr-white-20);
  background-color: var(--msr-bg);
  box-shadow: none;
}

/* ==========================================================================
   Card: 504 px, #1a1a1a -> #0f0f0f diagonal, 1px hairline, padding 32, title / text 14.875 px apart
   ========================================================================== */

.msr-log-archive__card {
  position: relative;
  isolation: isolate; /* keeps the watermark (z-index -1) above the card background but below its text */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14.875px;
  padding: var(--msr-log-archive-card-pad);
  overflow: hidden;
  border: 1px solid var(--msr-border-subtle);
  background-image: var(--msr-log-archive-card-bg);
  /* 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 (30%) plus a faint gold glow */
.msr-log-archive__row--current .msr-log-archive__card {
  border-color: var(--msr-gold-30);
  box-shadow: 0 0 40px rgba(197, 160, 89, 0.05);
}

.msr-log-archive__card-head {
  display: flex;
  flex-wrap: wrap; /* ADDED: not in design - the badge and a long title may stack on narrow cards */
  align-items: center;
  gap: var(--msr-space-8) var(--msr-space-12);
  width: 100%;
}

.msr-log-archive__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.6px;
  text-transform: uppercase;
  overflow-wrap: break-word; /* ADDED: not in design */
}

.msr-log-archive__excerpt {
  width: 100%;
  padding-bottom: 1.125px; /* the card is 159.5 px tall in the design with a two-line text */
  color: var(--msr-white-40);
  font-size: var(--msr-fs-14);
  line-height: var(--msr-lh-relaxed); /* 22.75 */
}

.msr-log-archive__row--current .msr-log-archive__excerpt {
  color: var(--msr-white-60);
}

/* "W TOKU" badge: Inter 900 10/15 on gold, padding 2 8 */
.msr-log-archive__badge {
  flex: none;
  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: 0.2441px;
  text-transform: uppercase;
  white-space: nowrap;
}

.msr-log-archive__badge--current {
  padding: 2px var(--msr-space-8);
  background-color: var(--msr-gold);
}

/* "ZAKOŃCZONE" badge: Inter 700 10/15, -0.5px, white 60% on a white 10% plate, padding 4 12, under the text */
.msr-log-archive__badge--done {
  margin-top: 4.125px; /* the card is 201.5 px tall in the design (the text block carries 4.725 px more padding there) */
  padding: var(--msr-space-4) var(--msr-space-12);
  background-color: var(--msr-white-10);
  color: var(--msr-white-60);
  font-weight: var(--msr-fw-bold);
  letter-spacing: var(--msr-ls-tighter); /* -0.5px */
}

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

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

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

@media (hover: hover) {
  .msr-log-archive__card:has(.msr-log-archive__card-link:hover) {
    border-color: var(--msr-gold-30);
    box-shadow: 0 0 40px rgba(197, 160, 89, 0.05);
  }
}

/* ---- Watermarks (decorative, clipped by the card): person 128 px bottom right, crosshair 96 px bottom left, trophy 67.5 x 60 top right ---- */

.msr-log-archive__mark {
  position: absolute;
  z-index: var(--msr-z-behind);
  line-height: 0;
  pointer-events: none;
}

.msr-log-archive__mark--person {
  right: -16px;
  bottom: -16px;
  opacity: 0.1; /* the SVG itself is opaque white */
}

.msr-log-archive__mark--crosshair {
  bottom: -16px;
  left: -16px; /* the SVG carries its own 10% */
}

.msr-log-archive__mark--trophy {
  top: 8px;
  right: 8px;
  opacity: 0.1;
}

.msr-log-archive__mark--trophy .msr-log-archive__mark-img {
  width: 67.5px;
  height: 60px;
}

/* ==========================================================================
   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 / label is above the card
   ========================================================================== */

@media (max-width: 900px) {
  .msr-log-archive__track::before {
    left: 7.5px; /* centre of the 16px dots */
  }

  .msr-log-archive__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-log-archive__row--card-right .msr-log-archive__meta,
  .msr-log-archive__row--card-left .msr-log-archive__meta {
    margin: 0;
    text-align: left;
  }

  .msr-log-archive__row--card-right .msr-log-archive__card,
  .msr-log-archive__row--card-left .msr-log-archive__card {
    margin: 0;
  }

  /* Dot level with the date line (10px = half of its 20px line) */
  .msr-log-archive__dot {
    position: absolute;
    top: 10px;
    left: 0;
    transform: translateY(-50%);
  }

  .msr-log-archive__hero {
    min-height: 0;
    background-image: radial-gradient(ellipse farthest-side at 50% 50%, var(--msr-gold-10) 0%, var(--msr-gold-00) 100%); /* the 800px circle would end in a hard edge on a narrow hero */
    padding-block: calc(var(--msr-space-96) + var(--msr-space-16)) var(--msr-space-64);
  }

  .msr-log-archive__hero-inner {
    padding-inline: var(--msr-gutter);
  }

  .msr-log-archive__track {
    margin-top: var(--msr-space-48);
  }
}

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

  .msr-log-archive__eyebrow {
    padding-left: 0.5em;
    letter-spacing: 0.5em; /* 8px tracking is too wide for a phone */
  }

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