/* ============================================================
   客户成果(Client Results)页面样式 — 视觉一比一对齐目标站
   实测基准: 桌面 1440(卡片 405×364,图 4:3 圆角16,胶囊按钮)
            移动 390(卡片单列,column-reverse,按钮黑底全宽)
   字体/配色与 upchrome.css 一致: Archivo Variable + 米白底 #f7f6f3
   ============================================================ */

/* ---------------- Hero(白底 左文右图,目标站 hero 全宽 1425,文字列 44.5%/图列 55.5%) ---------------- */
.cr-hero {
    background: #fff;
    padding: 0;
}
.cr-hero .up-container,
.cr-detail-hero .up-container {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}
.cr-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0;
}
.cr-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #161412;
    margin: 0 0 18px;
}
.cr-hero-title {
    font-family: "Archivo Variablefont Wdth Wght", Arial, sans-serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0 0 22px;
    color: #161412;
    max-width: 521px;
}
.cr-hero-intro {
    color: #888b8d;
    font-size: 20px;
    line-height: 1.5;
    max-width: 521px;
    margin: 0;
}
.cr-hero-media { text-align: center; padding: 0; }
.cr-hero-collage {
    width: 100%;
    max-width: 100%;
    height: 640px;
    object-fit: cover;
    display: inline-block;
}

/* ---------------- 筛选器(3 个胶囊 select,对齐目标站 client-result-form;米白底承接 body) ---------------- */
.cr-filters {
    background: #f7f6f3;
    padding: 80px 0 0;
}
.cr-filter-form {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0;
}
.cr-filter-field {
    position: relative;
    flex: 1;
    max-width: 395px;
}
.cr-filter-select {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #1a1a1a;
    border-radius: 24px;
    color: #888b8d;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    height: 48px;
    padding: 8px 38px 8px 44px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.cr-filter-select:focus { outline: none; border-color: #161412; }
.cr-filter-icon-left {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: flex;
    pointer-events: none;
}
.cr-filter-icon-right {
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    pointer-events: none;
}

/* ---------------- 列表(米白底承接 body #f7f6f3) ---------------- */
.cr-list {
    padding: 0;
    padding-bottom: 0;
    background: #f7f6f3;
}
.cr-list .up-container {
    padding-top: 64px;
    padding-bottom: 80px;
}
.cr-card-col { margin-bottom: 64px; }
.cr-cards-row {
    display: flex;
    flex-wrap: wrap;
}

/* ---------------- 卡片(对齐目标站 client-result-card) ---------------- */
.cr-card {
    overflow: hidden;
}
.cr-card-media {
    position: relative;
    background: #efede9;
    border-radius: 16px;
}
.cr-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    transition: transform .4s ease;
}
.cr-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9b978f;
    font-size: 13px;
    padding: 20px;
    text-align: center;
    border-radius: 16px;
}
.cr-card-imglink { display: block; border-radius: 16px; overflow: hidden; }
.cr-card:hover .cr-card-img { transform: scale(1.03); }

/* 胶囊按钮:白底黑字,叠于图中部(距顶 132px,宽 ~233px) */
.cr-card-btn {
    position: absolute;
    left: 86px;
    top: 132px;
    background: #fff;
    color: #161412;
    font-family: "Archivo Variablefont Wdth Wght", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    padding: 8px 20px;
    border-radius: 64px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(22, 20, 18, .12);
}
.cr-card-btn:hover,
.cr-card-btn:focus {
    color: #161412;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(22, 20, 18, .2);
}
.cr-card-btn-text { text-transform: uppercase; line-height: 1.25; }
.cr-card-btn-arrow { flex-shrink: 0; width: 16px; height: 16px; }

/* body:weeks 左 + AGE pill 右,同行两端对齐(目标站 flex row space-between) */
.cr-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 0;
    gap: 16px;
}
.cr-card-weeks {
    font-family: "Archivo Variablefont Wdth Wght", Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #161412;
    line-height: 1.4;
    white-space: nowrap;
}
.cr-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid #161412;
    background: #fff;
    border-radius: 64px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 4px 12px;
    color: #161412;
    gap: 8px;
    white-space: nowrap;
}
.cr-pill-dark {
    background: #161412;
    color: #fff;
    border-color: #161412;
}

/* ---------------- Load More(与分页计数同行,对齐目标站 w-pagination) ---------------- */
.cr-loadmore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}
.cr-loadmore-btn {
    background: #161412;
    color: #fff;
    border: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 12px 24px;
    cursor: pointer;
    line-height: 1.5;
}
.cr-loadmore-btn:hover { background: #2c2925; }
.cr-loadmore-btn:disabled { opacity: .6; cursor: default; }
.cr-loadmore-count {
    margin: 0;
    font-size: 14px;
    color: #888b8d;
    letter-spacing: 0;
}

/* ---------------- 空态 ---------------- */
.cr-empty {
    text-align: center;
    padding: 80px 0;
    color: #8a867f;
}
.cr-empty p {
    font-size: 20px;
    margin-bottom: 20px;
}

/* ---------------- 详情页 ---------------- */
.cr-detail-hero {
    background: #fff;
}
.cr-detail-hero .up-container {
    padding-top: 0;
    padding-bottom: 0;
}
.cr-detail-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0;
}
.cr-detail-title {
    font-family: "Archivo Variablefont Wdth Wght", Arial, sans-serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0;
    color: #161412;
    max-width: 521px;
}
.cr-detail-summary {
    color: #161412;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 24px;
}
.cr-detail-meta { margin-top: 20px; }
.cr-detail-meta .cr-pill { margin-right: 8px; }
.cr-detail-media { padding: 0; }
.cr-detail-heroimg {
    display: block;
    width: 100%;
    height: 640px;
    object-fit: cover;
    background: #efede9;
}

