/* ============================================================================
   POST LAYOUT (Three-Column) - Blog V2
   Optimized for Performance & Cartoon Design
   Extracted from blog-v2.css
   ============================================================================ */

/* Force high specificity to override inline styles - NUCLEAR OPTION */
html body .app .blog-page article.post.post-v2,
html body .blog-page article.post.post-v2,
.blog-page article.post.post-v2,
article.post.post-v2 {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html body .app .blog-page article.post.post-v2 > .post-layout,
html body .blog-page article.post.post-v2 .post-layout,
article.post.post-v2 > .post-layout {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) 320px !important;
  gap: clamp(1.5rem, 2vw, 2rem) !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: min(1800px, 95vw) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: var(--sp-5, 32px) clamp(1rem, 2vw, 2rem) !important;
  box-sizing: border-box !important;
}

/* Force children to respect grid */
article.post.post-v2 > .post-layout > * {
  min-width: 0 !important;
  min-height: 0 !important;
}

/* TOC Sidebar - Left Column - Parallel Scroll Compatible */
article.post.post-v2 .post-toc-sidebar {
  position: sticky !important;
  top: 80px !important;
  align-self: flex-start !important;
  display: block !important;
  /* Fixed viewport height for parallel scroll to work */
  max-height: calc(100vh - 80px - 2rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Hide scrollbar completely */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE */
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  z-index: 1 !important; /* Below navbar (1100) */
}

/* Hide scrollbar Webkit (Chrome, Safari, Edge) */
article.post.post-v2 .post-toc-sidebar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.post-toc-sidebar .card {
  display: block;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 6px 0 #042b33;
  height: auto !important;
}

/* Garantir que TOC e sua lista não tenham scroll interno */
.post-toc-sidebar .toc {
  height: auto !important;
  max-height: none !important;
}

.post-toc-sidebar .toc__list {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Right Sidebar - Info & Extras - Parallel Scroll Compatible */
article.post.post-v2 .post-sidebar {
  position: sticky !important;
  top: 80px !important;
  align-self: flex-start !important;
  display: block !important;
  /* Fixed viewport height for parallel scroll to work - same as TOC */
  height: calc(100vh - 80px - 2rem) !important;
  max-height: calc(100vh - 80px - 2rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Hide scrollbar completely */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE */
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  z-index: 1 !important; /* Below navbar (1100) */
}

/* Cards container inside sidebar - use gap via margin */
.post-sidebar > .card {
  margin-bottom: var(--sp-3, 16px) !important;
}

.post-sidebar > .card:last-child {
  margin-bottom: 0 !important;
}

/* Hide scrollbar Webkit (Chrome, Safari, Edge) */
article.post.post-v2 .post-sidebar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.post-sidebar > .card {
  display: block;
  margin-bottom: 0;
  /* Cartoon shadow with offset */
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 6px 0 #042b33;
  transition: transform var(--motion-fast) var(--motion-curve), 
              box-shadow var(--motion-med) var(--motion-curve);
  will-change: transform;
}

.post-sidebar > .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.4), 0 10px 0 #042b33;
}

@media (prefers-reduced-motion: reduce) {
  .post-sidebar > .card {
    transition: none;
  }
  .post-sidebar > .card:hover {
    transform: none;
  }
}