/* Camps discovery and comparison. COMPONENTS.md §7.61; native blocks, no new JS. */
@layer components {
  .mp-camps-hub { --mp-color-text-2: color-mix(in srgb, var(--mp-color-text) 80%, var(--mp-color-surface)); }
  .mp-camps-hub--opening { scroll-margin-block-start: var(--mp-h-header); }
  .mp-camps-hub__opening { display: grid; gap: var(--mp-space-l) var(--mp-space-xl); align-items: center; }
  .mp-camps-hub__intro { min-inline-size: 0; }
  .mp-camps-hub__intro .mp-hero { min-block-size: 0; margin: 0; border-radius: 0; background: none; }
  .mp-camps-hub .mp-camps-hub__intro .mp-hero__body { padding: 0; background: none; }
  .mp-camps-hub__intro .mp-hero__title { font-size: var(--mp-fs-display-xl); max-inline-size: none; }
  .mp-camps-hub__intro .mp-hero__lede { font-size: var(--mp-fs-base); }
  .mp-camps-hub__quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mp-space-xs); margin-block-start: var(--mp-space-l); }
  .mp-camps-hub__quick-link { display: grid; gap: var(--mp-space-3xs); align-content: center; padding: var(--mp-space-s); border: var(--mp-border) solid color-mix(in srgb, var(--mp-color-accent) 40%, var(--mp-color-surface)); border-radius: var(--mp-radius-sm); background-color: var(--mp-color-surface-2); color: var(--mp-color-text); text-decoration: none; min-block-size: var(--mp-tap); }
  .mp-camps-hub__quick-link:hover { border-color: var(--mp-color-accent); background-color: color-mix(in srgb, var(--mp-color-accent) 10%, var(--mp-color-surface-2)); }
  .mp-camps-hub__quick-name { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-2xs); font: var(--mp-weight-display) var(--mp-fs-display-2xs) / var(--mp-lh-tight) var(--mp-font-display); text-transform: uppercase; }
  .mp-camps-hub__quick-note { color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); line-height: var(--mp-lh-snug); }
  .mp-camps-hub__utility { display: flex; flex-wrap: wrap; gap: var(--mp-space-xs) var(--mp-space-l); margin-block-start: var(--mp-space-s); }
  .mp-camps-hub__utility--ruled { border-block-start: var(--mp-border) solid var(--mp-color-line); padding-block-start: var(--mp-space-m); }
  .mp-camps-hub__text-link { display: inline-flex; align-items: center; gap: var(--mp-space-xs); min-block-size: var(--mp-tap); color: var(--mp-color-accent-text); font-weight: var(--mp-weight-ui); text-decoration-thickness: var(--mp-border); text-underline-offset: var(--mp-space-3xs); }
  .mp-camps-hub__photo { margin: 0; min-inline-size: 0; }
  .mp-camps-hub__image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: var(--mp-ratio-photo); object-fit: cover; border-radius: var(--mp-radius-lg); }
  .mp-camps-hub__photo--hero .mp-camps-hub__image { aspect-ratio: var(--mp-ratio-wide); }
  /* Program plates (2026-11-05): the photo stays an <img>; the foot scrim and the program's logo are decoration over it (design-rules §6e). */
  .mp-camps-hub__plate { position: relative; isolation: isolate; min-inline-size: 0; border-radius: var(--mp-radius-lg); overflow: hidden; }
  .mp-camps-hub__plate > .mp-camps-hub__photo { margin: 0; }
  .mp-camps-hub__plate .mp-camps-hub__image { border-radius: 0; }
  .mp-camps-hub__plate::after { content: ""; position: absolute; inset: 0; background: var(--mp-scrim-plate); pointer-events: none; }
  .mp-camps-hub__brand { position: absolute; z-index: 1; inset-inline-start: 6%; inset-block-end: 7%; display: block; block-size: 34%; inline-size: auto; max-inline-size: 62%; margin: 0; filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--mp-ink) 45%, transparent)); }
  .mp-camps-hub__head { display: grid; gap: var(--mp-space-s); margin-block-end: var(--mp-space-l); }
  .mp-camps-hub__head .mp-eyebrow { margin: 0; }
  .mp-camps-hub__title { margin: 0; font-size: var(--mp-fs-display-m); }
  .mp-camps-hub__lede { margin: 0; max-inline-size: var(--mp-measure); color: var(--mp-color-text-2); font-size: var(--mp-fs-lead); }
  .mp-camps-hub__feature { display: grid; gap: var(--mp-space-l) var(--mp-space-xl); align-items: center; padding-block: var(--mp-space-xl); border-block-start: var(--mp-border) solid var(--mp-color-line); scroll-margin-block-start: var(--mp-space-3xl); }
  .mp-camps-hub > .mp-camps-hub__feature { margin-block-start: 0; }
  .mp-camps-hub__feature:last-child { padding-block-end: 0; }
  .mp-camps-hub__copy { display: grid; gap: var(--mp-space-s); min-inline-size: 0; }
  .mp-camps-hub__program-name { margin: 0; font-size: var(--mp-fs-display-l); }
  .mp-camps-hub__program-link { color: inherit; text-decoration: none; }
  .mp-camps-hub__program-link:hover { color: var(--mp-color-accent-text); }
  .mp-camps-hub__promise { margin: 0; color: var(--mp-color-accent-text); font: var(--mp-weight-ui) var(--mp-fs-lead) / var(--mp-lh-snug) var(--mp-font-ui); }
  .mp-camps-hub__body { margin: 0; color: var(--mp-color-text-2); }
  .mp-camps-hub__facts { margin: 0; display: grid; gap: var(--mp-space-xs); }
  .mp-camps-hub__fact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); gap: var(--mp-space-s); }
  .mp-camps-hub__label { color: var(--mp-color-text); font-weight: var(--mp-weight-ui); font-size: var(--mp-fs-sm); }
  .mp-camps-hub__value { margin: 0; color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  .mp-camps-hub__tuition { border-block-start: var(--mp-border) solid var(--mp-color-line); padding-block-start: var(--mp-space-s); }
  .mp-camps-hub__price { margin: 0; font: var(--mp-weight-display) var(--mp-fs-display-xs) / var(--mp-lh-tight) var(--mp-font-display); }
  .mp-camps-hub__unit { display: block; margin-block-start: var(--mp-space-3xs); font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-body) var(--mp-font-body); }
  .mp-camps-hub__price-note { margin-block: var(--mp-space-3xs) 0; color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  .mp-camps-hub__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-xs) var(--mp-space-m); }
  .mp-camps-hub > .mp-camps-hub__comparison { grid-column: wide; }
  .mp-camps-hub__comparison { inline-size: 100%; border-collapse: collapse; font-size: var(--mp-fs-sm); }
  .mp-camps-hub__cell { padding: var(--mp-space-s); text-align: start; border-block-end: var(--mp-border) solid var(--mp-color-line); vertical-align: top; }
  .mp-camps-hub__camp { font-weight: var(--mp-weight-ui); min-inline-size: 8em; }
  .mp-camps-hub__help { display: grid; gap: var(--mp-space-l); }
  .mp-camps-hub__help-item { border-block-start: var(--mp-border) solid var(--mp-color-line); padding-block-start: var(--mp-space-m); display: flex; flex-direction: column; align-items: flex-start; gap: var(--mp-space-xs); }
  .mp-camps-hub__subhead { margin: 0; font-size: var(--mp-fs-display-xs); }
  .mp-camps-hub__help-item .mp-camps-hub__text-link { margin-block-start: auto; }
  .mp-camps-hub__proof { display: grid; gap: var(--mp-space-l); }
  .mp-camps-hub__proof-item { display: grid; gap: var(--mp-space-xs); align-content: start; border-block-start: var(--mp-border) solid var(--mp-color-line); padding-block-start: var(--mp-space-m); }
  .mp-camps-hub__proof-value { margin: 0; color: var(--mp-color-accent-text); font: var(--mp-weight-display) var(--mp-fs-display-xl) / var(--mp-lh-display) var(--mp-font-display); text-transform: uppercase; }
  .mp-camps-hub__proof-value--words { font-size: var(--mp-fs-display-s); }
  .mp-camps-hub--closing .mp-cta { padding: 0; border-radius: 0; }
  @media (width < 48rem) {
    .mp-camps-hub__quick-name { font-size: var(--mp-fs-display-2xs); }
    .mp-camps-hub__quick-arrow { display: none; }
    .mp-camps-hub__table-head { position: absolute; clip-path: inset(50%); block-size: var(--mp-border); inline-size: var(--mp-border); overflow: hidden; }
    .mp-camps-hub__row { display: block; margin-block-end: var(--mp-space-s); padding: var(--mp-space-s); border: var(--mp-border) solid var(--mp-color-line); border-radius: var(--mp-radius-sm); background-color: var(--mp-color-surface-2); }
    .mp-camps-hub__cell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--mp-space-s); padding: var(--mp-space-xs) 0; border: 0; }
    .mp-camps-hub__cell::before { content: attr(data-label); font-weight: var(--mp-weight-ui); }
    .mp-camps-hub__camp { display: block; font-size: var(--mp-fs-lead); }
    .mp-camps-hub__camp::before { content: none; }
  }
  @media (width >= 48rem) {
    .mp-camps-hub__help, .mp-camps-hub__proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mp-camps-hub__feature { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
  }
  @media (width >= 64rem) {
    .mp-camps-hub__opening { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .mp-camps-hub__photo--hero { align-self: stretch; }
    .mp-camps-hub__photo--hero .mp-camps-hub__image { block-size: 100%; aspect-ratio: auto; object-position: 85% 50%; }
    .mp-camps-hub__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--mp-space-xl); align-items: end; }
    .mp-camps-hub__head .mp-eyebrow { grid-column: 1 / -1; }
  }
}