/* =====================================================================
   THE OHS — "Training is the licence" as five cards
   ---------------------------------------------------------------------
   The five pathway steps are currently one panel divided by hairlines.
   This breaks them into five separate cards, so the section matches the
   three door cards higher up the page.

   The existing markup is untouched: .steps stays the grid, .step stays
   the cell. Only their skins change.

   WHAT HAD TO BE UNPICKED

   The panel look is built from four things, and all four have to go or
   the cards end up with a stray hairline down one edge:

       .steps      border: 1px solid var(--line)
       .steps      border-radius + overflow: hidden
       .steps      gap: 0
       .step       border-left: 1px solid var(--line-2)

   plus the theme's own dark-band overrides, which carry !important:

       .eu-dark .steps { background: var(--eu-ink-2) !important;
                         border-color: var(--eu-line-d) !important }
       .eu-dark .step  { border-left-color: ... !important;
                         border-top-color:  ... !important }

   Hence the doubled class names and the !important flags below -- the
   same reason as in classes-glass.css.

   WHAT IS KEPT

   .step::before is the outlined numeral, drawn with a CSS counter and a
   gold text-stroke. Nothing here touches it: the numbers are the point
   of the section ("the order matters, that's why they're numbered").
   ::after was unused, which is what leaves it free for the red rule.

   The glass is the same recipe as the licence-class cards, so the two
   dark sections read as one material. Measured on it:

       title   #ffffff          15.9:1
       body    rgb(174,184,196)  7.9:1   at 12px
   ===================================================================== */

/* ── The grid ─────────────────────────────────────────────────────── */

.eu-dark .steps.steps,
.eu-onink .steps.steps {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;          /* the cards' shadows must not be clipped */
  box-shadow: none !important;

  gap: clamp(12px, 1.2vw, 18px) !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Explicit breakpoints rather than auto-fit with minmax(). auto-fit was
   the obvious choice and it is wrong here: it lays down as many tracks
   as would fit, collapses the empty ones to 0px -- and keeps their
   gaps. Measured at 1441px that left five cards and two phantom gaps,
   so the row stopped 24px short of the right edge while every other
   section reached it. Counting the columns by hand costs three media
   queries and lines the row up exactly. */
@media (max-width: 1180px) {
  .eu-dark .steps.steps,
  .eu-onink .steps.steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .eu-dark .steps.steps,
  .eu-onink .steps.steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 460px) {
  .eu-dark .steps.steps,
  .eu-onink .steps.steps { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── The cards ────────────────────────────────────────────────────── */

.eu-dark .step.step,
.eu-onink .step.step {
  position: relative;
  padding: 22px 18px 20px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 14px;
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .025) 100%),
    rgba(255, 255, 255, .055) !important;
  box-shadow:
    0 18px 40px -26px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);

  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Same fallback as the licence-class cards: with no backdrop-filter
   there is nothing to blur, and 5.5% white is barely a card. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .eu-dark .step.step,
  .eu-onink .step.step {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .05) 100%),
      rgba(255, 255, 255, .085) !important;
  }
}

/* The red rule across the top, which is what the door cards use to
   separate their picture from their text. Here there is no picture, so
   it sits on the top edge and does the same job: it tells you where one
   card starts and the last one stopped. */
.eu-dark .step.step::after,
.eu-onink .step.step::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #b5121b 0%, #d81f29 55%, rgba(199, 154, 30, .85) 100%);
}

/* First card slightly stronger, since it is where reading starts. */
.eu-dark .steps.steps > .step:first-child,
.eu-onink .steps.steps > .step:first-child {
  border-color: rgba(255, 255, 255, .22) !important;
}

/* ── Hover ────────────────────────────────────────────────────────── */
.eu-dark .step.step:hover,
.eu-onink .step.step:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .30) !important;
  box-shadow:
    0 26px 54px -26px rgba(0, 0, 0, 1),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* ── Type inside the card ─────────────────────────────────────────── */
/* The numeral is left exactly as the theme draws it -- gold stroke on a
   hollow face -- and only given room to breathe now that it sits inside
   a card rather than a cell. */
.eu-dark .step.step::before,
.eu-onink .step.step::before {
  margin-bottom: 10px;
}

.eu-dark .step.step b,
.eu-onink .step.step b {
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 7px;
}

.eu-dark .step.step span,
.eu-onink .step.step span {
  font-size: 12.5px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .eu-dark .step.step,
  .eu-onink .step.step { transition: none; }
  .eu-dark .step.step:hover,
  .eu-onink .step.step:hover { transform: none; }
}


/* =====================================================================
   THE SAME SECTION ON THE LIGHT BAND
   ---------------------------------------------------------------------
   The pathway strip appears twice: on the home page's dark band, and on
   the Licence classes page inside section.tight.eu-light, where the
   surface is rgb(248,249,251) and the panel is white. Everything above
   is scoped to .eu-dark / .eu-onink, so the light one was left as the
   old divided panel. This is its half.

   The two halves never collide: a rule naming .eu-dark is more specific
   than one naming .eu-light, and neither class is ever on the same
   element, so each band simply reads its own block.

   ONE COLOUR IS CHANGED RATHER THAN CARRIED OVER

   The step descriptions are rgb(124,116,102). On a white card that
   measures 4.62:1 against a 4.5 minimum -- it passes, but only just,
   and the card today is rgba(255,255,255,.74) over a grey band, so the
   real figure is slightly below that again. At 12.5px this is the text
   people actually have to read to follow the pathway, so it is deepened
   to rgb(99,92,80), which measures 6.6:1 on a solid white card. The
   headings, at 18.5:1, are untouched.
   ===================================================================== */

/* ── The grid ─────────────────────────────────────────────────────── */

.eu-light .steps.steps {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;

  gap: clamp(12px, 1.2vw, 18px) !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (max-width: 1180px) {
  .eu-light .steps.steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .eu-light .steps.steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 460px) {
  .eu-light .steps.steps { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── The cards ────────────────────────────────────────────────────── */
/* Solid white rather than the 74% the panel used. On a grey band a
   translucent white card is a slightly grey card, and the difference
   between it and the band is what makes it read as a card at all. */

.eu-light .step.step {
  position: relative;
  padding: 22px 18px 20px !important;
  border: 1px solid rgba(20, 19, 15, .09) !important;
  border-radius: 14px;
  overflow: hidden;

  background: #ffffff !important;
  box-shadow:
    0 1px 2px rgba(22, 19, 15, .04),
    0 14px 30px -20px rgba(22, 19, 15, .28);

  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.eu-light .step.step::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #b5121b 0%, #d81f29 55%, rgba(199, 154, 30, .85) 100%);
}

.eu-light .steps.steps > .step:first-child {
  border-color: rgba(20, 19, 15, .16) !important;
}

.eu-light .step.step:hover {
  transform: translateY(-3px);
  border-color: rgba(20, 19, 15, .16) !important;
  box-shadow:
    0 2px 4px rgba(22, 19, 15, .05),
    0 22px 44px -20px rgba(22, 19, 15, .34);
}

/* ── Type inside the light card ───────────────────────────────────── */

.eu-light .step.step::before {
  margin-bottom: 10px;
}

.eu-light .step.step b {
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 7px;
}

.eu-light .step.step span {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgb(99, 92, 80);          /* 6.6:1 on white, up from 4.62:1 */
}

@media (prefers-reduced-motion: reduce) {
  .eu-light .step.step { transition: none; }
  .eu-light .step.step:hover { transform: none; }
}