/* 详情 hero 也用全宽(对齐目标 792×640) */
.cr-detail-hero .up-container {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}
.cr-detail-hero .up-container .row { margin-left: 0; margin-right: 0; }

/* 正文(对齐目标站 w-richtext:16px/24px,#161412,H2 32px/700) */
.cr-detail-body {
    background: #fff;
    padding: 0 0 80px;
}
.cr-detail-body .up-container {
    padding-top: 40px;
}
.cr-article {
    font-size: 16px;
    line-height: 1.5;
    color: #161412;
}
.cr-article h2,
.cr-article h3 {
    font-family: "Archivo Variablefont Wdth Wght", Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #161412;
    margin: 24px 0 16px;
    letter-spacing: -0.01em;
}
.cr-article p { margin: 0 0 16px; }
.cr-article img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 30px auto;
    border-radius: 2px;
}
.cr-article a {
    color: #161412;
    text-decoration: underline;
}
.cr-article blockquote {
    border-left: 3px solid #161412;
    padding: 4px 18px;
    margin: 0 0 16px;
    color: #5c5852;
    font-style: italic;
}
.cr-article ul,
.cr-article ol {
    padding-left: 22px;
    margin-bottom: 16px;
}

/* 相关推荐(米白底,标题 48px 居中) */
.cr-related {
    background: #f7f6f3;
    padding: 80px 0;
}
.cr-related-title {
    font-family: "Archivo Variablefont Wdth Wght", Arial, sans-serif;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 56px;
    color: #161412;
    line-height: 1.2;
}

/* ---------------- 移动端适配(目标站 390:hero 图 1:1,卡片单列反转) ---------------- */
@media (min-width: 992px) {
    .cr-hero-text.col-md-6 { width: 44.5%; }
    .cr-hero-media.col-md-6 { width: 55.5%; }
    .cr-detail-text.col-md-6 { width: 44.5%; }
    .cr-detail-media.col-md-6 { width: 55.5%; }
}
@media (max-width: 991px) {
    .cr-hero-title { font-size: 44px; line-height: 1.2; }
    .cr-detail-title { font-size: 44px; }
    .cr-hero-collage { height: auto; aspect-ratio: 1 / 1; }
    .cr-detail-heroimg { height: auto; aspect-ratio: 1 / 1; }
    .cr-filter-form { flex-wrap: wrap; }
    .cr-filter-field { max-width: 100%; flex: 1 1 100%; }
}
@media (max-width: 767px) {
    .cr-hero-text { padding: 40px 0 24px; }
    .cr-hero-title { font-size: 44px; }
    .cr-hero-intro { font-size: 18px; }
    .cr-filters { padding: 64px 0 16px; }
    .cr-filter-form { gap: 10px; }
    .cr-filter-select { height: 46px; padding: 14px 38px 14px 44px; }
    .cr-list .up-container { padding-top: 48px; padding-bottom: 48px; }
    .cr-card-col { margin-bottom: 48px; }

    /* 卡片移动端:column-reverse 布局(weeks/pill 在上,图在下,按钮黑底全宽) */
    .cr-card {
        display: flex;
        flex-direction: column-reverse;
        gap: 12px;
        border-radius: 16px;
    }
    .cr-card-media { order: 2; }
    .cr-card-btn {
        position: static;
        background: #161412;
        color: #fff;
        width: 100%;
        justify-content: center;
        border-radius: 64px;
        padding: 8px 20px;
        box-shadow: none;
    }
    .cr-card-btn:hover,
    .cr-card-btn:focus { color: #fff; }
    .cr-card-body { padding: 0; order: 1; }
    .cr-card-weeks { font-size: 20px; }
    .cr-pill { font-size: 16px; }

    .cr-detail-text { padding: 32px 0 24px; }
    .cr-detail-title { font-size: 34px; }
    .cr-detail-summary { font-size: 16px; }
    .cr-article { font-size: 16px; }
    .cr-article h2,
    .cr-article h3 { font-size: 24px; }
    .cr-detail-body .up-container { padding-top: 24px; }
    .cr-related { padding: 56px 0; }
    .cr-related-title { font-size: 36px; margin-bottom: 40px; }
    .cr-loadmore { flex-direction: column; gap: 8px; }
    .cr-loadmore-btn { width: 100%; }
}