/*
Theme Name: Stone
Author: TheStoneDB
Description: A child theme of Stoat
Template: stoat
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stone
*/

.stone-breadcrumb {
    margin-top: 1em;
    font-size: 0.85em;
    color: var(--gray);
}

.stone-breadcrumb a {
    color: var(--gray);
    text-decoration: none;
}

.stone-breadcrumb a:hover {
    color: var(--dark-gray);
    text-decoration: underline;
}

.stone-breadcrumb__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.stone-breadcrumb__current {
    color: var(--gray);
}

/* ---------- 导航栏登录 / 注册按钮 ---------- */
/* 线框使用与雷达图一致的浅灰边框（#e2e5e9）+ 12px 圆角，桌面顶栏与移动抽屉共用。 */
.site-header .primary-nav .menu > li.stone-nav-member > a {
    border: 1px solid #e2e5e9;
    border-radius: 12px;
    padding: 6px 14px;
    display: inline-block;
}
.site-header .primary-nav .menu > li.stone-nav-member:hover > a {
    /* 与 .stone-prevnext__link:hover 一致的浅灰背景，
       同时抵消父主题菜单 hover 的 opacity: 0.5 淡出效果 */
    background: rgba(0, 0, 0, 0.02);
    opacity: 1;
}

/* 移动端抽屉：项为整行 block，套边框需改回紧凑钮并限制宽度 */
.offcanvas-nav .stone-nav-member > a {
    display: inline-block;
    border: 1px solid #e2e5e9;
    border-radius: 12px;
    padding: 0.4em 1.2em;
    margin: 0.3em 0;
}
.offcanvas-nav .stone-nav-member:hover > a {
    /* 与 .stone-prevnext__link:hover 一致的浅灰背景 */
    background: rgba(0, 0, 0, 0.02);
}

/* ---------- 相关文章 ---------- */
/* 条目样式直接复用父主题 .stoat-entry 系列（与主页文章列表一致），
   此处仅保留区块容器与标题，列表项间距由父主题
   .stoat-entry + .stoat-entry 自动处理。 */
.stone-related {
    margin-top: var(--spacing-lg, 2.8em);
    padding-top: var(--spacing-lg, 2.8em);
    border-top: 1px solid var(--border, rgba(0,0,0,.07));
}

.stone-related__title {
    font-size: 1.3em;
    margin: 0 0 var(--spacing-lg, 2.8em);
    font-weight: var(--heading-weight, 600);
}

/* ---------- 上一篇 / 下一篇 ---------- */
/* 复用父主题分隔方式与节奏（同 .entry-tags / #comments） */
.stone-prevnext {
    margin-top: var(--spacing-lg, 2.8em);
    padding-top: var(--spacing-lg, 2.8em);
    border-top: 1px solid var(--border, rgba(0,0,0,.07));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.stone-prevnext__link {
    display: block;
    padding: 0.9em 1em;
    /* 透明边框占位：视觉上无边框，hover 变灰时不引起布局跳动 */
    border: 1px solid transparent;
    border-radius: 12px; /* 与雷达图一致的圆角 */
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s;
}

.stone-prevnext__link--next {
    text-align: right;
}

.stone-prevnext__link--empty {
    visibility: hidden;
}

.stone-prevnext__link:hover {
    border-color: #e2e5e9; /* 悬停时显示与雷达图一致的浅灰边框 */
    background: rgba(0, 0, 0, 0.02);
}

/* 标签同 .entry-meta 配色 */
.stone-prevnext__label {
    display: block;
    font-size: 0.9em;
    color: var(--meta, #767676);
    margin-bottom: 0.3em;
}

.stone-prevnext__title {
    font-size: 0.95em;
    line-height: 1.45;
}

@media (max-width: 767.98px) {
    .stone-prevnext {
        grid-template-columns: 1fr;
    }
}

/* ---------- 首页文章卡片模块 ---------- */
/* 参考 stonetu.com 卡片列表：上方为特色图（4:3），下方标题 + meta。
   列数由行内变量 --stone-cols 控制（后台可配置每行数量），
   桌面默认 4 列，平板 3 列，移动端 2 列，小屏单列。 */
.stone-cards {
    margin-bottom: var(--spacing-lg, 2.8em);
}

.stone-cards__title {
    font-size: 1.3em;
    margin: 0 0 1.2em;
    font-weight: var(--heading-weight, 600);
}

.stone-cards__grid {
    display: grid;
    grid-template-columns: repeat(var(--stone-cols, 4), 1fr);
    gap: 1.1em;
}

.stone-cards__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.07));
    border-radius: 12px; /* 与雷达图/上一篇下一篇一致的圆角 */
    overflow: hidden;
    background: var(--bg, #fff);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stone-cards__card:hover {
    border-color: #e2e5e9;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.stone-cards__thumb {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--border, rgba(0, 0, 0, 0.07));
}

