/* Block Layout Styles - Inspired by bjoernkarmann.dk */

/* Hidden headings for anchor links - keep in DOM but visually hidden */
.content-block > h2[style*="visibility: hidden"] {
    visibility: hidden !important;
    position: relative !important; /* Keep in document flow for anchor jumping */
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    top: 0 !important;
}

/* Ensure smooth scrolling to anchors */
html {
    scroll-behavior: smooth;
}

/* Section：限制宽度，内容在内部兼容展示不超出 */
.content-block {
    width: 100%;
    max-width: 100%; /* 不超出父级宽度 */
    margin: 0 auto;
    padding: 4rem 0;
    background-color: transparent;
    position: relative;
    scroll-margin-top: 6rem; /* 补偿 fixed header，确保锚点跳转时能看到内容 */
    scroll-padding-top: 6rem; /* 额外的滚动偏移 */
    box-sizing: border-box;
    /* 不使用 overflow-x: hidden，让文本完整显示，通过 max-width 和换行控制 */
}

/* Full width container for block pages */
body .content.index {
    max-width: 100% !important;
    padding: 0;
}

/* Padding only around article content for block pages */
body .content.index article.post {
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 120px;
}

/* Multiple sections spacing */
#block-content-sections .content-block + .content-block {
    margin-top: 2rem;
}

.content-block .container {
    max-width: min(1230px, 100%); /* 不超出 section 宽度 */
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0 1.66667rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    min-width: 0;
    overflow: visible; /* 允许内容完整显示，row 的负 margin 可以延伸到 padding 区域 */
}

.content-block .row {
    display: flex;
    flex-wrap: wrap; /* 内容过多时自动换行 */
    margin-left: -0.83333rem;
    margin-right: -0.83333rem;
    align-items: flex-start;
    width: 100%; /* row 宽度为 container 内容宽度 */
    max-width: 100%; /* 不超出 container 内容宽度 */
    flex: auto;
    flex-direction: row;
    box-sizing: border-box;
    min-width: 0;
    overflow: visible; /* 允许内容完整显示，不裁切 */
    /* 负 margin 让 row 延伸到 container 的 padding 区域，但 row 的内容宽度仍为 container 内容宽度 */
}

/* 兼容排列：图片与文本不固定等高，各列按内容自然高度，缺出空间容纳文本 */
.content-block .row.has-image-and-text {
    align-items: flex-start; /* 列顶部对齐，不拉伸等高；小图不占大图等高，缺出空间放文字 */
}

.content-block .row.has-image-and-text .column {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 所有列内容左对齐 */
}

.content-block .row.has-image-and-text .column.text-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 文本列左对齐，与图片列对齐 */
}

/* 文本垂直对齐：向上 */
.content-block .row.has-image-and-text .column.text-column.text-align-top {
    justify-content: flex-start; /* 文本从顶部开始 */
}

.content-block .row.has-image-and-text .column.text-column.text-align-top .content-wrapper {
    justify-content: flex-start; /* 文本内容从顶部开始 */
}

/* 文本垂直对齐：向下 */
.content-block .row.has-image-and-text .column.text-column.text-align-bottom {
    justify-content: flex-end; /* 文本从底部开始 */
}

.content-block .row.has-image-and-text .column.text-column.text-align-bottom .content-wrapper {
    justify-content: flex-end; /* 文本内容从底部开始 */
}

.content-block .row.has-image-and-text .column.text-column {
    max-width: 100% !important; /* 不超出 row 可用宽度 */
}

.content-block .row.has-image-and-text .column.text-column .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 文本内容左对齐，与图片左边缘对齐 */
    width: 100%; /* 确保宽度一致 */
    min-width: 0; /* 允许收缩，文字通过 overflow-wrap 换行完整显示不裁切 */
    max-width: 100%; /* 不超出列宽度 */
}

/* 确保图片列也左对齐 */
.content-block .row.has-image-and-text .column:not(.text-column) {
    align-items: flex-start !important;
}

.content-block .row.has-image-and-text .column:not(.text-column) .content-wrapper {
    align-items: flex-start !important;
    width: 100%;
}

/* 右列「小图+文字」兼容排列：小图自然高度，不强制与大图等高，下方接文本 */
.content-block .column.image-text-flow-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
}

