import { style } from "@vanilla-extract/css";
import { space } from "../../../styles/tokens/spacing.ts";

export const shell = style({
  display: "grid",
  gridTemplateRows: "auto 1fr auto",
  minBlockSize: "100dvh",
});

export const main = style({
  paddingBlock: space[6],
});

// With the hero slot, the page is a stack of sections that each carry their own
// 80px rhythm, so main's padding would sit on top of the first section's and
// push the whole page down against the frames.
export const mainFlush = style({
  paddingBlock: 0,
});

// Homepage hero panel: one positioned, clipped stacking context for the
// header, the session banner and the hero, so the hero's absolute wash and
// rays layers (negative z-index) sit behind all three but above the page bg.
export const heroPanel = style({
  position: "relative",
  isolation: "isolate",
  overflow: "hidden",
});

export const heroPanelBanner = style({
  paddingBlockStart: space[4],
});