/* 下载页：复用 about 内页骨架，下载卡片与说明区 */

.download {
  .download-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
  }

  .download-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.45rem 1.3rem;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    transition:
      border-color var(--transition),
      transform var(--transition),
      box-shadow var(--transition);

    &:hover {
      border-color: rgba(57, 118, 250, 0.45);
      transform: translateY(-3px);
      box-shadow: var(--shadow-card-hover);
    }

    .platform {
      font-weight: 800;
      font-size: 1.1rem;
      letter-spacing: -0.02em;
    }

    .meta {
      font-size: 0.8125rem;
      color: var(--text-muted);
    }

    .action {
      margin-top: 0.95rem;
      font-size: 0.875rem;
      font-weight: var(--font-bold);
      color: var(--brand-blue-500);
    }

    &.is-disabled {
      opacity: 1;
      cursor: default;
      pointer-events: none;
      user-select: none;
      background: var(--neutral-50);
      border-color: var(--border);
      border-style: dashed;
      box-shadow: none;

      &:hover {
        transform: none;
        border-color: var(--border);
        box-shadow: none;
      }

      .platform {
        color: var(--text-secondary);
        font-weight: var(--font-bold);
      }

      .action {
        font-weight: 500;
        color: var(--text-muted);
      }
    }
  }

  .download-callout {
    width: 100%;

    .narrative-section {
      ul {
        list-style: disc;
        margin: 0 0 1.1rem;
        padding-left: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.55rem;

        li {
          color: var(--text-secondary);
          font-size: 1.1rem;
          line-height: 1.85;
        }
      }

      .download-note {
        margin: 0;
        font-size: 1.1rem;
        line-height: 1.85;

        a {
          color: var(--brand-blue-500);
          font-weight: var(--font-semibold);

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}

@media (max-width: 960px) {
  .download .download-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .download .download-grid {
    grid-template-columns: 1fr;
  }
}