.content-block .column.image-text-flow-column .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.content-block .column.image-text-flow-column .column-content[data-module="image"] .ce-image img.is-content {
    min-height: 0 !important; /* 小图不占与大图等高，保持自然比例 */
    max-height: 42vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 当 row 中包含图片列时，设置小间隙（参考网站样式） */
.content-block .row.has-image-columns {
    margin: 0 !important;
    gap: 0.5rem; /* 图片之间的小间隙，参考用户要求 */
    align-items: flex-start !important; /* 强制所有列顶部对齐 */
    align-content: flex-start !important; /* 内容顶部对齐 */
    display: flex !important;
    flex-wrap: nowrap; /* 防止换行导致对齐问题 */
}

/* 确保所有图片列的顶部对齐 */
.content-block .row.has-image-columns > .column {
    align-self: flex-start !important; /* 强制顶部对齐 */
    display: flex !important;
    flex-direction: column !important;
}

.content-block .column {
    padding-left: 0.83333rem;
    padding-right: 0.83333rem;
    box-sizing: border-box;
    position: relative;
    max-width: 100%; /* 不超出 row 宽度 */
    min-width: 0; /* 允许收缩，内容兼容展示 */
    flex-shrink: 1; /* 允许列收缩以适应 row 宽度 */
}

/* 确保所有列的总宽度不超过 row 的可用宽度 */
.content-block .row .column {
    flex-basis: auto; /* 根据内容自适应 */
}

/* 多张图片时，图片列之间有小间隙，移除默认 padding */
/* 图片列宽度根据内容（图片）自适应，覆盖 data-xl-width 的固定宽度 */
.content-block .row.has-image-columns .column.large-image,
.content-block .row.has-image-columns .column.medium-image,
.content-block .row.has-image-columns .column.small-image {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* 列内容左对齐 */
    align-self: flex-start !important; /* 强制列顶部对齐 */
    vertical-align: top !important; /* 顶部对齐 */
    position: relative;
    top: 0 !important;
    min-width: 0 !important; /* 允许列收缩 */
    width: fit-content !important; /* 列宽度根据内容（图片）自适应，覆盖 data-xl-width */
    max-width: 100% !important; /* 不超出 row 可用宽度 */
    flex: 0 1 auto !important; /* 允许收缩，但不放大，根据内容自适应 */
    flex-basis: auto !important; /* 根据内容自适应 */
    flex-shrink: 1 !important; /* 如果空间不足，允许收缩 */
}

/* 文本行样式，文本位于图片下方 */
.content-block .row.text-row {
    margin-top: 1rem;
    margin-bottom: 0;
}

.content-block .column.text-below-image {
    padding: 0;
    margin: 0;
}

.content-block .spacer-column {
    /* Spacer columns for layout spacing */
}

.content-block .content-wrapper {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.content-block .column-content {
    margin-bottom: 1.5rem;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.content-block .column-content:last-child {
    margin-bottom: 0;
}

/* Image Styles */
.content-block .ce-image {
    width: fit-content; /* 根据图片实际宽度自适应 */
    max-width: 100%; /* 不超出容器 */
    margin: 0;
    overflow: hidden; /* 仅用于圆角裁剪，图片本身用 object-fit: contain 不裁切 */
    border-radius: 10px; /* 容器也设置圆角 */
    display: block;
    position: relative;
    box-sizing: border-box;
}

.content-block .ce-image img.is-content {
    /* 不拉伸变形：按原比例缩放，限制最大高度 */
    width: auto; /* 使用图片原始宽度，不强制 100% */
    max-width: 100%; /* 但不超出容器 */
    height: auto;
    max-height: 420px; /* 统一视觉高度上限，可按需调整 */
    display: block;
    object-fit: contain;
    margin-left: 0;
    margin-right: 0;
    border-radius: 10px !important; /* 所有图片圆角 10px，使用 !important 确保优先级 */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 多张图片时，上下间距更紧凑 */
.content-block .column-content[data-module="image"] {
    margin-bottom: 0.75rem;
}

/* 图片列中的 column-content 移除 margin */
.content-block .row.has-image-columns .column.large-image .column-content,
.content-block .row.has-image-columns .column.medium-image .column-content,
.content-block .row.has-image-columns .column.small-image .column-content {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    position: relative;
    top: 0 !important;
    width: fit-content; /* 根据内容（图片）宽度自适应 */
    max-width: 100%; /* 不超出容器宽度 */
}

/* 图片列中的图片容器 */
.content-block .row.has-image-columns .column.large-image .content-wrapper,
.content-block .row.has-image-columns .column.medium-image .content-wrapper,
.content-block .row.has-image-columns .column.small-image .content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* 内容左对齐 */
    justify-content: flex-start !important; /* 内容顶部对齐 */
    align-self: flex-start !important; /* 容器本身顶部对齐 */
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: fit-content; /* 根据内容（图片）宽度自适应 */
    max-width: 100%; /* 不超出列宽度 */
}

.content-block .column.large-image .ce-image,
.content-block .column.medium-image .ce-image,
.content-block .column.small-image .ce-image {
    overflow: hidden; /* 确保圆角效果 */
    border-radius: 10px; /* 容器也设置圆角 */
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: fit-content; /* 根据图片实际宽度自适应 */
    max-width: 100%; /* 不超出列宽度 */
    display: block !important;
    line-height: 0 !important; /* 移除图片下方的空白 */
    vertical-align: top !important; /* 顶部对齐 */
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* 大图：100% 基准高度，体现大图效果 */
.content-block .column.large-image .ce-image img.is-content {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    width: auto; /* 使用图片原始宽度，根据 max-height 按比例缩放 */
    max-width: 100%; /* 不超出容器 */
    height: auto;
    max-height: 70vh; /* 大图：100% 基准（70vh） */
    min-height: 500px; /* 大图最小高度，确保足够大 */
    display: block !important;
    object-fit: contain;
    border-radius: 10px !important;
    vertical-align: top !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    float: none !important;
    align-self: flex-start !important; /* 确保从顶部开始 */
}

/* 中图：50% 基准高度（更多图的情况） */
.content-block .column.medium-image .ce-image img.is-content {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    width: auto; /* 使用图片原始宽度，根据 max-height 按比例缩放 */
    max-width: 100%; /* 不超出容器 */
    height: auto;
    max-height: 35vh; /* 中图：50% 基准（70vh * 0.5 = 35vh） */
    min-height: 250px; /* 中图最小高度 */
    display: block !important;
    object-fit: contain;
    border-radius: 10px !important;
    vertical-align: top !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    float: none !important;
    align-self: flex-start !important; /* 确保从顶部开始 */
}

/* 小图：60% 基准高度 */
.content-block .column.small-image .ce-image img.is-content {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    width: auto; /* 使用图片原始宽度，根据 max-height 按比例缩放 */
    max-width: 100%; /* 不超出容器 */
    height: auto;
    max-height: 42vh; /* 小图：60% 基准（70vh * 0.6 = 42vh） */
    min-height: 300px; /* 小图最小高度 */
    display: block !important;
    object-fit: contain;
    border-radius: 10px !important;
    vertical-align: top !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    float: none !important;
    align-self: flex-start !important; /* 确保从顶部开始 */
}

.content-block .ce-image img.is-content:hover {
    opacity: 0.95;
    transform: scale(1.01);
}

.content-block .ce-image[data-align="left"] {
    text-align: left;
}

.content-block .ce-image[data-align="center"] {
    text-align: center;
}

.content-block .ce-image[data-align="right"] {
    text-align: right;
}

/* Text Content Styles - 字体与颜色由 style-dark.css / style-light.css 控制，此处仅保留布局与结构 */
.content-block .is-content {
    line-height: 1.725;
    text-rendering: geometricPrecision;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    max-width: 100%; /* 不超出 section 宽度 */
    overflow-wrap: break-word; /* 长文本换行，兼容展示 */
    word-wrap: break-word;
}

.content-block .is-content p {
    margin: 0 0 0.5rem 0;
    hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
}

.content-block .is-content p:last-child {
    margin-bottom: 0;
}

/* 链接样式由主题 .content a 提供，不在此覆盖颜色 */
.content-block .is-content a {
    text-decoration: none;
}

.content-block .is-content strong {
    font-weight: bold;
}

.content-block .is-content em,
.content-block .is-content cite {
    font-style: italic;
}

.content-block .is-content h1,
.content-block .is-content h2,
.content-block .is-content h3,
.content-block .is-content h4,
.content-block .is-content h5,
.content-block .is-content h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.content-block .is-content h2 {
    position: relative;
    padding-left: 1.5rem;
}

.content-block .is-content h2:before {
    position: absolute;
    top: -4px;
    left: 0;
    content: "#";
    font-weight: bold;
    font-size: 1.2rem;
}

.content-block .is-content ul,
.content-block .is-content ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.content-block .is-content li {
    margin-bottom: 0.75rem;
}

.content-block .is-content blockquote {
    margin: 1rem 10px;
    padding: 0.5em 10px;
    background: inherit;
    quotes: "\201C" "\201D" "\2018" "\2019";
    font-weight: bold;
}

.content-block .is-content blockquote p {
    margin: 0;
}

.content-block .is-content code {
    hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    -webkit-hyphens: manual;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

/* Column Widths - Based on 12 column grid, using calc like reference site */
.content-block .column[data-xl-width="1"] {
    width: calc(100% / 12 * 1);
    max-width: calc(100% / 12 * 1);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 1);
}

.content-block .column[data-xl-width="2"] {
    width: calc(100% / 12 * 2);
    max-width: calc(100% / 12 * 2);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 2);
}

.content-block .column[data-xl-width="3"] {
    width: calc(100% / 12 * 3);
    max-width: calc(100% / 12 * 3);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 3);
}

.content-block .column[data-xl-width="4"] {
    width: calc(100% / 12 * 4);
    max-width: calc(100% / 12 * 4);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 4);
}

.content-block .column[data-xl-width="5"] {
    width: calc(100% / 12 * 5);
    max-width: calc(100% / 12 * 5);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 5);
}

