@import './gene-detail-rail.css';
@import './gene-detail-variants.css';
@import './gene-detail-about.css';
@import './gene-detail-info.css';

.gene-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.gene-detail--with-rail {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: var(--space-md);
  max-width: 900px;
}

.gene-detail__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

/* Breadcrumb */
.gene-detail__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
}

.gene-detail__breadcrumb-back {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  text-decoration: none;

  &:hover {
    color: var(--color-primary);
  }
}

.gene-detail__breadcrumb-sep {
  color: var(--color-text-muted);
}

.gene-detail__breadcrumb-current {
  color: var(--color-text);
  font-weight: 500;
}

/* Hero */
.gene-detail__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.gene-detail__hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.gene-detail__title {
  font-size: var(--text-3xl, 2rem);
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  margin: 0;
  letter-spacing: -0.02em;
}

.gene-detail__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
}

.gene-detail__hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.gene-detail__location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted);
}

.gene-detail__cat-badge {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-subtle, rgb(99 102 241 / 10%));
  color: var(--color-primary);
  font-weight: 500;
}

.gene-detail__pubs {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.gene-detail__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.gene-detail__tag {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-subtle, rgb(99 102 241 / 8%));
  color: var(--color-primary);
  font-size: var(--text-sm);
}

/* Sections */
.gene-detail__section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-sm);
}