/* Site layout — header, footer, sidebar, content grid, pagination. */

/* --- Layout Shell --- */

/* --- Page Transitions --- */

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

.app-router > * {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-router > * > main {
  flex: 1;
}

home-view > main,
blog-list-view > main,
blog-post-view > main,
gallery-post-view > main,
tag-view > main,
tag-index-view > main,
user-view > main,
not-found-view > main,
media-grid-view > main,
media-detail-view > main,
portfolio-view > main,
portfolio-detail-view > main {
  animation: page-enter 0.3s ease-out both;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  home-view > main,
  blog-list-view > main,
  blog-post-view > main,
  gallery-post-view > main,
  tag-view > main,
  tag-index-view > main,
  user-view > main,
  not-found-view > main,
  media-grid-view > main,
  media-detail-view > main,
  portfolio-view > main,
  portfolio-detail-view > main {
    animation: none;
  }
}

/* --- Mobile --- */

@media (width <= 640px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .site-nav {
    width: 100%;
    overflow-x: auto;
  }

  .home-view,
  .post-view {
    padding: var(--space-md);
    grid-template-columns: 1fr;
  }

  .site-sidebar {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding: var(--space-md) 0;
  }
}