/* ============================================================
   layout.css
   Viewport-spanning grid that arranges the three mockup panels
   and stacks the main site content on top.

   Grid layout (desktop):
   ┌──────────────┬──────────────────┐  ↑
   │              │                  │ 55vh
   │  .panel--    │  .panel--beauty  │
   │  arcade      │  (top-right)     │
   │  (top-left)  │                  │  ↓
   ├──────────────┴──────────────────┤  ↑
   │                                 │ 45vh
   │  .panel--hvacr  (full width)    │
   │                                 │  ↓
   └─────────────────────────────────┘
   ============================================================ */

/* ---------- Mockup Background Grid ---------- */
.mockup-bg {
  position: fixed;
  inset: 0;
  z-index: 0;

  display: grid;
  grid-template-columns: 45fr 55fr;
  grid-template-rows: 55fr 45fr;

  /* Thin gap renders as a dark separator between panels */
  gap: 3px;
  background-color: var(--layout-gap-color);

  /* Entire background is decorative — never interactive */
  pointer-events: none;
  user-select: none;
}

/* ---------- Panel Base ---------- */
.panel {
  position: relative;
  overflow: hidden;
}

/* ---------- Panel Placement ---------- */
.panel--arcade { grid-area: 1 / 1 / 2 / 2; } /* top-left  */
.panel--beauty { grid-area: 1 / 2 / 2 / 3; } /* top-right */
.panel--hvacr  { grid-area: 2 / 1 / 3 / 3; } /* bottom row, spans both columns */

/* ---------- Blur Layer ---------- */
/* Sits above the mockup panels (z-index 0) but below the card/nav (z-index 10).
   backdrop-filter blurs everything painted beneath it — the panels only. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 5;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ---------- Site Overlay ---------- */
/* Transparent wrapper that stacks page content above the mockup grid */
.site-wrapper {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Main Content Area ---------- */
main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}