/* Capability single layout. Loads only with single-capability.php.
 *
 * Desktop, from the 2022 file at 1440:
 * Rail          x 45, card 176 wide, 52px below the hero
 * Overview      content x 397 to 1022, key contacts to the right
 * Sections      856 container, centered, never under the rail
 *
 * Legacy section markup and its custom.css rules are untouched. This file
 * only places the wrappers. Phase 4 replaces the insides.
 */

.hlb-cap {
  --hlb-cap-rail-left:  45px;
  --hlb-cap-rail-width: 176px;
  --hlb-cap-container:  856px;
}

/* Smooth scroll is global in custom.css and ignores the motion setting. */
@media (prefers-reduced-motion: reduce) {
  html:has(.hlb-cap) {
    scroll-behavior: auto;
  }
}

.hlb-cap-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hlb-cap-body {
  position: relative;
}

.hlb-cap-body > section {
  scroll-margin-top: 24px;
}

/* Rail. */
.hlb-cap-rail__inner {
  display: flex;
  flex-direction: column;
}

.hlb-cap-rail__cta {
  margin-top: 24px;
}

@media (min-width: 1100px) {
  .hlb-cap-rail {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: var(--hlb-cap-rail-left);
    padding-top: 52px;
    pointer-events: none;
  }

  .hlb-cap-rail__inner {
    align-items: flex-start;
    pointer-events: auto;
  }

  .hlb-chapter-nav {
    width: var(--hlb-cap-rail-width);
  }
}

@media (max-width: 1099px) {
  .hlb-cap-rail {
    padding: 24px var(--hlb-gutter) 0;
  }

  .hlb-cap-rail__cta {
    order: -1;
    align-self: flex-start;
    margin: 0 0 24px;
  }
}

/* Overview. */
.hlb-cap-overview {
  padding: 52px var(--hlb-gutter) 64px;
  background: linear-gradient(180deg, var(--hlb-white) 0%, #F0F2F5 100%);
}

.hlb-cap-overview__inner {
  display: grid;
  grid-template-columns: minmax(0, 625px) minmax(220px, 300px);
  column-gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

@media (min-width: 1100px) {
  .hlb-cap-overview {
    padding-left: clamp(284px, 34.4vw - 98px, 397px);
  }
}

@media (max-width: 1099px) {
  .hlb-cap-overview {
    padding-top: 40px;
  }

  .hlb-cap-overview__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    max-width: 720px;
  }
}

.hlb-cap .hlb-cap-heading {
  margin: 0 0 32px;
  font: 500 26px/1.2 var(--hlb-font-body);
  text-transform: uppercase;
  color: var(--hlb-ink);
}

.hlb-cap .hlb-cap-heading--center {
  margin-bottom: 48px;
  text-align: center;
}

.hlb-cap .hlb-cap-overview__intro,
.hlb-cap .hlb-cap-overview__intro p {
  font: 400 18px/28px var(--hlb-font-body);
  color: var(--hlb-turquoise-text);
}

.hlb-cap .hlb-cap-overview__body,
.hlb-cap .hlb-cap-overview__body p,
.hlb-cap .hlb-cap-overview__body li {
  font: 400 14px/25px var(--hlb-font-body);
  color: var(--hlb-ink);
}

.hlb-cap-overview__intro > :first-child,
.hlb-cap-overview__body > :first-child {
  margin-top: 0;
}

.hlb-cap-overview__intro + .hlb-cap-overview__body {
  margin-top: 24px;
}

/* Links in both are the inline role, links.css. Intro palette:
   turquoise-text 5.15 on white, ink hover 16.37. */
.hlb-cap-overview__intro {
  --hlb-link-fg:       var(--hlb-turquoise-text);
  --hlb-link-fg-hover: var(--hlb-ink);
}

/* Key contacts. Cards are .hlb-pro-card--sm, see pro-card.css. */
.hlb-cap .hlb-key-contacts__title {
  margin: 0 0 20px;
  font: 400 12px/1.25 var(--hlb-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hlb-ink);
}

.hlb-key-contacts__list {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hlb-key-contacts__list > li {
  margin: 0;
}

/* Legacy sections. */
.hlb-cap-section {
  padding: 64px var(--hlb-gutter);
}

.hlb-cap-container {
  width: 100%;
  max-width: var(--hlb-cap-container);
  margin-inline: auto;
}

@media (min-width: 1100px) {
  .hlb-cap-section {
    padding-inline: 0;
  }

  .hlb-cap-container {
    width: min(var(--hlb-cap-container), 100% - 560px);
  }
}

/* The slider's slick-list is overflow: visible so neighbors peek. clip keeps
   that from widening the page without making a scroll container, which
   would break the sticky rail. */
.hlb-cap-section--news-insights {
  overflow-x: clip;
  background: #F9F9FB;
}

/* 2022 file: #BFC7D6 at 25% fading out over 1117px, running into the CTA. */
.hlb-cap-section--professionals {
  background: linear-gradient(180deg, rgba(191, 199, 214, 0.25) 0, rgba(191, 199, 214, 0) 1117px);
}

@media (max-width: 699px) {
  .hlb-cap-section {
    padding-block: 48px;
  }

  .hlb-cap .hlb-cap-heading--center {
    margin-bottom: 32px;
  }
}