/* 
 * CSS样式表
 * 该样式表定义了网页的基本布局和样式，包括字体、颜色、布局和响应式设计。
 */

/* 设置body的样式 */
body {
    font-family: Arial, sans-serif; /* 设置字体为Arial或无衬线字体 */
    background-color: #121212; /* 设置背景颜色为深灰色 */
    color: #ffffff; /* 设置文字颜色为白色 */
    margin: 0; /* 移除外边距 */
    padding: 0; /* 移除内边距 */
    display: flex; /* 使用弹性盒子布局 */
    flex-direction: column; /* 主轴方向为垂直 */
    align-items: center; /* 子元素在交叉轴上居中 */
    justify-content: center; /* 子元素在主轴上居中 */
    min-height: 100vh; /* 最小高度为视口高度 */
}

/* 设置container的样式 */
.container {
    display: flex; /* 使用弹性盒子布局 */
    justify-content: space-between; /* 子元素在主轴上均匀分布 */
    align-items: stretch; /* 子元素在交叉轴上拉伸以填满容器 */
    width: 100%; /* 宽度为100% */
    max-width: 1140px; /* 最大宽度为1140px */
    margin-bottom: 30px; /* 底部外边距为30px */
}

/* 设置艺术家卡片的样式 */
.artist-card {
    display: flex; /* 使用弹性盒子布局 */
    flex-direction: column; /* 主轴方向为垂直 */
    background-color: rgba(28, 28, 28, 0.8); /* 半透明背景颜色 */
    border-radius: 8px; /* 边框圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    width: 360px; /* 宽度为360px */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    transition: transform 0.3s ease, background-color 0.3s ease; /* 平滑过渡效果 */
    position: relative; /* 相对定位 */
}

/* 设置艺术家卡片图片的样式 */
.artist-card img {
    width: 100%; /* 宽度为100% */
    height: auto; /* 高度自动调整 */
    transition: opacity 0.3s ease; /* 透明度过渡效果 */
}

/* 设置艺术家卡片图片悬停时的样式 */
.artist-card:hover img {
    opacity: 0.8; /* 鼠标悬停时图片透明度为0.8 */
}

/* 设置艺术家卡片覆盖层的样式 */
.overlay {
    position: absolute; /* 绝对定位 */
    top: 10px; /* 距离顶部10px */
    left: 10px; /* 距离左边10px */
    color: white; /* 文字颜色为白色 */
    font-size: 16px; /* 字体大小为16px */
    font-weight: bold; /* 字体加粗 */
}

/* 设置艺术家卡片标题的样式 */
.artist-card h2 {
    margin: 20px 0 0; /* 上边距为20px，左右边距为0 */
    padding: 0 20px; /* 内边距为0，左右为20px */
    font-size: 24px; /* 字体大小为24px */
}

/* 设置艺术家卡片听众数量的样式 */
.artist-card .listeners {
    margin: 10px 20px 0; /* 上边距为10px，左右边距为20px */
    font-size: 14px; /* 字体大小为14px */
    line-height: 1.5; /* 行高为1.5 */
    color: #b3b3b3; /* 文字颜色为浅灰色 */
}

/* 设置艺术家卡片描述的样式 */
.artist-card .description {
    margin: 10px 20px; /* 上下边距为10px，左右边距为20px */
    font-size: 14px; /* 字体大小为14px */
    line-height: 1.5; /* 行高为1.5 */
    color: #b3b3b3; /* 文字颜色为浅灰色 */
    text-align: left; /* 文本左对齐 */
}

/* 设置艺术家卡片关注按钮的样式 */
.artist-card .follow-btn {
    display: block; /* 作为块级元素显示 */
    margin: 10px 20px 20px; /* 上下边距为10px，左右边距为20px */
    padding: 10px 0; /* 上下内边距为10px，左右为0 */
    background-color: #1db954; /* 背景颜色为绿色 */
    color: #fff; /* 文字颜色为白色 */
    text-decoration: none; /* 移除下划线 */
    border-radius: 25px; /* 边框圆角 */
    text-align: center; /* 文本居中对齐 */
    transition: background-color 0.3s; /* 背景颜色过渡效果 */
}

/* 设置艺术家卡片关注按钮悬停时的样式 */
.artist-card .follow-btn:hover {
    background-color: #17a74a; /* 鼠标悬停时背景颜色 */
}

