/* Hub page prototype styles. Loaded after styles.css. Hub-specific sections only;
   everything else reuses the home prototype classes. */

/* Text containers match the home hero on every page: body copy 880px, headlines 1180px. */

/* ---- Centred sections: "Why most of the advice misses the mark" + "What makes Compass different" ---- */
.hub-centered { padding: 4.5rem 0 2rem; background: var(--white); }
.hub-centered__headline {
  text-align: center; color: var(--navy); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.2;
  max-width: 1180px; margin: 0 auto 1.5rem;
}
.hub-centered__body { max-width: 880px; margin: 0 auto; }
.hub-centered__body p {
  margin: 0 0 1.1rem; line-height: 1.75; color: var(--gray-700); text-align: center;
}
.hub-centered__body p:last-child { margin-bottom: 0; }

/* Body illustration matched to the hero illustration scale (~2x the first pass), sitting tight under the copy. */
.hub-centered__illustration { display: flex; justify-content: center; margin: 1.5rem auto 0; }
.hub-centered__illustration img { width: 100%; max-width: 1040px; height: auto; display: block; }
@media (max-width: 1200px) { .hub-centered__illustration img { max-width: 820px; } }
@media (max-width: 880px)  { .hub-centered__illustration img { max-width: 640px; } }
@media (max-width: 600px)  { .hub-centered__illustration img { max-width: 480px; } }

/* "What makes Compass different": tight above (close to the image block), more breathing room below before the navy carousel strip. */
.hub-centered--plain { padding-top: 2.5rem; padding-bottom: 4rem; }

/* ---- Section 2 navy band: conversion CTA stays teal bg + white text, never underlined ----
   (overrides .what-section__body a which is amber + underlined for inline links) */
.what-section__cta { margin-top: 1.5rem; margin-bottom: 0; }
.what-section__cta .btn--primary,
.what-section__body .btn--primary {
  background-color: var(--teal);
  color: var(--white);
  border-color: var(--teal);
  text-decoration: none;
}
.what-section__cta .btn--primary:hover,
.what-section__body .btn--primary:hover {
  color: var(--white);
  text-decoration: none;
}

/* ---- Link-out carousel band on navy ("Adapted to your business") ---- */
.carousel-section--hub { background: var(--navy); padding: 4rem 0 4.5rem; }
.carousel-section--hub .carousel-section__headline { color: var(--white); text-align: center; }
.carousel-section__sub {
  color: rgba(250,250,250,0.82); text-align: center;
  max-width: 880px; margin: 0.75rem auto 2.5rem; line-height: 1.6;
}
.carousel-section--hub .carousel__card-text .btn--card { margin-top: 0.5rem; }