/* V0LT V18.62 — homepage journey spacing and full-card links.
   Loaded only by index.html, after the existing responsive styles.
   Spacing is roughly one rendered heading high: 58px desktop / 68px wide,
   with a 32px mobile offset so a stacked section does not gain a large gap.
   Original padding, card dimensions, images and copy are intentionally kept. */

#journey {
  margin-top: 58px;
}

@media (min-width: 1450px) {
  #journey {
    margin-top: 68px;
  }
}

@media (max-width: 820px) {
  #journey {
    margin-top: 32px;
  }
}

/* One native link per card: no nested links, click handlers or overlay traps. */
#journey > .journey-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 75, 22, .12);
}

/* The ring is outside the cropped artwork and remains visible on light/dark cards.
   No movement or transition is introduced; keyboard focus is immediately clear. */
#journey > .journey-card-link:focus-visible {
  outline: 3px solid var(--orange, #ff4b16);
  outline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
  #journey > .journey-card-link:hover {
    box-shadow: 0 10px 24px rgba(21, 22, 28, .10),
                0 0 0 1px rgba(255, 75, 22, .32);
  }
}

@media (forced-colors: active) {
  #journey > .journey-card-link {
    outline: 1px solid LinkText;
    outline-offset: 1px;
  }
  #journey > .journey-card-link:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 5px;
  }
}