/**
 * 医院聚合页卡片：陪诊者头像行样式（D3 · 第 40 批 = 批次 10 · Step 2）
 *
 * 职责边界（刻意很小）：
 * - 只负责**新加的那一行**（`.unithmemd-hcard-int*`）+ 把主插件的价格行改成 flex
 *   （`.unithmemd-card__price--has-int`）；
 * - 主插件聚合页的卡片本体（`.unithmemd-card*`）一个字节都不改 —— 那边改一次，这里跟着受益；
 * - 选择器一律 `.unithmemd-hcard-int*` 前缀 + 一条 `.unithmemd-card .unithmemd-card__price--has-int`，
 *   不污染主题（Flatsome）与主插件样式；
 * - **自带设计 token**（下面那 4 个变量）：本文件可能在主插件样式未入队时也生效（上传不完整 /
 *   主插件改版），那时 `var(--unithmemd-primary)` 拿不到值，所以每一处都写了兜底色值。
 *
 * 两个变体（用户拍板 ②③）：
 * - `--price`：整行插在 `<p class="unithmemd-card__price">` **内部** ⇒ 价格行要变成 flex，
 *   价格左、头像行右、同一行（`From 136USD    [头像叠] 10+`）；
 * - `--solo`：卡上没有价格 ⇒ 整行贴在信息区末尾，靠 `margin-top: auto` 落到卡片底部
 *   （与价格行同一个落点，不会被压到半空）。
 *
 * 为什么 ≥10 时既画「+N」圆又写「50+」：两件事 ——
 * 「+N」= 还有几张**没画出来**（真实总数 − 已画张数），「50+」= 这家医院的**量级**。
 */

.unithmemd-card .unithmemd-card__price--has-int {
    /* 0,2,0 的优先级高于主插件的 `.unithmemd-card__price`（0,1,0）⇒ 不依赖两份样式的先后顺序；
     * 之所以仍然把本文件声明为 `unithmemd-archive` 的依赖，是为了拿到它的设计 token 与卡片排版 */
    display: flex;
    flex-wrap: wrap;                /* 卡片很窄时：头像行整体换到价格的下一行，而不是互相挤压 */
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
}

.unithmemd-hcard-int {
    display: inline-flex;           /* 在价格行（flex）与信息区（flex column）里都是 flex 项 */
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

/* 没价格时贴底：信息区是 flex column（主插件 archive.css），margin-top:auto 把它推到卡片底部，
 * 与「有价格」那种卡片的落点一致 —— 同一排卡片看起来才是齐的 */
.unithmemd-hcard-int--solo {
    margin-top: auto;
    padding-top: 12px;
}

/* -------------------------------------------------------------------------
 * 1. 头像叠放（微信风格，与医院档案页侧栏那行同一手法：负 margin 叠 + 白描边）
 *    卡片上比侧栏小一号（24px / 叠 8px）：这一行是价格右端的一瞥，不是主角。
 * ---------------------------------------------------------------------- */
.unithmemd-hcard-int__avatars {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.unithmemd-hcard-int__avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border: 2px solid #ffffff;      /* 白描边：叠放时把两张脸分开 */
    border-radius: 50%;
    background: #f1f1f1;
    color: #999999;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.unithmemd-hcard-int__avatar + .unithmemd-hcard-int__avatar {
    margin-left: -8px;              /* 24px 的圆叠 8px：每张露出 16px 脸 */
}

.unithmemd-hcard-int__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 「+N」：与头像同尺寸的实心圆（N = 真实总数 − 已画张数） */
.unithmemd-hcard-int__rest {
    background: var(--unithmemd-primary, #1a9d5e);
    color: #ffffff;
    font-size: 10px;
}

/* -------------------------------------------------------------------------
 * 2. 计数文案 + 读屏专用的完整文案
 * ---------------------------------------------------------------------- */
.unithmemd-hcard-int__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #000000;
    white-space: nowrap;            /* 「90+」这类短文案不允许折行（要省空间就缩价格那边） */
}

/* 视觉上藏起来、读屏照常念（可见 `10+` ⇒ 听到 `10+ interpreters`）：
 * 用 clip + clip-path 双写，兼容老浏览器；1×1 且不参与布局 */
.unithmemd-hcard-int__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------------------
 * 降级规则（与批 9 那份 CSS 同一约定：媒体查询集中在文件末尾，
 * 免得出现「媒体查询被更靠后的顶层规则盖掉」那类只有截图才看得出来的事故）。
 *
 * 这一行**没有任何动效**（不加 transition / animation）⇒ 不需要 prefers-reduced-motion 分支：
 * 少一条规则就少一条要维护的口径（侧栏那行有 hover 位移，所以那边有）。
 * ---------------------------------------------------------------------- */

/* ≤767px：主插件把卡片内容区内边距收到 12px —— 头像行跟着收一点，别把价格挤成两行 */
@media (max-width: 767px) {
    .unithmemd-hcard-int--solo {
        padding-top: 8px;
    }

    .unithmemd-hcard-int__label {
        font-size: 11px;
    }
}