Full Bleed Section

---
/**
 * FullBleedSection — Section that breaks out of the container to hit viewport edges.
 */
interface Props {
  className?: string;
}

const { className = '' } = Astro.props;
---

<section class={`full-bleed ${className}`}>
  <div class="full-bleed-inner">
    <slot>
      <h3>Full Bleed Background Container</h3>
      <p>Content breaks out to full viewport edges while inner content stays readable.</p>
    </slot>
  </div>
</section>

<style>
  .full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: rgba(30, 41, 59, 0.4);
    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
    padding: 3.5rem 1.5rem;
    box-sizing: border-box;
  }
  .full-bleed-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }
  .full-bleed-inner h3 {
    color: #fff;
    margin-bottom: 0.5rem;
  }
  .full-bleed-inner p {
    color: #94a3b8;
    margin: 0;
  }
</style>