.learning-hero {
  position: relative;
  min-height: 350px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  color: #fff;
}
.learning-hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.learning-hero .container {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px;
  z-index: 2;
  justify-items: center !important;
}
.hero-content {
    width: 70%; 
    text-align: -webkit-center;
}
.hero-content h1 {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 45px;
  line-height: 1.3em;
  margin: 0 0 10px;
  text-align: center;
  color: #fff;
}
.hero-content .meta {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 15px;
}
.hero-content .meta a{
  color: #fff;
}
.hero-content .meta a:hover{
  color: #fc8200;
}
.toc {
  position: sticky;
  top: 100px;     /* distance from the top of viewport */
  align-self: start;
  max-height: calc(100vh - 120px); /* prevent it from overflowing */
  overflow-y: auto;
  padding-right: 10px;
}

.toc ul {
  list-style: none;
  padding-left: 0;
  margin:0;
}
.toc a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #444;
  transition: all 0.2s;
}
.toc a.active {
  font-weight: bold;
  color: #0073aa;
  border-left: 3px solid #0073aa;
  background: #f0f8ff;
}

.site-breadcrumbs {
    position: relative !important;
    max-width: 50%;
    height: 32px;
    line-height: 32px;
    margin-top: 15px !important;
    font-size: 14px;
    color: #f6f6f6;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
}
.breadcrumbs .site-breadcrumbs a{
    color: #f6f6f6; 
}
.breadcrumbs .site-breadcrumbs a:hover{
    color: #fc8200; 
}
.learning-hr{
    border-top: 1px solid #f1f1f1;
    margin:10px 0;
}



/* Main content layout */
.learning-content .container.layout {
  display: grid;
  grid-template-columns: 20% 50% 30%;
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 60px 20px;
}
.related-posts ul { list-style: none; margin:0; padding:0; }
.related-posts li { margin-bottom: 8px; }



/* Layout for Learning Single Page */
.learning-content .container.layout {
  display: grid;
  grid-template-columns: 20% 1fr 25%; /* TOC | Content | Related */
  grid-gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 60px 0;
}