/* ─── Two-column layout + sidebar panels ─────────────────────────────────── */

.ha-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;

  @media (min-width: 992px) {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
}

.ha-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.ha-side--sticky {
  @media (min-width: 992px) {
    position: sticky;
    top: 100px;
  }
}

.ha-panel {
  padding: 22px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ha-panel--lav {
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint-lav) 85%, transparent), color-mix(in srgb, var(--surface-color) 75%, transparent));
}

/* Goals */
.ha-goals {
  display: flex;
  flex-direction: column;
  gap: 14px;

  li > span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
  }

  b {
    font-weight: 600;
  }

  em {
    font: 400 12px var(--f-m);
    font-style: normal;
    color: var(--muted);
  }

  i {
    display: block;
    height: 8px;
    margin-top: 6px;
    border-radius: 99px;
    background: var(--soft);
    overflow: hidden;
  }

  u {
    display: block;
    height: 100%;
    width: var(--p);
    border-radius: 99px;
    background: linear-gradient(90deg, var(--sage), var(--sky));
    animation: ha-grow 2.2s var(--timing) both;
  }

  li:nth-child(2) u {
    background: linear-gradient(90deg, var(--lav), var(--sky));
  }

  li:nth-child(3) u {
    background: linear-gradient(90deg, var(--peach), color-mix(in srgb, var(--pastel-peach) 60%, var(--surface-color)));
  }

  li:nth-child(4) u {
    background: linear-gradient(90deg, var(--lav), var(--peach));
  }
}

@keyframes ha-grow {
  from {
    width: 0;
  }
}

/* Most read */
.ha-trend {
  li {
    display: flex;
    gap: 14px;
    padding: 11px 0;

    & + li {
      border-top: 1px solid var(--line);
    }
  }

  b {
    flex: none;
    font: italic 300 22px/1 var(--f-h);
    color: var(--lav-deep);
  }

  a {
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;

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

/* Mini link list */
.ha-mini {
  li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;

    & + li {
      border-top: 1px solid var(--line);
    }
  }

  a:hover,
  a[aria-current] {
    color: var(--deep);
  }

  .ha-meta {
    flex: none;
  }
}