/**
 * 老勤農 - 首頁額外樣式
 */

/* Section spacing */
.lq-section {
    margin-bottom: var(--lq-spacing-md);
    background: var(--lq-bg-card);
    border-radius: var(--lq-radius-md);
    border: 1px solid var(--lq-border-light);
    box-shadow: 0 2px 8px var(--lq-shadow);
    padding: var(--lq-spacing-lg);
}

/* Center content column */
.lq-center-content {
    min-width: 0;
}

/* Post item on hover */
.lq-post-item:hover .lq-post-title a {
    color: var(--lq-primary);
}

/* Empty state styling */
.lq-empty-state {
    text-align: center;
    padding: 80px 20px;
}

.lq-empty-state svg {
    margin-bottom: var(--lq-spacing-md);
    opacity: 0.4;
}

/* Responsive circle grid */
@media (max-width: 1024px) {
    .lq-circles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手机端缩减 section 卡片内边距 */
@media (max-width: 768px) {
    .lq-section {
        padding: var(--lq-spacing-md);
        margin-bottom: var(--lq-spacing-sm);
    }
    .lq-section-title {
        margin-bottom: var(--lq-spacing-sm);
    }
    .lq-section-subtitle {
        margin-bottom: var(--lq-spacing-sm);
    }
}

/* ========================================
   手机端：药圈横向滑动卡片组
   ======================================== */
@media (max-width: 768px) {
    /* 外层滚动容器 + 右侧渐变淡出提示 */
    .lq-circles-scroll-wrap {
        position: relative;
    }
    .lq-circles-scroll-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, transparent, var(--lq-bg-card, #fff));
        pointer-events: none;
        z-index: 2;
        border-radius: 0 var(--lq-radius-md) var(--lq-radius-md) 0;
    }

    /* Grid 变为横向 flex 滚动 */
    .lq-circles-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: var(--lq-spacing-sm);
        padding-bottom: var(--lq-spacing-sm);
        /* 隐藏滚动条但保留功能 */
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE */
    }
    .lq-circles-grid::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari */
    }

    /* 每个卡片固定宽度，紧凑布局 */
    .lq-circle-card {
        flex: 0 0 180px;
        min-width: 180px;
        scroll-snap-align: start;
        padding: var(--lq-spacing-sm);
    }

    .lq-circle-avatar {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .lq-circle-card h3 {
        font-size: var(--lq-font-size-sm);
    }

    /* 隐藏描述文字以节省空间 */
    .lq-circle-card p {
        display: none;
    }

    .lq-circle-meta {
        margin-bottom: 6px;
        font-size: 12px;
    }

    .lq-circle-card .lq-btn {
        font-size: 12px;
        padding: 4px 10px;
    }
}

/* 超小屏幕再收窄 */
@media (max-width: 400px) {
    .lq-circle-card {
        flex: 0 0 160px;
        min-width: 160px;
    }
}