/* Exemplar fidelity styles. Loaded after styles.css + hub.css. */
/* Carousel card image: fixed aspect + cover so every card is equal height and CTAs align. */
.carousel__card-illustration { aspect-ratio: 4 / 3; overflow: hidden; }
.carousel__card-illustration img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* what-section reverse (image left) for the category Simple Explanation band */
.what-section__inner--reverse { direction: rtl; }
.what-section__inner--reverse > * { direction: ltr; }

/* Category adjacent-terms card grid */
.cat-cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; max-width: 1180px; margin: 2.25rem auto 0; }
.cat-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.cat-card__title { font-weight: 700; color: var(--navy); font-size: 1rem; line-height: 1.3; }
.cat-card .btn--card { margin-top: auto; align-self: flex-start; }

/* Marketing Science image: match the HOME block dimensions exactly. Home's asset is a
   1.24 crop rendering ~460x372 at max-width:460; the cast images are 1.78 (wider/shorter),
   so without this they render a shorter block. Constrain to home's box + object-fit cover
   so dentists/technology/coach science images are the same size as the homepage's. */
.science-section__illustration img { width: 100%; max-width: 460px; aspect-ratio: 4048 / 3274; height: auto; object-fit: cover; }

/* Category "How Compass coaches in practice" band — to the mock: navy, 3 columns,
   bold white title + amber rule + light body. */
.practice-section { background: var(--navy); padding: 5rem 0; }
.practice-section__heading { text-align: center; color: var(--white); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.375rem); line-height: 1.2; max-width: 1180px; margin: 0 auto 3rem; }
.practice-section__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: 1180px; margin: 0 auto; }
.practice-col__title { color: var(--white); font-weight: 700; font-size: 1.0625rem; margin: 0 0 0.85rem; }
.practice-col__rule { border: 0; border-top: 3px solid var(--amber); width: 100%; margin: 0 0 1.25rem; }
.practice-col__body { color: rgba(250,250,250,0.82); line-height: 1.7; font-size: 1rem; margin: 0; }
@media (max-width: 880px) { .practice-section__cols { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Category: pull the comparison carousel up to connect with the intro text above it. */
.coach-intro-attached { padding-bottom: 1.5rem; }
.coach-carousel-attached { padding-top: 0.5rem; }

/* Trim the white space above the Marketing Science section (home keeps its 5rem). */
.science-section { padding-top: 2.5rem; }