/* Homepage program discovery and first rides. Native content; no extra JavaScript. */
@layer components {
  .mp-home-programs { --mp-color-text-2: color-mix(in srgb, var(--mp-color-text) 80%, var(--mp-color-surface)); }
  .mp-home-programs > * { grid-column: wide; }
  .mp-home-programs p { max-inline-size: none; }
  .mp-home-programs__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--mp-space-s) var(--mp-space-xl); }
  .mp-home-programs__head .mp-eyebrow { margin: 0 0 var(--mp-space-xs); }
  .mp-home-programs__title { margin: 0; font-size: var(--mp-fs-display-m); }
  .mp-home-programs__lede { margin-block: var(--mp-space-s) 0; color: var(--mp-color-text-2); font-size: var(--mp-fs-lead); }
  .mp-home-programs > .mp-home-programs__grid { margin-block-start: var(--mp-space-l); }
  .mp-home-programs__grid { display: grid; column-gap: var(--mp-space-xl); }
  /* The board (Nick, 2026-11-05: "the entire card needs to be clickable", option C of the
     home-programs canvas): an ink band over a near-black photo, six tiles that are the links.
     Who it's for as the kicker; the facts row carries the season and the live "From" price. */
  .mp-home-programs--board { position: relative; isolation: isolate; }
  .mp-home-programs--board > .mp-home-programs__bg,
  .mp-home-programs--board::before { position: absolute; inset: 0; grid-column: full; margin: 0; } /* an absolute grid item's box is its grid area: the full lane, not the wide one; an <img> never stretches to an inset, so inset: 0 and 100% */
  .mp-home-programs--board > .mp-home-programs__bg { z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) brightness(.55) contrast(1.05); }
  .mp-home-programs--board::before { z-index: -1; } /* the scrim paints over the photo, both under the words */
  .mp-home-programs--board::before { content: ""; background: linear-gradient(180deg, color-mix(in srgb, var(--mp-ink) 86%, transparent) 0%, color-mix(in srgb, var(--mp-ink) 74%, transparent) 50%, color-mix(in srgb, var(--mp-ink) 90%, transparent) 100%); }
  .mp-home-programs--board > .mp-home-programs__bg + * { margin-block-start: 0; }
  .mp-home-programs--board .mp-home-programs__grid { gap: var(--mp-space-xs); }
  .mp-home-programs__item {
    position: relative; display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 18.75rem;
    padding: var(--mp-space-m) var(--mp-space-m) var(--mp-space-s);
    border: var(--mp-border) solid color-mix(in srgb, var(--mp-white) 14%, transparent);
    border-radius: var(--mp-radius-md); background-color: color-mix(in srgb, var(--mp-white) 5%, transparent);
    color: var(--mp-color-text); text-decoration: none;
    transition: background-color var(--mp-dur) var(--mp-ease-out), border-color var(--mp-dur) var(--mp-ease-out), color var(--mp-dur) var(--mp-ease-out), translate var(--mp-dur) var(--mp-ease-out);
  }
  .mp-home-programs__item--featured, .mp-home-programs__item:has(> .mp-home-programs__tag) { border-color: var(--mp-green); }
  .mp-home-programs__item:is(:hover, :focus-visible) { background-color: var(--mp-green); border-color: var(--mp-green); color: var(--mp-ink); translate: 0 -3px; }
  .mp-home-programs__item:focus-visible { outline: var(--mp-border-focus, 3px) solid var(--mp-white); outline-offset: 3px; }
  .mp-home-programs__item > * { margin: 0; }
  .mp-home-programs__kicker { display: inline-flex; align-items: center; gap: var(--mp-space-2xs); font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-display); font-size: 1.0625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mp-green); }
  .mp-home-programs__kicker::before { content: ""; inline-size: 1.125rem; block-size: 3px; background: currentColor; }
  .mp-home-programs__tag { position: absolute; inset-block-start: var(--mp-space-m); inset-inline-end: var(--mp-space-m); padding: .375rem .625rem; border-radius: var(--mp-radius-pill, 999px); background: var(--mp-green); color: var(--mp-ink); font: var(--mp-weight-ui) var(--mp-fs-label) / 1 var(--mp-font-body); letter-spacing: var(--mp-track-label); text-transform: uppercase; }
  .mp-home-programs__item h3 { margin-block-start: var(--mp-space-l); font-size: var(--mp-fs-display-s); line-height: .92; }
  .mp-home-programs__item .mp-home-programs__label { margin-block-start: var(--mp-space-xs); color: var(--mp-color-text); font-weight: var(--mp-weight-ui); }
  .mp-home-programs__item .mp-home-programs__text { margin-block-start: var(--mp-space-2xs); color: var(--mp-color-text-2); }
  .mp-home-programs__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mp-space-xs); margin-block-start: auto; padding-block-start: var(--mp-space-m); }
  .mp-home-programs__facts { display: flex; flex-wrap: wrap; gap: .375rem .75rem; font-size: var(--mp-fs-xs); font-weight: var(--mp-weight-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--mp-color-text-2); }
  .mp-home-programs__facts > span { display: inline-flex; align-items: center; gap: .5rem; }
  .mp-home-programs__facts > span + span::before { content: ""; inline-size: 4px; block-size: 4px; border-radius: 999px; background: currentColor; opacity: .6; }
  .mp-home-programs__arrow { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 999px; border: 1.5px solid var(--mp-green); color: var(--mp-green); transition: background-color var(--mp-dur) var(--mp-ease-out), color var(--mp-dur) var(--mp-ease-out), border-color var(--mp-dur) var(--mp-ease-out), translate var(--mp-dur) var(--mp-ease-out); }
  .mp-home-programs__item:is(:hover, :focus-visible) :is(.mp-home-programs__kicker, .mp-home-programs__label, .mp-home-programs__text, .mp-home-programs__facts) { color: var(--mp-ink); }
  .mp-home-programs__item:is(:hover, :focus-visible) .mp-home-programs__tag { background: var(--mp-ink); color: var(--mp-green); }
  .mp-home-programs__item:is(:hover, :focus-visible) .mp-home-programs__arrow { background: var(--mp-ink); border-color: var(--mp-ink); color: var(--mp-green); translate: 2px -2px; }
  @media (width < 48rem) {
    .mp-home-programs__item { min-block-size: 0; }
    .mp-home-programs__item .mp-home-programs__text { display: none; } /* six programs in a screen and a half on a phone: kicker, title, label, facts */
    .mp-home-programs__item h3 { margin-block-start: var(--mp-space-m); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mp-home-programs__item, .mp-home-programs__arrow { transition: none; }
    .mp-home-programs__item:is(:hover, :focus-visible) { translate: none; }
  }
  .mp-home-programs__first-ride { display: grid; align-items: center; gap: var(--mp-space-l) var(--mp-space-xl); }
  .mp-home-programs__photo { margin: 0; min-inline-size: 0; }
  .mp-home-programs__photo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mp-radius-lg); }
  .mp-home-programs__copy { display: grid; gap: var(--mp-space-s); min-inline-size: 0; }
  .mp-home-programs__copy > * { margin: 0; }
  .mp-home-programs__copy > p:not(.mp-eyebrow) { color: var(--mp-color-text-2); }
  .mp-home-programs__packages { margin-block: var(--mp-space-xs); }
  .mp-home-programs__packages h3 { margin: 0; font-size: var(--mp-fs-display-2xs); }
  .mp-home-programs__packages p { margin-block: var(--mp-space-xs); color: var(--mp-color-text-2); }
  .mp-home-programs__packages dl { margin: var(--mp-space-s) 0; }
  .mp-home-programs__packages dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mp-space-2xs) var(--mp-space-s); padding-block: var(--mp-space-xs); border-block-start: var(--mp-border) solid var(--mp-color-line); }
  .mp-home-programs__packages dd { margin: 0; font-weight: var(--mp-weight-ui); }
  .mp-home-programs__note { font-size: var(--mp-fs-sm); }
  .mp-home-programs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-s); }
  .mp-home-programs__actions .mp-link { white-space: normal; }
  .mp-home-programs > .mp-home-programs__resources { margin-block-start: var(--mp-space-xl); }
  .mp-home-programs__resources { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-xs) var(--mp-space-l); padding-block-start: var(--mp-space-m); border-block-start: var(--mp-border) solid var(--mp-color-line); }
  .mp-home-programs__resources p { margin: 0; font-weight: var(--mp-weight-ui); }
  .mp-home-programs__resources a { display: inline-flex; align-items: center; gap: var(--mp-space-xs); min-block-size: var(--mp-tap); font-size: var(--mp-fs-sm); text-underline-offset: .22em; }
  @media (width >= 48rem) {
    .mp-home-programs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (width >= 64rem) {
    .mp-home-programs--board .mp-home-programs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (width >= 64rem) {
    .mp-home-programs__first-ride { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  }
}