/* ==========================================================
   英文版全球布局 - 静态底图 + 右侧滚动信息
   依赖 fenbu.css 中的卡片/表头视觉样式，此处覆盖布局相关部分
   ========================================================== */

/* ---------------- 整体布局：地图与列表并排，整体居中 ---------------- */
.en-distribution-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

/* 底图舞台 */
.en-map-stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    /* 预留宽高比，避免图片加载前高度塌陷影响坐标定位 */
    aspect-ratio: 1439 / 741;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f7f8fa;
}

.en-map-stage .en-map-bg {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* 右侧列表：取消 fenbu.css 的绝对覆盖定位，改为并排 */
.en-distribution .map-sidebar-overlay {
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 340px;
    width: 340px;
    height: 460px;
}

/* ---------------- 坐标标记 ---------------- */
/* 标记容器为零尺寸定位锚点，left/top 百分比即数据坐标所在位置。
   所有标记常驻显示；跳动、波纹、名称气泡只在 .is-active 时出现。 */
.en-map-marker {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 3;
    pointer-events: none;
}

/* 激活的标记压在其他标记之上，避免气泡被遮挡 */
.en-map-marker.is-active {
    z-index: 6;
}

/* 倒置水滴形标记，形状沿用改动前的 dyymark .pin
   偏移量让水滴的尖端正好落在坐标点上：
   18x18 方块旋转 -45deg 后，尖端在方块中心正下方 18/2*√2 ≈ 12.7px 处，
   故方块左上角 = (X - 9, Y - 12.7 - 9) */
.en-map-pin {
    position: absolute;
    left: -9px;
    top: -21.7px;
    width: 18px;
    height: 18px;
    border-radius: 50% 50% 50% 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: #FF0820;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    z-index: 2;
}

/* 只有激活的标记才跳动 */
.en-map-marker.is-active .en-map-pin {
    animation: en-map-bob 1.2s ease-in-out infinite;
}

/* 水滴中心的白色圆孔 */
.en-map-pin::after {
    content: '';
    display: block;
    width: 50%;
    height: 50%;
    margin: 25%;
    background-color: #ffffff;
    border-radius: 50%;
}

/* 集团总部：稍大的水滴 + 徽标，尖端同样落在坐标点上
   28x28 旋转后尖端在中心下方 28/2*√2 ≈ 19.8px 处 */
.en-map-pin.is-hq {
    left: -14px;
    top: -33.8px;
    width: 28px;
    height: 28px;
    background-color: #F7C600;
}

.en-map-pin.is-hq::after {
    width: 70%;
    height: 70%;
    margin: 15%;
    background-color: #ffffff;
    background-image: url(/static/image/p1_h.png);
    background-size: cover;
    background-position: center;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* 水滴上下浮动 */
@keyframes en-map-bob {
    0%, 100% {
        margin-top: 0;
    }
    50% {
        margin-top: -6px;
    }
}

/* 尖端处的扩散光圈，以坐标点为圆心。默认不显示，仅激活时出现 */
.en-map-pulse {
    position: absolute;
    left: -9px;
    top: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #FF0820;
    opacity: 0;
    z-index: 1;
    display: none;
}

.en-map-marker.is-active .en-map-pulse {
    display: block;
    animation: en-map-pulse 1.8s ease-out infinite;
}

@keyframes en-map-pulse {
    0% {
        transform: scale(.35);
        opacity: .45;
    }
    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

/* 标记上方的名称气泡，bottom 需大于水滴顶端到坐标点的距离。
   默认隐藏，否则 8 个气泡会互相压在一起（山东 4 个点位间距不到 12px） */
.en-map-label {
    position: absolute;
    left: 0;
    bottom: 27px;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    width: 190px;
    padding: 6px 10px;
    background-color: #ffffff;
    color: #98002e;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}

.en-map-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #ffffff;
}

.en-map-marker.is-active .en-map-label {
    opacity: 1;
    visibility: visible;
}

/* 总部水滴更高，气泡再上移 */
.en-map-marker.has-badge .en-map-label {
    bottom: 39px;
}

/* 靠近左右边界时气泡贴边，避免溢出底图 */
.en-map-marker.label-align-left .en-map-label {
    transform: none;
}

.en-map-marker.label-align-left .en-map-label::after {
    left: 14px;
    margin-left: 0;
}

.en-map-marker.label-align-right .en-map-label {
    left: auto;
    right: 0;
    transform: none;
}

.en-map-marker.label-align-right .en-map-label::after {
    left: auto;
    right: 14px;
    margin-left: 0;
}

/* ==================== 分公司照片气泡 ====================
   方形照片卡，挂在公司坐标点上方，默认单张轮播（3 秒一张），
   鼠标悬浮右侧公司条目时改为常驻显示该公司的照片。
   卡片是 .en-map-marker 的子节点，所以自动跟随标记的百分比定位。 */

.branch-photo-card {
    position: absolute;
    left: 0;
    /* 27px 要大于普通水滴顶端到坐标点的距离，与名称气泡同一基准 */
    bottom: 27px;
    transform: translateX(-50%) scale(.9);
    transform-origin: 50% 100%;
    width: 130px;
    height: 130px;          /* 与 width 相同，保证是正方形 */
    box-sizing: border-box;
    padding: 3px;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, transform .35s ease;
}

/* 指向坐标点的小三角 */
.branch-photo-card::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #ffffff;
}

.branch-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;      /* 照片比例各异，裁切填满以保持方形 */
    border-radius: 4px;
    background-color: #f0f0f0;
}

/* 总部水滴更大（28×28），卡片相应上移，避免压住水滴 */
.en-map-marker.has-badge .branch-photo-card {
    bottom: 39px;
}

/* 当前要展示的那一个 */
.en-map-marker.show-photo .branch-photo-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* 显示照片的标记压在其他标记之上，避免卡片被别的水滴/气泡叠住 */
.en-map-marker.show-photo {
    z-index: 5;
}

/* 悬浮时标记本身会变成 .is-active（z-index 6），照片卡也一起提上去 */
.en-map-marker.show-photo.is-active {
    z-index: 7;
}

/* 靠边时卡片跟着名称气泡一起贴边，避免溢出底图被裁掉（秘鲁在 81.7%） */
.en-map-marker.label-align-left .branch-photo-card {
    left: -10px;
    transform: scale(.9);
}

.en-map-marker.label-align-left.show-photo .branch-photo-card {
    transform: scale(1);
}

.en-map-marker.label-align-left .branch-photo-card::after {
    left: 20px;
}

.en-map-marker.label-align-right .branch-photo-card {
    left: auto;
    right: -10px;
    transform: scale(.9);
}

.en-map-marker.label-align-right.show-photo .branch-photo-card {
    transform: scale(1);
}

.en-map-marker.label-align-right .branch-photo-card::after {
    left: auto;
    right: 20px;
    margin-left: 0;
}

/* 照片卡与名称气泡都在水滴上方，会打架。
   宽屏时把名称气泡顶到照片卡上面（27 + 130 + 8 = 165）， */
@media only screen and (min-width: 992px) {
    .en-map-marker.show-photo .en-map-label {
        bottom: 165px;
    }

    .en-map-marker.show-photo.has-badge .en-map-label {
        bottom: 177px;
    }
}

/* 窄屏纵向空间不够，显示照片时就不再显示名称气泡
   （悬浮的那条在右侧列表里本来就高亮着，不缺这个信息） */
@media only screen and (max-width: 991px) {
    .en-map-marker.show-photo .en-map-label {
        display: none;
    }

    /* 地图整体变小，卡片同步收窄，否则会顶出底图上边缘被 overflow 裁掉 */
    .branch-photo-card {
        width: 104px;
        height: 104px;
    }
}

@media only screen and (max-width: 767px) {
    .branch-photo-card {
        width: 84px;
        height: 84px;
    }
}

/* 再小的屏幕上地图本身只有两三百像素高，照片卡放不下也看不清，直接隐藏，
   只保留坐标点和右侧列表 */
@media only screen and (max-width: 575px) {
    .branch-photo-card {
        display: none;
    }
}

/* ==================== 展会照片气泡（功能已停用） ====================
   下面这一整段样式对应展会照片气泡，功能已停用：
   实现代码挪到了 public/static/js/exhibition-bubbles.js 且未被页面加载，
   a_fenbu.html 里的容器和 <script> 引用都注释掉了。样式保持原样不动，
   重新启用时不需要改这里。 */

/* ==================== 展会照片气泡 ====================
   当前为「常驻模式」：29 个气泡全部同屏显示，日期新的压在旧的上面。
   下面标有【常驻模式】的地方是相对轮播模式调整过的，回滚轮播时要一并改回，
   具体步骤见 fenbu-en.js 末尾「轮播模式（已停用）」区块的说明。 */

/* 气泡容器。带 z-index 会形成层叠上下文，所以气泡之间的 z-index
   只在容器内部比较，不会串到公司点位标记的层级上去 */
.exhibition-carousel-bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 4;
}

