/**
 * 关于我们页快照样式
 * 来源：wierpower.com/关于我们/index.html
 */

/* Banner 图：about.html 里就是一个原生 wp-block-image，尺寸/边距全部
   写在行内 style 里，没有专属类名，不需要这里补规则（原来的
   .yike-about-banner 是臆造类名，about.html 里根本不存在，已删除） */

/* 公司简介+数据统计+右侧图片：真实类名对照参考站 关于我们/index.html
   的 wp-container-core-group-is-layout-1a149459（grid-template-columns:
   repeat(5, minmax(0, 1fr))）+ 左列 wp-container-content-1dec9e45
   （grid-column:span 2）+ 右列 wp-container-content-009109da
   （grid-column:span 3）。参考站这两个类名是 Gutenberg 编辑器生成的哈希类，
   我们这边没有，改用自己的作用域类 .yike-about-intro-grid 照抄同样效果
   （原来的 .yike-about-intro__* 是臆造类名，about.html 里不存在，已删除） */
.yike-about-intro-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.yike-about-intro-grid > :first-child {
    grid-column: span 2;
}

.yike-about-intro-grid > :last-child {
    grid-column: span 3;
}

/* 数据统计（真实类名，抠自参考站 关于我们/index.html 的
   content-count-down/style-index.css，data-items-per-row 属性选择器
   跟我们 HTML 里实际的 data-items-per-row="2" 对应） */
.wp-block-tbs-block-content-count-down {
    /* 左列是 flex 纵向容器（is-vertical is-layout-flex），这个 div 是纯块级
       元素、不含可无限换行的文本内容——shrink-to-fit 算出的首选宽度会退化成
       "刚好装下两个 .count-down-item" 而不是撑满整列，同一列里的 <pre> 因为
       内容是可换行长文本才恰好撑满。显式给 100% 宽度，不依赖这个边界情况。 */
    width: 100%;
}

.wp-block-tbs-block-content-count-down .count-down-container {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 0;
    row-gap: 30px;
    width: 100%;
}

.wp-block-tbs-block-content-count-down .count-down-container .count-down-item {
    color: var(--wp--preset--color--secondary);
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
}

.wp-block-tbs-block-content-count-down .count-down-container .count-down-item .count-number {
    font-weight: 700;
    position: relative;
}

.wp-block-tbs-block-content-count-down .count-down-container .count-down-item .count-number .number {
    display: inline-block;
    font-size: 5rem;
    font-weight: 400;
    line-height: 1;
}

.wp-block-tbs-block-content-count-down .count-down-container .count-down-item .count-number .unit {
    bottom: 0;
    font-size: .9rem;
    position: absolute;
}

.wp-block-tbs-block-content-count-down .count-down-container .count-down-item .count-number .plus {
    font-size: .8rem;
    position: absolute;
}

.wp-block-tbs-block-content-count-down .count-down-container .count-down-item .count-label {
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 10px;
}

.wp-block-tbs-block-content-count-down .count-down-container .divider {
    align-self: center;
    background-color: #ccc;
    height: auto;
    min-height: 6rem;
    width: 2px;
}

.wp-block-tbs-block-content-count-down[data-items-per-row="1"] .count-down-container .count-down-item { flex-basis: 100%; }
.wp-block-tbs-block-content-count-down[data-items-per-row="2"] .count-down-container .count-down-item { flex-basis: calc(50% - 20px); }
.wp-block-tbs-block-content-count-down[data-items-per-row="3"] .count-down-container .count-down-item { flex-basis: calc(33.333% - 20px); }
.wp-block-tbs-block-content-count-down[data-items-per-row="4"] .count-down-container .count-down-item { flex-basis: calc(25% - 20px); }
.wp-block-tbs-block-content-count-down[data-items-per-row="5"] .count-down-container .count-down-item { flex-basis: calc(20% - 20px); }
.wp-block-tbs-block-content-count-down[data-items-per-row="6"] .count-down-container .count-down-item { flex-basis: calc(16.666% - 20px); }

@media (max-width: 768px) {
    .wp-block-tbs-block-content-count-down .count-down-container {
        flex-direction: column;
    }
    .wp-block-tbs-block-content-count-down .count-down-container .count-down-item,
    .wp-block-tbs-block-content-count-down .count-down-container .divider {
        flex-basis: 100% !important;
    }
    .wp-block-tbs-block-content-count-down .count-down-container .divider {
        display: none;
    }
}

/* 企业文化区块（真实类名，抠自参考站 关于我们/index.html 的
   culture-grid/style-index.css；网格列数、卡片 min-height 由 HTML 里
   参考站自带的行内 style="grid-template-columns:..."/"min-height:192px"
   驱动，这里只需要 display:grid 和卡片盒模型规则）
   section 外层容器和标题用的是通用 wp-block-group/wp-block-heading +
   行内 style 间距，没有专属类名，不需要额外规则 */
.wp-block-tbs-block-culture-grid .culture-grid-container {
    margin: 0 auto;
    width: 100%;
}

.wp-block-tbs-block-culture-grid .culture-grid {
    display: grid;
}

.wp-block-tbs-block-culture-grid .culture-card {
    align-items: center;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-start;
    overflow: hidden;
    padding: 1.5rem 2rem 2rem;
    position: relative;
    text-align: center;
    transition: .3s ease;
}

.wp-block-tbs-block-culture-grid .culture-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    text-align: left;
}

@media (max-width: 768px) {
    .wp-block-tbs-block-culture-grid .culture-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .wp-block-tbs-block-culture-grid .culture-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 品牌优势区块：真实结构是原生 wp-block-group（标题用
   has-text-align-center + 行内 margin，4 个优势项的图标圆底/内边距/圆角
   全部写在行内 style 里），没有专属类名，唯一缺的是这一行网格的列数——
   对照参考站 wp-container-core-group-is-layout-f926e261
   （grid-template-columns:repeat(6, minmax(0, 1fr))，5 个子项
   （1个空 spacer + 4 个优势项）都不设置 span，默认各占 1 列，右边空出
   1 列，逐字节照抄这个看似不对称的布局，不要自己"优化"成 4 等分）
   （原来的 .yike-advantages-section/.yike-advantage-item* 是臆造类名，
   about.html 里不存在，已删除） */
.yike-about-advantages-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 767px) {
    .yike-about-intro-grid {
        grid-template-columns: 1fr;
    }
    .yike-about-advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}