/*
 * Masuria Esport - "Proces tworzenia zespolu" section (assets/css/sections/process.css)
 * Markup: template-parts/sections/process.php. Requires tokens.css, base.css, components.css (.msr-container, .msr-section-title, .msr-eyebrow, .msr-icon).
 * Design (1440 px): page-dark ground with a 5% gold radial glow, padding 128px 96px, header (H2 + gold eyebrow) then an 80px gap and the timeline:
 * five 192px steps spread over the 1248px content column (72px gaps), a 1px line at y=40 (the vertical centre of the 80px discs) behind them.
 * The current step (the 5th: TRENER GŁÓWNY) has a gold disc + 4px ring, full opacity; completed steps (--done) are lightly dimmed with a gold check badge;
 * upcoming steps are dimmed with opacity 0.4 on the whole step.
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

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

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

/* Decorative glow: radial-gradient(523px 523.5px at 30% 50%, gold 5% -> 0%), defined once in tokens.css */
.msr-process__glow {
  position: absolute;
  inset: 0;
  background: var(--msr-gradient-process-glow);
  pointer-events: none;
}

.msr-process__inner {
  position: relative; /* paints above the glow */
  display: flex;
  flex-direction: column;
  gap: var(--msr-gap-xl); /* 80 between header and timeline */
  padding-block: var(--msr-section-py-fluid); /* 128 at >= 1440 */
}

/* ==========================================================================
   Header: H2 (36/40) + gold eyebrow (12/16, 0.5em). 40 + 5.5 + 16 + 2.5 = 64px
   ========================================================================== */

.msr-process__head {
  display: flex;
  flex-direction: column;
  gap: 5.5px;
  padding-bottom: 2.5px;
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.msr-process__steps {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between; /* five 192px steps in 1248px: the 288px left over becomes 4 x 72px */
  column-gap: var(--msr-space-16); /* ADDED: not in design - minimum gap; only matters below 1440 px */
}

/* The connecting line: full content width, 1px, centred on the discs. Painted first, so the discs sit on top of it. */
.msr-process__steps::before {
  content: '';
  position: absolute;
  top: 40px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: var(--msr-border);
  pointer-events: none;
}

.msr-process__step {
  position: relative;
  flex: 0 1 192px; /* ADDED: not in design - may shrink below 1440 px (the design has a fixed 192px) */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--msr-space-8);
  text-align: center;
  opacity: 0.4; /* upcoming steps: the whole step (disc, icon, texts) is dimmed */
  /* ADDED: not in design - hover state */
  transition: opacity var(--msr-duration) var(--msr-ease);
}

.msr-process__step--current {
  opacity: 1;
}

/* ADDED: not in design - completed step: less dimmed than an upcoming one, gold ring and a check badge */
.msr-process__step--done {
  opacity: 1; /* the dimming sits on the texts and icon instead, so the disc stays opaque and the line does not show through it */
}

.msr-process__step--done :is(.msr-process__icon, .msr-process__step-title, .msr-process__step-caption) {
  opacity: 0.75;
}

.msr-process__step--done .msr-process__disc {
  position: relative;
  border-color: var(--msr-gold-30);
}

.msr-process__step--done .msr-process__disc::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--msr-bg);
  border-radius: var(--msr-radius-full);
  background-color: var(--msr-gold);
}

.msr-process__step--done .msr-process__disc::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 2px;
  right: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--msr-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (hover: hover) {
  .msr-process__step:not(.msr-process__step--current):hover {
    opacity: 0.7; /* ADDED: not in design */
  }
}

/* ---- Disc: 80 x 80, #1a1a1a with a 1px white 10% border. The 3px / 5px padding puts the icon 1px above the exact centre, as in the design ---- */

.msr-process__disc {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding-block: 3px 5px;
  border: 1px solid var(--msr-border);
  border-radius: var(--msr-radius-full);
  background-color: var(--msr-surface);
}

/*
 * Current step: solid gold disc plus a 4px ring OUTSIDE the 80px disc (a spread shadow, so the layout box stays 80px).
 * The border stays (transparent) so the icon position is identical to the inactive discs.
 */
.msr-process__step--current .msr-process__disc {
  border-color: transparent;
  background-color: var(--msr-gold);
  box-shadow: var(--msr-ring-gold);
}

/* Fixed height, width from the SVG file (21 / 30 / 24 / 30 / 24 / 27 px wide); the icons are baked white, the current step's is baked #0a0a0a */
.msr-process__icon {
  width: auto;
  height: 24px;
}

/* ---- Texts ---- */

.msr-process__step-title {
  width: 100%;
  padding-top: var(--msr-space-16);
  color: var(--msr-white);
  font-size: var(--msr-fs-18);
  line-height: var(--msr-lh-28);
  text-transform: uppercase; /* ADDED: not in design - the design copy is typed in capitals; keeps CMS-edited text consistent */
  text-wrap: balance; /* ADDED: not in design - the design keeps titles on one line (nowrap); this only matters when a step gets narrow */
}

.msr-process__step-caption {
  width: 100%;
  color: var(--msr-white-40);
  font-size: var(--msr-fs-12);
  line-height: var(--msr-lh-relaxed); /* 19.5px */
  letter-spacing: var(--msr-ls-tighter); /* -0.6px */
  text-transform: uppercase; /* ADDED: not in design - see above */
}

/* ==========================================================================
   Responsive (ADDED: not in design) - the 1440 px pixels above are unchanged
   6 columns + line -> 3 columns (<= 1100) -> 2 columns (<= 768) -> 1 column with a vertical line (<= 480)
   ========================================================================== */

@media (max-width: 1100px) {
  /* Wrapped rows: the horizontal line would cross the gaps between rows, so it is dropped */
  .msr-process__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--msr-gap-lg) var(--msr-space-24); /* 48 / 24 */
  }

  .msr-process__steps::before {
    display: none;
  }
}

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

  .msr-process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .msr-process__phase {
    letter-spacing: 0.3em; /* keeps the eyebrow on one line at 390px */
  }

  /* One column: a vertical timeline. The line runs through the disc centres (x = 40px), the texts sit to the right of the discs. */
  .msr-process__steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--msr-gap-md); /* 32 */
  }

  .msr-process__steps::before {
    display: block;
    top: 40px;
    bottom: 40px;
    left: 40px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .msr-process__step {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas:
      'disc title'
      'disc caption';
    align-items: center;
    column-gap: var(--msr-space-20);
    row-gap: 0;
    text-align: left;
  }

  .msr-process__disc {
    grid-area: disc;
  }

  .msr-process__step-title {
    grid-area: title;
    align-self: end;
    padding-top: 0;
  }

  .msr-process__step-caption {
    grid-area: caption;
    align-self: start;
  }
}