/* 友链详情页面样式 */

/* 友链列表区域 */
.joe_detail__friends {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(3, 1fr); /* 三列，每列宽度相等 */
    gap: 15px; /* 网格间距15px */
    margin-bottom: 15px; /* 底部外边距15px */
}

/* 友链项悬停效果 */
.joe_detail__friends-item .contain:hover {
    -webkit-transform: translateY(-5px) scale(1.025); /* Webkit浏览器向上移动5px并放大1.025倍 */
    transform: translateY(-5px) scale(1.025); /* 向上移动5px并放大1.025倍 */
    box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3); /* 悬停时添加阴影效果 */
}

/* 友链项容器样式 */
.joe_detail__friends-item .contain {
    display: block; /* 块级显示 */
    border-radius: var(--radius-inner); /* 圆角使用变量 */
    overflow: hidden; /* 溢出隐藏 */
    padding: 15px; /* 内边距15px */
    color: #fff; /* 文字颜色白色 */
    word-break: break-word; /* 单词过长时换行 */
    transition: box-shadow 0.35s, -webkit-transform 0.35s; /* 阴影和Webkit变换过渡动画0.35秒 */
    transition: transform 0.35s, box-shadow 0.35s; /* 变换和阴影过渡动画0.35秒 */
    transition: transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s; /* 兼容写法 */
}

/* 友链标题样式 */
.joe_detail__friends-item .contain .title {
    position: relative; /* 相对定位，用于伪元素定位 */
}

/* 友链标题下划线 */
.joe_detail__friends-item .contain .title::after {
    content: ''; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    bottom: -5px; /* 距底部-5px */
    left: 0; /* 距左侧0 */
    width: 100%; /* 宽度100% */
    height: 1px; /* 高度1px */
    background: #fff; /* 背景色白色 */
}

/* 友链内容区域 */
.joe_detail__friends-item .contain .content {
    display: flex; /* 使用弹性布局 */
    justify-content: space-between; /* 水平两端对齐 */
    align-items: center; /* 垂直居中对齐 */
    margin-top: 15px; /* 顶部外边距15px */
}

/* 友链描述 */
.joe_detail__friends-item .contain .content .desc {
    margin-right: 10px; /* 右侧外边距10px */
    display: -webkit-box; /* Webkit浏览器多行文本显示 */
    -webkit-line-clamp: 2; /* 限制显示2行 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    overflow: hidden; /* 溢出隐藏 */
}

/* 友链头像 */
.joe_detail__friends-item .contain .content .avatar {
    width: 40px; /* 宽度40px */
    height: 40px; /* 高度40px */
    min-width: 40px; /* 最小宽度40px */
    min-height: 40px; /* 最小高度40px */
    border-radius: 50%; /* 圆形 */
    -o-object-fit: cover; /* Opera浏览器图片填充方式 */
    object-fit: cover; /* 图片填充方式，保持比例裁剪 */
}

/* 友链提交表单区域 */
.friend_submit {
    margin-top: 30px; /* 顶部外边距30px */
    margin-bottom: 25px; /* 底部外边距25px */
}

/* 表单标题 */
.friend_submit>h2 {
    margin-bottom: 8px; /* 底部外边距8px */
    position: relative; /* 相对定位，用于伪元素 */
    padding-bottom: 8px; /* 底部内边距8px */
    font-size: 20px; /* 字体大小20px */
    font-weight: 700; /* 字体加粗 */
    color: var(--main-color); /* 文字颜色使用主色调变量 */
    font-family: inherit; /* 继承字体 */
    line-height: 1.1; /* 行高1.1 */
}

/* 表单标题下划线 */
.friend_submit>h2::before {
    transition: .4s; /* 过渡动画0.4秒 */
    transform-origin: left; /* 变换起点为左侧 */
    position: absolute; /* 绝对定位 */
    content: ''; /* 伪元素内容为空 */
    width: 40px; /* 宽度40px */
    height: 3px; /* 高度3px */
    background: var(--theme); /* 背景色使用主题变量 */
    left: 0; /* 距左侧0 */
    bottom: 3px; /* 距底部3px */
    border-radius: 5px; /* 圆角5px */
    box-shadow: 1px 1px 3px -1px var(--theme); /* 阴影效果 */
}

/* 表单标题悬停时下划线动画 */
.friend_submit>h2:hover::before {
    transform: scaleX(1.3); /* 水平放大1.3倍 */
}

/* 输入框区域 */
.friend_submit>.input {
    width: 100%; /* 宽度100% */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 15px; /* 底部外边距15px */
}

/* 输入框标签 */
.friend_submit>.input>.input-label {
    margin-right: 10px; /* 右侧外边距10px */
    white-space: nowrap; /* 文字不换行 */
    color: var(--main); /* 文字颜色使用变量 */
}

/* 输入框样式 */
.friend_submit>.input input {
    height: 36px; /* 高度36px */
    width: 100%; /* 宽度100% */
    display: block; /* 块级显示 */
    padding: 0 10px; /* 左右内边距10px */
    border-radius: 2px; /* 圆角2px */
    color: var(--routine); /* 文字颜色使用变量 */
    background: transparent; /* 背景透明 */
    border: 1.5px solid var(--classA); /* 边框1.5px，使用变量颜色 */
    transition: 0.3s; /* 过渡动画0.3秒 */
}

/* 输入框聚焦样式 */
.friend_submit>.input input:focus {
    background: var(--background); /* 背景色使用变量 */
    border-color: var(--theme); /* 边框颜色变为主题色 */
}

/* 按钮区域 */
.friend_submit>.button>button {
    padding: 0 15px; /* 左右内边距15px */
    height: 36px; /* 高度36px */
    border: none; /* 无边框 */
    background: var(--theme); /* 背景色使用主题变量 */
    color: #fff; /* 文字颜色白色 */
    border-radius: var(--main-radius); /* 圆角使用变量 */
    transition: 0.2s; /* 过渡动画0.2秒 */
}

/* 提交按钮悬停效果 */
.friend_submit>.button>.submit:hover {
    opacity: 0.9; /* 透明度0.9 */
}

/* 提交按钮聚焦效果 */
.friend_submit>.button>.submit:focus {
    opacity: 0.8; /* 透明度0.8 */
}

/* 提交按钮样式 */
.friend_submit>.button>.submit {
    margin-right: 2vw; /* 右侧外边距2vw */
    box-shadow: 1px 1px 3px -1px var(--theme); /* 阴影效果 */
}

/* 重置按钮样式 */
.friend_submit>.button>.reset {
    color: var(--main); /* 文字颜色使用变量 */
    background: var(--classC); /* 背景色使用变量 */
    transition: 0.3s; /* 过渡动画0.3秒 */
}

/* 重置按钮悬停效果 */
.friend_submit>.button>.reset:hover {
    background: var(--classB); /* 背景色变为另一变量颜色 */
    border-color: var(--classA); /* 边框颜色使用变量 */
}

/* 响应式设计：屏幕宽度小于768px */
@media (max-width: 768px) {
    .friend_submit>.input {
        display: block; /* 改为块级布局 */
        margin-bottom: 10px; /* 底部外边距10px */
    }

    .friend_submit>.input>.input-label {
        margin-bottom: 5px; /* 底部外边距5px */
        display: block; /* 块级显示 */
    }
}