/* 卡片式布局样式 */
/*
 * 自定义样式
 */

.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card__content {
    padding: 1.5rem;
}

.card__header {
    margin-bottom: 1rem;
}

.card__title {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

.card__title a {
    color: #333;
    text-decoration: none;
}

.card__title a:hover {
    color: #e22d30;
}

.card__lead {
    color: #666;
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
}

.card__meta {
    font-size: 0.85rem;
    color: #888;
}

.card__excerpt {
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.card__footer {
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.card__readmore {
    background: #e22d30;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-block;
    transition: background 0.2s ease;
}

.card__readmore:hover {
    background: #c41e22;
    color: #fff;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1.5rem;
    }
    
    .card__content {
        padding: 1rem;
    }
    
    .card__title {
        font-size: 1.1rem;
    }
}

/* 缩略图样式优化 */
.card .post__thumbnail {
    margin: 0;
    border-radius: 0;
}

.card .post__thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* 默认样式：针对所有屏幕（主要是移动端） */
/* 由于 img 标签有 w100，这里可以直接设置最大宽度和高度来约束它 */
img[src*="/logo/logo.png"] {
    /* 设置 Logo 在移动设备上的最大宽度 */
    max-width: 140px; /* 例如，手机上最大宽度150px */
    height: auto;     /* 保持图片比例 */
}
/* PC 端样式：使用媒体查询 for 较大的屏幕 */
/* Tachyons 的 `ns` (not-small) 通常对应 min-width: 30em (480px) 或 min-width: 48em (768px) */
/* 假设你希望在宽度大于 768px 的屏幕上应用这些样式 */
@media screen and (min-width: 48em) { /* 48em 约等于 768px，这是 Ananke 常用的PC端断点 */
    img[src*="/logo/logo.png"] {
        /* 覆盖 w100 和 mw5-ns 的效果，设置 PC 端的固定宽度 */
        width: 150px; /* 例如，PC 上固定宽度200px */
        height: auto; /* 保持图片比例 */
        /* 可以移除 mw5-ns，或者直接覆盖它 */
        max-width: 150px; /* 确保不会超过这个宽度 */
    }
}
/* 如果你需要针对更宽的屏幕（如大型桌面显示器）进一步调整 */
@media screen and (min-width: 60em) { /* 60em 约等于 960px */
    img[src*="/logo/logo.png"] {
        width: 200px; /* 例如，更宽屏幕上250px */
        max-width: 200px;
    }
}