/* vup_2018_child — SINGLE POST: full replacement
   - Column1 pinned
   - Column2 fluid (can grow > 990px)
   - Only column2 has white background
   - Columns 1+2 centered together (like header)
   - Scoped to .single-post only
*/

/* Tunables (change these only) */
:root{
  --blog-rail: 16px;       /* inset from viewport edge for visual rail */
  --blog-left: 220px;      /* left sidebar width */
  --blog-gap: 24px;        /* gutter between columns */
  --blog-main-min: 860px;  /* main min width */
  --blog-main-max: 1400px; /* main max cap (raise if needed) */
  --single-post-top: 32px; /* desktop gap between header and grid; adjust */
}

/* -------- Reset wrappers inside single-post only (do NOT touch header) -------- */
.single-post html,
.single-post body,
.single-post .site,
.single-post #page,
.single-post .container,
.single-post .site-content,
.single-post #content,
.single-post .vu-grid,
.single-post .site-main,
.single-post article.vu-single {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* -------- Use the content container as the centered canvas + grid -------- */
.single-post #content.container.site-content.vu-grid,
.single-post #content.site-content.container.vu-grid {
  /* unit width = left + gap + main-max, but never exceed viewport */
  --canvas-w: calc(var(--blog-left) + var(--blog-gap) + var(--blog-main-max));
  width: 100% !important;
  max-width: min(var(--canvas-w), 96vw) !important; /* center unit like header */
  margin: var(--single-post-top) auto 0 !important; /* desktop top gap, centered unit */
  padding-left: var(--blog-rail) !important;
  padding-right: var(--blog-rail) !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-columns: var(--blog-left) minmax(var(--blog-main-min), 1fr) !important;
  gap: var(--blog-gap) !important;
  align-items: start;
  position: relative !important;
}

/* -------- Left column pinned; prevent children widening it -------- */
.single-post #content.container.site-content.vu-grid > .sidebar-left,
.single-post #content.site-content.container.vu-grid > .sidebar-left,
.single-post .vu-grid > .sidebar-left {
  grid-column: 1;
  width: var(--blog-left) !important;
  max-width: var(--blog-left) !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.single-post #content.container.site-content.vu-grid > .sidebar-left *,
.single-post #content.site-content.container.vu-grid > .sidebar-left *,
.single-post .vu-grid > .sidebar-left * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Safety: sidebar images/buttons/widgets must not overflow */
.single-post .sidebar-left img,
.single-post .sidebar-left .button,
.single-post .sidebar-left .vu-left-nav,
.single-post .sidebar-left .widget {
  max-width: 100% !important;
  height: auto !important;
}

/* -------- Main column (white card only here) -------- */
.single-post #content.container.site-content.vu-grid > .content-single.content-area,
.single-post #content.site-content.container.vu-grid > .content-single.content-area,
.single-post .vu-grid > .content-area,
.single-post #primary.content-area {
  grid-column: 2;
  min-width: 0 !important;                         /* critical so 1fr can shrink/grow */
  width: 100% !important;
  max-width: min(var(--blog-main-max), 100%) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding: clamp(16px, 2cqi, 28px) !important;

  background: #fff !important;    /* white only on main panel */
  color: #111 !important;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* Prevent inner wrappers from reintroducing white or extra caps */
.single-post article.vu-single,
.single-post .vu-single-hero,
.single-post .vu-single-content,
.single-post .entry-content,
.single-post .post-inner,
.single-post .post-wrap {
  background: transparent !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Gutenberg alignwide/full must not break the main card */
.single-post .content-single .alignwide,
.single-post .content-single .alignfull,
.single-post .content-area .alignwide,
.single-post .content-area .alignfull {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Media responsiveness inside the white card */
.single-post .content-area img,
.single-post .content-area video,
.single-post .content-area iframe {
  max-width: 100% !important;
  height: auto !important;
  background: transparent !important;
}

/* Hide any right sidebar on single posts */
.single-post .vu-grid > .sidebar-right,
.single-post #content.container.site-content.vu-grid > .sidebar-right,
.single-post #content.site-content.container.vu-grid > .sidebar-right {
  display: none !important;
}

/* -------- Desktop-only top gap control (adjust --single-post-top variable) -------- */
@media (max-width: 62em) {
  /* mobile: stack and remove extra top offset */
  .single-post #content.container.site-content.vu-grid,
  .single-post #content.site-content.container.vu-grid {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    left: 0 !important;
  }
  .single-post #content.container.site-content.vu-grid > .sidebar-left,
  .single-post #content.container.site-content.vu-grid > .content-single.content-area,
  .single-post .vu-grid > .sidebar-left,
  .single-post .vu-grid > .content-area {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* -------- Quick debugging outlines (comment out in production) -------- */
/* .single-post #content.container.site-content.vu-grid { outline: 1px dashed rgba(0,255,0,.15); } */
/* .single-post .vu-grid > .sidebar-left { outline: 1px dashed rgba(255,0,0,.15); } */
/* .single-post .vu-grid > .content-area { outline: 1px dashed rgba(0,0,255,.15); } */