/* All rem values follow BB Theme's html { font-size: 10px } base — 1.8rem = 18px. */

/* Strip BB's default row padding / module margin around the hero so it
   aligns flush with the navbar. */
.fl-row-content-wrap:has(.cs-hero-photo) {
  padding: 0;
}
.fl-module-content:has(.cs-hero-photo) {
  margin: 0;
}

/* The content block (__inner) is a SIBLING of the media frame, not a child —
   on desktop the two stack in the same grid cell so the copy overlays the
   scene exactly as before; on mobile the video variant lets them flow as
   separate rows (heading above, video below). */
.cs-hero-photo {
  padding: 0;
  display: grid;
}

.cs-hero-photo__frame {
  grid-area: 1 / 1;
  position: relative;
  min-height: 728px;
  border-radius: var(--cs-radius-xl);
  overflow: hidden;
  isolation: isolate;
}

.cs-hero-photo__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Ambient background video — sits on top of the photo layer (which remains
   the poster / mobile / reduced-motion fallback), below the overlay scrim. */
.cs-hero-photo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Mobile: the video plays only when a compressed mobile rendition is set
   (--video-mobile, from the bg_video_mobile field). Without one, the
   full-size desktop clip is dead weight on cellular — hide it (display:none
   also stops the autoplay from firing) and the photo shows instead. */
@media (max-width: 768px) {
  .cs-hero-photo__video {
    display: none;
  }
  .cs-hero-photo--video-mobile .cs-hero-photo__video {
    display: block;
  }
}

/* Vestibular safety: users who ask for reduced motion get the still photo.
   Doubled selector so it outranks the --video-mobile show rule above. */
@media (prefers-reduced-motion: reduce) {
  .cs-hero-photo .cs-hero-photo__video {
    display: none;
  }
}

