/* On Board page styles */
.onboard-main {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  padding-block-end: var(--space-page);
}

.onboard-article {
  width: 100%;
}

.onboard-hero {
  padding-block: var(--space-page) var(--space-major);
  border-block-end: var(--border-double);
  margin-block-end: var(--space-page);
}

.onboard-hero__kicker {
  margin-block-end: var(--space-tight);
}

.onboard-hero__title {
  margin-block-end: 0;
}

.onboard-section {
  padding-block: var(--space-page);
  border-block-end: var(--border-double);
}

.onboard-section:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.onboard-section__kicker {
  margin-block-end: var(--space-tight);
}

.onboard-section__heading {
  margin-block-end: var(--space-section);
}

.onboard-subheading {
  margin-block-start: var(--space-section);
  margin-block-end: var(--space-base);
}

.onboard-subheading:first-child {
  margin-block-start: 0;
}

.onboard-media {
  margin-block-end: var(--space-paragraph);
}

.onboard-media__img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--border-single);
  padding: 4px;
  background-color: var(--color-paper);
}

.onboard-media__img--halftone {
  filter: grayscale(100%) contrast(1.05);
  position: relative;
}

.onboard-media__img--halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(28, 34, 30, 0.18) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

.onboard-media__caption {
  margin-block-start: var(--space-tight);
}

.onboard-welcome__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-section);
  align-items: start;
}

.onboard-welcome__media {
  margin-block-end: 0;
}

.onboard-welcome__content {
  min-width: 0;
}

.onboard-welcome__lead {
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 42em;
}

.onboard-welcome__text {
  max-width: 42em;
}

.onboard-drop-cap::first-letter {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 700;
  color: var(--color-accent);
  float: left;
  line-height: 0.85;
  margin-inline-end: 0.1em;
  margin-block-start: 0.05em;
}

.onboard-public__grid,
.onboard-entertainment__grid,
.onboard-wellness__grid,
.onboard-family__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-section);
  align-items: start;
}

.onboard-public__text,
.onboard-entertainment__text,
.onboard-wellness__text,
.onboard-family__text,
.onboard-enrichment__text,
.onboard-practical__text,
.onboard-accessibility__text {
  min-width: 0;
}

.onboard-multicol {
  column-gap: var(--space-section);
  column-width: 18rem;
}

.onboard-multicol > * {
  break-inside: avoid;
}

.onboard-public__media,
.onboard-entertainment__media,
.onboard-wellness__media,
.onboard-family__media {
  min-width: 0;
}

.onboard-media-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.onboard-media-stack .onboard-media {
  margin-block-end: 0;
}

.onboard-dining__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-section);
  align-items: start;
}

.onboard-dining__main {
  min-width: 0;
}

.onboard-dining__sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.onboard-dining__sidebar .onboard-media {
  margin-block-end: 0;
}

.onboard-pullquote {
  margin-block-end: 0;
}

.onboard-enrichment__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-section);
  align-items: start;
}

.onboard-enrichment__illustration {
  display: none;
}

.onboard-practical__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-section);
  align-items: start;
}

.onboard-practical__table-wrapper {
  margin-block-start: var(--space-section);
  overflow-x: auto;
}

.onboard-service-table {
  min-width: 36rem;
}

.onboard-accessibility__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-section);
  align-items: start;
}

.onboard-accessibility__sidebar {
  min-width: 0;
}

.onboard-tips__content {
  width: 100%;
}

.onboard-tips__list {
  list-style: none;
  counter-reset: onboard-tip;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.onboard-tips__item {
  counter-increment: onboard-tip;
  position: relative;
  padding-inline-start: 3.5rem;
  min-width: 0;
}

.onboard-tips__item::before {
  content: counter(onboard-tip);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.onboard-tips__title {
  margin-block-end: var(--space-base);
}

.onboard-tips__item p {
  max-width: 42em;
}

@media (min-width: 768px) {
  .onboard-main {
    padding-inline: var(--container-padding-desktop);
  }

  .onboard-welcome__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-major);
  }

  .onboard-public__grid,
  .onboard-entertainment__grid,
  .onboard-wellness__grid,
  .onboard-family__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-major);
  }

  .onboard-dining__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--space-major);
  }

  .onboard-enrichment__grid {
    grid-template-columns: minmax(0, 1fr) 7rem;
    gap: var(--space-major);
  }

  .onboard-enrichment__illustration {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: var(--color-rule);
  }

  .onboard-enrichment__illustration svg {
    width: 7rem;
    height: 7rem;
  }

  .onboard-accessibility__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--space-major);
  }

  .onboard-multicol {
    column-count: 2;
    column-width: auto;
  }
}

@media (max-width: 767px) {
  .onboard-main {
    padding-inline: var(--container-padding-mobile);
  }

  .onboard-hero {
    padding-block: var(--space-major) var(--space-section);
    margin-block-end: var(--space-major);
  }

  .onboard-section {
    padding-block: var(--space-major);
  }

  .onboard-section__heading {
    margin-block-end: var(--space-paragraph);
  }

  .onboard-subheading {
    margin-block-start: var(--space-paragraph);
  }

  .onboard-welcome__lead,
  .onboard-welcome__text,
  .onboard-tips__item p {
    max-width: none;
  }

  .onboard-tips__item {
    padding-inline-start: 2.5rem;
  }

  .onboard-tips__item::before {
    font-size: 2rem;
  }
}