/**
 * 首页专属样式 — 精选专题（Featured Collections）+ 最新文章（Latest Articles）
 *
 * 仅作用于 application/index/view/index/index/index_main.html 新增两块。
 * 原生 CSS 实现，不依赖 tailwind 编译。
 * 颜色取值对齐 tailwind 默认色板（gray-50/100/200/400/700/800、blue-200/600），
 * 与 index01.css（tailwind 产物，oklch）视觉基本一致。
 *
 * 公共样式见 global.min.css；本文件属「页面自身 CSS」，勿在此写全站公共规则。
 */

/* ===== 公用 ===== */
.home-container {
    width: 100%;
    max-width: 80rem;          /* 对齐 tailwind container（lg 档 ≈ 1280px） */
    margin-inline: auto;
    padding-inline: 1rem;      /* px-4 */
}
.home-section-title {
    font-size: 1.5rem;         /* text-2xl */
    font-weight: 700;          /* font-bold */
    color: #1f2937;            /* gray-800 */
    text-align: center;
    margin-bottom: 2rem;       /* mb-8 */
}
@media (min-width: 48rem) {    /* md:768px */
    .home-section-title { font-size: 1.875rem; } /* text-3xl */
}

/* ===== 精选专题 ===== */
.home-collections {
    padding-block: 3rem;       /* py-12 */
    background-color: #f9fafb; /* gray-50 */
}
.home-collections__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 默认 2 列 */
    gap: 1.5rem;               /* gap-6 */
}
@media (min-width: 40rem) {    /* sm:640px */
    .home-collections__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {    /* lg:1024px */
    .home-collections__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.home-collection-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.home-collection-card__inner {
    background-color: #fff;
    border-radius: 0.5rem;     /* rounded-lg */
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);          /* shadow-sm */
    transition: box-shadow .3s ease, transform .3s ease;
}
.home-collection-card:hover .home-collection-card__inner {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1),      /* shadow-lg */
                0 4px 6px -4px rgba(0, 0, 0, .1);
    transform: translateY(-4px); /* -translate-y-1（1 单位 = 0.25rem） */
}
.home-collection-card__media {
    aspect-ratio: 4 / 3;
    background-color: #f3f4f6; /* gray-100（图片占位底色） */
    overflow: hidden;
}
.home-collection-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* object-cover */
    display: block;
}
.home-collection-card__body {
    padding: 0.75rem;          /* p-3 */
    text-align: center;
}
.home-collection-card__name {
    font-size: 0.875rem;       /* text-sm */
    font-weight: 500;          /* font-medium */
    color: #374151;            /* gray-700 */
    transition: color .3s ease;
}
.home-collection-card:hover .home-collection-card__name {
    color: #2563eb;            /* blue-600 */
}

/* ===== 最新文章 ===== */
.home-articles {
    padding-block: 3rem;       /* py-12 */
    background-color: #fff;    /* bg-white */
}
.home-articles__grid {
    display: grid;
    grid-template-columns: 1fr;                 /* 默认 1 列 */
    gap: 1rem;                                  /* gap-4 */
    max-width: 64rem;                           /* max-w-5xl */
    margin-inline: auto;
}
@media (min-width: 64rem) {    /* lg:1024px */
    .home-articles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.home-article-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.home-article-card__inner {
    border: 1px solid #f3f4f6;  /* border-gray-100 */
    border-radius: 0.5rem;      /* rounded-lg */
    padding: 1rem;              /* p-4 */
    transition: border-color .3s ease, box-shadow .3s ease;
}
.home-article-card:hover .home-article-card__inner {
    border-color: #bfdbfe;      /* blue-200 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);  /* shadow-sm */
}
.home-article-card__title {
    font-size: 1rem;            /* text-base */
    font-weight: 500;           /* font-medium */
    color: #1f2937;             /* gray-800 */
    margin: 0 0 0.25rem;        /* mb-1 */
    line-height: 1.5;
    /* line-clamp-2：两行截断 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .3s ease;
}
.home-article-card:hover .home-article-card__title {
    color: #2563eb;             /* blue-600 */
}
.home-article-card__date {
    font-size: 0.75rem;         /* text-xs */
    color: #9ca3af;             /* gray-400 */
    margin: 0;
}

/* ===== 无障碍：尊重「减少动态效果」偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    .home-collection-card__inner,
    .home-article-card__inner,
    .home-collection-card__name,
    .home-article-card__title {
        transition: none;
    }
    .home-collection-card:hover .home-collection-card__inner {
        transform: none;
    }
}