/*
 * File: css/layout/grids.css
 * Logic: wsdt-grid-N layout system — structure only, zero visuals.
 * Levels: page/region wraps (A) + grid-N + direction + width + col-span (B).
 * Breakpoints: mobile-first, tablet @768px (--bp-tablet).
 */

/* --------------------------------------------------------------------------
   Level A — page skeleton
   -------------------------------------------------------------------------- */

.wsdt-page-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.wsdt-grid-1.wsdt-page-wrapper {
  gap: 0;
}

.wsdt-region-wrap {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Width modifiers
   -------------------------------------------------------------------------- */

.wsdt-fullwidth {
  width: 100%;
}

.wsdt-contained {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Grid base — shared by wsdt-grid-1 … wsdt-grid-5
   -------------------------------------------------------------------------- */

.wsdt-grid-1,
.wsdt-grid-2,
.wsdt-grid-3,
.wsdt-grid-4,
.wsdt-grid-5,
.wsdt-grid-6,
.wsdt-grid-auto {
  display: grid;
  gap: var(--grid-gap, var(--space-md));
}

.wsdt-grid-1 > *,
.wsdt-grid-2 > *,
.wsdt-grid-3 > *,
.wsdt-grid-4 > *,
.wsdt-grid-5 > *,
.wsdt-grid-6 > * {
  min-width: 0;
}

/* grid-1 — always single column */
.wsdt-grid-1 {
  grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   grid-auto — fluid auto-fit (dynamic column count, zero media queries)
   -------------------------------------------------------------------------- */

.wsdt-grid-auto {
  --grid-col-min: 300px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-col-min)), 1fr));
}

.wsdt-grid-auto > * {
  min-width: 0;
}

/* Optional min-track modifiers (no inline styles) */
.wsdt-grid-auto.wsdt-grid-auto-min-240 {
  --grid-col-min: 240px;
}

.wsdt-grid-auto.wsdt-grid-auto-min-280 {
  --grid-col-min: 280px;
}

.wsdt-grid-auto.wsdt-grid-auto-min-320 {
  --grid-col-min: 320px;
}

/* --------------------------------------------------------------------------
   grid-2 — direction modifiers
   -------------------------------------------------------------------------- */

.wsdt-grid-2.wsdt-grid-vertical {
  grid-template-columns: 1fr;
}

.wsdt-grid-2.wsdt-grid-horizontal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wsdt-grid-2.wsdt-grid-hv {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .wsdt-grid-2.wsdt-grid-hv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   grid-3
   -------------------------------------------------------------------------- */

.wsdt-grid-3.wsdt-grid-vertical {
  grid-template-columns: 1fr;
}

.wsdt-grid-3.wsdt-grid-horizontal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wsdt-grid-3.wsdt-grid-hv {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .wsdt-grid-3.wsdt-grid-hv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   grid-4
   -------------------------------------------------------------------------- */

.wsdt-grid-4.wsdt-grid-vertical {
  grid-template-columns: 1fr;
}

.wsdt-grid-4.wsdt-grid-horizontal {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wsdt-grid-4.wsdt-grid-hv {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .wsdt-grid-4.wsdt-grid-hv {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   grid-5
   -------------------------------------------------------------------------- */

.wsdt-grid-5.wsdt-grid-vertical {
  grid-template-columns: 1fr;
}

.wsdt-grid-5.wsdt-grid-horizontal {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wsdt-grid-5.wsdt-grid-hv {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .wsdt-grid-5.wsdt-grid-hv {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   grid-6
   -------------------------------------------------------------------------- */

.wsdt-grid-6.wsdt-grid-vertical {
  grid-template-columns: 1fr;
}

.wsdt-grid-6.wsdt-grid-horizontal {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.wsdt-grid-6.wsdt-grid-hv {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .wsdt-grid-6.wsdt-grid-hv {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Column spans (track-based, not %)
   -------------------------------------------------------------------------- */

.wsdt-col-span-2 {
  grid-column: span 2;
}

.wsdt-col-span-3 {
  grid-column: span 3;
}

.wsdt-col-span-full {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Main content — sidebar layout (main-region)
   -------------------------------------------------------------------------- */

.wsdt-content-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
  width: 100%;
}

@media (min-width: 1024px) {
  .wsdt-content-grid.has-sidebar-left {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .wsdt-content-grid.has-sidebar-right {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  }

  .wsdt-content-grid.has-sidebar-left.has-sidebar-right {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width);
  }
}

/* --------------------------------------------------------------------------
   Hero region — multi-block split (ctasplit + slideshow)
   -------------------------------------------------------------------------- */

.wsdt-grid-hero-split {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  overflow: hidden;
}

.wsdt-grid-hero-split:has(> :nth-child(2)) {
  gap: var(--space-md);
}

@media (max-width: 1023px) {
  .wsdt-grid-hero-split:has(> :nth-child(2)) > :nth-child(2) {
    order: -1;
  }
}

@media (min-width: 1024px) {
  .wsdt-grid-hero-split:has(> :nth-child(2)) {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--grid-gap);
    align-items: stretch;
  }
}