.cs-hero-photo__overlay {
  position: absolute;
  inset: 0;
  /* Soft ink scrim behind the text zone on top of the original blue base
     fade — white copy over bright photo areas (window blinds, daylight)
     was borderline unreadable without it. The radial feathers out so the
     photo edges keep their brightness. */
  background:
    radial-gradient(
      ellipse 75% 60% at 50% 52%,
      rgba(26, 32, 44, 0.45) 0%,
      rgba(26, 32, 44, 0.22) 55%,
      rgba(26, 32, 44, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(64, 133, 197, 0) 0%,
      var(--cs-blue-40) 100%
    );
  z-index: 1;
}

/* Content at the bottom (video heroes): the copy hugs the lower edge so the
   moving image stays the star. The center scrim is dropped in favor of a
   bottom-weighted ink gradient — darkest exactly where the text sits. */
.cs-hero-photo--content-bottom .cs-hero-photo__inner {
  align-self: end;
}

.cs-hero-photo--content-bottom .cs-hero-photo__inner {
  padding-bottom: 6.4rem;
}

.cs-hero-photo--content-bottom .cs-hero-photo__overlay {
  background:
    linear-gradient(
      180deg,
      rgba(26, 32, 44, 0) 35%,
      rgba(26, 32, 44, 0.55) 100%
    ),
    linear-gradient(
      180deg,
      rgba(64, 133, 197, 0) 0%,
      var(--cs-blue-40) 100%
    );
}

@media (max-width: 768px) {
  .cs-hero-photo--content-bottom .cs-hero-photo__inner {
    padding-bottom: 4.8rem;
  }
}

/* Content at the top: mirror of the bottom variant — the copy sits above the
   scene, with a top-weighted ink gradient darkest exactly where the text is
   (white heading over the bright window area needs it). */
.cs-hero-photo--content-top .cs-hero-photo__inner {
  align-self: start;
}

.cs-hero-photo--content-top .cs-hero-photo__inner {
  padding-top: 6.4rem;
}

.cs-hero-photo--content-top .cs-hero-photo__overlay {
  background:
    linear-gradient(
      180deg,
      rgba(26, 32, 44, 0.55) 0%,
      rgba(26, 32, 44, 0) 65%
    ),
    linear-gradient(
      180deg,
      rgba(64, 133, 197, 0) 0%,
      var(--cs-blue-40) 100%
    );
}

@media (max-width: 768px) {
  .cs-hero-photo--content-top .cs-hero-photo__inner {
    padding-top: 4.8rem;
  }
}

/* Content shifted right: follow the text with the scrim's hotspot. */
.cs-hero-photo--content-right .cs-hero-photo__overlay {
  background:
    radial-gradient(
      ellipse 70% 60% at 58% 52%,
      rgba(26, 32, 44, 0.45) 0%,
      rgba(26, 32, 44, 0.22) 55%,
      rgba(26, 32, 44, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(64, 133, 197, 0) 0%,
      var(--cs-blue-40) 100%
    );
}

.cs-hero-photo__inner {
  grid-area: 1 / 1;
  align-self: center; /* vertical centering the frame's flex used to provide */
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: var(--cs-gutter);
  /* was 1100px — the "and Carson City" headings need the full row width
     or they wrap to a third line (client request 2026-09-09) */
  max-width: 100%;
  width: 100%;
}

/* Clear a subject on the left of the photo (e.g. the homepage session shot):
   nudge the whole content block right on wide screens only — mobile crops
   the photo differently and keeps the block centered. */
@media (min-width: 769px) {
  .cs-hero-photo--content-right .cs-hero-photo__inner {
    transform: translateX(clamp(0px, 8vw, 130px));
  }
}

/* Doubled-up class specificity so these survive BB Global Styles'
   `.fl-builder-content h1 / h1 span` color & font rules. */
.cs-hero-photo .cs-hero-photo__heading {
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: clamp(3.6rem, 4.4vw + 0.8rem, var(--cs-text-display));
  font-style: normal;
  line-height: var(--cs-line-tight);
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-white);
  margin: 0 0 var(--cs-space-lg);
  text-wrap: balance;
  /* Minimum contrast aid (change request 2026-09-13 T6.1): measured over the
     starting-therapy photo the brightest spots under the title composite to
     2.24:1 against white even WITH the radial scrim — under the 3:1 AA
     large-text floor. Client explicitly rejected a darker overlay, so a
     soft ink halo does the lifting without visibly darkening the photo. */
  text-shadow: 0 0.1rem 0.3rem rgba(26, 32, 44, 0.35), 0 0.2rem 2.4rem rgba(26, 32, 44, 0.45);
}

.cs-hero-photo .cs-hero-photo__heading span,
.cs-hero-photo .cs-hero-photo__heading em {
  color: inherit;
}

.cs-hero-photo .cs-hero-photo__heading em {
  font-style: italic;
  font-weight: 500;
}

/* CTA — solid blue pill, same treatment as the cs-hero-split CTA so the
   hero's primary action reads as a button rather than blending into the
   photo (it replaced a translucent glass style). --cs-blue-card, not
   --cs-blue: white label copy only reaches 3.90:1 on --cs-blue. The :link /
   :visited selectors keep the label color above BB Global Styles'
   `.fl-builder-content a` rules. */
.cs-hero-photo .cs-hero-photo__cta,
.cs-hero-photo .cs-hero-photo__cta:link,
.cs-hero-photo .cs-hero-photo__cta:visited {
  display: inline-block;
  background: var(--cs-blue-card);
  color: var(--cs-white);
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.8rem; /* 18px */
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-align: center;
  min-width: min(33rem, 100%);
  padding: 1.4rem 4.8rem;
  border-radius: var(--cs-radius-pill);
  box-shadow: 0 0.4rem 1.6rem rgba(26, 32, 44, 0.25);
  transition: background 200ms ease, transform 200ms ease;
  cursor: pointer;
}

.cs-hero-photo .cs-hero-photo__cta.cs-hero-photo__cta:hover,
.cs-hero-photo .cs-hero-photo__cta.cs-hero-photo__cta:focus-visible {
  background: var(--cs-blue-dark);
  color: var(--cs-white);
  text-decoration: none;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .cs-hero-photo__frame {
    min-height: 480px;
    border-radius: var(--cs-radius-md);
  }

  /* Same :link / :visited selectors as the base rule, or it outranks these.
     Sized to its label and centered under the centered heading; on phones
     the label is wider than the column, so it fills the width and wraps —
     the tighter radius keeps a two-line button from looking like a capsule. */
  .cs-hero-photo .cs-hero-photo__cta,
  .cs-hero-photo .cs-hero-photo__cta:link,
  .cs-hero-photo .cs-hero-photo__cta:visited {
    display: block;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 1.4rem 2.4rem;
    border-radius: var(--cs-radius-pill-lg);
    text-wrap: balance;
  }

  /* ALL heroes (video and photo — client call 2026-09-15 brought the photo
     pages' images back, superseding the deep-blue mobile text-band): heading
     first, ON the page background, with the scene below it as a clean 16:9
     landscape band (56.25vw of the full-bleed width) — instead of white copy
     overlaid on a 480px portrait crop that swallowed the whole first screen.
     The section drops the grid stack and flows as rows; order: -1 lifts the
     content block above the frame. The CTA follows the heading onto the page
     background, where its solid blue fill reads the same as on the photo. */
  .cs-hero-photo {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }

  .cs-hero-photo__inner {
    order: -1;
    align-self: stretch;
    padding-block: 0.8rem 0;
  }

  /* Off the scene the heading matches the intro-band heading right below it
     (client call 2026-09-15 — ink read as outside the palette, and
     --cs-blue-body #49689F is the exact blue of the adjacent heading;
     4.95:1 on --cs-off-white). !important: every instance carries an inline
     style="color:#fff" from the module's heading_color setting, which
     outranks any selector. The over-photo contrast halo goes with it. */
  .cs-hero-photo .cs-hero-photo__heading {
    color: var(--cs-blue-body) !important;
    text-shadow: none;
  }

  .cs-hero-photo__frame {
    min-height: 56.25vw;
  }

  /* No text sits on the scene anymore — the text scrim would just dim it. */
  .cs-hero-photo__overlay {
    display: none;
  }

  /* The heading's bottom margin exists to space a CTA below it; when the
     heading is the last element it just pads the section gap. */
  .cs-hero-photo__inner > :last-child {
    margin-bottom: 0;
  }
}

/* Phones: a long label can't fit on one line, and a wrapped label makes
   fit-content resolve to the full column width — leaving the two short
   balanced lines stranded in a full-width bar. Capping the width makes the
   button hug the wrapped label; short labels still size to their text. */
@media (max-width: 480px) {
  .cs-hero-photo .cs-hero-photo__cta,
  .cs-hero-photo .cs-hero-photo__cta:link,
  .cs-hero-photo .cs-hero-photo__cta:visited {
    max-width: min(26rem, 100%);
  }
}

/* Tablets: fixed 40px hero heading (client call 2026-09-15). Sits between
   the phone floor (36px, the clamp minimum) and the desktop scale, which
   resumes at 769px. */
@media (min-width: 600px) and (max-width: 768px) {
  .cs-hero-photo .cs-hero-photo__heading {
    font-size: 4rem;
  }
}