/* =============================================================================
   BlackSpace — About Page Widget Styles
   File:    assets/css/bs-about-page.css
   Enqueued by: bs-page-nav-assets.php (MU plugin)
   Scoped to:   is_page( 'about' )

   NOTE ON !important:
   Elementor Pro generates post CSS with 3-class specificity selectors
   (.elementor-XXXX .elementor-element.elementor-element-XXXXXXX) that
   override single-class rules. All structural and visual properties use
   !important throughout this file to reliably win that specificity battle.

   All CSS custom properties (--bs-*) are declared globally in:
     wp-content/themes/woodmart-child/style.css
   ============================================================================= */


/* ═══════════════════════════════════════════════════════════════════════════
   1. PAGE WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */

.bs-about-page-wrap {
  background: var(--bs-neutral-025) !important;
  padding: 0 16px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. HERO — Section 1
   Apply .bs-hero-section to the top-level Elementor section container
   ═══════════════════════════════════════════════════════════════════════════ */

.bs-hero-section {
  position: relative !important;
  border-radius: var(--bs-r-card) !important;
  overflow: hidden !important;
}

.bs-hero-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(
      ellipse 65% 55% at 55% 45%,
      rgba(176, 116, 62, 0.18) 0%, transparent 65%),
    repeating-linear-gradient(
      -45deg, transparent, transparent 44px,
      rgba(255, 255, 255, 0.018) 44px,
      rgba(255, 255, 255, 0.018) 45px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.bs-hero-section::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--bs-bronze), transparent) !important;
  opacity: 0.45 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Child content above pseudo-element overlays — covers both old and new Elementor container types */
.bs-hero-section > .e-con-inner,
.bs-hero-section > .elementor-container {
  position: relative !important;
  z-index: 2 !important;
}

/* Eyebrow label — apply .bs-hero-eyebrow to the Text Editor widget */
.bs-hero-eyebrow .elementor-widget-container {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--bs-bronze-300) !important;
}

/* Tagline dot separators — wrap each · in <span class="bs-hero-tagline-dot">·</span> */
.bs-hero-tagline-dot {
  color: var(--bs-bronze) !important;
}

/* "BlackSpace" highlight in H1 — wrap in <span class="bs-hero-highlight">BlackSpace</span> */
.bs-hero-highlight {
  color: var(--bs-bronze-300) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. OUR STORY — Section 2
   ═══════════════════════════════════════════════════════════════════════════ */

/* Right column — apply .bs-story-photo-col to the right Elementor column.
   The Bronze 100 accent block is generated via ::before. No HTML widget needed. */
.bs-story-photo-col {
  position: relative !important;
  padding-top: 20px !important;
  padding-left: 20px !important;
}

.bs-story-photo-col::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 20px !important;
  bottom: 20px !important;
  background: var(--bs-bronze-100) !important;
  border-radius: var(--bs-r-card) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Founder photo — apply .bs-story-photo to the Image widget */
.bs-story-photo {
  position: relative !important;
  z-index: 1 !important;
}

.bs-story-photo .elementor-widget-container {
  position: relative !important;
  z-index: 1 !important;
}

.bs-story-photo img {
  border-radius: var(--bs-r-card) !important;
  width: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: top center !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. OUR MISSION — Section 3
   ═══════════════════════════════════════════════════════════════════════════ */

/* Apply .bs-mission-body to the Text Editor widget */
.bs-mission-body .elementor-widget-container {
  max-width: 660px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. OUR TEAM — Section 4
   ═══════════════════════════════════════════════════════════════════════════ */

/* Apply .bs-team-card to each horizontal card container */
.bs-team-card {
  background: var(--bs-white) !important;
  border: 1px solid var(--bs-silver-mist) !important;
  border-radius: var(--bs-r-card) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.bs-team-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09) !important;
  transform: translateY(-2px) !important;
}

/* Apply .bs-team-photo-col to the left inner column of each card */
.bs-team-photo-col {
  width: 190px !important;
  min-width: 190px !important;
  min-height: 240px !important;
  background: var(--bs-bronze-100) !important;
}

.bs-team-photo-col img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

/* Apply .bs-team-bio-col to the right inner column of each card */
.bs-team-bio-col {
  padding: 28px 22px !important;
}

/* Apply .bs-team-title to the job title Text widget */
.bs-team-title .elementor-widget-container {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--bs-bronze) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. OUR VALUES — Section 5
   Apply .bs-values-section to the top-level Elementor section
   ═══════════════════════════════════════════════════════════════════════════ */

.bs-values-section {
  position: relative !important;
}

.bs-values-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--bs-bronze), transparent) !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* Apply .bs-value-card to each card container */
.bs-value-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: var(--bs-r-card) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.bs-value-card:hover {
  background: rgba(176, 116, 62, 0.09) !important;
  border-color: rgba(176, 116, 62, 0.3) !important;
}

/* Card inner padding — targets the actual inner wrap Elementor renders,
   not the outer container element. This is what controls visible padding. */
