/* Hero Section */
.hero {
  position: relative;
  min-height: 630px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-base);
  /* overflow: hidden; Removed to allow content to flow naturally on mobile */
}

.career-hero {
  position: relative;
  min-height: 630px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-base);
  overflow: hidden;
}

/* Hero Background Container */
.hero-background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

/* Hero Background - Supports both Video and Image */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
}

/* Video-specific styling */
video.hero-background {
  pointer-events: none;
  display: block;
}

/* Hide video when no source is available */
video.hero-background:not([src]):not(:has(source[src])) {
  display: none;
}

/* Fallback image styling */
.hero-background-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
}

/* Hide fallback when video has source */
.hero-background-container:has(video.hero-background source[src])
  .hero-background-fallback,
.hero-background-container:has(video.hero-background[src])
  .hero-background-fallback {
  display: none;
}

/* Show fallback when video is hidden */
.hero-background-container
  video.hero-background[style*="display: none"]
  ~ .hero-background-fallback,
.hero-background-container
  video.hero-background:not(:has(source[src])):not([src])
  ~ .hero-background-fallback {
  display: block;
}

/* Hero Overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  /* background: #000000B2; */

  z-index: 2;
}
/* hero-overlay-psychedelic-care page */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000b2;

  /* background: #000000B2; */

  z-index: 2;
}

/* Hero Header Container */
.hero-header-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-top: 16px;
}

/* Hero Content */
.hero-content {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 120px 20px 80px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Hero Heading */
.hero-heading {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: 48px;
  line-height: 120%;
  color: var(--color-outline-button-text);
  /* margin-bottom: 10px; */
  max-width: 900px;
}
/* membership page  */
.hero-heading-membership {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: 48px;
  line-height: 120%;
  color: var(--color-outline-button-text);
  margin-bottom: 10px;
  max-width: 600px;
}

/* Integrated Mission Content Styles */
.mission-content {
  position: relative;
  z-index: 3;
  max-width: 700px;
  width: 100%;
  padding: 24px 0px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mission-paragraph {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-h6-desktopr);
  line-height: 140%;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 100%;
}

/* Bold text within paragraphs */
.mission-paragraph span {
  color: var(--color-outline-button-text);
}

/* Hero Description */
.hero-description {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-b1-desktop);
  line-height: 150%;
  color: var(--color-text-secondary);
  margin-bottom: 30px;
  max-width: 500px;
}
/* hero-description-psychedelic-care page */
.hero-description-psychedelic-care {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-b1-desktop);
  line-height: 150%;
  color: var(--color-text-secondary);
  margin-bottom: 30px;
  max-width: 600px;
} /* team page description */
.hero-description-team {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-b1-desktop);
  line-height: 150%;
  color: var(--color-text-secondary);
  margin-bottom: 30px;
  max-width: 600px;
}

/* Hero Buttons Container */
.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* Hero Button - Primary (Get Started) */
.hero-btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background-color: var(--color-outline-button-text);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-b1-desktop);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: 42px;
  transition:
    background-color 0.3s ease,
    opacity 0.3s ease,
    transform 0.2s ease;
  white-space: nowrap;
  border: none;
}

.hero-btn-primary:hover {
  /* opacity: 0.9; */
  transform: translateY(-1px);
  color: var(--color-text-primary);
  background-color: #f0f0f0;
  cursor: pointer;
}

/* Hero Button - Secondary (How It Works) */
.hero-btn-secondary {
  display: inline-block;
  padding: 14px 32px;
  background-color: transparent;
  color: var(--color-outline-button-text);
  font-family: var(--font-family);
  font-size: var(--font-size-b1-desktop);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: 42px;
  border: 1px solid #ffffff;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease;
  white-space: nowrap;
  /* cursor: pointer; */
}

.hero-btn-secondary:hover {
  background-color: var(--color-heading);
  /* transform: translateY(-1px); */
  color: var(--color-outline-button-text);
  border: 1px solid #000;
  transform: translateY(-1px);
  cursor: pointer;
}

/* Tablet Styles */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
  }

  .career-hero {
    min-height: auto;
  }

  .hero-content {
    padding: 100px 20px 60px;
  }

  .hero-heading {
    font-size: 32px;
    margin-bottom: 20px;
  }
  .hero-heading-membership {
    font-size: 32px;
    margin-bottom: 20px;
  }
  .hero-description {
    font-size: var(--font-size-b1-mobile);
    margin-bottom: 32px;
  }

  .hero-buttons {
    flex-direction: column;
    width: 50%;
    gap: 12px;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    width: 100%;
    max-width: 100%;
    padding: 16px 24px;
    font-size: var(--font-size-b2-mobile);
    text-align: center;
  }

  /* Mission Tablet Updates */
  .mission-content {
    padding: 24px 0px;
    gap: 20px;
  }

  .mission-paragraph {
    font-size: 18px;
    line-height: 160%;
  }
}

