/* Background treatments for the Hero block (attribute "treatment"; intensity in --npc-treat, 0-0.9).
   Every layout with a background photo; Photo side without one is a flat colour and gets none.
   Block classes only: the ACF section never prints npc-hero--treat-*. */

[class*="npc-hero--treat-"] .npc-hero__subtitle {
  opacity: 1;
}

/* Every treatment but None and Light tint darkens the photo: light text, whatever the skin paints a hero with (a colour picked on
   the text bar is inline and still wins). */
.npc-hero[class*="npc-hero--treat-"]:not(.npc-hero--treat-none, .npc-hero--treat-light) .npc-hero__title { color: #fff; }
.npc-hero[class*="npc-hero--treat-"]:not(.npc-hero--treat-none, .npc-hero--treat-light) .npc-hero__subtitle { color: rgba(255, 255, 255, .92); }
.npc-hero[class*="npc-hero--treat-"]:not(.npc-hero--treat-none, .npc-hero--treat-light) .npc-hero__trust:not([style*="--npc-trust-color"]) { --npc-trust-color: #fff; }

/* Radial scrim: dark only behind the text, the photo's edges stay vivid. Centred on the copy:
   the middle (Centered), the left column (Split), the heading top left (Photo side). */
.npc-hero--treat-scrim { --npc-scrim-at: 50% 50%; }
.npc-hero--split.npc-hero--treat-scrim { --npc-scrim-at: 28% 50%; }
.npc-hero--media.npc-hero--treat-scrim { --npc-scrim-at: 30% 25%; }

.npc-hero--treat-scrim .npc-hero__overlay {
  background:
    radial-gradient(ellipse 60% 70% at var(--npc-scrim-at), rgba(0, 0, 0, calc(var(--npc-treat, .45) * 1.2)) 0%, rgba(0, 0, 0, calc(var(--npc-treat, .45) * .75)) 45%, rgba(0, 0, 0, 0) 80%),
    linear-gradient(rgba(0, 0, 0, calc(var(--npc-treat, .45) * .25)), rgba(0, 0, 0, calc(var(--npc-treat, .45) * .25))) !important;
}

.npc-hero--treat-scrim :is(.npc-hero__title, .npc-hero__subtitle) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 18px rgba(0, 0, 0, .35);
}

@media (max-width: 600px) {
  .npc-hero--treat-scrim .npc-hero__overlay {
    background: radial-gradient(ellipse 95% 75% at 50% 50%, rgba(0, 0, 0, calc(var(--npc-treat, .45) * 1.2)), rgba(0, 0, 0, calc(var(--npc-treat, .45) * .45)) 80%) !important;
  }
}

/* Frosted panel behind the copy: the text column (Centered), the left column (Split), the heading (Photo side).
   The form keeps its own white card. */
.npc-hero--fullwidth.npc-hero--treat-panel .container > .row > [class*="col-"],
.npc-hero--split.npc-hero--treat-panel .container > .row > [class*="col-"]:first-child,
.npc-hero--media.npc-hero--treat-panel .npc-hero__head {
  padding: 24px 28px;
  border-radius: 16px;
  background: rgba(20, 24, 28, var(--npc-treat, .45));
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
}

/* Bottom gradient. Centered also moves its text low and to the left; Split and Photo side keep their columns. */
.npc-hero--treat-bottom .npc-hero__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, calc(var(--npc-treat, .45) * 1.5)) 0%, rgba(0, 0, 0, calc(var(--npc-treat, .45) * .75)) 40%, rgba(0, 0, 0, 0) 75%) !important;
}

.npc-hero--fullwidth.npc-hero--treat-bottom {
  align-items: flex-end;
}

.npc-hero--fullwidth.npc-hero--treat-bottom .row {
  justify-content: flex-start !important;
}

.npc-hero--fullwidth.npc-hero--treat-bottom .text-center {
  text-align: left !important;
}

.npc-hero--fullwidth.npc-hero--treat-bottom :is(.npc-hero__trust, .npc-hero__actions) {
  justify-content: flex-start !important;
}

/* Photo side: the photo card runs the full height of the form column beside it, cropped to fit. Block output only. */
.wp-block-npc-hero.npc-hero--media .row { align-items: stretch !important; }
.wp-block-npc-hero.npc-hero--media .npc-hero__photo { height: 100%; min-height: 320px; margin: 0; }
.wp-block-npc-hero.npc-hero--media .npc-hero__photo picture { display: block; height: 100%; }
.wp-block-npc-hero.npc-hero--media .npc-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The photo covers the whole Hero: core.css gives `.npc-page-content__body img` height:auto, which left a band. */
.npc-hero .npc-hero__bg img {
  height: 100%;
}

/* A zone's phone link reads "or call …", as the hero's old second link did. */
.npc-hero .npc-hero__phone-link[href^="tel:"]::before { content: "or call "; }
/* Elements added to a zone read like the hero's own text: white on the photo, the theme's colours on a plain hero. */
.npc-hero .npc-zone :is(h1, h2, h3, h4, h5, h6, p, li):not(.npc-hero__title, .npc-hero__subtitle) { color: #fff; }
.npc-hero--plain .npc-zone :is(h1, h2, h3, h4, h5, h6):not(.npc-hero__title) { color: var(--npc-heading); }
.npc-hero--plain .npc-zone :is(p, li):not(.npc-hero__subtitle) { color: var(--npc-text-muted); }
.npc-hero--plain.npc-hero--dark .npc-zone :is(h1, h2, h3, h4, h5, h6, p, li):not(.npc-hero__title, .npc-hero__subtitle) { color: #fff; }

/* Editor, Photo side: the text zone, the widget zone and the photo are siblings in one row there. A grid stacks the
   two zones in one column with the photo beside both, as the page prints them (one column holding both). */
/* Each fills its column (the editor centres blocks at their content's width). */
.npc-hero__m-row > :is(.npc-hero__m-text, .npc-hero__m-widget, .npc-hero__m-photo) { width: 100%; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.npc-hero__m-row > .npc-hero__m-text { margin-bottom: 1.5rem; }
@media (min-width: 992px) {
  .npc-hero__m-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
  .npc-hero__m-row > .npc-hero__m-text { grid-column: 1; grid-row: 1; }
  .npc-hero__m-row > .npc-hero__m-widget { grid-column: 1; grid-row: 2; }
  .npc-hero__m-row > .npc-hero__m-photo { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .npc-hero__m-row.is-flipped > :is(.npc-hero__m-text, .npc-hero__m-widget) { grid-column: 2; }
  .npc-hero__m-row.is-flipped > .npc-hero__m-photo { grid-column: 1; }
}

/* Title and subtitle colours the hero takes from the theme's fields (follow.php); a colour set on the text wins. */
.npc-hero[style*="--npc-hero-title-color"] .npc-hero__title:not(.has-text-color) { color: var(--npc-hero-title-color); }
.npc-hero[style*="--npc-hero-subtitle-color"] .npc-hero__subtitle:not(.has-text-color) { color: var(--npc-hero-subtitle-color); }