/* ── CALLOUT (unified) ────────────────────────────────────────────
   Replaces ~13 scattered inline reimplementations of "light info box"
   and "accent left-border box" across about, summit, for-teams,
   clarity-sessions, contact, basecamp, expedition. See NEXT-STEPS.md. */
.callout {
  background: var(--light);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
}
.callout--white {
  background: var(--white);
}
.callout--accent {
  border-left: 3px solid var(--sky);
}
.callout--center {
  text-align: center;
}

/* Grow Your Skills: alternating section backgrounds */
.grow-section-1 {
  background: white;
}
.grow-section-2 {
  background: var(--light);
}
.grow-section-3 {
  background: white;
}
.grow-section-4 {
  background: var(--light);
}

/* Simple page header (for pages without hero image) */
.page-header {
  background: linear-gradient(135deg, var(--navy) 0%, #002952 100%);
  min-height: 220px;
  display: flex;
  align-items: center;
  /* Equal box padding isn't equal on screen: the fixed nav (72px) sits on
     top of this band, visually eating into the top padding but not the
     bottom. Extra top padding compensates so the title looks centered,
     not just is centered in the box. */
  padding: calc(72px + 3rem) 2rem 3rem;
  text-align: center;
}
.page-header .container {
  width: 100%;
}
.page-header__content h1 {
  color: white;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 0.75rem;
}
.page-header__content p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

/* Complex logo in homepage hero — has breathing room here */
.hero__brand-logo {
  margin-bottom: 1.5rem;
}
.hero__brand-logo img {
  height: 80px;
  width: auto;
  /* Invert to white since hero is dark navy background */
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Legal content formatting */
.legal-content h2 {
  font-size: 1.15rem;
  color: var(--navy);
  margin: 2.5rem 0 0.75rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 67, 124, 0.08);
}
.legal-content h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.legal-content h3 {
  font-size: 0.95rem;
  color: var(--navy);
  margin: 1.5rem 0 0.5rem;
  font-weight: 700;
}
.legal-content p {
  line-height: 1.8;
  color: var(--charcoal);
  margin-bottom: 1rem;
}
.legal-content ul {
  margin: 0.5rem 0 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.legal-content li {
  line-height: 1.7;
  color: var(--mid);
  font-size: 0.9rem;
}
.legal-content a {
  color: var(--sky);
}

/* Swiper: arrows outside the cards */
.swiper--arrows-outside {
  padding: 0 4rem !important;
  overflow: visible !important;
}
.swiper--arrows-outside .swiper-button-prev {
  left: -1.5rem;
}
.swiper--arrows-outside .swiper-button-next {
  right: -1.5rem;
}
.swiper--arrows-outside .swiper-button-prev,
.swiper--arrows-outside .swiper-button-next {
  background: white;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  box-shadow: 0 4px 16px rgba(0, 67, 124, 0.18);
  border: 1px solid rgba(0, 67, 124, 0.12);
  transition: box-shadow 0.2s;
}
.swiper--arrows-outside .swiper-button-prev:hover,
.swiper--arrows-outside .swiper-button-next:hover {
  box-shadow: 0 6px 24px rgba(0, 67, 124, 0.25);
}
.swiper--arrows-outside .swiper-button-prev::after,
.swiper--arrows-outside .swiper-button-next::after {
  font-size: 13px;
  color: var(--navy);
  font-weight: 800;
}

/* ── FEATURE BADGE — inline (no absolute positioning) ───── */
.feature-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  background: var(--sky);
  color: white;
  margin-bottom: 0.75rem;
}

/* ── WORKBOOK PROMO ─────────────────────────────────────── */
.workbook-promo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 3rem 3.5rem;
}
.workbook-promo__cover {
  width: 140px;
  height: 180px;
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, #0471a6, #001e3c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  flex-shrink: 0;
}
.workbook-promo__content h2 {
  color: white;
  margin-bottom: 0.75rem;
}
.workbook-promo__content p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.workbook-promo__price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--sky);
  margin-bottom: 1rem;
}
@media (max-width: 640px) {
  .workbook-promo {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2rem;
  }
  .workbook-promo__cover {
    margin: 0 auto;
  }
  .workbook-promo__content .btn-row {
    justify-content: center;
  }
}