/**
 * 医院档案页「本院陪诊者」区块样式（D3 · 批次 8 · Step 1）
 *
 * 职责边界（刻意很小）：
 * - 只负责**区块外壳**：标题 / 副标题 / 网格列数 / 两行小字；
 * - 卡片本体（头像、星角标、认证徽章、姓名）与**列表页 / 档案页共用** interpreter-public.css，
 *   这里**不重复定义** —— 那边改一次，三处一起变；
 * - 区块根元素刻意**不挂** `.unithmemd-interpreter`：那个类自带 max-width:1200px 与 40px/24px 内边距，
 *   在医院页的 75% 主栏里会二次缩进、把卡片挤窄，所以设计 token 在这里**自带一份**（与那边同值，
 *   口径一致：独立于主题与主插件，主插件停用时区块样式照样完整）；
 * - 选择器一律 `.unithmemd-hospital-interpreters*` 前缀，不污染主题（Flatsome）与主插件样式。
 *
 * 第 39 批（D3 批 9）追加 **5. 右侧栏陪诊者头像行**（`.unithmemd-hospital-aside*`，同样自带 token、
 * 同样只挂自己的前缀）：位置是主插件 `<aside>` 内、「Book Your Appointment」卡片上方；
 * 另外给区块补了一条 `scroll-margin-top`（锚点落点不被吸顶导航盖住）。区块本体的规则一行未改。
 *
 * 第 40 批（D3 批 10 · Step 3）追加 **6. Hero 里的同款头像行**（`.unithmemd-hospital-hero-int*`）：
 * 桌面 `display: none`（侧栏那行在场）、≤1100px `display: flex`（侧栏那行跟侧栏一起隐藏）
 * ⇒ 任何宽度下页面上**只有一行**。前 5 节的规则一行未改（本批只往末尾那条 `@media` 里加了 1 条）。
 *
 * 第 41 批（D3 批 11，用户拍板 1~4）：两处口径微调，**没有任何新选择器** ——
 *   ① 头像可见圆面 = 36px：白描边从 `border`（占位、脸只剩 32px）改成外圈 `box-shadow: 0 0 0 2px #fff`
 *      ⇒ 盒模型与圆面都是 36px；直径抽成 `--unithmemd-aint-avatar` / `--unithmemd-hint-avatar`，
 *      叠放距离 = `calc(直径 / -3)`（36px → 仍是 −12px，数值不变、以后一处改全行）；
 *   ② 删掉 `.unithmemd-hospital-aside__count-zh` 与 `.unithmemd-hospital-hero-int__count-zh`
 *      两条规则（公开前端全英文：模板里对应的中文小字也删了）。
 */

.unithmemd-hospital-interpreters {
    /* 设计 token：与 interpreter-public.css 的 --unithmemd-int-* 同值 */
    --unithmemd-int-primary: #1a9d5e;
    --unithmemd-int-primary-hover: #157a4a;
    --unithmemd-int-primary-light: #e8f6ee;
    --unithmemd-int-dark: #1d1d1f;
    --unithmemd-int-medium: #636363;
    --unithmemd-int-light: #999999;
    --unithmemd-int-bg: #f1f1f1;
    --unithmemd-int-surface: #fff;
    --unithmemd-int-border: #dcdcdc;
    --unithmemd-int-star: #d8d8d8;
    --unithmemd-int-verified: #1d9bf0;
    --unithmemd-int-radius-lg: 24px;

    margin: 48px 0 8px;                  /* 落在主栏收尾、评论区之前：上面留一段呼吸 */
    padding: 0;
    color: var(--unithmemd-int-dark);
    /* 锚点落点（第 39 批）：点右侧栏「N interpreters」滚到这里时，给吸顶导航留出高度 ——
     * 96px 是 Flatsome 常见吸顶高度；站点导航更高/更矮时在主题或站点 CSS 里覆盖
     * `--unithmemd-anchor-offset` 即可（不必改插件）。 */
    scroll-margin-top: var(--unithmemd-anchor-offset, 96px);
    box-sizing: border-box;
}

.unithmemd-hospital-interpreters *,
.unithmemd-hospital-interpreters *::before,
.unithmemd-hospital-interpreters *::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * 1. 区块标题
 * ---------------------------------------------------------------------- */
