/*
 * ----------------------------------------
 * 通用图片美化样式: .beautify-image
 * ----------------------------------------
 */
.beautify-image {
    /* 1. 响应式布局 */
    max-width: 100%; /* 确保图片宽度不超过其父容器 */
    height: auto;    /* 保持图片原始比例，避免变形 */

    /* 2. 居中和间距 */
    display: block;  /* 将图片设置为块级元素 */
    margin: 25px auto; /* 上下留出 25px 间距，左右自动居中 */

    /* 3. 美化效果 */
    border-radius: 10px; /* 轻微圆角，柔化边缘 */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* 柔和阴影，增加立体感 */
    
    /* 4. 过渡动画 (让悬停效果更平滑) */
    transition: all 0.3s ease-in-out;
}

/* 5. 悬停交互效果 (可选，增加点击感) */
.beautify-image:hover {
    transform: translateY(-2px) scale(1.01); /* 图片略微抬升和放大 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 阴影加深 */
}

/* 6. 特殊场景: 居中显示但无阴影/圆角 */
.image-center {
    display: block;
    margin: 20px auto;
}

/*
 * ----------------------------------------
 * 图片左浮动，文字环绕在右侧
 * ----------------------------------------
 */
.img-wrap-left {
    /* 1. 核心属性：让图片向左浮动 */
    float: left;
    
    /* 2. 控制尺寸：设置图片宽度，确保文字有足够的空间 */
    width: 35%; 
    max-width: 200px; /* 设置最大宽度，防止图片过大 */
    
    /* 3. 间距：在右侧和底部添加间距，防止文字紧贴图片 */
    margin: 5px 20px 10px 0; /* 上 右 下 左 */
    
    /* 4. 美化效果（可选，可与 .beautify-image 结合） */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/*
 * ----------------------------------------
 * 图片右浮动，文字环绕在左侧
 * ----------------------------------------
 */
.img-wrap-right {
    /* 1. 核心属性：让图片向右浮动 */
    float: right;
    
    /* 2. 控制尺寸 */
    width: 35%;
    max-width: 200px;
    
    /* 3. 间距：在左侧和底部添加间距 */
    margin: 5px 0 10px 20px; /* 上 右 下 左 */

    /* 4. 美化效果（可选） */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* * ----------------------------------------
 * 清除浮动 (重要!)
 * ----------------------------------------
 */
.clear-float {
    /* 停止浮动效果，确保后续内容不再被环绕 */
    clear: both;
}
/*
 * ----------------------------------------
 * 自定义比例 + 圆角图片（推荐）
 * 使用 CSS 变量灵活控制大小
 * ----------------------------------------
 */
.img-rounded-custom {
    /* 可自定义参数（默认值） */
    --img-width: 40%;        /* 图片宽度 */
    --img-ratio: 16 / 9;     /* 宽高比 */
    --img-radius: 16px;      /* 圆角大小 */

    display:block;
    
    width: var(--img-width);
    aspect-ratio: var(--img-ratio);
    margin: 25px 0;
    display: block;

    /* 裁剪 & 美化 */
    object-fit: cover;
    border-radius: var(--img-radius);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-rounded-custom:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}