---
// CP-STRUCT-009 hero_wrapper
interface Props {
  image?: string;
  height?: 'compact' | 'default' | 'viewport';
}
const { image, height = 'default' } = Astro.props;
---
<section
  class={`hero-wrapper hero-wrapper--${height}`}
  style={image ? `--hero-bg: url(${image})` : undefined}
>
  <div class="hero-wrapper__inner">
    <slot />
  </div>
</section>

<style>
  .hero-wrapper {
    position: relative;
    padding: 4rem 1.25rem;
    background: var(--color-surface, #f9f6f1);
    overflow: hidden;
  }
  .hero-wrapper--compact {
    padding: 2.5rem 1.25rem;
  }
  .hero-wrapper--viewport {
    min-height: 70vh;
    display: flex;
    align-items: center;
  }
  .hero-wrapper__inner {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
  }
</style>