.unithmemd-hospital-interpreters__head {
    margin: 0 0 28px;
}

.unithmemd-hospital-interpreters__title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--unithmemd-int-dark);
}

.unithmemd-hospital-interpreters__subtitle {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--unithmemd-int-light);
}

/* -------------------------------------------------------------------------
 * 2. 卡片网格
 *    主栏（约 75% 宽）里一行 3 张 —— 4 列会把每张卡压到 150px 以下，姓名一折行就散；
 *    窄屏逐级降 2 → 1。列数只在这里控制，模板里没有任何栅格类（避免与主题栅格打架）。
 * ---------------------------------------------------------------------- */
.unithmemd-hospital-interpreters__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.unithmemd-hospital-interpreters__item {
    min-width: 0;
    /* 第 44 批（D3 批 14）：每张卡现在是**两个**孩子 —— 整卡链接 + 下方「View profile」按钮。
       卡片本体 `.unithmemd-interpreter__card` 是横向 flex（列表页那边一行只有一个链接），
       这里不改它，只把医院页这张 <li> 改成竖排：链接 `flex: 1 1 auto` 吃掉剩余高度，
       按钮自然落到底部 ⇒ 同一排三张卡（小字行数可能不同）按钮基线仍然对齐。
       两条规则同一优先级（都是一个类），靠「本文件依赖 interpreter-public.css ⇒ 后打印」胜出
       —— enqueue 里写着这条依赖，别删。 */
    flex-direction: column;
}

/* -------------------------------------------------------------------------
 * 3. 卡片两行小字：语言 / 擅长科室（标签灰、值深，与档案页 Profile 行同一「标签在前」语法）
 *    卡片本体样式（.unithmemd-interpreter__card*）来自 interpreter-public.css。
 * ---------------------------------------------------------------------- */
.unithmemd-hospital-interpreters__meta {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--unithmemd-int-dark);
    word-break: break-word;
}

.unithmemd-hospital-interpreters__meta-label {
    margin-right: 6px;
    color: var(--unithmemd-int-light);
}

/* -------------------------------------------------------------------------
 * 3.1 卡片下方的「View profile」按钮（第 44 批 / D3 批 14）
 *     与档案页 `.unithmemd-interpreter__btn` 同一套视觉语言：白底 + 深色 1px 描边 + 999px 胶囊 +
 *     hover / 键盘焦点反色。尺寸按卡片收一档 —— 卡片只有 250~270px 宽，照抄 __btn 的
 *     `min-width: 200px` 会把每张卡撑满，三列看起来像三根柱子。
 *     颜色全取本区块自带的 token（见文件头 `--unithmemd-int-*`），**不碰 interpreter-public.css**
 *     —— 那个文件是列表页 / 档案页共用的，改它等于一次改三个页面。
 * ---------------------------------------------------------------------- */
.unithmemd-hospital-interpreters__profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;                  /* 竖排 flex 里不被拉成整卡宽 */
    margin: 12px 0 0;                    /* 与上方小字拉开 12px（多余高度由 .__card-link 吸收） */
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--unithmemd-int-dark);
    background: var(--unithmemd-int-surface);
    border: 1px solid var(--unithmemd-int-dark);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* hover 与键盘焦点同一套反色：只写 :hover 的话，Tab 走到这里等于「没有反馈」 */
.unithmemd-hospital-interpreters__profile-btn:hover,
.unithmemd-hospital-interpreters__profile-btn:focus-visible {
    color: var(--unithmemd-int-surface);
    background: var(--unithmemd-int-dark);
}

