/* =========================================================
   bg-panels.css  —  Staggered background-graphic panels
   ---------------------------------------------------------
   Applied to the MIDDLE card of each group of three plain
   white panels (logic lives in includes/bgfx.php).

   Two smart modes (chosen per image brightness):
     .bgfx--light  light image  -> keep DARK text, white fade-scrim
                                   so the art never overtakes the words
     .bgfx--dark   dark image   -> flip text to WHITE + shadow, dark scrim

   Loaded AFTER style.css so it can override card backgrounds.
   Images live in /assets/bgimages/*.jpg
   ========================================================= */

.bgfx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: var(--bgfx-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* scrim: above the image, below the content */
.bgfx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bgfx > * { position: relative; z-index: 1; }

/* ---- LIGHT image: text stays dark; fade the art out behind copy ---- */
.bgfx--light::before {
  background:
    radial-gradient(125% 120% at 50% 0%,
      rgba(255,255,255,0.66) 0%,
      rgba(255,255,255,0.90) 58%,
      rgba(255,255,255,0.97) 100%);
}
.bgfx--light { border: 1px solid rgba(15,23,42,0.10); }
/* a touch more contrast so dark text pops on the textured field */
.bgfx--light :is(h1,h2,h3,h4,h5,h6) { color: var(--color-dark, #0f172a); }

/* ---- DARK image: white text + shadow, darken the art for legibility ---- */
.bgfx--dark {
  color: #f1f5f9;
  border: 1px solid rgba(255,255,255,0.14);
}
.bgfx--dark::before {
  background: linear-gradient(180deg,
    rgba(8,13,28,0.62) 0%,
    rgba(8,13,28,0.74) 55%,
    rgba(8,13,28,0.70) 100%);
}
.bgfx--dark :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,span,strong,em,small,.review-name,.review-role,.addon-price,.feature-title) {
  color: #f8fafc !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.60);
}
/* keep colored accents (stars, avatars) readable but unflipped */
.bgfx--dark .review-stars { text-shadow: 0 1px 4px rgba(0,0,0,0.65); }

/* slightly lift the accented card so the stagger reads as intentional */
.bgfx { box-shadow: 0 10px 34px rgba(15,23,42,0.16); }

/* =========================================================
   SECTION-LEVEL (whole-panel) backgrounds — .panelfx
   The full-width band gets the graphic; cards/content sit on top.
   .panelfx--light  light image -> dark text kept, white fade-scrim
   .panelfx--dark   dark image  -> ONLY the section's own heading/intro
                                   text flips to white+shadow; inner white
                                   cards keep their dark text (bright islands).
   ========================================================= */
.panelfx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: var(--bgfx-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.panelfx::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }
.panelfx > * { position: relative; z-index: 1; }

/* LIGHT panel: keep dark text; soft white scrim; lift inner cards so they pop */
.panelfx--light::before {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.34) 100%);
}
.panelfx--light :is(.card,.price-card,.addon-card,.review-card,.review-card-full,.faq-item,.feature-item) {
  box-shadow: 0 8px 28px rgba(15,23,42,0.10);
}

/* DARK panel: darken art; flip ONLY the section's own headings/intro to white */
.panelfx--dark::before {
  background: linear-gradient(180deg,
    rgba(8,13,28,0.42) 0%, rgba(8,13,28,0.50) 50%, rgba(8,13,28,0.46) 100%);
}
/* flip ALL section-level text to white + shadow ... */
.panelfx--dark :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.label,.review-count,.feature-title) {
  color: #f8fafc !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.60);
}
/* ... but text INSIDE white "island" cards stays dark for readability */
.panelfx--dark :is(.card,.price-card,.addon-card,.review-card,.review-card-full,
  .faq-item,.dg-panel,.dg-checklist,.dg-faq,.contact-form-card,.contact-info-card,
  .seo-block,.seo-service-card,.seo-type-card,.seo-review-card,.seo-faq-item)
  :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,.feature-title) {
  color: var(--color-dark, #0f172a) !important;
  text-shadow: none !important;
}

/* ---- image map (16 backgrounds, 4 light-reg / 4 light-red / 4 dark-reg / 4 dark-red) ---- */
.bgi-3AzkJ{--bgfx-img:url('/assets/bgimages/3AzkJ.webp');} /* light */
.bgi-lEOSk{--bgfx-img:url('/assets/bgimages/lEOSk.webp');} /* light */
.bgi-LUg3f{--bgfx-img:url('/assets/bgimages/LUg3f.webp');} /* light */
.bgi-Zp7Ag{--bgfx-img:url('/assets/bgimages/Zp7Ag.webp');} /* light */
.bgi-6Ltv6{--bgfx-img:url('/assets/bgimages/6Ltv6.webp');} /* light red */
.bgi-deD8Q{--bgfx-img:url('/assets/bgimages/deD8Q.webp');} /* light red */
.bgi-eP1Ux{--bgfx-img:url('/assets/bgimages/eP1Ux.webp');} /* light red */
.bgi-p0LoC{--bgfx-img:url('/assets/bgimages/p0LoC.webp');} /* light red */
.bgi-271Po{--bgfx-img:url('/assets/bgimages/271Po.webp');} /* dark */
.bgi-dyuNG{--bgfx-img:url('/assets/bgimages/dyuNG.webp');} /* dark */
.bgi-EF8Gl{--bgfx-img:url('/assets/bgimages/EF8Gl.webp');} /* dark */
.bgi-WVE9H{--bgfx-img:url('/assets/bgimages/WVE9H.webp');} /* dark */
.bgi-BE1nD{--bgfx-img:url('/assets/bgimages/BE1nD.webp');} /* dark red */
.bgi-FQISq{--bgfx-img:url('/assets/bgimages/FQISq.webp');} /* dark red */
.bgi-TLClI{--bgfx-img:url('/assets/bgimages/TLClI.webp');} /* dark red */
.bgi-UZUu1{--bgfx-img:url('/assets/bgimages/UZUu1.webp');} /* dark red */