/*
PHASE 0 — MAP (read-only summary)
- Shell/grid owner: `.vu-grid` (alias `.layout-shell`). Wrapper reset: `#content.site-content`.
- Left column: `#left-sidebar`, `.widget-area.sidebar-left`.
- Center column: `#primary`, `.panel.content.main`.
- Right column: `#right-sidebar`, `.widget-area.sidebar-right`.
- Tokens used here (defaults + source):
  - `--gap-col: 24px` (css/skin.css :root)
  - `--gap-row: 12px` (css/skin.css :root)
  - `--gutter-left: 8px` (css/skin.css :root)
  - `--gutter-right: 8px` (css/skin.css :root)
  - `--left-min: 200px`, `--left: 20vw`, `--left-max: 400px` (css/skin.css :root)
  - `--center-min: 640px`, `--center-cap: 780px`, `--center-cap-vw: 50vw` (css/skin.css :root)
  - `--right-min: 200px`, `--right-max: 400px` (css/skin.css :root)
  - `--sidebar-pad: 12px` (css/skin.css :root)
- Breakpoints (standardized):
  - `@media (max-width: 1200px)`: stack sidebars under content.
  - `@media (max-width: 1024px)`: increase vertical gaps for tighter tablet layout.
  - `@media (max-width: 768px)`: single-column; hide sidebars.
  Note: JS (`js/sidebars-collapse.js`) currently hides right sidebar <=1200px and left sidebar <=1000px. Consider updating JS to 1024px for consistency.
- Container queries: none. Uses `@supports selector(:has(*))` for content-based collapse.
- State logic today:
  - Templates (`page-home.php`, `page-locations.php`, `single-location.php`) set flags on `.vu-grid`: `has-left/has-right` and `no-left/no-right` via `is_active_sidebar(...)`.
  - Some templates render sidebars conditionally (`sidebar-right.php` only if active). `sidebar-left.php` always prints the `<aside>` wrapper but may be empty; `:has()` guards in this file handle empty sidebars.
  - `single-post.php` uses a scoped layout in `css/layouts/blog.css` and does not rely on these flags.

PHASE 2 - PLAN (concise)
- Modify only `css/layouts/sidebars.css`: keep `.vu-grid`/`.layout-shell` as the grid owner; keep `#primary` for the center column and existing tokens.
- Detect sidebar presence with the existing `.no-left/.no-right` flags and enhance with `:has()` checks that look for visible content (ignoring nodes with `[hidden]`, `aria-hidden`, or inline `display:none`).
- Breakpoints: at <=1200px collapse to a single content column where sidebars stack below the center; at <=1000px tighten gaps to avoid scroll. Keep values aligned with JS breakpoints.
- Ensure the desktop grid transitions smoothly (`grid-template-columns`, gaps) and that `#primary` can shrink (`min-width:0; overflow-wrap:anywhere`). No !important, no new markup.
*/

/*!
 * vup_2018_child - css/layouts/sidebars.css
 * Fluid 3-track layout: [LEFT][CENTER][RIGHT] + gutters
 * Grid owner: .vu-grid (alias .layout-shell)
 */

/* ===== SHELL RESET ===== */
#content.site-content{
  max-width: none;
  width: 100%;
  padding-inline: 0;
  margin-inline: auto;
}

/* ===== GRID OWNER ===== */
:where(.vu-grid, .layout-shell){
  display: grid;
  grid-template-areas: "gutL left center right gutR";
  grid-template-columns:
    var(--gutter-left)
    clamp(var(--left-min), var(--left), var(--left-max))
    minmax(var(--center-min), min(var(--center-cap-vw), var(--center-cap)))
    clamp(var(--right-min), 25vw, var(--right-max))
    var(--gutter-right);
  column-gap: var(--gap-col);
  row-gap: var(--gap-row);
  align-items: start;
  width: 100%;
  transition: grid-template-columns 220ms ease, column-gap 220ms ease, row-gap 220ms ease;
}

/* ===== AREAS ===== */
#left-sidebar,
.widget-area.sidebar-left{ grid-area: left; }

#primary,
.panel.content.main{ grid-area: center; min-width: 0; overflow-wrap: anywhere; }

#right-sidebar,
.widget-area.sidebar-right{ grid-area: right; }

/* ===== SIDEBAR PADDING (restored) ===== */
#left-sidebar,
#right-sidebar{ padding: var(--sidebar-pad); }

/* Smooth presence for the left column so it eases instead of snapping */
#left-sidebar,
.widget-area.sidebar-left{
  transition: opacity .25s ease, transform .3s ease;
  will-change: opacity, transform;
}

/* Center stays flush so gaps remain the visible control */
#primary{ padding: 0; }

/* Keep sticky-friendly overflow on sidebars */
#left-sidebar,
#right-sidebar{ overflow: visible; }