.bs-value-card > .elementor-widget-wrap,
.bs-value-card > .e-con-inner {
  padding-top: 44px !important;
  padding-bottom: 40px !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* Apply .bs-value-icon to the icon widget.
   The outer widget div is a neutral passthrough — no box styling on it.
   Box styling lives only on .elementor-widget-container.
   .elementor-icon (Elementor's own SVG wrapper) must be flex to center the SVG. */
.bs-value-icon {
  display: flex !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

.bs-value-icon .elementor-widget-container {
  width: 54px !important;
  height: 54px !important;
  background: rgba(176, 116, 62, 0.13) !important;
  border: 1px solid rgba(176, 116, 62, 0.3) !important;
  border-radius: var(--bs-r-icon) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* .elementor-icon is Elementor's own wrapper around the SVG — must be flex
   and sized to fill the container so the SVG centers correctly */
.bs-value-icon .elementor-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  vertical-align: unset !important;
}

/* SVG constrained inside the 54px container */
.bs-value-icon svg,
.bs-value-icon img,
.bs-value-icon i {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  font-size: 34px !important;
  color: var(--bs-bronze) !important;
  fill: var(--bs-bronze) !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Apply .bs-value-body to the body text widget in each card */
.bs-value-body .elementor-widget-container {
  color: rgba(255, 255, 255, 0.48) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. CURATORIAL INTENT — Section 6
   Apply .bs-curatorial-section to the top-level Elementor section
   ═══════════════════════════════════════════════════════════════════════════ */

.bs-curatorial-section {
  position: relative !important;
}

.bs-curatorial-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--bs-bronze), transparent) !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* Apply .bs-curatorial-intro to the intro Text Editor widget */
.bs-curatorial-intro .elementor-widget-container {
  color: rgba(255, 255, 255, 0.44) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding-bottom: 40px !important;
  margin-bottom: 52px !important;
}

/* Apply .bs-curatorial-body to each subsection Text Editor widget */
.bs-curatorial-body .elementor-widget-container {
  color: rgba(255, 255, 255, 0.48) !important;
}

.bs-curatorial-body strong,
.bs-curatorial-body b {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* Apply .bs-curatorial-divider to each Divider widget between subsections */
.bs-curatorial-divider hr,
.bs-curatorial-divider .elementor-divider-separator {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Membership standards bullet list */
.bs-bullet-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  color: rgba(255, 255, 255, 0.48) !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

.bs-bullet-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  border-radius: 50% !important;
  background: var(--bs-bronze) !important;
  margin-top: 7px !important;
}

/* Content span — fills remaining width */
.bs-bullet-item > span:not(.bs-bullet-dot) {
  display: block !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Bold label sits on its own line; body text wraps under itself below it */
.bs-bullet-item strong {
  display: block !important;
  color: rgba(255, 255, 255, 0.86) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. CTA STRIP — Section 7
   Apply .bs-cta-section to the top-level Elementor section
   ═══════════════════════════════════════════════════════════════════════════ */

.bs-cta-section {
  position: relative !important;
  overflow: hidden !important;
}

.bs-cta-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 36px,
    rgba(0, 0, 0, 0.04) 36px, rgba(0, 0, 0, 0.04) 37px) !important;
  pointer-events: none !important;
}

.bs-cta-section > .e-con-inner,
.bs-cta-section > .elementor-container {
  position: relative !important;
  z-index: 1 !important;
}

/* Apply .bs-cta-subtext to the subtext Text widget */
.bs-cta-subtext .elementor-widget-container {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Apply .bs-cta-buttons to the container holding both buttons */
.bs-cta-buttons {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* All buttons on the page get pill radius */
.elementor-button {
  border-radius: var(--bs-r-btn) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.bs-body-muted  { color: rgba(255, 255, 255, 0.48) !important; }
.bs-body-strong { color: rgba(255, 255, 255, 0.86) !important; }

/* Bronze text highlight — use on <span> inside any widget */
.bs-bronze-text { color: var(--bs-bronze) !important; }

/* Section label — apply .bs-section-label to eyebrow/kicker Text widgets */
.bs-section-label .elementor-widget-container {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: var(--bs-bronze) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. RESPONSIVE — 960px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {

  .bs-hero-section {
    border-radius: 8px !important;
  }

  .bs-story-photo-col {
    max-width: 400px !important;
    margin: 0 auto !important;
  }

  .bs-team-card {
    width: 100% !important;
  }

  .bs-value-card:last-child {
    grid-column: 1 / -1 !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. RESPONSIVE — 768px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .bs-hero-section {
    border-radius: 8px !important;
  }

  .bs-story-photo-col {
    max-width: 340px !important;
  }

  .bs-team-photo-col {
    width: 160px !important;
    min-width: 160px !important;
  }

  .bs-value-card:last-child {
    grid-column: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. RESPONSIVE — 640px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  .bs-about-page-wrap {
    padding: 0 12px !important;
  }

  .bs-hero-section {
    border-radius: 8px !important;
  }

  .bs-story-photo-col {
    max-width: 100% !important;
    padding-top: 10px !important;
    padding-left: 10px !important;
  }

  .bs-story-photo-col::before {
    right: 10px !important;
    bottom: 10px !important;
  }

  .bs-team-card {
    flex-direction: column !important;
  }

  .bs-team-photo-col {
    width: 100% !important;
    min-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
  }

  .bs-team-bio-col {
    padding: 22px 20px !important;
  }

  .bs-cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }

  .bs-cta-buttons .elementor-button {
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .bs-value-card .elementor-widget-wrap {
    padding: 32px 24px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. RESPONSIVE — 480px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  .bs-about-page-wrap {
    padding: 0 10px !important;
  }

  .bs-hero-section {
    border-radius: 6px !important;
  }

  .bs-hero-tagline-dot {
    display: none !important;
  }

  .bs-team-photo-col {
    height: 180px !important;
    min-height: 180px !important;
  }

  .bs-value-icon .elementor-widget-container,
  .bs-value-icon {
    width: 46px !important;
    height: 46px !important;
  }

  .bs-cta-buttons .elementor-button {
    max-width: 100% !important;
  }
}