/**
 * service.html 页面专用样式
 * p5.js canvas 固定定位覆盖视窗，不影响文档流
 * 覆盖层右侧展示，左侧面板始终可见
 */

/* p5.js 包裹元素脱离文档流 */
body > main {
    display: contents;
}

/* p5 canvas 固定定位，覆盖整个视窗（兼容 p5.js main 包裹） */
canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0;
    display: block !important;
}

/* ========== 左侧标题面板（与 topbar logo 左侧对齐） ========== */
.maxii-info-panel {
    position: fixed;
    top: 50%;
    left: 5vw;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 260px;
    pointer-events: auto;
}

/* 通用区块 */
.maxii-section {
    flex-shrink: 0;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.maxii-section:last-child {
    border-bottom: none;
}

/* 第3与第4部分之间间距缩小 */
#maxii-s3 {
    padding-bottom: 4px;
}

#maxii-s4 {
    padding-top: 4px;
}

/* 标题：左对齐 */
.maxii-section-title {
    margin: 0 0 3px 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
    cursor: default;
    text-align: left;
}

/* 内容段落：两端对齐，最后一行左对齐 */
.maxii-section-body p {
    margin: 0 0 4px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.8);
    text-align: justify;
    text-align-last: left;
}

/* ========== 折叠交互（第2/3/4部分） ========== */

/* 可折叠标题 */
.maxii-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

/* 1/5部分标题也可点击 */
.maxii-trigger {
    cursor: pointer;
}

/* 折叠图标 */
.maxii-toggle-icon {
    display: inline-block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
    width: 12px;
    text-align: center;
}

/* 可展开文字区域（2/3/4部分） */
.maxii-expandable {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.maxii-expandable.maxii-expanded {
    max-height: 200px;
}

.maxii-expandable p {
    padding-top: 4px;
}

/* ========== 右侧图片容器：始终显示对应图片 ========== */
.maxii-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.maxii-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

/* 覆盖层背景：白色半透明，60vh高度居中 */
.maxii-overlay::before {
    content: '';
    position: absolute;
    top: calc(50% - 30vh);
    left: 0;
    width: 100%;
    height: 60vh;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    backdrop-filter: blur(10px);
}

/* 右侧图片容器：从左侧标题面板间隔到页面右侧边距，高度与背景一致 */
.maxii-overlay-content {
    position: absolute;
    left: calc(5vw + 260px + 40px);
    right: 5vw;
    top: calc(50% - 30vh);
    z-index: 1;
    width: calc(95vw - 300px);
    height: 60vh;
    overflow: hidden;
    pointer-events: none;
}

/* 覆盖层图片：填充满容器 */
.maxii-overlay-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========== 响应式：小屏幕（<768px）========== */
@media (max-width: 767px) {
    .maxii-info-panel {
        width: 50vw;
    }
    .maxii-overlay-content {
        left: calc(5vw + 50vw + 20px);
        width: calc(45vw - 20px);
    }
}