/* 单个气泡：零尺寸定位锚点，left/top 用百分比，底图缩放不跑位。
   层级由 JS 按日期写在 style.zIndex 上（越新越大） */
.exhibition-bubble {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: auto;
}

/* 悬浮时把整个气泡临时提到最上层，否则被日期更新的气泡压住的那些看不全。
   点击放大已停用，所以这里只处理 :hover，不再需要 :focus-within。 */
.exhibition-bubble:hover {
    z-index: 999 !important;
}

/* 圆形缩略图。直径 90px。
   注意欧洲和中东一带点位很密（叙利亚与约旦只差 7px），这个尺寸下重叠较多，
   依靠 z-index（日期新的在上）和悬浮置顶来区分。
   cursor 用 default：点击放大功能已停用，气泡不可点。 */
.exhibition-bubble-content {
    position: absolute;
    left: -45px;
    top: -45px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0;
    border: 3px solid #FF0820;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: default;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
}

/* 可见状态。fill-mode: both 配合 JS 写在 style 上的 animation-delay，
   让气泡在自己那一档延迟到来之前保持透明，按日期顺序逐个淡入 */
.exhibition-bubble.active .exhibition-bubble-content {
    opacity: 1;
    visibility: visible;
    animation: bubble-pulse .45s ease-out both;
}

