/* web/themes/techprosolutions/css/components/et-color-depth.css */
/**
 * ET Color Depth — atmosphere layer for the LIGHT homepage sections.
 * (The dark sections — articles bento, gains monitor — already carry depth;
 * this file deliberately leaves them alone.)
 *
 *  1. Hero: layered radial washes (green top-left, navy bottom-right) over a
 *     vertical mint→white ramp that hands off cleanly to the next section.
 *  2. Floating cards (hero + persona): high-end glass. Base rule is SOLID
 *     rgba (the Android-Chrome-safe rendering); real backdrop blur is a
 *     progressive enhancement inside @supports.
 *  3. Bento features section: faint mint wash so the page reads
 *     white → wash → white instead of one long white sheet.
 *
 * CONTRAST LAW: card text is navy #1C3557; glass backgrounds never drop
 * below ~0.62 white alpha + blur, keeping the effective backdrop light
 * enough for AA. No text sits on an unfloored transparency.
 */

/* ---- 1. Hero atmosphere -------------------------------------------------- */

.hero-orbital-trust.hero-orbital-section {
  background:
    radial-gradient(56rem 36rem at 12% 8%, rgba(60, 185, 68, 0.08), transparent 64%),
    radial-gradient(48rem 32rem at 88% 92%, rgba(28, 53, 87, 0.07), transparent 60%),
    linear-gradient(180deg, #F0F9F1 0%, #F7FAF9 44%, #FFFFFF 100%);
}

/* ---- 2. Glass floating cards --------------------------------------------- */

/* Hero floats: solid-rgba base (fallback rendering), glass-edge highlight. */
.hero-float {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 32px rgba(28, 53, 87, 0.14),
    0 2px 8px rgba(28, 53, 87, 0.08);
}

/* Persona cards keep their tuned shadow; only the surface is upgraded. */
.floating-card {
  border: 1px solid rgba(255, 255, 255, 0.72);
}

@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .hero-float {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(255, 255, 255, 0.72) 100%
    );
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
  }

  .floating-card {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.74) 100%
    );
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
  }
}

/* ---- 3. Bento features wash ----------------------------------------------
   The wrapper is a centered 1100px column that paints its own white
   `background: var(--bf-wash)` (sticky-features.css, later in the aggregate),
   so: override the custom property, at doubled class specificity, with an
   elliptical glow that fades out before the column edge — a spotlight behind
   the grid, no hard seams at the column boundary. */

.bento-features-wrapper.paragraph--type--sticky-features-section {
  --bf-wash:
    radial-gradient(64rem 40rem at 50% 32%, #F0F9F1 0%, rgba(240, 249, 241, 0) 70%)
    #FFFFFF;
}

/* ---- 4. FAQ wash ----------------------------------------------------------
   Same spotlight family as the bento so the light sections share one
   atmosphere language. Doubled class outranks the component's own
   `background: #fff` regardless of aggregate order. (The awards section
   stays pure white on purpose — its doc says the white frame is what makes
   the certificates pop, and its marquee edge-fades assume it.) */

.faq-section.faq-section {
  background:
    radial-gradient(64rem 40rem at 50% 24%, #F0F9F1 0%, rgba(240, 249, 241, 0) 70%)
    #FFFFFF;
}