/**
 * RSL Grid System - CSS-First Layout Engine
 *
 * ARCHITECTURE OVERVIEW:
 * =====================
 * This file provides a FULLY FUNCTIONAL, RESPONSIVE grid system using ONLY CSS.
 * No JavaScript is required for core layout functionality.
 *
 * WHAT THIS FILE DOES (CSS-Only Mode):
 * - Responsive column counts via data-cols-* attributes
 * - Column spanning via data-span-* attributes on .slot-item elements
 * - Auto-fit/auto-fill with minmax() for truly fluid grids (data-auto-fit="250px")
 * - CSS Subgrid support for aligned nested layouts (data-subgrid="columns|rows|both")
 * - Cascading breakpoint inheritance (larger breakpoints inherit from smaller)
 * - Flexible gap/density control via data-gap attribute
 * - Nested grid layouts
 * - Full responsive behavior with media queries
 *
 * WHAT layout.js DOES (Optional Enhancement):
 * - Auto-calculation of columns when no data-cols-* attributes are present
 * - Measurement-based smart layouts
 * - User preference persistence
 * - Dynamic/programmatic column adjustments
 *
 * USAGE (CSS-Only):
 *
 * Fixed columns:
 * <div class="slot-layout" data-cols-xs="1" data-cols-md="2" data-cols-lg="3">
 *   <div class="slot-item">Item 1</div>
 *   <div class="slot-item" data-span-md="2">Item 2 (spans 2 cols on MD+)</div>
 * </div>
 *
 * Fluid columns (auto-fit/auto-fill):
 * <div class="slot-layout" data-auto-fit="250px">
 *   <div class="slot-item">Item 1</div>
 *   <div class="slot-item">Item 2</div>
 *   <!-- Automatically creates as many 250px+ columns as will fit -->
 * </div>
 *
 * BREAKPOINTS:
 * - XS: 0-576px      (mobile)
 * - SM: 577-768px    (large mobile/small tablet)
 * - MD: 769-992px    (tablet)
 * - LG: 993-1200px   (small desktop)
 * - XL: 1201-1600px  (desktop)
 * - XXL: 1601px+     (large desktop)
 *
 * NOTE: Media query breakpoints differ from container-width breakpoints in layout.js
 * to account for scrollbars and viewport vs container differences. This is intentional.
 *
 * @fileoverview CSS-first grid system with optional JS enhancement
 * @version 3.0.0 - CSS-First Architecture
 * @license MIT
 */

/* ============================================================================
   ROOT DEFAULTS
   ============================================================================ */

:root {
  /* Default column counts (used as fallbacks when no data-cols-* specified) */
  --cols-xs: 1;
  --cols-sm: 1;
  --cols-md: 2;
  --cols-lg: 3;
  --cols-xl: 3;
  --cols-xxl: 3;

  /* Default gap (can be overridden with data-gap attribute) */
  --grid-gap: 1rem;
}

/* ============================================================================
   LAYOUT INITIALIZATION VISIBILITY
   ============================================================================ */

/* Hide slot-layouts created by JSON Layout Engine until initialized */
/* Prevents visual "jump" from incorrect column count to correct count */
.slot-layout[data-json-layout-pending],
.nested-slot-layout[data-json-layout-pending] {
  visibility: hidden;
}

/* ============================================================================
   BASE GRID STRUCTURE
   ============================================================================ */

.slot-layout,
.nested-slot-layout {
  display: grid;
  /* Priority: CSS-defined (--cols) > JS auto-calc (--dynamic-cols) > default (--cols-xs) */
  grid-template-columns: repeat(var(--cols, var(--dynamic-cols, var(--cols-xs))), 1fr);
  gap: var(--grid-gap);
}

/* ============================================================================
   GAP/DENSITY CONTROL (Data Attribute API)
   ============================================================================ */

.slot-layout[data-gap="compact"],
.nested-slot-layout[data-gap="compact"] {
  --grid-gap: 0.5rem;
}

.slot-layout[data-gap="normal"],
.nested-slot-layout[data-gap="normal"] {
  --grid-gap: 1rem;
}

.slot-layout[data-gap="comfortable"],
.nested-slot-layout[data-gap="comfortable"] {
  --grid-gap: 1.5rem;
}

.slot-layout[data-gap="spacious"],
.nested-slot-layout[data-gap="spacious"] {
  --grid-gap: 2rem;
}

/* Custom gap values (e.g., data-gap="2.5rem") */
.slot-layout[data-gap],
.nested-slot-layout[data-gap] {
  gap: attr(data-gap length, var(--grid-gap));
}

/* ============================================================================
   AUTO-FIT / AUTO-FILL WITH MINMAX (CSS Grid Native Feature)
   ============================================================================ */

/**
 * AUTO-FIT: Creates as many columns as will fit, collapsing empty tracks
 * AUTO-FILL: Creates as many columns as will fit, keeping empty tracks
 *
 * Usage:
 * <div class="slot-layout" data-auto-fit="250px">
 *   <!-- Automatically creates columns that are at least 250px wide -->
 * </div>
 *
 * Common Presets (150px, 200px, 250px, 300px, 350px, 400px):
 * - data-auto-fit="150px"  - Minimum 150px columns, auto-fit
 * - data-auto-fit="200px"  - Minimum 200px columns, auto-fit
 * - data-auto-fit="250px"  - Minimum 250px columns, auto-fit (recommended)
 * - data-auto-fit="300px"  - Minimum 300px columns, auto-fit
 * - data-auto-fit="350px"  - Minimum 350px columns, auto-fit
 * - data-auto-fit="400px"  - Minimum 400px columns, auto-fit
 *
 * - data-auto-fill="250px" - Same as auto-fit but keeps empty columns
 *
 * Custom Values:
 * For custom min/max values, set CSS variables directly:
 * <div class="slot-layout" style="--min-col-width: 280px; --max-col-width: 1fr">
 *   Or in CSS:
 *   .my-grid { --min-col-width: 280px; --max-col-width: 500px; }
 * </div>
 */