.unithmemd-hospital-interpreters__profile-btn:focus-visible {
    outline: 2px solid var(--unithmemd-int-primary);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 4. 窄屏（与 interpreter-public.css 一样把降级规则集中在文件末尾，
 *    免得出现「媒体查询被更靠后的顶层规则盖掉」那类只有截图才看得出来的事故）
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .unithmemd-hospital-interpreters__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .unithmemd-hospital-interpreters {
        margin-top: 32px;
    }

    .unithmemd-hospital-interpreters__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

/* =========================================================================
 * 5. 右侧栏陪诊者头像行（第 39 批 · D3 批 9）
 *
 *    位置：主插件医院页 `<aside class="unithmemd-layout__aside">` 内部、
 *    「Book Your Appointment」卡片（`.unithmemd-float-card`）**上方** ——
 *    由 ASIDE_ANCHORS 锚点注入，主插件一个字节都没改。
 *
 *    尺寸口径与那张卡片对齐（max-width:320px + 右对齐）：侧栏看起来是「上下两块」。
 *    样式**自带 token**（与区块同一取舍：不依赖主题、不依赖主插件 CSS 的加载顺序，
 *    主插件换肤 / 停用也不会让这行变成裸 `<ul>`）。
 * ====================================================================== */
.unithmemd-hospital-aside {
    --unithmemd-aint-primary: #1a9d5e;
    --unithmemd-aint-dark: #1d1d1f;
    --unithmemd-aint-light: #999999;
    --unithmemd-aint-bg: #f1f1f1;
    /* 第 41 批（用户拍板 2）：头像**直径**抽成变量 —— 圆面 36px（见 __avatar），
     * 叠放距离 = 它的三分之一；将来要整体放大 / 缩小只改这一个数字（Hero 那边同理） */
    --unithmemd-aint-avatar: 36px;

    max-width: 320px;                    /* 与 .unithmemd-float-card 同宽 */
    margin: 0 0 16px auto;               /* 与卡片之间留 16px */
}

.unithmemd-hospital-aside *,
.unithmemd-hospital-aside *::before,
.unithmemd-hospital-aside *::after {
    box-sizing: border-box;
}

.unithmemd-hospital-aside__jump {
    display: block;
    padding: 4px;                        /* 焦点框不贴边 */
    color: inherit;
    text-decoration: none;
    border-radius: 12px;
}

.unithmemd-hospital-aside__jump:focus-visible {
    outline: 2px solid var(--unithmemd-aint-primary);
    outline-offset: 2px;
}

/* 头像叠放（微信风格）：**不用 gap，用负 margin** —— 后一张压在上一张上 */
.unithmemd-hospital-aside__avatars {
    display: flex;
    align-items: center;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.unithmemd-hospital-aside__avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 第 41 批（用户拍板 2）：**可见圆面 = 36px**。原来 36px 是含 2px 白描边的外框
     * （border 占位 ⇒ 脸只有 32px，看着比预期小）；改成 box-shadow 在外圈画白环 ⇒
     * 盒模型 36px、脸也是 36px，量哪个都是 36px（叠放距离跟着变量走）。 */
    width: var(--unithmemd-aint-avatar);
    height: var(--unithmemd-aint-avatar);
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    background: var(--unithmemd-aint-bg);
    color: var(--unithmemd-aint-light);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    /* 前一个阴影 = 白描边（叠放时把两张脸分开，**不占位**），后一个 = 投影 */
    box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease;
}

.unithmemd-hospital-aside__avatar + .unithmemd-hospital-aside__avatar {
    margin-left: calc(var(--unithmemd-aint-avatar) / -3);   /* 36px 叠 12px：每张露出 24px 脸 */
}

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

/* 悬停 / 键盘聚焦时把当前这张抬到最上层（否则被后半张压掉半边脸） */
.unithmemd-hospital-aside__avatar:hover,
.unithmemd-hospital-aside__avatar:focus-within {
    z-index: 2;
    transform: translateY(-1px);
}

/* 「+N」：与头像同尺寸的实心圆（N = 真实总数 − 已画出的张数） */
.unithmemd-hospital-aside__rest {
    background: var(--unithmemd-aint-primary);
    color: #fff;
    font-size: 12px;
}

.unithmemd-hospital-aside__count {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--unithmemd-aint-dark);
}

/* 第 41 批（用户拍板 2）：`.unithmemd-hospital-aside__count-zh`（那行中文小字「N 位陪诊者」）
 * 连规则一起删掉 —— 公开前端全英文，模板里那段也删了。规则位留着这条说明方便考古。 */

/* 落点高亮：点完锚点闪一下（1.6s 后恢复），让人一眼确认「就是这一块」 */
.unithmemd-hospital-interpreters:target {
    animation: unithmemd-hospital-interpreters-flash 1.6s ease-out 1;
}

@keyframes unithmemd-hospital-interpreters-flash {
    0% {
        background: #e8f6ee;
    }

    100% {
        background: transparent;
    }
}

