/* assets/layout.css */
 /* ========== GRID WRAPPER ========== */
.layout-3col {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(540px, 1fr) minmax(260px, 360px);
  gap: 16px;
  padding: 0 16px;
  overflow: visible;
  align-items: start;
}

/* Some block themes add overflow on groups; hard-stop it here */
.layout-3col.wp-block-group,
.layout-3col.is-layout-constrained { overflow: visible !important; }

/* ========== ADMIN BAR OFFSET ========== */
:root { --hs-adminbar-offset: 0px; }
body.admin-bar { --hs-adminbar-offset: 32px; }
@media (max-width: 782px) { body.admin-bar { --hs-adminbar-offset: 46px; } }

/* ========== STICKY RAILS ========== */
.sidebar-left,
.sidebar-right {
  position: sticky;
  top: calc(var(--hs-adminbar-offset) + env(safe-area-inset-top, 0px));
  align-self: start;
  max-height: calc(100dvh - var(--hs-adminbar-offset) - env(safe-area-inset-top, 0px));
  overflow: auto;
  padding: 12px 8px;
  scrollbar-gutter: stable both-edges;
}

/* Center column cards */
.timeline .card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
  .layout-3col { grid-template-columns: 72px 1fr 280px; }
  .sidebar-left { width: 72px; padding: 8px 4px; }
}
@media (max-width: 992px) {
  .layout-3col { grid-template-columns: 1fr 320px; }
  .sidebar-right { display: none; }
}
@media (max-width: 720px) {
  .layout-3col { grid-template-columns: 1fr; padding: 0; }
  .sidebar-left, .sidebar-right { display: none; }
}