Full Bleed Section

'use client';

import type { ReactNode } from 'react';
import './FullBleedSection.css';

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

export function FullBleedSection({ className = '',
  children
}: FullBleedSectionProps) {
  return (
    <>
      <section className={`full-bleed ${className}`} data-rk-4e57ad="">
        <div className="full-bleed-inner" data-rk-4e57ad="">
          {children ?? (<>
            <h3 data-rk-4e57ad="">Full Bleed Background Container</h3>
            <p data-rk-4e57ad="">Content breaks out to full viewport edges while inner content stays readable.</p>
          </>)}
        </div>
      </section>
    </>
  );
}

export default FullBleedSection;

/* FullBleedSection — ported from astro-component-kit (layout/FullBleedSection.astro) */

.full-bleed:where([data-rk-4e57ad]) {
  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:where([data-rk-4e57ad]) {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.full-bleed-inner:where([data-rk-4e57ad]) h3:where([data-rk-4e57ad]) {
  color: #fff;
  margin-bottom: 0.5rem;
}
.full-bleed-inner:where([data-rk-4e57ad]) p:where([data-rk-4e57ad]) {
  color: #94a3b8;
  margin: 0;
}