/* 设置艺术家卡片社交媒体链接的样式 */
.social-media {
    display: flex; /* 使用弹性盒子布局 */
    justify-content: center; /* 子元素在主轴上居中 */
    gap: 15px; /* 子元素之间的间隔 */
    margin-bottom: 20px; /* 底部外边距为20px */
}

/* 设置艺术家卡片社交媒体链接的样式 */
.social-media a {
    color: #b3b3b3; /* 文字颜色为浅灰色 */
    text-decoration: none; /* 移除下划线 */
    font-size: 20px; /* 字体大小为20px */
    transition: color 0.3s; /* 文字颜色过渡效果 */
}

/* 设置艺术家卡片社交媒体链接悬停时的样式 */
.social-media a:hover {
    color: #fff; /* 鼠标悬停时文字颜色为白色 */
}

/* 设置图标样式 */
.icon {
    width: 20px; /* 宽度为20px */
    height: 20px; /* 高度为20px */
    fill: #b3b3b3; /* 填充颜色为浅灰色 */
}

.icon:hover {
    fill: #fff; /* 鼠标悬停时填充颜色为白色 */
}

/* 设置引用部分的样式 */
.quote {
    position: relative; /* 相对定位 */
    font-size: 24px; /* 字体大小为24px */
    font-weight: bold; /* 字体加粗 */
    margin-left: 30px; /* 左边距为30px */
    color: #fff; /* 文字颜色为白色 */
    background-size: 110%; /* 背景图片大小 */
    background-position: top; /* 背景图片位置 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    flex-grow: 1; /* 允许元素增长 */
    border-radius: 8px; /* 边框圆角 */
}

/* 设置引用部分的伪元素样式 */
.memos::before {
    content: ''; /* 伪元素内容为空 */
    width: 36px; /* 宽度为30px */
    height: 36px; /* 高度为30px */
    background-image: url('/assets/img/blockquote.svg'); /* 背景图片 */
    display: inline-block; /* 作为内联块级元素显示 */
    margin: 0; /* 外边距为0 */
}

/* 设置引用部分的ID选择器样式 */
#memos {
    z-index: 1; /* 堆叠顺序 */
    position: relative; /* 相对定位 */
}

/* 设置引用部分的覆盖层样式 */
.quote-overlay {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度为100% */
    height: 100%; /* 高度为100% */
    background: rgba(0, 0, 0, 0.4); /* 背景颜色 */
    border-radius: 8px; /* 边框圆角 */
    z-index: 0; /* 堆叠顺序 */
    transition: 1s; /* 过渡效果 */
}

.quote-overlay:hover {
    background: rgba(0, 0, 0, 0.2); /* 鼠标悬停时背景颜色 */
    transition: 1s; /* 过渡效果 */
}

/* 引用部分的样式 */
.memos {
    margin: 20px; /* 外边距为20px */
    text-align: left; /* 文本左对齐 */
    width: 100%; /* 宽度为100% */
}

/* 引用部分的段落样式 */
.memos p {
    margin: 6px 0; /* 上下外边距为6px */
}

/* 引用部分的内容样式 */
.memos__content {
    margin-top: -25px; /* 上边距为-25px */
}

/* 引用部分的元数据样式 */
.memos__meta {
    font-size: 16px; /* 字体大小为16px */
}

.memos__date{font-size:14px;}

/* 引用部分的列表样式 */
.memos ul {
    list-style-type: none; /* 移除列表项标记 */
    padding-left: 0; /* 移除左侧内边距 */
}

/* 隐藏的元素样式 */
.load-btn.button-load,
.tag-span,
.resource-wrapper,
.memos__userinfo {
    display: none; /* 隐藏元素 */
}

/* 引用部分的列表样式 */
.quote ul {
    list-style-type: none; /* 移除列表项标记 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    body {
        justify-content: flex-start; /* 在移动端靠顶部 */
    }
    .top-section {
        flex-direction: column; /* 在移动端，子元素垂直排列 */
        align-items: center;
    }
    .container {
        flex-direction: column; /* 在移动端，子元素垂直排列 */
        align-items: center;
        text-align: center; /* 文本居中对齐 */
        width: 100%;
    }
    .artist-card {
        margin: 30px; /* 在移动端，卡片之间添加外边距 */
    }
    .quote {
        width: 360px; /* 引用部分宽度为360px */
        height: 222px; /* 引用部分高度为222px */
        align-items: center; /* 引用部分在交叉轴上居中 */
        font-size: 20px; /* 字体大小为20px */
        margin: 0; /* 外边距为0 */
        padding: 0; /* 内边距为0 */
    }
}