/* ===================================================
   Mania AI — Sidebar
   =================================================== */

@layer components {

  /* ── Block (section unit) ── */
  .m-sidebar-block {
    background: var(--m-bg-elevated);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-md);
    padding: var(--m-space-lg);
  }

  .m-sidebar-block__title {
    font-size: var(--m-text-sm);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    letter-spacing: 0.03em;
    padding-block-end: var(--m-space-sm);
    margin-block-end: var(--m-space-md);
    border-block-end: 1px solid var(--m-border-subtle);
  }

  .m-sidebar-block__list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* ── Item (individual post row) ── */
  .m-sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--m-space-sm);
    padding-block: var(--m-space-sm);
    border-block-end: 1px solid var(--m-border-subtle);
    transition: background var(--m-duration) var(--m-ease);
    margin-inline: calc(var(--m-space-sm) * -1);
    padding-inline: var(--m-space-sm);
    border-radius: var(--m-radius-sm);
  }

  .m-sidebar-item:last-child {
    border-block-end: none;
  }

  .m-sidebar-item:hover {
    background: var(--m-hover-bg);
  }

  /* Rank number */
  .m-sidebar-item__rank {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    font-size: 0.65rem;
    font-weight: var(--m-font-bold);
    color: var(--m-text-disabled);
    background: var(--m-bg-overlay);
    border-radius: var(--m-radius-sm);
  }

  .m-sidebar-item__rank.rank-1 {
    background: linear-gradient(135deg, #FFB300, #FFDE7B);
    color: #402500;
  }

  .m-sidebar-item__rank.rank-2 {
    background: linear-gradient(135deg, #CFD8DC, #FFF);
    color: #37474F;
  }

  .m-sidebar-item__rank.rank-3 {
    background: linear-gradient(135deg, #FF8A65, #FFCC80);
    color: #4E2A16;
  }

  /* Thumbnail */
  .m-sidebar-item__thumb {
    flex-shrink: 0;
    inline-size: 3.5rem;
    border-radius: var(--m-radius-sm);
    overflow: hidden;
  }

  .m-sidebar-item__thumb img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Title */
  .m-sidebar-item__title {
    flex: 1;
    min-inline-size: 0;
    font-size: var(--m-text-xs);
    font-weight: var(--m-font-medium);
    color: var(--m-text-secondary);
    line-height: var(--m-leading-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--m-duration) var(--m-ease);
  }

  .m-sidebar-item:hover .m-sidebar-item__title {
    color: var(--m-text-primary);
  }

  /* ── WP Widget compat ── */
  .m-widget {
    background: var(--m-bg-elevated);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-md);
    padding: var(--m-space-lg);
  }

  .m-widget__title {
    font-size: var(--m-text-sm);
    font-weight: var(--m-font-bold);
    color: var(--m-text-primary);
    padding-block-end: var(--m-space-sm);
    margin-block-end: var(--m-space-md);
    border-block-end: 1px solid var(--m-border-subtle);
  }
}