/* style.bpt.components.shared.css
 * Shared UI primitives to keep Products (single.html) and Pricing (bundles.html)
 * visually consistent without touching global theme.
 * Relies on CSS variables defined in style.bpt.css.
 */

/* Container & hero */
.section-hero {
  background: linear-gradient(135deg, var(--lgt-primary-background) 80%, var(--lgt-primary-background-accent) 100%);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: clamp(1.25rem, 3vw, 2.5rem) 0;
}
.section-hero__inner,
.section-container {
  width: clamp(800px, 80vw, 1100px);
  margin: 0 auto;
  padding: 0 1rem;
}
.section-hero__title {
  margin: 0 0 .25rem 0;
  color: var(--lgt-body-heading-two);
  font-size: clamp(2rem, 4vw, 3rem);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.section-hero__tagline {
  margin: 0 0 1rem;
  color: var(--lgt-body);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
}

/* Buttons */
.btn-gradient {
  display: inline-block;
  padding: .5rem .9rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  background: linear-gradient(135deg, #4f88ff, #6772e5);
  color: #fff;
  border: 2px solid transparent;
}
.btn-gradient:hover { text-decoration: none; color: #fff; }

.btn-gradient--ghost {
  background: #fff;
  color: var(--lgt-primary-accent);
  border-color: var(--lgt-primary-accent);
}
.btn-gradient--ghost:hover {
  background: linear-gradient(135deg, #80a7fc, #6772e5);
  color: #fff;
  border-color: transparent;
}

/* Pills & flags */
.badge-pill {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: #eef5ff;
  color: #1d4ed8;
  border: 1px solid #cfe2ff;
  font-weight: 700;
  font-size: .75rem;
}

/* Spacing helpers */
.stack-sm > * + * { margin-top: .5rem; }
.stack-md > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }


/* === Brand Blue Hero (solid filler card) ============================
   Variables live here so they are global-ish without touching core theme.
   Tries to leverage existing light theme vars (lgt) with fallbacks.
--------------------------------------------------------------------- */
:root {
  /* Try to derive hero blues from existing accent if present */
  --lgt-hero-blue-start: var(--lgt-primary-accent, #0a8cf7);
  --lgt-hero-blue-end: #073e9e;
  /* Text on blue (slightly off-white for contrast) */
  --lgt-hero-on-blue: #f4f8ff;
}

/* Card modifier that switches to a brand blue gradient and light text */
.app-modules-card--brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--lgt-hero-blue-start) 0%, var(--lgt-hero-blue-end) 100%);
  color: var(--lgt-hero-on-blue);
  box-shadow: 0 4px 14px rgba(3, 23, 66, .2);
}

/* Ensure headings and body text inside render for dark background */
.app-modules-card--brand .app-modules-title,
.app-modules-card--brand .app-hero-text,
.app-modules-card--brand .app-hero-text p {
  color: var(--lgt-hero-on-blue);
}


.app-modules-title-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.app-modules-title-logo img {
  width: clamp(320px, 480px, 128px);
  height: auto;
}

/* Decorative white SVG watermark (Blue Precision logo) */
.app-modules-card--brand .app-hero-brand-mark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /*background-image: url('/img/bpt_logo_white.svg'); /* static/img/bpt_logo_white.svg -> /img/bpt_logo_white.svg when served */
  background-repeat: no-repeat;
  background-position: right clamp(12px, 3vw, 24px) bottom -10%;
  background-size: clamp(140px, 22vw, 320px);
  opacity: 0.14; /* subtle */
}

/* CTA on blue background: keep strong contrast and focus ring */
.btn-on-blue {
  background: rgba(255,255,255,.12);
  color: var(--lgt-text-on-primary, #ffffff);
  border-color: rgba(255,255,255,.35);
}
.btn-on-blue:hover {
  background: rgba(255,255,255,.22);
  color: #fff;
  border-color: transparent;
  text-decoration: none;
}

/* Keep badges legible when used */
.app-modules-card--brand .badge-pill {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.28);
}

/* Optional: soften geometric/animated borders from other hero variants */
.app-modules-card--brand.card-glowing::before,
.app-modules-card--brand.card-glowing::after {
  display: none;
}