/*
Theme Name: Twenty You
Author: You
Version: 1.0.0
Description: Minimal custom theme with a 3-column, 24-unit grid. Columns scroll independently and collapse to one column on mobile.
Text Domain: twentyyou
*/

:root {
  --gutter: 16px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #111;
}

/* 24-unit grid container that fills the viewport */
.site-grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: var(--gutter);
  height: 100dvh;
  padding: var(--gutter);
  overflow: hidden; /* page won't scroll; columns will */
}

/* Columns scroll independently */
.col {
  overflow-y: auto;
  padding-right: 6px; /* breathing room for scrollbar */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Columns: 3 x 8 units (24-unit grid) */
.col-left   { grid-column: 1 / span 8; }
.col-middle { grid-column: 9 / span 8; }
.col-right  { grid-column: 17 / span 8; }

/* Project cards */
.project {
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.project h2 { margin: 0 0 8px 0; font-size: 1.1rem; }
.project .thumb { margin: 0 0 12px 0; }
.project .thumb img { max-width: 100%; height: auto; display: block; border-radius: 8px; }

/* Sidebar sections */
.sidebar-section { margin-bottom: 24px; }
.sidebar-section h3 { margin: 0 0 8px 0; font-size: 1rem; }

/* Menu list */
ul.menu { list-style: none; padding: 0; margin: 0; }
ul.menu li { margin: 6px 0; }
ul.menu a { text-decoration: none; color: inherit; }
ul.menu a:hover { text-decoration: underline; }

/* Mobile: collapse to single vertical column */
@media (max-width: 768px) {
  html, body { height: auto; }
  .site-grid {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    padding: 12px;
  }
  .col {
    grid-column: 1 / -1;
    overflow: visible; /* allow page to scroll normally on mobile */
    padding-right: 0;
  }
}