.content-block .column[data-xl-width="6"] {
    width: calc(100% / 12 * 6);
    max-width: calc(100% / 12 * 6);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 6);
}

.content-block .column[data-xl-width="7"] {
    width: calc(100% / 12 * 7);
    max-width: calc(100% / 12 * 7);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 7);
}

.content-block .column[data-xl-width="8"] {
    width: calc(100% / 12 * 8);
    max-width: calc(100% / 12 * 8);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 8);
}

.content-block .column[data-xl-width="9"] {
    width: calc(100% / 12 * 9);
    max-width: calc(100% / 12 * 9);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 9);
}

.content-block .column[data-xl-width="10"] {
    width: calc(100% / 12 * 10);
    max-width: calc(100% / 12 * 10);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 10);
}

.content-block .column[data-xl-width="11"] {
    width: calc(100% / 12 * 11);
    max-width: calc(100% / 12 * 11);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 11);
}

.content-block .column[data-xl-width="12"] {
    width: calc(100% / 12 * 12);
    max-width: calc(100% / 12 * 12);
    flex: 0 0 auto;
    flex-basis: calc(100% / 12 * 12);
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
    .content-block .container {
        padding: 0 1rem;
    }
    
    .content-block .row {
        margin: 0 -0.5rem;
    }
    
    .content-block .column {
        padding: 0 0.5rem;
    }
}

