/**
 * Alright Child - 自定义样式
 *
 * 在父主题 style.css 之后加载，优先级更高。
 * UI 设计规范：禁止使用渐变色。
 */

/* ================================================================
   1. 瀑布流模式 (CSS Columns Masonry)
      卡片视觉完全复用商城模式（.list-item .media .list-content 等），
      此处仅控制布局排列与图片自适应宽高。
   ================================================================ */
:root {
    --waterfall-gap: 16px;
}

/* 瀑布流容器 - CSS Columns */
.waterfall-grid {
    column-count: 1;
    column-gap: var(--waterfall-gap);
}

/* 瀑布流卡片项 */
.waterfall-item {
    display: inline-block;
    width: 100%;
    margin-bottom: var(--waterfall-gap);
    break-inside: avoid;
}

/* 瀑布流图片容器 - 覆盖商城模式 .media 的 fixed 宽高比例，圆角已由内联 style 控制 */
.waterfall-media:after {
    display: none !important;              /* 取消 .media 伪元素固定比例 */
}

.waterfall-media .media-content {
    position: static !important;           /* 取消绝对定位，让内容随高度流动 */
    display: block !important;             /* <a> 标签块级化 */
    line-height: 0;                        /* 消除行内间隙 */
    border-bottom-left-radius: 0 !important;   /* 与父级内联 style 保持一致：下方直角 */
    border-bottom-right-radius: 0 !important;
}

/* 瀑布流图片 - 原始宽高比，不裁剪 */
/* 将圆角直接应用在 img 上，避免父级 inherit 链干扰 */
.waterfall-media .waterfall-image {
    width: 100%;
    height: auto !important;               /* 原始比例 */
    display: block;
    object-fit: initial !important;        /* 取消 cover 裁剪 */
    /* 与商城模式一致的圆角：仅上方圆角、下方直角 */
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0 !important;
}

/* 响应式列数 */
@media (min-width: 576px) {
    .waterfall-grid { column-count: 2; }
}
@media (min-width: 992px) {
    .waterfall-grid { column-count: 3; }
}
@media (min-width: 1400px) {
    .waterfall-grid { column-count: 4; }
}

/* ================================================================
   2. 布局覆盖
   ================================================================ */

/* ================================================================
   3. 深色模式覆盖
   ================================================================ */