/* ══════════════════════════════════════════════════════════════
   About Page Styles
   ══════════════════════════════════════════════════════════════ */

.about-hero {
  background: linear-gradient(135deg, var(--tblr-primary) 0%, var(--tblr-primary-darken) 100%);
  color: white;
  padding: 2rem;
  border-radius: .5rem;
  margin-bottom: 1.5rem;
}
.about-hero .d-flex { justify-content: center; }
.about-hero img { height: 150px !important; width: auto; }
@media (max-width: 1199.98px) { .about-hero img { height: 120px !important; } }
@media (max-width: 991.98px)  { .about-hero img { height: 90px !important; } }
@media (max-width: 575.98px)  { .about-hero img { height: 60px !important; } }
.about-hero h1 { font-size: 2rem; margin-bottom: .5rem; }
.about-hero p { opacity: .9; margin: 0; }

/* Tutorial hero variant */
.tutorial-hero {
  background: linear-gradient(135deg, var(--tblr-success) 0%, var(--tblr-success-darken) 100%);
  color: white;
  padding: 1.5rem;
  border-radius: .5rem;
  margin-bottom: 1.5rem;
}

/* Video placeholder */
.video-placeholder {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: .5rem;
  padding: 2rem;
  text-align: center;
  color: rgba(255,255,255,.7);
  margin: 1rem 0;
  border: 2px dashed rgba(255,255,255,.2);
}
.video-placeholder i { font-size: 3rem; margin-bottom: .5rem; display: block; }
.video-placeholder .video-title { font-weight: 600; color: white; margin-bottom: .25rem; }
.video-placeholder .video-duration { font-size: .8rem; opacity: .6; }
.video-placeholder.has-video { border: none; padding: 0; background: #000; }
.video-placeholder.has-video iframe { border-radius: .5rem; }

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.ref-card {
  border-left: 4px solid var(--tblr-primary);
  background: var(--tblr-bg-surface);
}

.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  border-radius: .25rem;
  font-size: .8rem;
  background: var(--tblr-bg-surface-secondary);
  border: 1px solid var(--tblr-border-color);
}

/* Tutorials accordion styles (same page) */
.tutorial-accordion .accordion-button {
  font-weight: 600;
  padding: .75rem 1rem;
}
.tutorial-accordion .accordion-button:not(.collapsed) {
  background-color: var(--tblr-primary-lt);
  color: var(--tblr-primary);
}
.tutorial-accordion .accordion-body {
  padding: 1rem 1.25rem;
}

.step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tblr-primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.step-item {
  display: flex;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px dashed var(--tblr-border-color);
}
.step-item:last-child { border-bottom: none; }

.tip-box {
  background: var(--tblr-warning-lt);
  border-left: 4px solid var(--tblr-warning);
  padding: .75rem 1rem;
  border-radius: .25rem;
  margin: 1rem 0;
}

.info-box {
  background: var(--tblr-info-lt);
  border-left: 4px solid var(--tblr-info);
  padding: .75rem 1rem;
  border-radius: .25rem;
  margin: 1rem 0;
}

.tutorial-badge {
  font-size: .65rem;
  padding: .2rem .5rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.toc-item {
  padding: .5rem .75rem;
  border-left: 3px solid transparent;
  transition: all .15s;
}
.toc-item:hover, .toc-item.active {
  background: var(--tblr-bg-surface-secondary);
  border-left-color: var(--tblr-primary);
}

.code-inline {
  background: var(--tblr-code-bg);
  padding: .1rem .4rem;
  border-radius: .2rem;
  font-family: var(--tblr-font-monospace);
  font-size: .85em;
}