@media screen and (max-width: 768px) {
    .content-block {
        padding: 1.5rem 0;
    }
    
    .content-block .container {
        padding: 0 0.75rem;
    }
    
    /* Single column mode on small screens */
    .content-block[data-column-mode-sm="single"] .column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1.5rem;
    }
    
    .content-block[data-column-mode-sm="single"] .column:last-child {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 480px) {
    .content-block {
        padding: 1rem 0;
    }
    
    .content-block .container {
        padding: 0 0.5rem;
    }
    
    /* Single column mode on extra small screens */
    .content-block[data-column-mode-xs="single"] .column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem;
    }
    
    .content-block[data-column-mode-xs="single"] .column:last-child {
        margin-bottom: 0;
    }
}

/* Fluid Layout */
.content-block[data-layout="fluid"] .container {
    width: 100%;
    max-width: 100%;
    padding: 0 1.66667rem;
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .content-block[data-layout="fluid"] .container {
        padding: 0 1.11111rem;
    }
}

@media screen and (max-width: 543.98px) {
    .content-block[data-layout="fluid"] .container {
        padding: 0 1.11111rem;
    }
}

/* Hide raw content */
#block-content-raw {
    display: none !important;
}

/* Ensure sections container is visible */
#block-content-sections {
    width: 100%;
}

/* 强制图片列在同一水平面上 - 最高优先级规则 */
.content-block .row.has-image-columns .column.large-image,
.content-block .row.has-image-columns .column.medium-image,
.content-block .row.has-image-columns .column.small-image {
    vertical-align: top !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.content-block .row.has-image-columns .column.large-image *,
.content-block .row.has-image-columns .column.medium-image *,
.content-block .row.has-image-columns .column.small-image * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.content-block .row.has-image-columns .column.large-image .ce-image,
.content-block .row.has-image-columns .column.medium-image .ce-image,
.content-block .row.has-image-columns .column.small-image .ce-image {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

.content-block .row.has-image-columns .column.large-image .ce-image img,
.content-block .row.has-image-columns .column.medium-image .ce-image img,
.content-block .row.has-image-columns .column.small-image .ce-image img {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
    vertical-align: top !important;
}