/* ===== DROP TRACKS WHEN A SIDEBAR IS OFF ===== */
:where(.vu-grid.no-right, .layout-shell.no-right){
  grid-template-areas: "gutL left center gutR";
  grid-template-columns:
    var(--gutter-left)
    clamp(var(--left-min), var(--left), var(--left-max))
    minmax(0, 1fr)
    var(--gutter-right);
}

:where(.vu-grid.no-left, .layout-shell.no-left),
:where(.vu-grid.fade-out-left, .layout-shell.fade-out-left){
  grid-template-areas: "gutL center right gutR";
  grid-template-columns:
    var(--gutter-left)
    minmax(0, 1fr)
    clamp(var(--right-min), 25vw, var(--right-max))
    var(--gutter-right);
}

:where(.vu-grid.no-left.no-right, .layout-shell.no-left.no-right){
  grid-template-areas: "gutL center gutR";
  grid-template-columns: var(--gutter-left) 1fr var(--gutter-right);
}

/* ===== CONTENT-BASED COLLAPSE (safe gated) ===== */
@supports selector(:has(*)){
  /* Drop right track when there is no visible right sidebar content */
  :where(.vu-grid, .layout-shell):not(:has(#right-sidebar:not([hidden]):not([aria-hidden="true"]):not([style*="display:none" i]):not([style*="display: none" i]) :is(.widget, .widget_block, .wp-block, nav, .menu, form, .vu-widget))){
    grid-template-areas: "gutL left center gutR";
    grid-template-columns:
      var(--gutter-left)
      clamp(var(--left-min), var(--left), var(--left-max))
      minmax(0, 1fr)
      var(--gutter-right);
  }

  /* Drop left track when there is no visible left sidebar content */
  :where(.vu-grid, .layout-shell):not(:has(#left-sidebar:not([hidden]):not([aria-hidden="true"]):not([style*="display:none" i]):not([style*="display: none" i]) :is(.widget, .widget_block, .wp-block, nav, .menu, form, .vu-widget))){
    grid-template-areas: "gutL center right gutR";
    grid-template-columns:
      var(--gutter-left)
      minmax(0, 1fr)
      clamp(var(--right-min), 25vw, var(--right-max))
      var(--gutter-right);
  }

  /* Neither side visible -> single wide center */
  :where(.vu-grid, .layout-shell):not(:has(#left-sidebar:not([hidden]):not([aria-hidden="true"]):not([style*="display:none" i]):not([style*="display: none" i]) :is(.widget, .widget_block, .wp-block, nav, .menu, form, .vu-widget))):not(:has(#right-sidebar:not([hidden]):not([aria-hidden="true"]):not([style*="display:none" i]):not([style*="display: none" i]) :is(.widget, .widget_block, .wp-block, nav, .menu, form, .vu-widget))){
    grid-template-areas: "gutL center gutR";
    grid-template-columns: var(--gutter-left) 1fr var(--gutter-right);
  }
}

/* ===== RESPONSIVE FALLBACKS ===== */
@media (max-width: 1200px){
  :where(.vu-grid, .layout-shell){
    grid-template-areas:
      "gutL center gutR"
      "gutL left   gutR"
      "gutL right  gutR";
    grid-template-columns: var(--gutter-left) 1fr var(--gutter-right);
    row-gap: clamp(16px, 2vw, 32px);
  }
}
@media (max-width: 1024px){
  :where(.vu-grid, .layout-shell){
    row-gap: clamp(16px, 4vw, 40px);
  }
}
/* During JS-driven collapse, sync center expansion with fade class */
:where(.vu-grid.fade-out-left, .layout-shell.fade-out-left) #left-sidebar,
:where(.vu-grid.fade-out-left, .layout-shell.fade-out-left) .widget-area.sidebar-left{
  opacity:0;
  transform:translateX(-24px);
  pointer-events:none;
}
@media (max-width: 768px){
  :where(.vu-grid, .layout-shell){
    grid-template-areas: "center";
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  #left-sidebar,
  #right-sidebar{ display:none; }
}

/* ===== CONTENT GUARDRAILS ===== */
#primary .wp-block-gallery,
#primary .gallery{ max-width: none; }

/* ===== GAP PRESETS ===== */
.vu-gap-8  { --gap-col: 8px; }
.vu-gap-16 { --gap-col: 16px; }
.vu-gap-24 { --gap-col: 24px; }
.vu-gap-32 { --gap-col: 32px; }
.vu-gap-48 { --gap-col: 48px; }

/* ===== DEBUG ===== */
.vu-debug .vu-grid > *,
.vu-debug .layout-shell > *{ outline: 1px dashed rgba(0,0,0,.2); }

/* Acceptance checklist
   - Desktop: 3 columns when both sidebars render; center expands immediately when either sidebar is missing/hidden; single column when none remain.
   - Tablet/Phone: grid collapses to one column; sidebars stack beneath (or JS hides them) without forcing horizontal scroll.
   - Resizing wide -> narrow -> wide transitions tracks/gaps smoothly with no flicker.
   - No markup changes, no new classes, tokens preserved, enqueue order unchanged.
*/