/* AUTO-FIT Presets */
.slot-layout[data-auto-fit="150px"],
.nested-slot-layout[data-auto-fit="150px"] {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.slot-layout[data-auto-fit="200px"],
.nested-slot-layout[data-auto-fit="200px"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.slot-layout[data-auto-fit="250px"],
.nested-slot-layout[data-auto-fit="250px"] {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.slot-layout[data-auto-fit="300px"],
.nested-slot-layout[data-auto-fit="300px"] {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.slot-layout[data-auto-fit="350px"],
.nested-slot-layout[data-auto-fit="350px"] {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.slot-layout[data-auto-fit="400px"],
.nested-slot-layout[data-auto-fit="400px"] {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* AUTO-FILL Presets */
.slot-layout[data-auto-fill="150px"],
.nested-slot-layout[data-auto-fill="150px"] {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.slot-layout[data-auto-fill="200px"],
.nested-slot-layout[data-auto-fill="200px"] {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.slot-layout[data-auto-fill="250px"],
.nested-slot-layout[data-auto-fill="250px"] {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.slot-layout[data-auto-fill="300px"],
.nested-slot-layout[data-auto-fill="300px"] {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.slot-layout[data-auto-fill="350px"],
.nested-slot-layout[data-auto-fill="350px"] {
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.slot-layout[data-auto-fill="400px"],
.nested-slot-layout[data-auto-fill="400px"] {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

/* Custom min/max via CSS variables */
.slot-layout[style*="--min-col-width"],
.nested-slot-layout[style*="--min-col-width"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width, 250px), var(--max-col-width, 1fr)));
}

/* ============================================================================
   CSS SUBGRID SUPPORT - Align nested grids with parent grid tracks
   ============================================================================ */

/**
 * CSS Subgrid allows nested grids to inherit parent grid tracks for perfect alignment.
 *
 * USE CASES:
 * - Card grids where headers/images/prices/buttons align across all cards
 * - Complex forms where nested fieldsets share label/input alignment
 * - Dashboard layouts where widget contents align across the grid
 * - Table-like layouts without using actual tables
 *
 * USAGE - Row Subgrid (Most Common - for cards/widgets):
 *
 * <div class="slot-layout" data-cols-xs="1" data-cols-md="3" data-auto-rows="auto">
 *   <div class="slot-item card" data-subgrid="rows" data-row-span="4">
 *     <div class="card-image">...</div>
 *     <div class="card-header">...</div>
 *     <div class="card-body">...</div>
 *     <div class="card-footer">...</div>
 *   </div>
 * </div>
 *
 * Key attributes:
 * - data-auto-rows="auto" on parent (enables auto row sizing)
 * - data-subgrid="rows" on child (inherits parent's row tracks)
 * - data-row-span="4" on child (spans 4 rows for 4 sections)
 *
 * USAGE - Column Subgrid:
 *
 * <div class="nested-slot-layout" data-subgrid="columns">
 *   <div class="nested-slot-item">Item 1</div>
 *   <div class="nested-slot-item">Item 2</div>
 * </div>
 *
 * USAGE - Both Axes:
 *
 * <div class="nested-slot-layout" data-subgrid="both">
 *   <div class="nested-slot-item">...</div>
 * </div>
 *
 * See docs/layout/subgrid.html for complete examples and documentation.
 *
 * BROWSER SUPPORT: All modern browsers (Chrome 117+, Firefox 71+, Safari 16+, Edge 117+)
 */

/* Parent grid with auto rows (needed for row subgrid to work properly) */
.slot-layout[data-auto-rows="auto"],
.nested-slot-layout[data-auto-rows="auto"] {
  grid-auto-rows: auto;
}

/* Subgrid on columns - Inherits parent's column tracks */
.slot-item[data-subgrid="columns"],
.nested-slot-layout[data-subgrid="columns"] {
  display: grid;
  grid-template-columns: subgrid;
}

/* Subgrid on rows - Inherits parent's row tracks */
.slot-item[data-subgrid="rows"],
.nested-slot-layout[data-subgrid="rows"] {
  display: grid;
  grid-template-rows: subgrid;
}

/* Subgrid on both axes - Inherits both column and row tracks */
.slot-item[data-subgrid="both"],
.nested-slot-layout[data-subgrid="both"] {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

/* When slot-item becomes a subgrid container, it needs to be a grid itself */
.slot-item[data-subgrid] {
  display: grid;
}

/* Row span support for subgrid items (for card/widget alignment) */
.slot-item[data-row-span="2"] { grid-row: span 2; }
.slot-item[data-row-span="3"] { grid-row: span 3; }
.slot-item[data-row-span="4"] { grid-row: span 4; }
.slot-item[data-row-span="5"] { grid-row: span 5; }
.slot-item[data-row-span="6"] { grid-row: span 6; }

.nested-slot-layout[data-row-span="2"] { grid-row: span 2; }
.nested-slot-layout[data-row-span="3"] { grid-row: span 3; }
.nested-slot-layout[data-row-span="4"] { grid-row: span 4; }
.nested-slot-layout[data-row-span="5"] { grid-row: span 5; }
.nested-slot-layout[data-row-span="6"] { grid-row: span 6; }

/* ============================================================================
   RESPONSIVE COLUMN COUNTS - XS (MOBILE FIRST)
   Base: 0-576px
   ============================================================================ */

/* XS Column Counts (1-12) */
.slot-layout[data-cols-xs="1"], .nested-slot-layout[data-cols-xs="1"] { --cols: 1; }
.slot-layout[data-cols-xs="2"], .nested-slot-layout[data-cols-xs="2"] { --cols: 2; }
.slot-layout[data-cols-xs="3"], .nested-slot-layout[data-cols-xs="3"] { --cols: 3; }
.slot-layout[data-cols-xs="4"], .nested-slot-layout[data-cols-xs="4"] { --cols: 4; }
.slot-layout[data-cols-xs="5"], .nested-slot-layout[data-cols-xs="5"] { --cols: 5; }
.slot-layout[data-cols-xs="6"], .nested-slot-layout[data-cols-xs="6"] { --cols: 6; }
.slot-layout[data-cols-xs="7"], .nested-slot-layout[data-cols-xs="7"] { --cols: 7; }
.slot-layout[data-cols-xs="8"], .nested-slot-layout[data-cols-xs="8"] { --cols: 8; }
.slot-layout[data-cols-xs="9"], .nested-slot-layout[data-cols-xs="9"] { --cols: 9; }
.slot-layout[data-cols-xs="10"], .nested-slot-layout[data-cols-xs="10"] { --cols: 10; }
.slot-layout[data-cols-xs="11"], .nested-slot-layout[data-cols-xs="11"] { --cols: 11; }
.slot-layout[data-cols-xs="12"], .nested-slot-layout[data-cols-xs="12"] { --cols: 12; }

/* ============================================================================
   RESPONSIVE COLUMN COUNTS - SM (LARGE MOBILE/SMALL TABLET)
   Breakpoint: ≥ 577px
   Cascades from XS if not explicitly set
   ============================================================================ */

@media (min-width: 577px) {
  /* SM inherits from XS by default via --cols variable */
  /* Only override if data-cols-sm is explicitly set */
  .slot-layout[data-cols-sm="1"], .nested-slot-layout[data-cols-sm="1"] { --cols: 1; }
  .slot-layout[data-cols-sm="2"], .nested-slot-layout[data-cols-sm="2"] { --cols: 2; }
  .slot-layout[data-cols-sm="3"], .nested-slot-layout[data-cols-sm="3"] { --cols: 3; }
  .slot-layout[data-cols-sm="4"], .nested-slot-layout[data-cols-sm="4"] { --cols: 4; }
  .slot-layout[data-cols-sm="5"], .nested-slot-layout[data-cols-sm="5"] { --cols: 5; }
  .slot-layout[data-cols-sm="6"], .nested-slot-layout[data-cols-sm="6"] { --cols: 6; }
  .slot-layout[data-cols-sm="7"], .nested-slot-layout[data-cols-sm="7"] { --cols: 7; }
  .slot-layout[data-cols-sm="8"], .nested-slot-layout[data-cols-sm="8"] { --cols: 8; }
  .slot-layout[data-cols-sm="9"], .nested-slot-layout[data-cols-sm="9"] { --cols: 9; }
  .slot-layout[data-cols-sm="10"], .nested-slot-layout[data-cols-sm="10"] { --cols: 10; }
  .slot-layout[data-cols-sm="11"], .nested-slot-layout[data-cols-sm="11"] { --cols: 11; }
  .slot-layout[data-cols-sm="12"], .nested-slot-layout[data-cols-sm="12"] { --cols: 12; }

  /* Update fallback for layouts without any data-cols-* attributes */
  .slot-layout:not([data-cols-xs]):not([data-cols-sm]):not([data-cols-md]):not([data-cols-lg]):not([data-cols-xl]):not([data-cols-xxl]),
  .nested-slot-layout:not([data-cols-xs]):not([data-cols-sm]):not([data-cols-md]):not([data-cols-lg]):not([data-cols-xl]):not([data-cols-xxl]) {
    --cols: var(--cols-sm);
  }
}

/* ============================================================================
   RESPONSIVE COLUMN COUNTS - MD (TABLET)
   Breakpoint: ≥ 769px
   Cascades from SM/XS if not explicitly set
   ============================================================================ */

@media (min-width: 769px) {
  .slot-layout[data-cols-md="1"], .nested-slot-layout[data-cols-md="1"] { --cols: 1; }
  .slot-layout[data-cols-md="2"], .nested-slot-layout[data-cols-md="2"] { --cols: 2; }
  .slot-layout[data-cols-md="3"], .nested-slot-layout[data-cols-md="3"] { --cols: 3; }
  .slot-layout[data-cols-md="4"], .nested-slot-layout[data-cols-md="4"] { --cols: 4; }
  .slot-layout[data-cols-md="5"], .nested-slot-layout[data-cols-md="5"] { --cols: 5; }
  .slot-layout[data-cols-md="6"], .nested-slot-layout[data-cols-md="6"] { --cols: 6; }
  .slot-layout[data-cols-md="7"], .nested-slot-layout[data-cols-md="7"] { --cols: 7; }
  .slot-layout[data-cols-md="8"], .nested-slot-layout[data-cols-md="8"] { --cols: 8; }
  .slot-layout[data-cols-md="9"], .nested-slot-layout[data-cols-md="9"] { --cols: 9; }
  .slot-layout[data-cols-md="10"], .nested-slot-layout[data-cols-md="10"] { --cols: 10; }
  .slot-layout[data-cols-md="11"], .nested-slot-layout[data-cols-md="11"] { --cols: 11; }
  .slot-layout[data-cols-md="12"], .nested-slot-layout[data-cols-md="12"] { --cols: 12; }

  .slot-layout:not([data-cols-xs]):not([data-cols-sm]):not([data-cols-md]):not([data-cols-lg]):not([data-cols-xl]):not([data-cols-xxl]),
  .nested-slot-layout:not([data-cols-xs]):not([data-cols-sm]):not([data-cols-md]):not([data-cols-lg]):not([data-cols-xl]):not([data-cols-xxl]) {
    --cols: var(--cols-md);
  }
}

/* ============================================================================
   RESPONSIVE COLUMN COUNTS - LG (SMALL DESKTOP)
   Breakpoint: ≥ 993px
   Cascades from MD/SM/XS if not explicitly set
   ============================================================================ */

@media (min-width: 993px) {
  .slot-layout[data-cols-lg="1"], .nested-slot-layout[data-cols-lg="1"] { --cols: 1; }
  .slot-layout[data-cols-lg="2"], .nested-slot-layout[data-cols-lg="2"] { --cols: 2; }
  .slot-layout[data-cols-lg="3"], .nested-slot-layout[data-cols-lg="3"] { --cols: 3; }
  .slot-layout[data-cols-lg="4"], .nested-slot-layout[data-cols-lg="4"] { --cols: 4; }
  .slot-layout[data-cols-lg="5"], .nested-slot-layout[data-cols-lg="5"] { --cols: 5; }
  .slot-layout[data-cols-lg="6"], .nested-slot-layout[data-cols-lg="6"] { --cols: 6; }
  .slot-layout[data-cols-lg="7"], .nested-slot-layout[data-cols-lg="7"] { --cols: 7; }
  .slot-layout[data-cols-lg="8"], .nested-slot-layout[data-cols-lg="8"] { --cols: 8; }
  .slot-layout[data-cols-lg="9"], .nested-slot-layout[data-cols-lg="9"] { --cols: 9; }
  .slot-layout[data-cols-lg="10"], .nested-slot-layout[data-cols-lg="10"] { --cols: 10; }
  .slot-layout[data-cols-lg="11"], .nested-slot-layout[data-cols-lg="11"] { --cols: 11; }
  .slot-layout[data-cols-lg="12"], .nested-slot-layout[data-cols-lg="12"] { --cols: 12; }

  .slot-layout:not([data-cols-xs]):not([data-cols-sm]):not([data-cols-md]):not([data-cols-lg]):not([data-cols-xl]):not([data-cols-xxl]),
  .nested-slot-layout:not([data-cols-xs]):not([data-cols-sm]):not([data-cols-md]):not([data-cols-lg]):not([data-cols-xl]):not([data-cols-xxl]) {
    --cols: var(--cols-lg);
  }
}

/* ============================================================================
   RESPONSIVE COLUMN COUNTS - XL (DESKTOP)
   Breakpoint: ≥ 1201px
   Cascades from LG/MD/SM/XS if not explicitly set
   ============================================================================ */

@media (min-width: 1201px) {
  .slot-layout[data-cols-xl="1"], .nested-slot-layout[data-cols-xl="1"] { --cols: 1; }
  .slot-layout[data-cols-xl="2"], .nested-slot-layout[data-cols-xl="2"] { --cols: 2; }
  .slot-layout[data-cols-xl="3"], .nested-slot-layout[data-cols-xl="3"] { --cols: 3; }
  .slot-layout[data-cols-xl="4"], .nested-slot-layout[data-cols-xl="4"] { --cols: 4; }
  .slot-layout[data-cols-xl="5"], .nested-slot-layout[data-cols-xl="5"] { --cols: 5; }
  .slot-layout[data-cols-xl="6"], .nested-slot-layout[data-cols-xl="6"] { --cols: 6; }
  .slot-layout[data-cols-xl="7"], .nested-slot-layout[data-cols-xl="7"] { --cols: 7; }
  .slot-layout[data-cols-xl="8"], .nested-slot-layout[data-cols-xl="8"] { --cols: 8; }
  .slot-layout[data-cols-xl="9"], .nested-slot-layout[data-cols-xl="9"] { --cols: 9; }
  .slot-layout[data-cols-xl="10"], .nested-slot-layout[data-cols-xl="10"] { --cols: 10; }
  .slot-layout[data-cols-xl="11"], .nested-slot-layout[data-cols-xl="11"] { --cols: 11; }
  .slot-layout[data-cols-xl="12"], .nested-slot-layout[data-cols-xl="12"] { --cols: 12; }

  .slot-layout:not([data-cols-xs]):not([data-cols-sm]):not([data-cols-md]):not([data-cols-lg]):not([data-cols-xl]):not([data-cols-xxl]),
  .nested-slot-layout:not([data-cols-xs]):not([data-cols-sm]):not([data-cols-md]):not([data-cols-lg]):not([data-cols-xl]):not([data-cols-xxl]) {
    --cols: var(--cols-xl);
  }
}

/* ============================================================================
   RESPONSIVE COLUMN COUNTS - XXL (LARGE DESKTOP)
   Breakpoint: ≥ 1601px
   Cascades from XL/LG/MD/SM/XS if not explicitly set
   ============================================================================ */

@media (min-width: 1601px) {
  .slot-layout[data-cols-xxl="1"], .nested-slot-layout[data-cols-xxl="1"] { --cols: 1; }
  .slot-layout[data-cols-xxl="2"], .nested-slot-layout[data-cols-xxl="2"] { --cols: 2; }
  .slot-layout[data-cols-xxl="3"], .nested-slot-layout[data-cols-xxl="3"] { --cols: 3; }
  .slot-layout[data-cols-xxl="4"], .nested-slot-layout[data-cols-xxl="4"] { --cols: 4; }
  .slot-layout[data-cols-xxl="5"], .nested-slot-layout[data-cols-xxl="5"] { --cols: 5; }
  .slot-layout[data-cols-xxl="6"], .nested-slot-layout[data-cols-xxl="6"] { --cols: 6; }
  .slot-layout[data-cols-xxl="7"], .nested-slot-layout[data-cols-xxl="7"] { --cols: 7; }
  .slot-layout[data-cols-xxl="8"], .nested-slot-layout[data-cols-xxl="8"] { --cols: 8; }
  .slot-layout[data-cols-xxl="9"], .nested-slot-layout[data-cols-xxl="9"] { --cols: 9; }
  .slot-layout[data-cols-xxl="10"], .nested-slot-layout[data-cols-xxl="10"] { --cols: 10; }
  .slot-layout[data-cols-xxl="11"], .nested-slot-layout[data-cols-xxl="11"] { --cols: 11; }
  .slot-layout[data-cols-xxl="12"], .nested-slot-layout[data-cols-xxl="12"] { --cols: 12; }

  .slot-layout:not([data-cols-xs]):not([data-cols-sm]):not([data-cols-md]):not([data-cols-lg]):not([data-cols-xl]):not([data-cols-xxl]),
  .nested-slot-layout:not([data-cols-xs]):not([data-cols-sm]):not([data-cols-md]):not([data-cols-lg]):not([data-cols-xl]):not([data-cols-xxl]) {
    --cols: var(--cols-xxl);
  }
}

/* ============================================================================
   SLOT ITEM POSITIONING & SPANNING
   ============================================================================ */

.slot-item,
.nested-slot-item {
  grid-row-start: var(--row-start, auto);
  grid-column-start: var(--column-start, auto);
  grid-row-end: var(--row-end, auto);
  grid-column-end: var(--column-end, auto);
}

/* ============================================================================
   RESPONSIVE COLUMN SPANNING - XS (MOBILE)
   Base: 0-576px
   ============================================================================ */

/* XS Spans (1-12) */
.slot-item[data-span-xs="1"] { grid-column: span 1; }
.slot-item[data-span-xs="2"] { grid-column: span 2; }
.slot-item[data-span-xs="3"] { grid-column: span 3; }
.slot-item[data-span-xs="4"] { grid-column: span 4; }
.slot-item[data-span-xs="5"] { grid-column: span 5; }
.slot-item[data-span-xs="6"] { grid-column: span 6; }
.slot-item[data-span-xs="7"] { grid-column: span 7; }
.slot-item[data-span-xs="8"] { grid-column: span 8; }
.slot-item[data-span-xs="9"] { grid-column: span 9; }
.slot-item[data-span-xs="10"] { grid-column: span 10; }
.slot-item[data-span-xs="11"] { grid-column: span 11; }
.slot-item[data-span-xs="12"], .slot-item[data-span-xs="all"] { grid-column: 1 / -1; }

/* ============================================================================
   RESPONSIVE COLUMN SPANNING - SM (LARGE MOBILE/SMALL TABLET)
   Breakpoint: ≥ 577px
   ============================================================================ */

@media (min-width: 577px) {
  .slot-item[data-span-sm="1"] { grid-column: span 1; }
  .slot-item[data-span-sm="2"] { grid-column: span 2; }
  .slot-item[data-span-sm="3"] { grid-column: span 3; }
  .slot-item[data-span-sm="4"] { grid-column: span 4; }
  .slot-item[data-span-sm="5"] { grid-column: span 5; }
  .slot-item[data-span-sm="6"] { grid-column: span 6; }
  .slot-item[data-span-sm="7"] { grid-column: span 7; }
  .slot-item[data-span-sm="8"] { grid-column: span 8; }
  .slot-item[data-span-sm="9"] { grid-column: span 9; }
  .slot-item[data-span-sm="10"] { grid-column: span 10; }
  .slot-item[data-span-sm="11"] { grid-column: span 11; }
  .slot-item[data-span-sm="12"], .slot-item[data-span-sm="all"] { grid-column: 1 / -1; }
}

/* ============================================================================
   RESPONSIVE COLUMN SPANNING - MD (TABLET)
   Breakpoint: ≥ 769px
   ============================================================================ */

@media (min-width: 769px) {
  .slot-item[data-span-md="1"] { grid-column: span 1; }
  .slot-item[data-span-md="2"] { grid-column: span 2; }
  .slot-item[data-span-md="3"] { grid-column: span 3; }
  .slot-item[data-span-md="4"] { grid-column: span 4; }
  .slot-item[data-span-md="5"] { grid-column: span 5; }
  .slot-item[data-span-md="6"] { grid-column: span 6; }
  .slot-item[data-span-md="7"] { grid-column: span 7; }
  .slot-item[data-span-md="8"] { grid-column: span 8; }
  .slot-item[data-span-md="9"] { grid-column: span 9; }
  .slot-item[data-span-md="10"] { grid-column: span 10; }
  .slot-item[data-span-md="11"] { grid-column: span 11; }
  .slot-item[data-span-md="12"], .slot-item[data-span-md="all"] { grid-column: 1 / -1; }
}

/* ============================================================================
   RESPONSIVE COLUMN SPANNING - LG (SMALL DESKTOP)
   Breakpoint: ≥ 993px
   ============================================================================ */

@media (min-width: 993px) {
  .slot-item[data-span-lg="1"] { grid-column: span 1; }
  .slot-item[data-span-lg="2"] { grid-column: span 2; }
  .slot-item[data-span-lg="3"] { grid-column: span 3; }
  .slot-item[data-span-lg="4"] { grid-column: span 4; }
  .slot-item[data-span-lg="5"] { grid-column: span 5; }
  .slot-item[data-span-lg="6"] { grid-column: span 6; }
  .slot-item[data-span-lg="7"] { grid-column: span 7; }
  .slot-item[data-span-lg="8"] { grid-column: span 8; }
  .slot-item[data-span-lg="9"] { grid-column: span 9; }
  .slot-item[data-span-lg="10"] { grid-column: span 10; }
  .slot-item[data-span-lg="11"] { grid-column: span 11; }
  .slot-item[data-span-lg="12"], .slot-item[data-span-lg="all"] { grid-column: 1 / -1; }
}

/* ============================================================================
   RESPONSIVE COLUMN SPANNING - XL (DESKTOP)
   Breakpoint: ≥ 1201px
   ============================================================================ */

@media (min-width: 1201px) {
  .slot-item[data-span-xl="1"] { grid-column: span 1; }
  .slot-item[data-span-xl="2"] { grid-column: span 2; }
  .slot-item[data-span-xl="3"] { grid-column: span 3; }
  .slot-item[data-span-xl="4"] { grid-column: span 4; }
  .slot-item[data-span-xl="5"] { grid-column: span 5; }
  .slot-item[data-span-xl="6"] { grid-column: span 6; }
  .slot-item[data-span-xl="7"] { grid-column: span 7; }
  .slot-item[data-span-xl="8"] { grid-column: span 8; }
  .slot-item[data-span-xl="9"] { grid-column: span 9; }
  .slot-item[data-span-xl="10"] { grid-column: span 10; }
  .slot-item[data-span-xl="11"] { grid-column: span 11; }
  .slot-item[data-span-xl="12"], .slot-item[data-span-xl="all"] { grid-column: 1 / -1; }
}

/* ============================================================================
   RESPONSIVE COLUMN SPANNING - XXL (LARGE DESKTOP)
   Breakpoint: ≥ 1601px
   ============================================================================ */

@media (min-width: 1601px) {
  .slot-item[data-span-xxl="1"] { grid-column: span 1; }
  .slot-item[data-span-xxl="2"] { grid-column: span 2; }
  .slot-item[data-span-xxl="3"] { grid-column: span 3; }
  .slot-item[data-span-xxl="4"] { grid-column: span 4; }
  .slot-item[data-span-xxl="5"] { grid-column: span 5; }
  .slot-item[data-span-xxl="6"] { grid-column: span 6; }
  .slot-item[data-span-xxl="7"] { grid-column: span 7; }
  .slot-item[data-span-xxl="8"] { grid-column: span 8; }
  .slot-item[data-span-xxl="9"] { grid-column: span 9; }
  .slot-item[data-span-xxl="10"] { grid-column: span 10; }
  .slot-item[data-span-xxl="11"] { grid-column: span 11; }
  .slot-item[data-span-xxl="12"], .slot-item[data-span-xxl="all"] { grid-column: 1 / -1; }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Force an item to span all columns (helper class) */
.slot-span-all {
  grid-column: 1 / -1;
}

/* Wrapper for nested grids inside a slot */
.slot-item-wrapper {
  display: grid;
  gap: var(--grid-gap);
}

/* ============================================================================
   CONTAINER UTILITIES
   ============================================================================ */

.container {
  margin: 0 auto;
  width: 80%;
  max-width: 1200px;
}

.container-full {
  width: 100%;
  max-width: none;
}

.container-flex {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none;
}

.container-fluid {
  width: 90%;
  margin: 0 auto;
}

/* ============================================================================
   RESPONSIVE IMAGES
   ============================================================================ */

img {
  width: 100%;
}

/* ============================================================================
   SIDEBAR LAYOUT PATTERN (Float-based)
   ============================================================================ */

.rsl-sidebar-layout {
  overflow: hidden; /* Establishes block formatting context */
}

.rsl-sidebar {
  float: left;
  width: 220px;
  margin: 0 1.5rem 1.5rem 0;
}

.rsl-sidebar-content {
  overflow: hidden; /* Creates own BFC, sits next to float */
}

/* Mobile: stack sidebar over content */
@media (max-width: 768px) {
  .rsl-sidebar {
    float: none;
    width: auto;
    margin: 0 0 1rem 0;
  }

  .rsl-sidebar-content {
    overflow: visible;
  }
}

/* ============================================================================
   NAMED GRID AREAS - Predefined Layout Patterns
   ============================================================================ */

/**
 * Named grid areas for complex asymmetric layouts.
 *
 * USAGE:
 *
 * 1. Apply pattern to parent: data-layout-pattern="holy-grail"
 * 2. Assign items to areas: data-area="header", data-area="sidebar", etc.
 * 3. Make responsive: data-layout-pattern-xs="stacked" data-layout-pattern-md="holy-grail"
 *
 * AVAILABLE PATTERNS:
 * - stacked: All items stack vertically (mobile fallback)
 * - holy-grail: Classic header + 3-column + footer
 * - sidebar-left: Header, left nav + content, footer
 * - sidebar-right: Header, content + right nav, footer
 * - app-shell: Navbar, sidebar, main content area
 * - dashboard: Header with multi-zone content grid
 *
 * EXAMPLE:
 * <div class="slot-layout"
 *      data-layout-pattern-xs="stacked"
 *      data-layout-pattern-md="sidebar-left">
 *   <div class="slot-item" data-area="header">Header</div>
 *   <div class="slot-item" data-area="sidebar">Nav</div>
 *   <div class="slot-item" data-area="content">Main</div>
 *   <div class="slot-item" data-area="footer">Footer</div>
 * </div>
 */

/* Base: All patterns need grid display */
.slot-layout[data-layout-pattern],
.slot-layout[data-layout-pattern-xs],
.slot-layout[data-layout-pattern-sm],
.slot-layout[data-layout-pattern-md],
.slot-layout[data-layout-pattern-lg],
.slot-layout[data-layout-pattern-xl],
.slot-layout[data-layout-pattern-xxl] {
  display: grid;
}

/* ============================================================================
   PATTERN: STACKED - All items stack vertically
   ============================================================================ */

.slot-layout[data-layout-pattern="stacked"] {
  grid-template-areas: none;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

.slot-layout[data-layout-pattern="stacked"] .slot-item {
  grid-area: auto;
}

/* ============================================================================
   PATTERN: HOLY GRAIL - Header, 3-column body, footer
   ============================================================================ */

.slot-layout[data-layout-pattern="holy-grail"] {
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: var(--grid-gap, 1rem);
  min-height: 100vh;
}

.slot-layout[data-layout-pattern="holy-grail"] .slot-item[data-area="header"] { grid-area: header; }
.slot-layout[data-layout-pattern="holy-grail"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
.slot-layout[data-layout-pattern="holy-grail"] .slot-item[data-area="content"] { grid-area: content; }
.slot-layout[data-layout-pattern="holy-grail"] .slot-item[data-area="aside"] { grid-area: aside; }
.slot-layout[data-layout-pattern="holy-grail"] .slot-item[data-area="footer"] { grid-area: footer; }

/* ============================================================================
   PATTERN: SIDEBAR LEFT - Header, left nav + content, footer
   ============================================================================ */

.slot-layout[data-layout-pattern="sidebar-left"] {
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: var(--grid-gap, 1rem);
  min-height: 100vh;
}

.slot-layout[data-layout-pattern="sidebar-left"] .slot-item[data-area="header"] { grid-area: header; }
.slot-layout[data-layout-pattern="sidebar-left"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
.slot-layout[data-layout-pattern="sidebar-left"] .slot-item[data-area="content"] { grid-area: content; }
.slot-layout[data-layout-pattern="sidebar-left"] .slot-item[data-area="footer"] { grid-area: footer; }

/* ============================================================================
   PATTERN: SIDEBAR RIGHT - Header, content + right nav, footer
   ============================================================================ */

.slot-layout[data-layout-pattern="sidebar-right"] {
  grid-template-areas:
    "header header"
    "content sidebar"
    "footer footer";
  grid-template-columns: 1fr 250px;
  grid-template-rows: auto 1fr auto;
  gap: var(--grid-gap, 1rem);
  min-height: 100vh;
}

.slot-layout[data-layout-pattern="sidebar-right"] .slot-item[data-area="header"] { grid-area: header; }
.slot-layout[data-layout-pattern="sidebar-right"] .slot-item[data-area="content"] { grid-area: content; }
.slot-layout[data-layout-pattern="sidebar-right"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
.slot-layout[data-layout-pattern="sidebar-right"] .slot-item[data-area="footer"] { grid-area: footer; }

/* ============================================================================
   PATTERN: APP SHELL - Navbar, sidebar, main (common in SPAs)
   ============================================================================ */

.slot-layout[data-layout-pattern="app-shell"] {
  grid-template-areas:
    "navbar navbar"
    "sidebar main";
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  gap: 0;
  min-height: 100vh;
}

.slot-layout[data-layout-pattern="app-shell"] .slot-item[data-area="navbar"] { grid-area: navbar; }
.slot-layout[data-layout-pattern="app-shell"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
.slot-layout[data-layout-pattern="app-shell"] .slot-item[data-area="main"] { grid-area: main; }

/* ============================================================================
   PATTERN: DASHBOARD - Header with multi-zone content
   ============================================================================ */

.slot-layout[data-layout-pattern="dashboard"] {
  grid-template-areas:
    "header header header"
    "zone1 zone2 zone3"
    "zone4 zone4 zone5";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr;
  gap: var(--grid-gap, 1rem);
  min-height: 100vh;
}

.slot-layout[data-layout-pattern="dashboard"] .slot-item[data-area="header"] { grid-area: header; }
.slot-layout[data-layout-pattern="dashboard"] .slot-item[data-area="zone1"] { grid-area: zone1; }
.slot-layout[data-layout-pattern="dashboard"] .slot-item[data-area="zone2"] { grid-area: zone2; }
.slot-layout[data-layout-pattern="dashboard"] .slot-item[data-area="zone3"] { grid-area: zone3; }
.slot-layout[data-layout-pattern="dashboard"] .slot-item[data-area="zone4"] { grid-area: zone4; }
.slot-layout[data-layout-pattern="dashboard"] .slot-item[data-area="zone5"] { grid-area: zone5; }

/* ============================================================================
   RESPONSIVE LAYOUT PATTERNS - XS (Mobile First)
   Base: 0-576px
   ============================================================================ */

.slot-layout[data-layout-pattern-xs="stacked"] {
  grid-template-areas: none;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

.slot-layout[data-layout-pattern-xs="stacked"] .slot-item {
  grid-area: auto;
}

/* XS Holy Grail */
.slot-layout[data-layout-pattern-xs="holy-grail"] {
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

.slot-layout[data-layout-pattern-xs="holy-grail"] .slot-item[data-area="header"] { grid-area: header; }
.slot-layout[data-layout-pattern-xs="holy-grail"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
.slot-layout[data-layout-pattern-xs="holy-grail"] .slot-item[data-area="content"] { grid-area: content; }
.slot-layout[data-layout-pattern-xs="holy-grail"] .slot-item[data-area="aside"] { grid-area: aside; }
.slot-layout[data-layout-pattern-xs="holy-grail"] .slot-item[data-area="footer"] { grid-area: footer; }

/* XS Sidebar Left */
.slot-layout[data-layout-pattern-xs="sidebar-left"] {
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

.slot-layout[data-layout-pattern-xs="sidebar-left"] .slot-item[data-area="header"] { grid-area: header; }
.slot-layout[data-layout-pattern-xs="sidebar-left"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
.slot-layout[data-layout-pattern-xs="sidebar-left"] .slot-item[data-area="content"] { grid-area: content; }
.slot-layout[data-layout-pattern-xs="sidebar-left"] .slot-item[data-area="footer"] { grid-area: footer; }

/* ============================================================================
   RESPONSIVE LAYOUT PATTERNS - SM
   Breakpoint: ≥ 577px
   ============================================================================ */

@media (min-width: 577px) {
  .slot-layout[data-layout-pattern-sm="stacked"] {
    grid-template-areas: none;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .slot-layout[data-layout-pattern-sm="stacked"] .slot-item {
    grid-area: auto;
  }

  .slot-layout[data-layout-pattern-sm="holy-grail"] {
    grid-template-areas:
      "header header header"
      "sidebar content aside"
      "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
  }

  .slot-layout[data-layout-pattern-sm="holy-grail"] .slot-item[data-area="header"] { grid-area: header; }
  .slot-layout[data-layout-pattern-sm="holy-grail"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
  .slot-layout[data-layout-pattern-sm="holy-grail"] .slot-item[data-area="content"] { grid-area: content; }
  .slot-layout[data-layout-pattern-sm="holy-grail"] .slot-item[data-area="aside"] { grid-area: aside; }
  .slot-layout[data-layout-pattern-sm="holy-grail"] .slot-item[data-area="footer"] { grid-area: footer; }

  .slot-layout[data-layout-pattern-sm="sidebar-left"] {
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .slot-layout[data-layout-pattern-sm="sidebar-left"] .slot-item[data-area="header"] { grid-area: header; }
  .slot-layout[data-layout-pattern-sm="sidebar-left"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
  .slot-layout[data-layout-pattern-sm="sidebar-left"] .slot-item[data-area="content"] { grid-area: content; }
  .slot-layout[data-layout-pattern-sm="sidebar-left"] .slot-item[data-area="footer"] { grid-area: footer; }
}

/* ============================================================================
   RESPONSIVE LAYOUT PATTERNS - MD
   Breakpoint: ≥ 769px
   ============================================================================ */

@media (min-width: 769px) {
  .slot-layout[data-layout-pattern-md="stacked"] {
    grid-template-areas: none;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .slot-layout[data-layout-pattern-md="stacked"] .slot-item {
    grid-area: auto;
  }

  .slot-layout[data-layout-pattern-md="holy-grail"] {
    grid-template-areas:
      "header header header"
      "sidebar content aside"
      "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
  }

  .slot-layout[data-layout-pattern-md="holy-grail"] .slot-item[data-area="header"] { grid-area: header; }
  .slot-layout[data-layout-pattern-md="holy-grail"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
  .slot-layout[data-layout-pattern-md="holy-grail"] .slot-item[data-area="content"] { grid-area: content; }
  .slot-layout[data-layout-pattern-md="holy-grail"] .slot-item[data-area="aside"] { grid-area: aside; }
  .slot-layout[data-layout-pattern-md="holy-grail"] .slot-item[data-area="footer"] { grid-area: footer; }

  .slot-layout[data-layout-pattern-md="sidebar-left"] {
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .slot-layout[data-layout-pattern-md="sidebar-left"] .slot-item[data-area="header"] { grid-area: header; }
  .slot-layout[data-layout-pattern-md="sidebar-left"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
  .slot-layout[data-layout-pattern-md="sidebar-left"] .slot-item[data-area="content"] { grid-area: content; }
  .slot-layout[data-layout-pattern-md="sidebar-left"] .slot-item[data-area="footer"] { grid-area: footer; }

  .slot-layout[data-layout-pattern-md="sidebar-right"] {
    grid-template-areas:
      "header header"
      "content sidebar"
      "footer footer";
    grid-template-columns: 1fr 250px;
    grid-template-rows: auto 1fr auto;
  }

  .slot-layout[data-layout-pattern-md="sidebar-right"] .slot-item[data-area="header"] { grid-area: header; }
  .slot-layout[data-layout-pattern-md="sidebar-right"] .slot-item[data-area="content"] { grid-area: content; }
  .slot-layout[data-layout-pattern-md="sidebar-right"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
  .slot-layout[data-layout-pattern-md="sidebar-right"] .slot-item[data-area="footer"] { grid-area: footer; }

  .slot-layout[data-layout-pattern-md="app-shell"] {
    grid-template-areas:
      "navbar navbar"
      "sidebar main";
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr;
  }

  .slot-layout[data-layout-pattern-md="app-shell"] .slot-item[data-area="navbar"] { grid-area: navbar; }
  .slot-layout[data-layout-pattern-md="app-shell"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
  .slot-layout[data-layout-pattern-md="app-shell"] .slot-item[data-area="main"] { grid-area: main; }

  .slot-layout[data-layout-pattern-md="dashboard"] {
    grid-template-areas:
      "header header header"
      "zone1 zone2 zone3"
      "zone4 zone4 zone5";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 80px 1fr 1fr;
  }

  .slot-layout[data-layout-pattern-md="dashboard"] .slot-item[data-area="header"] { grid-area: header; }
  .slot-layout[data-layout-pattern-md="dashboard"] .slot-item[data-area="zone1"] { grid-area: zone1; }
  .slot-layout[data-layout-pattern-md="dashboard"] .slot-item[data-area="zone2"] { grid-area: zone2; }
  .slot-layout[data-layout-pattern-md="dashboard"] .slot-item[data-area="zone3"] { grid-area: zone3; }
  .slot-layout[data-layout-pattern-md="dashboard"] .slot-item[data-area="zone4"] { grid-area: zone4; }
  .slot-layout[data-layout-pattern-md="dashboard"] .slot-item[data-area="zone5"] { grid-area: zone5; }
}

/* ============================================================================
   RESPONSIVE LAYOUT PATTERNS - LG, XL, XXL
   Additional breakpoints follow same pattern as MD
   ============================================================================ */

@media (min-width: 993px) {
  .slot-layout[data-layout-pattern-lg="stacked"] {
    grid-template-areas: none;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .slot-layout[data-layout-pattern-lg="stacked"] .slot-item {
    grid-area: auto;
  }

  .slot-layout[data-layout-pattern-lg="holy-grail"] {
    grid-template-areas:
      "header header header"
      "sidebar content aside"
      "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
  }

  .slot-layout[data-layout-pattern-lg="holy-grail"] .slot-item[data-area="header"] { grid-area: header; }
  .slot-layout[data-layout-pattern-lg="holy-grail"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
  .slot-layout[data-layout-pattern-lg="holy-grail"] .slot-item[data-area="content"] { grid-area: content; }
  .slot-layout[data-layout-pattern-lg="holy-grail"] .slot-item[data-area="aside"] { grid-area: aside; }
  .slot-layout[data-layout-pattern-lg="holy-grail"] .slot-item[data-area="footer"] { grid-area: footer; }

  .slot-layout[data-layout-pattern-lg="sidebar-left"] {
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .slot-layout[data-layout-pattern-lg="sidebar-left"] .slot-item[data-area="header"] { grid-area: header; }
  .slot-layout[data-layout-pattern-lg="sidebar-left"] .slot-item[data-area="sidebar"] { grid-area: sidebar; }
  .slot-layout[data-layout-pattern-lg="sidebar-left"] .slot-item[data-area="content"] { grid-area: content; }
  .slot-layout[data-layout-pattern-lg="sidebar-left"] .slot-item[data-area="footer"] { grid-area: footer; }

  .slot-layout[data-layout-pattern-lg="dashboard"] {
    grid-template-areas:
      "header header header"
      "zone1 zone2 zone3"
      "zone4 zone4 zone5";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 80px 1fr 1fr;
  }

  .slot-layout[data-layout-pattern-lg="dashboard"] .slot-item[data-area="header"] { grid-area: header; }
  .slot-layout[data-layout-pattern-lg="dashboard"] .slot-item[data-area="zone1"] { grid-area: zone1; }
  .slot-layout[data-layout-pattern-lg="dashboard"] .slot-item[data-area="zone2"] { grid-area: zone2; }
  .slot-layout[data-layout-pattern-lg="dashboard"] .slot-item[data-area="zone3"] { grid-area: zone3; }
  .slot-layout[data-layout-pattern-lg="dashboard"] .slot-item[data-area="zone4"] { grid-area: zone4; }
  .slot-layout[data-layout-pattern-lg="dashboard"] .slot-item[data-area="zone5"] { grid-area: zone5; }
}