/* -------------------------------------------------------------------------
 * 6. Hero 里的同款头像行（≤1100px 专用；第 40 批 = 批次 10 · Step 3）
 *
 *    需求（用户拍板 ⑥）：≤1100px 时侧栏那行会跟着侧栏一起隐藏，手机上就看不到「这家医院有陪诊者」
 *    ⇒ 把同一行挪到 Hero 标签行下方（`HERO_ANCHORS` 注入）。桌面时这里 `display: none`，
 *    所以任何宽度下页面上只有一行。
 *
 *    设计 token 自带一份（与第 5 节同一个理由）：本行挂在 `.unithmemd-hero` 里，
 *    既不在 `.unithmemd-hospital-interpreters` 内（那里才有 `--unithmemd-int-*`），
 *    也不在 `.unithmemd-hospital-aside` 内（那里有 `--unithmemd-aint-*`）。
 * ---------------------------------------------------------------------- */
.unithmemd-hospital-hero-int {
    --unithmemd-hint-primary: #1a9d5e;
    --unithmemd-hint-dark: #1d1d1f;
    --unithmemd-hint-light: #999999;
    --unithmemd-hint-bg: #f1f1f1;
    /* 第 41 批：与侧栏那行同口径的头像直径变量（圆面 36px；见 __avatar） */
    --unithmemd-hint-avatar: 36px;

    display: none;                       /* 桌面：侧栏那行在场 ⇒ 本行不显示（见文件末尾的媒体查询） */
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 16px 0 0;
    padding: 0;
    box-sizing: border-box;
}

.unithmemd-hospital-hero-int *,
.unithmemd-hospital-hero-int *::before,
.unithmemd-hospital-hero-int *::after {
    box-sizing: border-box;
}

/* 头像叠放：与侧栏那行同一手法（负 margin 叠 + 白描边），尺寸也一样（第 41 批起：圆面 36px） */
.unithmemd-hospital-hero-int__avatars {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.unithmemd-hospital-hero-int__avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--unithmemd-hint-avatar);
    height: var(--unithmemd-hint-avatar);
    overflow: hidden;
    border-radius: 50%;
    background: var(--unithmemd-hint-bg);
    color: var(--unithmemd-hint-light);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    /* 前一个阴影 = 白描边（不占位 ⇒ 圆面就是 36px），后一个 = 投影（与侧栏那行同一做法） */
    box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, 0.12);
}

.unithmemd-hospital-hero-int__avatar + .unithmemd-hospital-hero-int__avatar {
    margin-left: calc(var(--unithmemd-hint-avatar) / -3);
}

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

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

.unithmemd-hospital-hero-int__count {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--unithmemd-hint-dark);
}

/* 第 41 批：`.unithmemd-hospital-hero-int__count-zh`（中文小字「N 位陪诊者」）连规则一起删掉
 * —— 公开前端全英文；Hero 那行的计数与侧栏共用同一份文案（见 aside_count_texts()）。 */

/* -------------------------------------------------------------------------
 * 降级规则（与上面几节同一约定：媒体查询 / reduced-motion 集中在文件末尾，
 * 免得出现「媒体查询被更靠后的顶层规则盖掉」那类只有截图才看得出来的事故）
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .unithmemd-hospital-aside__avatar {
        transition: none;
        transform: none;
    }

    .unithmemd-hospital-interpreters:target {
        animation: none;
    }
}

/* ≤1100px：主插件把两栏折成单栏、侧栏落到主栏之后（卡片也变 static）—— 本行**跟着侧栏一起隐藏**：
 * 否则它会出现在「区块下方、评论区之前」，点它反而往回滚，是纯误导。
 * ≤767px 时侧栏整体 `display: none`（改用底部固定双按钮），这一条同样覆盖。 */
@media (max-width: 1100px) {
    .unithmemd-hospital-aside {
        display: none;
    }

    /* 第 40 批（Step 3）：侧栏那行藏起来的同时，把 Hero 里那一行放出来
     * （同一信息在任何宽度下都恰好出现一次）。这条排在文件末尾、优先级相同 ⇒ 一定盖住
     * 上面那条顶层 `display: none`（_checks 用 cssRules 的 index 交叉核对这个顺序）。 */
    .unithmemd-hospital-hero-int {
        display: flex;
    }
}