/* 出场动画 */
@keyframes bubble-pulse {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    70% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 悬浮：放大并换成高亮描边，配合上面的 z-index 提升看清被压住的气泡 */
.exhibition-bubble-content:hover {
    transform: scale(1.15);
    border-color: #F7C600;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

/* 点击放大功能停用后气泡不再可聚焦，聚焦样式一并注掉，回滚时恢复：
.exhibition-bubble-content:focus-visible {
    transform: scale(1.15);
    border-color: #F7C600;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    outline: 3px solid #F7C600;
    outline-offset: 3px;
}
*/

/* 日期标签：居中挂在缩略图下沿，横向不超出气泡自身宽度，
   避免靠近底图左右边界的点位（如巴西 x≈89.5%）被裁掉 */
.exhibition-bubble-date {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    background: #FF0820;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.3;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* ==================== 图片放大浮窗（功能已停用） ====================
   点击气泡放大原图的功能已停用：a_fenbu.html 里的浮窗 DOM 和 fenbu-en.js 里的
   openModal/closeModal 都已注释保留。这段样式保持原样不动，回滚时不用改 CSS。 */

/* 浮窗遮罩 */
.exhibition-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.exhibition-modal.active {
    display: flex;
}

/* 半透明背景 */
.exhibition-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

/* 浮窗内容 */
.exhibition-modal-content {
    position: relative;
    z-index: 1001;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modal-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 弹出动画 */
@keyframes modal-pop-in {
    0% {
        transform: scale(0.2) translateY(30px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* 关闭按钮 */
.exhibition-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1002;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.exhibition-modal-close:hover {
    background: white;
    transform: rotate(90deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 浮窗主体：图片在上、日期国家信息在下 */
.exhibition-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* 浮窗图片：等比缩放，长边不超过视口 */
.exhibition-modal-image {
    display: block;
    max-width: 88vw;
    max-height: 74vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #f5f5f5;
}

/* 浮窗信息面板 */
.exhibition-modal-info {
    padding: 20px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
}

.exhibition-modal-date {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #FF0820;
}

.exhibition-modal-country {
    margin: 0;
    font-size: 13px;
    color: #666;
}

/* ==================== 响应式调整 ==================== */
@media only screen and (max-width: 991px) {
    .exhibition-bubble-content {
        left: -35px;
        top: -35px;
        width: 70px;
        height: 70px;
        border-width: 2px;
    }

    .exhibition-bubble-date {
        font-size: 10px;
        padding: 2px 6px;
        bottom: -5px;
    }

    .exhibition-modal-content {
        max-width: 95vw;
        max-height: 85vh;
    }

    .exhibition-modal-close {
        width: 32px;
        height: 32px;
        font-size: 24px;
    }

    .exhibition-modal-info {
        padding: 16px;
    }

    .exhibition-modal-date {
        font-size: 13px;
    }

    .exhibition-modal-country {
        font-size: 12px;
    }
}

@media only screen and (max-width: 600px) {
    .exhibition-bubble-content {
        left: -30px;
        top: -30px;
        width: 60px;
        height: 60px;
        border-width: 2px;
    }

    .exhibition-bubble-date {
        font-size: 9px;
        padding: 1px 5px;
        bottom: -4px;
    }

    .exhibition-modal-content {
        max-width: 98vw;
        max-height: 80vh;
    }

    .exhibition-modal-image {
        max-width: 96vw;
        max-height: 66vh;
    }

    .exhibition-modal-info {
        padding: 12px;
    }

    .exhibition-modal-date {
        font-size: 12px;
    }

    .exhibition-modal-country {
        font-size: 11px;
    }
}

/* ---------------- 右侧列表内部修正 ---------------- */
/* fenbu.css 里滚动容器 width:100% 会按侧栏 padding box 计算，
   导致卡片右侧被 overflow:hidden 裁掉，这里减去左右内边距 */
.en-distribution .company-items-container {
    width: calc(100% - 20px);
}

.en-distribution .company-item {
    box-sizing: border-box;
    width: 100%;
}

.en-distribution .company-item .title {
    font-size: 14px;
    line-height: 1.4;
}

.en-distribution .company-item .content {
    font-size: 13px;
}

.en-distribution .company-item .link {
    font-size: 13px;
}

/* ---------------- 响应式 ---------------- */
@media only screen and (max-width: 991px) {
    .en-distribution-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .en-map-stage {
        flex: 0 0 auto;
        width: 100%;
    }

    .en-distribution .map-sidebar-overlay {
        flex: 0 0 auto;
        width: 100%;
        height: 420px;
    }

    .en-map-label {
        width: 150px;
        font-size: 11px;
    }
}