/* Mobile Styles - Split Layout */
@media (max-width: 480px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    position: relative;
  }

  .career-hero {
    flex-direction: column;
    min-height: 510px; /* Keep strict for this if needed, or allow auto */
    position: relative;
  }

  /* Hero Background Image/Video - Only show in top section, fixed height */
  .hero-background-container {
    position: relative; /* Changed from absolute to flow in flex */
    height: 320px;
    min-height: 320px;
    width: 100%;
    flex: 0 0 320px; /* Do not shrink/grow */
    overflow: hidden;
  }

  .hero-background,
  video.hero-background,
  .hero-background-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  /* Remove overlay on mobile or adjust */
  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 2;
    /* Overlay sits inside hero-background-container now because of z-index? 
       No, hero-overlay is sibling to hero-background-container in HTML.
       Wait, structure is:
       <section class="hero">
         <div class="hero-background-container">...</div>
         <div class="hero-overlay"></div>
         <div id="header-container"></div>
         <div class="hero-content">...</div>
       </section>
       
       If hero-background-container is relative and hero-content is relative below it, 
       hero-overlay (absolute) will cover the whole section if top:0 left:0.
       We want overlay ONLY on the image part? 
       Or maybe users want it as it designed. The original CSS had overlay traversing the whole thing? 
       Actually, previously .hero-overlay was "absolute, top 0, left 0, height 100%".
       
       If I make .hero a flex column:
       Child 1: hero-background-container (relative, 320px)
       Child 2: hero-overlay (absolute, covers .hero) -> We probably only want it on the image now if the bottom part is solid color.
       
       Let's adjust overlay to only cover the background container if the bottom is solid.
       Or, actually, the previous code had a solid background color for content on mobile.
    */
  }

  /* Restrict overlay to the background container height on mobile */
  .hero-overlay {
    height: 320px; /* Match background container */
  }

  /* Header wrapper positioning */
  .hero-header-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }

  /* Hero Content Section (Bottom) */
  .hero-content {
    position: relative; /* Changed from absolute */
    top: auto;
    left: auto;
    width: 100%;
    min-height: 360px; /* at least this much, but can grow */
    background-color: var(--color-text-primary);
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* content starts at top of this block */
    z-index: 2;
    margin: 0;
  }

  .hero-heading {
    font-size: var(--font-size-h3-desktop);
    color: var(--color-outline-button-text);
    margin-bottom: 10px;
  }
  /* membership page  */
  .hero-heading-membership {
    font-size: var(--font-size-h3-desktop);
    color: var(--color-outline-button-text);
    margin-bottom: 10px;
  }

  /* Mission Content Mobile Updates */
  .mission-content {
    padding: 0px 0px 24px 0px;
    gap: 15px;
  }

  .mission-paragraph {
    font-size: var(--font-size-b2-mobile);
    line-height: 150%;
  }

  .hero-description {
    font-size: var(--font-size-b3-mobile);
    color: var(--color-text-secondary);
    margin-bottom: 30px;
    line-height: 150%;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .hero-btn-primary {
    padding: 14px 24px;
    background-color: var(--color-outline-button-text);
    color: var(--color-text-primary);

    font-size: var(--font-size-b1-mobile);
    font-weight: var(--font-weight-medium);
    text-decoration: none;

    white-space: nowrap;
    border: none;
  }

  .hero-btn-secondary {
    width: 100%;
    background-color: transparent;
    color: var(--color-outline-button-text);
    border: 1px solid var(--color-outline-button-text);
    padding: 16px 24px;
    font-size: 0.875rem;
  }

  /* psychedelic-care page for hero-section only in mobile view */
  .hero-content-psychedelic-care {
    position: relative; /* Adjusted to relative */
    width: 100%;
    min-height: 360px;
    background-color: var(--color-outline-button-text);
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* keep center if desired or flex-start */
    z-index: 2;
  }
  .hero-heading-psychedelic-care {
    font-size: 2rem;
    color: var(--color-text-primary-100);
    font-weight: var(--font-weight-regular);
    margin-bottom: 12px;
  }
  .hero-description-psychedelic-care {
    font-size: var(--font-size-b3-mobile);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary-100);
    margin-bottom: 24px;
    line-height: 150%;
  }

  .hero-buttons-psychedelic-care {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .hero-btn-primary-psychedelic-care {
    padding: 14px 24px;
    background-color: var(--color-text-primary-100);
    color: var(--color-outline-button-text);

    font-size: var(--font-size-b1-mobile);
    font-weight: var(--font-weight-medium);
    text-decoration: none;

    white-space: nowrap;
    border: none;
  }
}