/* INSURANCE & PAYMENT — Self-Pay The hero is the theme's own Hero block on its side-by-side layout; the plans band is the shared Insurance Band. */

/* ─────────────────────────────────────────────────────────────
   Self-Pay
   ───────────────────────────────────────────────────────────── */

/* Optional per-placement background, same five choices and the same
   auto-contrast foreground every content block gets — see
   starfish_block_bg_style(). --block-bg/--block-fg are only ever set
   inline when an editor actually picks one, so a Self-Pay section
   with no background renders exactly as it always did. The inner
   already supplies 5rem of vertical padding, so a panel needs only
   the horizontal inset and its corners. */
.sh-selfpay--bg {
  background: var(--block-bg);
  color: var(--block-fg);
  padding-inline: clamp(2rem, 4vw, 3rem);
  border-radius: 2.5rem;
}

/* Full screen: the background runs to the viewport edge while the
   content stays on the page measure, matching.sh-bw-screen's
   behaviour elsewhere. Corners go with it — a radius has nothing to
   sit against once the fill reaches the edge. */
.sh-selfpay--bg.sh-bw-screen {
  padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2));
  border-radius: 0;
}

/* The heading and body carry their own colours by default; inside a
   panel they follow the background's computed foreground instead. */
.sh-selfpay--bg .sh-selfpay__title,
.sh-selfpay--bg .sh-selfpay__body {
  color: inherit;
}

.sh-selfpay__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 5rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  /* Desktop only in effect — the 900px breakpoint below drops this to
     2.5rem, where the grid has already collapsed to a single column
     and this is vertical space between copy and photo rather than the
     gutter between them. */
  gap: 8rem;
  align-items: center;
}

.sh-selfpay--no-media .sh-selfpay__inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: 42rem;
}

.sh-selfpay__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 1rem;
}

.sh-selfpay__body {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-muted-alt);
}

/* Reading measure, desktop only. */
@media (min-width: 901px) {
  .sh-selfpay__body { max-width: 34rem; }
}

.sh-selfpay__body > * + * { margin-top: 1rem; }

.sh-selfpay__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-top: 2rem;
}

.sh-selfpay__cta-prefix {
  font-size: var(--text-base);
  color: var(--color-muted);
}

.sh-selfpay__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: var(--text-base);
  font-weight: 500;
  color: #fff;
  background: var(--color-primary);
  border-radius: 8px;
  transition: var(--transition-base);
}

.sh-selfpay__cta:hover { background: var(--color-primary-hover); color: #fff; }

.sh-selfpay__media {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--color-bg-section);
}

.sh-selfpay__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .sh-selfpay__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .sh-selfpay__inner { padding: 3.5rem 0; }
}

/* ─────────────────────────────────────────────────────────────
   Content blocks placed directly on a flexible page
   ───────────────────────────────────────────────────────────── */

/* content-blocks has no measure of its own — on a Service page the
   article column around it provides one. Dropped straight onto a
   flexible page there is no such parent, so it needs the page
   container here or it runs the full viewport width. */
.sh-flex-blocks {
  max-width: var(--container);
  margin: 0 auto;
  padding: 4.5rem 0;
}

@media (max-width: 768px) {
  .sh-flex-blocks { padding: 3rem 0; }
}

/* The TOC as a placed block rather than a sidebar: on a flexible page
   the content blocks can be interleaved with full-width sections, so
   there is no single article column for it to sit beside. */
.sh-flex-blocks--toc { padding-bottom: 0; }