Responsive Gutter Wrapper

---
//    VELOCITY COMPONENT · theming
// 
//    Colours here are Tailwind `primary-*` / `accent-*`, which resolve through
//    the Velocity preset. Out of the box they are a neutral indigo — NOT the
//    Aidxn brand — so this drops into your project without dragging our look in.
// 
//    ⚡ NOT USING VELOCITY? Run this once, in your project root:
// 
//          velocityx theme
// 
//    It writes velocity-preset.cjs + velocity-theme.css. Add the preset to your
//    tailwind.config, import the css, then set your whole brand in ONE place:
// 
//          :root {
//            --vx-brand: custom;
//            --vx-primary-600: 220 38 38;   <- your action colour
//            --vx-primary-700: 185 28 28;
//          }
// 
//    ⚠️  Raw RGB channels, space separated — NOT hex. `#DC2626` here silently
//        breaks every /opacity variant in the library (bg-primary-600/20 etc).
// 
//    Prefer not to install anything? Find-and-replace `primary-` with your own
//    scale name. Nothing else in this file depends on Velocity.
/**
 * GutterWrapper — Portable, self-contained responsive horizontal gutter
 * (padding) + optional centred max-width, for use OUTSIDE this repo where
 * `.v-shell` / `.v-container` tokens don't exist. Mirrors the same shape
 * (fluid padding that tightens on phone, centred max-width) using only
 * Tailwind arbitrary values and plain CSS — zero dependency on any host
 * project's custom properties.
 *
 * Inside velocity-x-stock itself, prefer the site's own `.v-shell` utility
 * for page section shells — this component is for shipping a layout
 * primitive library that still works when dropped into a stranger's repo.
 */
export interface Props {
  as?: 'div' | 'section';
  maxWidth?: string;
  paddingDesktop?: string;
  paddingTablet?: string;
  paddingPhone?: string;
  className?: string;
}

const {
  as: As = 'div',
  maxWidth = '1200px',
  paddingDesktop = '32px',
  paddingTablet = '24px',
  paddingPhone = '16px',
  className = '',
} = Astro.props;

const vars = [
  `--gw-max:${maxWidth};`,
  `--gw-pad-desktop:${paddingDesktop};`,
  `--gw-pad-tablet:${paddingTablet};`,
  `--gw-pad-phone:${paddingPhone};`,
].join(' ');
---

<As class:list={['v-gutter mx-auto w-full', className]} style={vars}>
  <slot />
</As>

<style>
  .v-gutter {
    max-width: var(--gw-max, 1200px);
    padding-left: var(--gw-pad-phone, 16px);
    padding-right: var(--gw-pad-phone, 16px);
  }

  @media (min-width: 768px) {
    .v-gutter {
      padding-left: var(--gw-pad-tablet, 24px);
      padding-right: var(--gw-pad-tablet, 24px);
    }
  }

  @media (min-width: 1024px) {
    .v-gutter {
      padding-left: var(--gw-pad-desktop, 32px);
      padding-right: var(--gw-pad-desktop, 32px);
    }
  }
</style>