/* Learn / Uitleg pages */
.learn-wrap{
  max-width: 1100px;
  margin: 0 auto;
}

.learn-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding: 18px 18px;
}

.learn-hero h1{ margin:0; }
.learn-hero .muted{ margin-top:6px; }

.learn-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.learn-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
  margin-top: 12px;
}

.learn-card{
 
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px 14px;
  background: #fff;
  text-decoration:none;
  color: inherit;
  display:block;
}

.learn-card:hover{
  border-color: rgba(0,0,0,.16);
}

.learn-card h3{
  margin: 0 0 6px 0;
  font-size: 16px;
}

.learn-card p{
  margin: 0;
  color: rgba(0,0,0,.65);
  line-height:1.45;
}

.learn-card .learn-meta{
  margin-top: 10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.learn-pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  font-size: 12px;
  color: rgba(0,0,0,.7);
  background: rgba(0,0,0,.02);
}

.learn-page{
  margin-top: 12px;
}

.learn-breadcrumb{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.learn-breadcrumb a{ text-decoration:none; }

.learn-section{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px 14px;
  background: #fff;
  margin-bottom: 12px;
}

.learn-section h2{
  margin:0 0 8px 0;
  font-size: 16px;
}

.learn-section p{
  margin: 0 0 10px 0;
  color: rgba(0,0,0,.75);
  line-height:1.55;
}

.learn-section ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(0,0,0,.75);
  line-height:1.55;
}

.learn-quote{
  border-left: 4px solid rgba(0,0,0,.12);
  padding: 10px 12px;
  margin-top: 10px;
  color: rgba(0,0,0,.75);
  background: rgba(0,0,0,.02);
  border-radius: 12px;
}

.learn-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

@media (max-width: 900px){
  .learn-card{ grid-column: span 12; }
  .learn-two{ grid-template-columns: 1fr; }
}