/* How it works: six tinted airport cards in order, each with a numbered blue circle, one of the
   owner's mascot scenes and a short label. Phone: a snap-scroll row. Tablet: 3 x 2. Desktop: one row. */
.s-how {
  --how-gap: var(--space-md);
  --how-card-width: min(70vw, 264px);
  --how-card-pad: var(--space-lg);
  --how-num-size: 34px;
  --how-arrow-size: 20px;
  --how-lift: -6px;
  --how-bob: -8px;
  --how-rail-width: var(--page-width);
  --how-edge: color-mix(in srgb, var(--jet) 9%, transparent);
  --how-shadow: 0 14px 28px color-mix(in srgb, var(--jet) 16%, transparent);
  padding-block: calc(var(--section-gap) / 2);
}

.s-how .how-head {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
}

.s-how .how-eyebrow {
  color: var(--jet);
  font-weight: 700;
}

/* Same headline as every section below. */
.s-how .title {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--jet-ink);
}

.s-how .how-rail {
  margin-top: var(--space-xxl);
}

/* Phone: the row bleeds to both screen edges and the next card peeks in, so it reads as scrollable.
   The block padding leaves room for the hover lift and the focus ring inside the scroll box. */
.s-how .how-steps {
  display: flex;
  gap: var(--how-gap);
  padding: var(--space-md) var(--gutter) var(--space-xl);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.s-how .how-steps::-webkit-scrollbar {
  display: none;
}

.s-how .how-step {
  position: relative;
  display: flex;
  flex: none;
  width: var(--how-card-width);
  scroll-snap-align: start;
}

.s-how .how-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: var(--how-card-pad);
  background: var(--jet-tint);
  border-radius: var(--radius-card-large);
  box-shadow: inset 0 0 0 1px var(--how-edge);
  color: var(--jet-ink);
  text-align: center;
  text-decoration: none;
  transition: transform var(--duration-snappy) var(--ease-standard);
}

/* The lifted shadow is its own layer so only opacity animates. */
.s-how .how-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--how-shadow);
  opacity: 0;
  transition: opacity var(--duration-snappy) var(--ease-standard);
  pointer-events: none;
}

.s-how .how-card:focus-visible {
  border-radius: var(--radius-card-large);
}

.s-how .how-card:focus-visible,
.s-how .how-card[href]:active {
  transform: translateY(var(--how-lift));
}

.s-how .how-card:focus-visible::after {
  opacity: 1;
}

@media (hover: hover) {
  .s-how .how-card:hover {
    transform: translateY(var(--how-lift));
  }

  .s-how .how-card:hover::after {
    opacity: 1;
  }
}

.s-how .how-num {
  display: grid;
  place-items: center;
  align-self: flex-start;
  width: var(--how-num-size);
  height: var(--how-num-size);
  background: var(--jet);
  color: var(--surface);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.s-how .how-scene {
  width: 100%;
  max-width: 200px;
  height: auto;
  aspect-ratio: 1;
  margin-top: calc(var(--space-sm) * -1);
  object-fit: contain;
}

.s-how .how-label {
  margin-top: var(--space-sm);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.s-how .how-sub {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  color: color-mix(in srgb, var(--jet-ink) 68%, transparent);
}

/* Arrows sit in the gap between cards. In the phone row the peeking card already says "next". */
.s-how .how-arrow {
  display: none;
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--how-arrow-size);
  height: var(--how-arrow-size);
  margin: calc(var(--how-arrow-size) / -2) 0 0 calc((var(--how-gap) - var(--how-arrow-size)) / 2);
  fill: none;
  stroke: var(--jet);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Tablet: 3 x 2. The arrow after card 3 would point off the row, so it is dropped. */
@media (min-width: 640px) {
  .s-how {
    --how-gap: 36px;
    --how-card-pad: var(--space-xl);
  }

  .s-how .how-rail {
    width: 100%;
    max-width: calc(var(--how-rail-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .s-how .how-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .s-how .how-step {
    width: auto;
  }

  .s-how .how-arrow {
    display: block;
  }

  .s-how .how-step:nth-child(3n) .how-arrow {
    display: none;
  }
}

/* Desktop: one row of six with an arrow in every gap. */
@media (min-width: 1100px) {
  .s-how {
    --how-gap: 26px;
    --how-card-pad: var(--space-md);
    --how-arrow-size: 18px;
  }

  .s-how .how-steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .s-how .how-step:nth-child(3n) .how-arrow {
    display: block;
  }

  .s-how .how-label {
    font-size: 16px;
  }
}

/* Each mascot does one small hop the first time its card comes into view (how.js adds .is-in). */
@media (prefers-reduced-motion: no-preference) {
  .s-how .how-step.is-in .how-scene {
    animation: how-bob 0.9s var(--ease-gentle) both;
    animation-delay: calc(var(--how-order, 0) * 90ms);
  }

  .s-how .how-step:nth-child(2) { --how-order: 1; }
  .s-how .how-step:nth-child(3) { --how-order: 2; }
  .s-how .how-step:nth-child(4) { --how-order: 3; }
  .s-how .how-step:nth-child(5) { --how-order: 4; }
  .s-how .how-step:nth-child(6) { --how-order: 5; }

  @keyframes how-bob {
    0% { transform: translateY(0); }
    35% { transform: translateY(var(--how-bob)); }
    65% { transform: translateY(2px); }
    100% { transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-how .how-card:hover,
  .s-how .how-card:focus-visible,
  .s-how .how-card[href]:active {
    transform: none;
  }
}