/* ==========================================================================
   Offer page + service sub-pages (Figma "Offer Page", "Sub page 1-10").
   Only what main.css does not cover: hero variants, intro/tiles heading weights,
   the tiles carousel and the stretch-height service blocks.
   ========================================================================== */

/* ---------- Hero variants: image starts further left, second line regular with a bold tail ---------- */
.cs-hero--offer .cs-hero__title.accent-2,
.cs-hero--service .cs-hero__title.accent-2 { font-weight: 400; }
.cs-hero--offer .cs-hero__title.accent-2 strong,
.cs-hero--service .cs-hero__title.accent-2 strong { font-weight: 700; }
.cs-hero--offer .cs-hero__media { left: 23.75%; }
.cs-hero--offer .cs-hero__media::before { left: -2%; width: 71%; }
.cs-hero--service .cs-hero__media { left: 33%; }
.cs-hero--service .cs-hero__media::before { left: -2%; width: 55%; }
@media (min-width: 1025px) { .cs-hero--service .cs-hero__content { max-width: 665px; } }
@media (max-width: 1024px) {
  .cs-hero--offer .cs-hero__media, .cs-hero--service .cs-hero__media { left: 0; }
  /* Subject sits at the right edge of these photos. */
  .cs-hero--offer .cs-hero__media img,
  .cs-hero__media img[src*="coaching-network-hero"] { object-position: right 20%; }
}

/* ---------- "Your need, Our Support": extra-bold navy + regular orange ---------- */
.cs-offer-intro__title .accent { font-weight: 400; }

/* ---------- Service tiles carousel ---------- */
.cs-offer-tiles { padding: 72px 0; }
.cs-offer-tiles__title { text-align: center; margin: 0 auto 48px; max-width: 900px; }
.cs-offer-tiles__title2 { display: block; font-weight: 500; color: var(--c-orange); }
.cs-offer-tiles__carousel { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; gap: 24px 48px; align-items: center; }
.cs-offer-tiles__nav { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-white); }
.cs-offer-tiles__nav:hover { background: var(--c-orange-dark); border-color: var(--c-orange-dark); color: var(--c-white); }
.cs-offer-tiles__nav .cs-icon { width: 32px; height: 32px; stroke-width: 3; }
/* Room for a tile grown on hover: the scrolling track would clip it otherwise. */
.cs-offer-tiles__track { min-width: 0; gap: 32px; padding: 16px 12px; margin: -16px -12px; scroll-padding-inline: 12px; }
/* min-width: 0 keeps a long Dutch word ("Praktijkondersteuning") from widening its tile; the label hyphenates instead. */
.cs-offer-tiles__track > .cs-offer-tile { flex: 0 0 calc((100% - 3 * 32px) / 4); min-width: 0; }
.cs-offer-tiles__dots { grid-column: 1 / -1; margin-top: 24px; }
.cs-offer-tiles__dots button { background: var(--c-placeholder); }
.cs-offer-tiles__dots button.is-active { background: var(--c-teal); }

.cs-offer-tile { justify-content: flex-start; gap: 24px; padding: 44px 12px 40px; border-radius: 32px; min-height: 351px; }
.cs-offer-tile__icon { width: 100px; height: 100px; border-radius: 24px; }
.cs-offer-tile__icon .cs-icon { width: 48px; height: 48px; }
/* Figma: a 100px icon on a 237px card (~50% of its inner width); narrower cards shrink it in proportion. */
.cs-offer-tile__image { display: flex; flex: none; width: min(100px, 50%); height: auto; aspect-ratio: 1; overflow: hidden; }
/* Without min-height: 0 a taller illustration (Nursing Record) stretches its box and pushes the title down. */
.cs-offer-tile__image img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.cs-offer-tile__label { display: block; width: 100%; text-align: center; min-height: 64px; hyphens: auto; overflow-wrap: break-word; font-weight: 700; font-size: 24px; line-height: 32px; color: var(--c-navy); }
.cs-offer-tile__btn { margin-top: auto; }

/* Four tiles get too narrow for the titles on laptops: three up to 1365px, a smaller title just below 1440px. */
@media (min-width: 1025px) and (max-width: 1365px) {
  .cs-offer-tiles__track > .cs-offer-tile { flex-basis: calc((100% - 2 * 32px) / 3); }
}
@media (min-width: 1366px) and (max-width: 1439px) {
  .cs-offer-tile__label { font-size: 22px; }
}
@media (max-width: 1024px) {
  .cs-offer-tiles__carousel { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
  .cs-offer-tiles__track { flex: 0 0 100%; order: -1; }
  .cs-offer-tiles__dots { flex: 0 1 auto; margin: 0 8px; }
  .cs-offer-tiles__track { gap: 24px; padding-inline: 8px; margin-inline: -8px; scroll-padding-inline: 8px; }
  .cs-offer-tiles__track > .cs-offer-tile { flex-basis: calc((100% - 24px) / 2); }
  .cs-offer-tiles__title { margin-bottom: 32px; }
}
@media (max-width: 640px) {
  .cs-offer-tiles { padding: 48px 0; }
  .cs-offer-tiles__track { gap: 12px; }
  .cs-offer-tiles__track > .cs-offer-tile { flex-basis: calc((100% - 12px) / 2); }
  .cs-offer-tile { min-height: 0; gap: 16px; padding: 24px 12px; border-radius: 20px; }
  .cs-offer-tile__icon { width: 64px; height: 64px; border-radius: 16px; }
  .cs-offer-tile__icon .cs-icon { width: 32px; height: 32px; }
  .cs-offer-tile__image { width: 64px; height: 64px; }
  .cs-offer-tile__label { min-height: 0; font-size: 18px; line-height: 24px; }
  .cs-offer-tile .cs-btn { min-height: 44px; padding: 10px 20px; font-size: 14px; }
}

/* ---------- Service sub-page blocks: 72px rhythm, navy titles, image stretches to the text height ---------- */
.cs-service .cs-feature { padding: 72px 0; }
.cs-service .cs-feature__grid { align-items: stretch; }
.cs-service .cs-feature__media { height: auto; min-height: 240px; }
.cs-service .cs-feature__media img { position: absolute; inset: 0; }
.cs-service .cs-feature__title { color: var(--c-navy); }
.cs-service .cs-feature__text p + p { margin-top: 16px; }
.cs-service__lead { padding-top: 72px; }
.cs-service__lead .cs-feature__title { margin-bottom: 0; }
.cs-service__lead + .cs-feature { padding-top: 24px; }
@media (max-width: 1024px) {
  .cs-service .cs-feature { padding: 48px 0; }
  .cs-service .cs-feature__media { min-height: 0; aspect-ratio: 4 / 3; }
  .cs-service__lead { padding-top: 48px; }
  .cs-service__lead + .cs-feature { padding-top: 16px; }
}