/* ‘òèëè äëß ñòðàíèöû îòäåëüíîãî ïðèìåðà */

body.single-example main.container.examples-layout {
  max-width: var(--dar-container-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--dar-space-xl) !important;
  padding-right: var(--dar-space-xl) !important;
  width: 100% !important;
}

body.single-example .example-content p {
  max-width: 720px;
  margin-left: 0;
}

.example-page {
  width: 100%;
}

.example-nav {
  margin-bottom: var(--dar-space-xl);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--dar-space-xs);
  color: var(--dar-text-secondary);
  text-decoration: none;
  font-size: var(--dar-text-nav);
  transition: var(--dar-transition-fast);
}

.back-link:hover {
  color: var(--dar-accent-cyan);
  text-decoration: none;
}

.back-icon {
  font-size: 1.2em;
  transition: transform var(--dar-transition-fast);
}

.back-link:hover .back-icon {
  transform: translateX(-3px);
}

.example-header {
  margin-bottom: var(--dar-space-2xl);
}

.example-description-lead {
  font-size: var(--dar-text-body-lg);
  color: var(--dar-text-secondary);
  margin-top: var(--dar-space-sm);
  max-width: 80%;
}

.example-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dar-space-md);
  align-items: center;
  margin-top: var(--dar-space-lg);
  padding-top: var(--dar-space-md);
  border-top: 1px solid var(--dar-border-subtle);
}

.example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dar-space-sm);
}

.example-content {
  margin: var(--dar-space-2xl) 0;
  min-width: 0;
}

.example-content h2 {
  margin-top: var(--dar-space-xl);
  margin-bottom: var(--dar-space-md);
  font-size: var(--dar-text-h2);
}

.example-content h3 {
  margin-top: var(--dar-space-lg);
  margin-bottom: var(--dar-space-sm);
}

.example-source {
  margin-top: var(--dar-space-2xl);
  text-align: center;
}

body.single-example .dar-code-block,
body.single-example .dar-code-body,
body.single-example .dar-code-line,
body.single-example .dar-code-line__content {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* €äàïòèâíîñòü */
@media (max-width: 768px) {
  .example-description-lead {
    max-width: 100%;
  }
  .example-page {
    padding: 0 var(--dar-space-md);
  }
}

body .example-meta .example-tags .tag {
  padding: var(--dar-space-xs) var(--dar-space-md);
}