.stone-cards__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.stone-cards__card:hover .stone-cards__thumb img {
    transform: scale(1.03);
}

.stone-cards__body {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.9em 1em 1em;
}

.stone-cards__entry-title {
    font-size: 1em;
    line-height: 1.4;
    margin: 0;
    font-weight: var(--heading-weight, 600);
}

.stone-cards__entry-title a {
    color: inherit;
    text-decoration: none;
}

.stone-cards__entry-title a:hover {
    text-decoration: underline;
}

.stone-cards__card .entry-meta {
    font-size: 0.85em;
}

/* 列数过多时压缩卡片内边距，避免标题挤压 */
@media (min-width: 1024px) {
    .stone-cards__grid[style*="--stone-cols: 5"],
    .stone-cards__grid[style*="--stone-cols: 6"] {
        gap: 0.8em;
    }
    .stone-cards__grid[style*="--stone-cols: 6"] .stone-cards__body {
        padding: 0.7em 0.8em 0.8em;
    }
}

@media (max-width: 1023.98px) {
    .stone-cards__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 479.98px) {
    .stone-cards__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- 首页表格文章列表模块 ---------- */
/* 一行一篇文章：缩略图（左）+ 标题与 meta（右），行间分隔线呈表格风格。
   列数由行内变量 --stone-table-cols 控制（后台可配置每行数量，1 = 单列列表）。 */
.stone-table {
    margin-bottom: var(--spacing-lg, 2.8em);
}

.stone-table__title {
    font-size: 1.3em;
    margin: 0 0 1.2em;
    font-weight: var(--heading-weight, 600);
}

.stone-table__grid {
    display: grid;
    grid-template-columns: repeat(var(--stone-table-cols, 1), 1fr);
    gap: 0 2em;
}

.stone-table__row {
    display: flex;
    gap: 1em;
    align-items: flex-start;
    padding: 1em 0;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.07));
}

.stone-table__row:first-child {
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.07));
}

.stone-table__thumb {
    display: block;
    flex: 0 0 120px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: var(--border, rgba(0, 0, 0, 0.07));
}

.stone-table__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.stone-table__row:hover .stone-table__thumb img {
    transform: scale(1.03);
}

.stone-table__body {
    min-width: 0;
}

.stone-table__entry-title {
    font-size: 1em;
    line-height: 1.4;
    margin: 0 0 0.35em;
    font-weight: var(--heading-weight, 600);
}

.stone-table__entry-title a {
    color: inherit;
    text-decoration: none;
}

.stone-table__entry-title a:hover {
    text-decoration: underline;
}

.stone-table__row .entry-meta {
    font-size: 0.85em;
    margin-top: 0;
}

/* 多列时行间距略收紧，首行仍以表格上边框开头 */
@media (min-width: 768px) {
    .stone-table__grid[style*="--stone-table-cols: 2"],
    .stone-table__grid[style*="--stone-table-cols: 3"],
    .stone-table__grid[style*="--stone-table-cols: 4"] {
        gap: 0 1.5em;
    }
}

@media (max-width: 767.98px) {
    .stone-table__grid {
        grid-template-columns: 1fr;
    }
    .stone-table__thumb {
        flex-basis: 96px;
    }
}

/* ---------- 首页模块翻页 ---------- */
/* 结构与父主题 .pagination 一致（nav.navigation.pagination > div.nav-links），
   自动继承父主题分页样式；此处仅补充模块间距。 */
.stone-module-pagination {
    margin-top: 0.5em;
}

/* ---------- 首页顶部间距 ---------- */
/* 父主题在 .archive-header 提供顶部留白（padding: var(--spacing-xl) 0 …）；
   本站博客首页无归档标题时 archive-header 不渲染，内容会紧贴导航栏。
   这里给 archive-wrap 的第一个非归档头部子元素补上同等顶部间距；
   归档 / 搜索等页面首个子元素是 archive-header，规则自动跳过。 */
.archive-wrap > :first-child:not(.archive-header) {
    margin-top: var(--spacing-xl, 3.4em);
}

/* ---------- 首页默认文章循环模块 ---------- */
/* 条目与分页复用父主题 .entry-list / .stoat-entry / .pagination 样式，
   此处仅补模块容器与标题，并抵消父主题 .entry-list:first-child
   （面向归档页直接子元素）在隐藏标题时多出的顶部间距。 */
.stone-loop {
    margin-bottom: var(--spacing-lg, 2.8em);
}

.stone-loop__title {
    font-size: 1.3em;
    margin: 0 0 1.2em;
    font-weight: var(--heading-weight, 600);
}

.stone-loop .entry-list:first-child {
    margin-top: 0;
}