/* Shared page sections (src/sections/*.php). Page-only sections live in each page's own stylesheet. */

/* ---------- Hero ---------- */
.hero {
  display: flex;
  flex-direction: column;
  min-height: clamp(680px, 100svh, 1024px);
  background: var(--near-black);
  color: var(--on-dark);
}
.hero--gradient { background: linear-gradient(118.99deg, var(--green-900) 28.93%, var(--green-800) 114.35%); }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__tint { position: absolute; inset: 0; mix-blend-mode: color; }
/* A soft dark wash on the left keeps the white heading readable over bright X-rays. */
/* Photo heroes: a dark wash from the left keeps the heading readable, and one along the top keeps the nav readable. */
.hero--photo .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(from var(--green-975) r g b / 0.7) 0, rgb(from var(--green-975) r g b / 0.4) 140px, transparent 260px), linear-gradient(90deg, rgb(from var(--green-975) r g b / 0.75) 0%, rgb(from var(--green-975) r g b / 0.45) 50%, rgb(from var(--green-975) r g b / 0.1) 80%); }
.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 170px;
  padding-bottom: 94px;
}
.hero__copy { margin-block: auto; max-width: 762px; }
.hero__title { font-size: 64px; line-height: 1; letter-spacing: 0.01em; }
.hero__body { max-width: 655px; margin-top: 32px; font-size: 20px; line-height: 1.3; color: var(--on-dark-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.hero__actions--inline { margin-top: 32px; }

/* ---------- Split: image + text ---------- */
.split { background: #fff; padding-block: 126px; }
.split__inner {
  display: grid;
  grid-template-columns: minmax(0, 538fr) minmax(0, 595fr);
  align-items: center;
  column-gap: clamp(48px, 13vw, 192px);
}
.split--image-right .split__media { order: 2; }
.split__media { aspect-ratio: 538 / 630; border-radius: var(--radius-image); overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--placeholder { background: var(--placeholder); }
.split__text { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.split__title { max-width: 600px; font-size: 44px; line-height: 1.2; color: var(--ink); }
.split__body { font-size: 20px; line-height: 1.3; color: var(--ink-soft); opacity: 0.9; }
.split__body + .split__body { margin-top: -16px; }

/* "Bleed" photo: fills one half of the section, edge to edge, full height. */
.split--bleed { padding-block: 0; }
.split--bleed .split__inner { min-height: 885px; }
.split--bleed .split__media { position: absolute; inset: 0 auto 0 0; width: 50.7%; aspect-ratio: auto; border-radius: 0; }
.split--bleed.split--image-right .split__media { inset: 0 0 0 auto; }
.split--bleed .split__text { grid-column: 2; padding-block: 160px; }
.split--bleed.split--image-right .split__text { grid-column: 1; }

/* ---------- Subspecialties ---------- */
.subspecialties { --heading: var(--heading-green); background: #fff; padding-block: 158px; }
.subspecialties__inner { display: grid; grid-template-columns: minmax(0, 539px) minmax(0, 578px); justify-content: space-between; align-items: start; gap: 48px; }
.subspecialties__list { display: grid; gap: 16px; }

/* ---------- FAQ ---------- */
.faq { --heading: var(--green-900); --eyebrow: var(--green-900); background: var(--surface-tint); padding-block: 128px; }
.faq__row { display: grid; grid-template-columns: minmax(0, 873fr) minmax(0, 410fr); gap: 32px; margin-top: 64px; align-items: start; }
.faq__list { display: grid; gap: 16px; }
/* Fixed shape, not stretched to the list: otherwise the photo jumps in size each time a question opens. */
.faq__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }

/* ---------- Join form ---------- */
.join { background: linear-gradient(126deg, var(--green-800) 20%, var(--green-900) 100%); color: var(--on-dark); padding-block: 194px 150px; }
.join__inner { display: grid; grid-template-columns: minmax(0, 538px) minmax(0, 464px); justify-content: space-between; align-items: center; gap: 48px; }
.join__title { max-width: 460px; font-size: 36px; line-height: 1.1; }
.join__lede { max-width: 423px; margin-top: 16px; font-size: 16px; line-height: 1.4; color: var(--on-dark-soft); }
.join__points { display: grid; gap: 10px; margin-top: 32px; }
.join__points li { display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 1.3; color: var(--on-dark); }
.join__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.join__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
  border: 1px solid rgb(from var(--green-25) r g b / 0.2);
  border-radius: var(--radius-card-lg);
  background: rgb(from var(--green-25) r g b / 0.1);
}
.join__fields { display: grid; gap: 8px; }
.join__form .btn { height: 52px; padding-block: 0; font-size: 16px; }
.join__note { margin-top: -12px; text-align: center; font-size: 13px; color: var(--on-dark-soft); }
.join__form--done { justify-content: center; gap: 12px; padding: 32px; text-align: center; }
.join__form--done h3 { font-size: 28px; line-height: 1.2; }
.join__form--done p { color: var(--on-dark-soft); }
.join__choices { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
/* The /join/radiologist and /join/practice pages: the band is the top of the page, so less space above. */
.join--page { padding-block: 96px 128px; }
.join--page .join__inner { align-items: start; }
.join--page .join__copy { padding-top: 32px; }
.join--page .join__title { font-size: 48px; }
.join--page .join__lede { margin-top: 24px; font-size: 18px; }

/* ---------- Testimonials ---------- */
.testimonials { --heading: var(--green-900); --eyebrow: var(--green-800); background: var(--surface-tint); padding-block: 122px 96px; }
.testimonials .section-heading__title { font-size: 40px; }
.testimonials .carousel { margin-top: 61px; }
/* The track runs off the right edge of the screen, hinting there is more to scroll. */
.testimonials .carousel__track { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)); padding-right: var(--gutter); }
.testimonial {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgb(from var(--green-800) r g b / 0.1);
  border-radius: 8px;
  background: rgb(from var(--green-800) r g b / 0.05);
  backdrop-filter: blur(22px);
  color: var(--green-900);
}
.testimonial__photo { width: 157px; height: 210px; border-radius: 5px; background: var(--green-100); object-fit: cover; }
.testimonial__logo { align-self: flex-start; height: 40px; width: auto; object-fit: contain; mix-blend-mode: darken; } /* align-self stops the column stretching it */
.testimonial__quote { margin-top: 32px; font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; }
.testimonial__author { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 64px; }
.testimonial__author strong { display: block; font-weight: 400; font-size: 16px; line-height: 1.3; }
.testimonial__author small { display: block; font-size: 12px; color: var(--ink-muted); }
.testimonial__avatar { width: 29px; height: 29px; border-radius: 50%; background: var(--placeholder); }
.testimonials--practices .carousel__track { --card-width: 100%; margin-right: 0; padding-right: 0; }
.testimonials--practices .testimonial { padding: 16px; border-color: rgb(from var(--green-600) r g b / 0.2); background: rgb(from var(--green-200) r g b / 0.12); }
.testimonials--practices .testimonial__quote { margin-top: 64px; color: var(--green-900); }

/* ---------- CTA: "Radiology, on your terms" (dark green, centred) ---------- */
.cta-community { background: linear-gradient(126.28deg, var(--green-800) 28.93%, var(--green-900) 114.35%); color: var(--on-dark); padding-block: 270px; text-align: center; }
.cta-ring {
  position: absolute;
  top: -280px;
  width: 1284px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(from var(--green-25) r g b / 0.025); /* the faint frosted lift inside each ring */
  opacity: 0.8;
}
/* The ring's edge: a thick teal line, heavily blurred, so it reads as a soft shadowed rim. */
.cta-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 11px solid rgb(64 164 189 / 0.3);
  border-radius: inherit;
  filter: blur(32px);
  mix-blend-mode: color-burn;
}
.cta-community__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cta-community h2 { font-size: 40px; line-height: 1.2; text-box: trim-both cap alphabetic; }
.cta-community p { max-width: 473px; font-size: 20px; line-height: 1.3; color: var(--on-dark-soft); }
.cta-community__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------- CTA: "Free for radiologists" (pale band with booking card) ---------- */
.cta-band { min-height: 480px; background: var(--surface-tint); }
.cta-band__content { padding-block: 76px; }
.cta-band .section-heading { max-width: 539px; }
.cta-band .section-heading__title { line-height: 1; }
.cta-band .section-heading__lede { color: rgb(from var(--green-975) r g b / 0.8); }
.cta-band .btn { margin-top: 64px; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  .booking-card--cta { display: none; }
  .split__inner, .subspecialties__inner, .join__inner { grid-template-columns: 1fr; row-gap: 48px; }
  .split--image-right .split__media { order: 0; }
  .split__media { aspect-ratio: 4 / 3; max-height: 520px; }
  .split--bleed .split__media { position: relative; inset: auto; width: auto; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  .split--bleed .split__inner { min-height: 0; }
  .split--bleed .split__text { grid-column: 1; padding-block: 0 96px; }
  .split, .subspecialties { padding-block: var(--section-space); }
  .join { padding-block: var(--section-space); }
  .join--page { padding-block: 48px 96px; }
  .join--page .join__copy { padding-top: 0; }
  .faq__row { grid-template-columns: 1fr; }
  .faq__photo { aspect-ratio: 16 / 9; }
  .cta-community { padding-block: 160px; }
}
@media (max-width: 760px) {
  .hero__content { padding-top: 120px; padding-bottom: 48px; }
  .hero__title { font-size: 42px; }
  .hero__body { font-size: 17px; margin-top: 20px; }
  .split__title { font-size: 32px; }
  .split__body { font-size: 17px; }
  .join__title, .join--page .join__title { font-size: 30px; }
  .join__points li { font-size: 17px; }
  .faq, .testimonials { padding-block: var(--section-space); }
  .testimonials .section-heading__title { font-size: 32px; }
  .testimonial__quote { font-size: 20px; }
  .cta-community { padding-block: 112px; }
  .cta-community h2 { font-size: 32px; }
  .cta-band__content { padding-block: 64px; }
  .cta-band .btn { margin-top: 40px; }
}