/* WDI stakeholder hubs — align with SPM marketing surfaces + richer card rhythm */

body.wdi-hub #et-main-area {
  /*
   * Cream page fill, but paint the fixed-header clearance band navy so a
   * subpixel seam between #top-header and #main-header never flashes white
   * before/while clearance JS runs.
   */
  background-color: #fcfbf9;
  background-image: linear-gradient(#0a2342, #0a2342);
  background-repeat: no-repeat;
  background-size: 100% var(--wdi-header-clearance, 160px);
}

/*
 * WDI hubs: clearance lives on the navy hero (JS). Keep a safe CSS fallback
 * taller than a two-row wrapped primary nav so "WDI CAREERS" is never clipped.
 */
body.wdi-hub.wdi-custom-template #et-main-area {
  padding-top: 0 !important;
}

body.wdi-hub.wdi-custom-template section.wdi-spm-hero.hero-section,
body.wdi-hub.wdi-custom-template section.wdi-hub-hero {
  /*
   * Header stack clearance + content inset. Fallback 160px covers a two-row
   * wrapped primary nav before measure JS runs; JS updates the variable.
   */
  padding-top: calc(
    var(--wdi-header-clearance, 160px) + clamp(2.25rem, 4vw, 3.5rem)
  ) !important;
}

body.wdi-hub.wdi-custom-template
  #main-content
  .entry-content
  > .et_pb_section,
body.wdi-hub.wdi-custom-template #main-content article .et_pb_section {
  display: none !important;
}

/* ── Section breathing room (hubs were congested without SPM padding) ─── */
body.wdi-hub .wdi-hub-hero {
  /* Bottom breathing only — top is header clearance + inset (below). */
  padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
}

body.wdi-hub .wdi-hub-hero .pric-hero {
  max-width: 46rem;
  margin-inline: auto;
}

body.wdi-hub .wdi-hub-hero .pric-para {
  margin-bottom: 0.25rem;
}

body.wdi-hub .wdi-hub-section,
body.wdi-hub .wdi-spm-paths,
body.wdi-hub .wdi-hub-featured,
body.wdi-hub .wdi-hub-cta {
  padding: clamp(4rem, 9vw, 6rem) 0;
  position: relative;
  z-index: 2;
}

body.wdi-hub .wdi-spm-paths:nth-of-type(even),
body.wdi-hub .wdi-hub-careers-why,
body.wdi-hub .wdi-hub-affiliates-perks {
  background: #f4f1ea;
}

body.wdi-hub .wdi-hub-careers-openings,
body.wdi-hub .wdi-hub-affiliates-path {
  background: #fff;
}

body.wdi-hub .wdi-hub-section__header {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  text-align: center;
}

body.wdi-hub .wdi-hub-section__header .global-h2 {
  margin-bottom: 0.85rem;
}

body.wdi-hub .wdi-spm-section-lead {
  color: #444;
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 40rem;
}

body.wdi-hub .wdi-hub-cta__lead {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.25rem;
}

/* ── Card grid ─────────────────────────────────────────────────────────── */
.wdi-hub-card-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  margin-top: 0.25rem;
}

@media (min-width: 700px) {
  .wdi-hub-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wdi-hub-card-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .wdi-hub-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wdi-hub-card-grid--4,
  .wdi-hub-featured .wdi-hub-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Info cards — taller padding, icon plate, clearer type */
body.wdi-hub .wdi-hub-info-card,
body.wdi-hub .wdi-spm-path-card {
  background: #fff;
  border: 2px solid #e8e4dc;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(11, 35, 66, 0.07);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(1.75rem, 3vw, 2.35rem);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

body.wdi-hub .wdi-hub-info-card:hover,
body.wdi-hub .wdi-spm-path-card:hover {
  border-color: #c9a734;
  box-shadow: 0 12px 32px rgba(201, 167, 52, 0.16);
  transform: translateY(-4px);
}

.wdi-hub-card-icon {
  align-items: center;
  background: linear-gradient(145deg, #0b2342 0%, #163a66 100%);
  border-radius: 14px;
  color: #c9a734;
  display: inline-flex;
  flex-shrink: 0;
  height: 3.25rem;
  justify-content: center;
  margin: 0 0 1.25rem;
  width: 3.25rem;
}

.wdi-hub-card-icon__svg {
  display: block;
}

body.wdi-hub .wdi-spm-path-card__eyebrow {
  color: #c9a734;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.45rem;
  text-transform: uppercase;
}

body.wdi-hub .wdi-spm-path-card__title {
  color: #0b2342;
  font-size: clamp(1.25rem, 2.2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.85rem;
}

body.wdi-hub .wdi-spm-path-card__body {
  color: #444;
  flex: 1;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

.wdi-hub-industry {
  color: #c9a734;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.wdi-hub-card-links a {
  color: #0b2342;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.wdi-hub-card-links a:hover,
.wdi-hub-card-links a:focus-visible {
  color: #c9a734;
}

.wdi-hub-featured {
  padding: clamp(4rem, 9vw, 6rem) 0;
}

/* Featured partner overview hero — brand tint + logo plate */
.wdi-hub-partner-hero {
  background-blend-mode: multiply, normal;
  min-height: 320px;
}

.wdi-hub-partner-hero .container-home {
  padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.wdi-hub-partner-hero .pric-main-head,
.wdi-hub-partner-hero .sub-pric-head,
.wdi-hub-partner-hero .pric-para {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.wdi-hub-partner-hero .wdi-spm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

.wdi-hub-partner-hero .wdi-spm-hero__actions .btn-linnk {
  display: inline-flex;
  width: auto;
  max-width: none;
}

.wdi-hub-partner-hero__mark {
  margin: 0 0 1rem;
}

.wdi-hub-partner-hero__mark img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  body.wdi-hub .wdi-hub-info-card,
  body.wdi-hub .wdi-spm-path-card {
    transition: none;
  }

  body.wdi-hub .wdi-hub-info-card:hover,
  body.wdi-hub .wdi-spm-path-card:hover {
    transform: none;
  }
}