/**
 * Melanin Stories — assets/css/components/sidebar.css
 * Colonne latérale des pages article (widgets natifs WordPress).
 */

.ms-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ms-widget {
  background: var(--ms-cream);
  border: 1px solid var(--ms-line);
  padding: 24px;
}

.ms-widget__title {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 14px;
}

.ms-widget p {
  font-size: 14px;
  color: var(--ms-charcoal);
  line-height: 1.6;
}

.ms-widget ul {
  list-style: none;
}

.ms-widget li {
  padding: 8px 0;
  border-bottom: 1px solid var(--ms-line);
  font-size: 14px;
}

.ms-widget li:last-child {
  border-bottom: none;
}

.ms-widget a {
  color: var(--ms-ink);
}

.ms-widget a:hover {
  color: var(--ms-red);
}

@media (max-width: 960px) {
  .ms-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ms-widget {
    flex: 1;
    min-width: 240px;
  }
}

@media (max-width: 600px) {
  .ms-sidebar {
    flex-direction: column;
  }
}