/* Main page wrapper grid used below the header. */
.site-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding: 1rem;
}

/* Legacy home cards grid (can be reused on any page section). */
.home-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.home-grid .hero {
  grid-column: span 12;
}

.home-grid .feature {
  grid-column: span 4;
}

/* Two-column content layout for blog/page with sidebar. */
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.content-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.widget-area {
  position: sticky;
  top: 1rem;
}

/* Responsive collapses for content and cards grid. */
@media (max-width: 980px) {
  .home-grid .feature {
    grid-column: span 6;
  }

  .content-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .site-grid {
    margin-top: 1rem;
    padding: 0.5rem;
  }

  .content-grid {
    gap: 0.75rem;
  }

  .home-grid .feature {
    grid-column: span 12;
  }
}