/* ============================================================
 * 快捷入口专属样式 - entry.css
 * 包含:.entry-grid / .entry-item / .entry-icon / .entry-text /
 *       .entry-text strong / .entry-text small / hover
 * 响应式:桌面 4 列 / 平板 2 列 / 手机 4 列纵向
 * 加载位置:在 premium.css 之后,nav.css 之后,main2.css 之后
 * ============================================================ */

/* ========== 快捷入口 - 默认(桌面) ========== */
.entry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* 卡片容器 */
.entry-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--gray-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
}

.entry-item:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
}

/* 左侧图标方块 */
.entry-icon {
    width: 48px;
    height: 48px;
    background: var(--gradient-teal);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--white);
    flex-shrink: 0;
}

/* 右侧文字容器 */
.entry-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.entry-text strong {
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.entry-text small {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 2px;
}

/* hover 时文字变白 */
.entry-item:hover .entry-text strong,
.entry-item:hover .entry-text small {
    color: var(--white);
}

/* ============================================================
 * 平板 - ≤992px 折成 2 列
 * ============================================================ */
@media (max-width: 992px) {
    .entry-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .entry-item {
        padding: 16px;
    }

    .entry-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .entry-text strong {
        font-size: 15px;
    }
}

/* ============================================================
 * 手机 - ≤768px
 * 4 个入口一行 / 纵向排版 / 隐藏副标题
 * ============================================================ */
@media (max-width: 768px) {
    .entry-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .entry-item {
        flex-direction: column;       /* 图标在上,文字在下 */
        text-align: center;
        padding: 12px 4px;
        gap: 8px;
    }

    .entry-icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .entry-text strong {
        font-size: 13px;
        line-height: 1.3;
    }

    .entry-text small {
        display: none;  /* 手机版只显示 icon + strong(白殿风专科) */
    }
}

/* ============================================================
 * 小屏手机 - ≤480px 进一步压缩
 * ============================================================ */
@media (max-width: 480px) {
    .entry-grid {
        gap: 6px;
    }

    .entry-item {
        padding: 10px 2px;
        gap: 6px;
    }

    .entry-icon {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .entry-text strong {
        font-size: 12px;
    }
}