/* Homepage-only layout: 60/40 two-column grid, sidebar panel wrapper, more-posts list */

.home { padding: 1rem 0 2.5rem; }

.home-grid {
  display: grid;
  grid-template-columns: 60% 1fr;
  gap: 2rem;
  align-items: start;
}

.home-main { min-width: 0; }
.home-sidebar { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

/* Sidebar panel — wraps thoughts and shoutbox. Styled after the
   neithan.rocks container aesthetic: slightly darker than the page
   so it reads as a well of content, a faint outer border, soft
   backdrop blur, generous padding, and chunky rounded corners.
   Alpha is kept low so the dot field stays readable through it. */
.sidebar-panel {
  background: rgba(36, 26, 28, 0.4);
  border: 1px solid rgba(179, 0, 0, 0.18);
  border-radius: 16px;
  padding: 1.6rem 1.7rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Soft red halo so the border reads as lit rather than just drawn. */
  box-shadow: 0 0 18px rgba(139, 0, 0, 0.12);
}
.sidebar-panel__header { margin-bottom: 0.85rem; }
.sidebar-panel__title {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.sidebar-panel__title svg { flex-shrink: 0; width: 14px; height: 8px; }
.sidebar-panel__title svg path { stroke: var(--color-red-bright); stroke-width: 2; fill: none; stroke-linecap: round; }
.sidebar-panel__subtitle {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-label);
}

.sidebar-panel__scroll {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 0.4rem;
}
.sidebar-panel__scroll--short { max-height: 180px; }
.sidebar-panel__scroll::-webkit-scrollbar { width: 4px; }
.sidebar-panel__scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-panel__scroll::-webkit-scrollbar-thumb { background: var(--color-red); border-radius: 2px; }

/* Re-style thought items to sit nicely inside a panel (tighter gap, smaller text) */
.sidebar-panel .thoughts-list { gap: 1rem; }
.sidebar-panel .thought__text { font-size: 0.85rem; line-height: 1.65; }
.sidebar-panel .thought__meta { font-size: 0.62rem; }

/* Shoutbox lives inside a panel now — neutralize its own max-width */
.sidebar-panel .shoutbox { max-width: none; }
.sidebar-panel .shoutbox-messages { max-height: none; margin-bottom: 0.85rem; padding-right: 0; gap: 0.5rem; }
.sidebar-panel .shoutbox-msg__name { font-size: 0.62rem; min-width: 55px; }
.sidebar-panel .shoutbox-msg__text { font-size: 0.8rem; }
.sidebar-panel .shoutbox-msg__time { font-size: 0.62rem; }
.sidebar-panel .shoutbox-input-row { gap: 0.4rem; flex-wrap: wrap; }
.sidebar-panel .shoutbox-input-row input { font-size: 0.78rem; padding: 0.45rem 0.6rem; }
.sidebar-panel .shoutbox-input-row button { font-size: 0.62rem; padding: 0.45rem 0.75rem; }

/* Nudge in sidebar — sit it neatly below the panels */
.home-sidebar .nudge-container { margin-top: 0.25rem; gap: 1rem; }
.home-sidebar .nudge-postit { width: 100%; max-width: 280px; min-height: 160px; }

/* More-posts section */
.more-posts__search {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 300;
  padding: 0.65rem 0.9rem;
  border-radius: 3px;
  outline: none;
  transition: border-color var(--transition-fast);
  margin-bottom: 1.25rem;
}
.more-posts__search:focus { border-color: var(--color-red); }
.more-posts__search::placeholder { color: var(--color-text-muted); }

.more-posts__list { display: flex; flex-direction: column; gap: 1px; }
.more-posts__item {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all var(--transition-base);
  text-decoration: none;
}
.more-posts__item:hover {
  background: var(--color-red-subtle);
  border-color: var(--color-border);
}
.more-posts__item-date {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-date);
  white-space: nowrap;
  min-width: 80px;
}
.more-posts__item-title {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  flex: 1;
}
.more-posts__item:hover .more-posts__item-title { color: var(--color-text); }
.more-posts__item-tags { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.more-posts__item-arrow {
  font-size: 0.8rem;
  color: var(--color-red);
  opacity: 0;
  transform: translateX(-5px);
  transition: all var(--transition-base);
}
.more-posts__item:hover .more-posts__item-arrow { opacity: 1; transform: translateX(0); }
.more-posts__item--hidden { display: none; }

.more-posts__empty {
  padding: 1rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  display: none;
}
.more-posts__empty.visible { display: block; }

.more-posts__viewall { margin-top: 1.25rem; text-align: right; }
.more-posts__viewall a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-red-bright);
  transition: color var(--transition-fast);
}
.more-posts__viewall a:hover { color: var(--color-text); }

/* Responsive */
@media (max-width: 768px) {
  .home-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .home-sidebar .nudge-postit { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .home { padding: 0.5rem 0 2rem; }
  .home-grid { gap: 1.25rem; }
  .more-posts__item { flex-wrap: wrap; gap: 0.4rem; }
  .more-posts__item-date { min-width: auto; }
}