/*
 * Page-wide structural layout — shared by every page: the full-height
 * session wrapper and the tmux-style pane grid that page content sits in.
 * Nothing page-specific lives here; see home.css for homepage-only content
 * and components.css for the site-header/site-footer component styles.
 */

.session {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- pane grid ----------
 * 2 columns (wide content/hero pane + narrower sidebar column). Every page
 * uses this same dashboard layout — sidebar row count is the only thing
 * that varies, via a modifier on .panes:
 *   .sidebar-2  services + connect                   (about, contact, blog, ...)
 *   .sidebar-3  services + security-audit + connect   (homepage only, for now)
 * The hero pane spans however many sidebar rows exist (see .pane.hero
 * below) so it stays flush with the full stacked height of the sidebar
 * column — if a page's sidebar box count ever changes, keep the row count
 * and the matching .pane.hero row-span in sync.
 */
.panes {
  flex: 1;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 14px;
  padding: 14px;
  /* stops the hero/sidebar boxes from stretching indefinitely on ultrawide
     monitors — beyond this the page centers with breathing room on each side */
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}
.panes.sidebar-2 { grid-template-rows: 1fr auto; }
.panes.sidebar-3 { grid-template-rows: 1fr auto auto; }
@media (max-width: 820px) {
  .panes { grid-template-columns: 1fr; grid-template-rows: none; }
}

.pane {
  position: relative;
  border: 1px solid var(--line-dim);
  background: var(--panel);
  padding: 26px 26px 22px;
  min-width: 0;
}
.panes.sidebar-2 .pane.hero { grid-row: 1 / 3; }
.panes.sidebar-3 .pane.hero { grid-row: 1 / 4; }
@media (max-width: 820px) { .pane.hero { grid-row: auto; } }

/* footer/connect pane reads slightly more prominent than its siblings */
.pane.footer { border: 1px solid var(--gold); }
.pane.footer .pane-label { color: var(--gold); }

.pane.active { border-color: var(--signal); }

.pane-label {
  position: absolute;
  top: -10px;
  left: 18px;
  background: var(--bg);
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted-dim);
}
.pane.active .pane-label { color: var(--signal); }