/* Portal Section - Frontend Styles */
/* Apple Vision Pro 风格 portal 视频区块 — 精确还原原版外观 */

/* ═══ 基础容器 ═══ */
.wp-block-jd-portal-section.portal-layout {
    position: relative;
    --r-localnav-height: 0px;
    --portal-headline-overlap: 50vh;
    --video-padding-bottom: 22px;
    --portal-video-overlap: 10px;
    background: #fff;
    /* 默认全宽 — 突破主题内容宽度约束 */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: auto;
    max-width: 100vw;
}

.wp-site-blocks > .wp-block-group:has(.wp-block-jd-portal-section) {
    margin-block-start: 0 !important;
}

/* ═══ Section Content — 宽度约束（Apple 原版设计值） ═══ */
.wp-block-jd-portal-section.portal-layout .section-content {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
}

@media only screen and (max-width: 1068px) {
    .wp-block-jd-portal-section.portal-layout .section-content {
        width: 692px;
    }
}

@media only screen and (max-width: 734px) {
    .wp-block-jd-portal-section.portal-layout .section-content {
        width: 87.5%;
        max-width: 390px;
    }
}

/* ════════════════════════════════════════════════════ */
/* 桌面版 (≥735px) — 标题重叠在视频上方，粘性视频    */
/* ════════════════════════════════════════════════════ */
@media only screen and (min-width: 735px) {

    /* Headline — 在流中占据 ~50vh 空间 */
    .wp-block-jd-portal-section.portal-layout .headline-lockup {
        position: relative;
        z-index: 2;
        padding-bottom: 0;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        min-height: 50vh;
    }

    /* Headline wrapper — 垂直居中 */
    .wp-block-jd-portal-section.portal-layout .headline-lockup .headline-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        padding-bottom: 30px;
    }

    /* Headline 文字颜色白色（在视频上方） */
    .wp-block-jd-portal-section.portal-layout .headline-lockup .section-eyebrow,
    .wp-block-jd-portal-section.portal-layout .headline-lockup .section-headline {
        color: #fff;
    }

    /* Scroll-container — 负 margin 拉到标题后方 */
    .wp-block-jd-portal-section.portal-layout .scroll-container {
        margin-top: calc(var(--portal-headline-overlap) * -1);
        height: calc(100vh + var(--portal-headline-overlap));
        width: 100%;
    }

    /* Sticky element — 粘在视口顶部 */
    .wp-block-jd-portal-section.portal-layout .sticky-element {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }

    /* Video container — 填满视口高度 */
    .wp-block-jd-portal-section.portal-layout .video-container.type-portal {
        height: 100vh;
        max-width: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    /* Video wrapper — flex 居中 */
    .wp-block-jd-portal-section.portal-layout .video-container.type-portal .video-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        position: relative;
    }

    /* 视频和封面 — 覆盖填充，铺满容器 */
    .wp-block-jd-portal-section.portal-layout .video-container.type-portal .portal-video,
    .wp-block-jd-portal-section.portal-layout .video-container.type-portal .start-frame img {
        height: 100vh;
        min-width: 100%;
        width: auto;
        max-width: none;
        object-fit: cover;
        display: block;
    }

    /* 封面图 */
    .wp-block-jd-portal-section.portal-layout .video-container.type-portal .start-frame {
        max-width: 100%;
        display: block;
    }

    /* 视频暗色蒙层 (scrim) — Portal 组件通过 --css-scrim-opacity 控制淡出 */
    .wp-block-jd-portal-section.portal-layout .video-container.type-portal .video-wrapper::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        opacity: var(--css-scrim-opacity, 0.3);
        pointer-events: none;
        z-index: 1;
    }

    /* Portal 组件通过 css(--scrim-opacity) 读取初始遮罩值 */
    .wp-block-jd-portal-section.portal-layout .video-container.type-portal .video-wrapper {
        --scrim-opacity: 0.3;
    }

    /* Portal content — 白色背景，在粘性视频下方 */
    .wp-block-jd-portal-section.portal-layout .portal-content {
        background: #fff;
        position: relative;
        z-index: 1;
        padding-bottom: 44px;
        padding-top: 80px;
    }

    /* ═══ Video Attribution — 绝对定位右下角 ═══ */
    .wp-block-jd-portal-section.portal-layout .video-attribution-wrapper {
        position: absolute;
        bottom: 60px;
        right: 60px;
        z-index: 3;
        text-align: right;
        max-width: 50%;
        pointer-events: auto;
    }

    .wp-block-jd-portal-section.portal-layout .video-attribution-wrapper .typography-video-attribution {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        line-height: 1.4285914286;
        font-weight: 400;
        letter-spacing: -0.016em;
        font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
        margin: 0;
    }

    /* Inline Media UI — 右上角 */
    .wp-block-jd-portal-section.portal-layout .video-container.with-media-ui .inline-media-ui {
        position: absolute;
        top: 21px;
        right: 5px;
        z-index: 3;
    }
}

/* ════════════════════════════════════════════════════ */
/* 平板版 (≤1068px)                                    */
/* ════════════════════════════════════════════════════ */
@media only screen and (min-width: 735px) and (max-width: 1068px) {
    .wp-block-jd-portal-section.portal-layout .portal-content {
        padding-bottom: 35px;
        padding-top: 55px;
    }

    .wp-block-jd-portal-section.portal-layout .video-attribution-wrapper {
        bottom: 40px;
        right: 40px;
    }
}

/* ════════════════════════════════════════════════════ */
/* 手机版 (≤734px) — 文字在前，视频在后，无粘性       */
/* ════════════════════════════════════════════════════ */
@media only screen and (max-width: 734px) {
    .wp-block-jd-portal-section.portal-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Headline — 正常流，黑色文字 */
    .wp-block-jd-portal-section.portal-layout .headline-lockup {
        order: 0;
        position: static;
        z-index: auto;
        min-height: auto;
        width: 100%;
        padding: 60px 0 30px;
    }

    .wp-block-jd-portal-section.portal-layout .headline-lockup .headline-wrapper {
        position: static;
        height: auto;
    }

    .wp-block-jd-portal-section.portal-layout .headline-lockup .section-eyebrow,
    .wp-block-jd-portal-section.portal-layout .headline-lockup .section-headline {
        color: #1d1d1f;
    }

    /* Scroll container — 正常流，无粘性 */
    .wp-block-jd-portal-section.portal-layout .scroll-container {
        order: 1;
        position: static;
        margin-top: 0;
        height: auto;
        width: 100%;
    }

    .wp-block-jd-portal-section.portal-layout .sticky-element {
        position: static;
        height: auto;
        overflow: visible;
    }

    /* Video — 自适应高度 */
    .wp-block-jd-portal-section.portal-layout .video-container.type-portal {
        height: auto;
        max-width: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .wp-block-jd-portal-section.portal-layout .video-container.type-portal .video-wrapper {
        height: auto;
        width: 100%;
        position: relative;
    }

    .wp-block-jd-portal-section.portal-layout .video-container.type-portal .portal-video,
    .wp-block-jd-portal-section.portal-layout .video-container.type-portal .start-frame img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 蒙层在小屏透明 */
    .wp-block-jd-portal-section.portal-layout .video-container.type-portal .video-wrapper::after {
        opacity: 0;
    }

    /* Portal content */
    .wp-block-jd-portal-section.portal-layout .portal-content {
        order: 2;
        padding: 24px 0 33px;
        background: #fff;
        width: 100%;
    }

    /* Attribution — 流式排列 */
    .wp-block-jd-portal-section.portal-layout .video-attribution-wrapper {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 12px auto 0;
        max-width: 87.5%;
        text-align: center;
        z-index: auto;
    }

    .wp-block-jd-portal-section.portal-layout .video-attribution-wrapper .typography-video-attribution {
        color: #86868b;
    }

    /* Inline Media UI — 小屏也显示在右上角 */
    .wp-block-jd-portal-section.portal-layout .video-container.with-media-ui .inline-media-ui {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 3;
    }
}

/* ════════════════════════════════════════════════════ */
/* 排版 (所有断点共享)                                  */
/* ════════════════════════════════════════════════════ */

/* Eyebrow — Apple 原版 font-weight: 700 */
.wp-block-jd-portal-section.portal-layout .headline-lockup .section-eyebrow {
    font-size: 24px;
    line-height: 1.1666666667;
    font-weight: 700;
    letter-spacing: .009em;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    margin: 0;
    text-align: center;
}

.wp-block-jd-portal-section.portal-layout .headline-lockup .section-eyebrow + .section-headline {
    margin-top: 13px;
}

/* Headline — Apple 原版 font-weight: 700 */
.wp-block-jd-portal-section.portal-layout .headline-lockup .section-headline {
    font-size: 80px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.015em;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    margin: 0;
    text-align: center;
}

@media only screen and (max-width: 1068px) {
    .wp-block-jd-portal-section.portal-layout .headline-lockup .section-eyebrow {
        font-size: 19px;
        line-height: 1.2105263158;
        font-weight: 700;
        letter-spacing: .012em;
    }
    .wp-block-jd-portal-section.portal-layout .headline-lockup .section-eyebrow + .section-headline {
        margin-top: 11px;
    }
    .wp-block-jd-portal-section.portal-layout .headline-lockup .section-headline {
        font-size: 64px;
        line-height: 1.0625;
        font-weight: 700;
        letter-spacing: -0.009em;
    }
}

@media only screen and (max-width: 734px) {
    .wp-block-jd-portal-section.portal-layout .headline-lockup .section-eyebrow {
        font-size: 17px;
        line-height: 1.2353641176;
        font-weight: 700;
        letter-spacing: -0.022em;
    }
    .wp-block-jd-portal-section.portal-layout .headline-lockup .section-eyebrow + .section-headline {
        margin-top: 6px;
    }
    .wp-block-jd-portal-section.portal-layout .headline-lockup .section-headline {
        font-size: 40px;
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: 0em;
    }
}

/* ═══ Start Frame (Poster) — 视频加载前显示 ═══ */
.wp-block-jd-portal-section.portal-layout .video-container .start-frame {
    display: block;
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.wp-block-jd-portal-section.portal-layout .video-container .start-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video loaded → hide poster */
.wp-block-jd-portal-section.portal-layout .video-container .video-wrapper.loaded .start-frame {
    display: none;
}

/* ═══ Initial state: hide video when poster exists, show both only on play ═══ */
/* 使用 opacity + position:absolute 而非 display:none，确保浏览器能加载和播放视频 */
.wp-block-jd-portal-section.portal-layout .video-container .video-wrapper .portal-video {
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.wp-block-jd-portal-section.portal-layout .video-container .video-wrapper.loaded .portal-video {
    opacity: 1;
    pointer-events: auto;
}
/* No poster → video always visible */
.wp-block-jd-portal-section.portal-layout .video-container .video-wrapper:not(:has(.start-frame)) .portal-video {
    opacity: 1;
    pointer-events: auto;
}

/* ═══ Inline Media UI — 右上角 (共享) ═══ */
.wp-block-jd-portal-section.portal-layout .video-container.with-media-ui .inline-media-ui {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    transition: opacity 0.2s ease-out;
    --inline-media-playpause-icon-color: rgba(255, 255, 255, 1);
    --inline-media-playpause-icon-color-hover: rgba(255, 255, 255, 0.9);
    --inline-media-playpause-scrim-color: rgba(0, 0, 0, 0);
    --inline-media-playpause-scrim-color-hover: rgba(0, 0, 0, 0);
    --inline-media-playpause-scrim-color-active: rgba(0, 0, 0, 0);
}

/* ═══ Play-Pause Button ═══ */
.wp-block-jd-portal-section.portal-layout .video-container.with-media-ui .inline-media-ui .play-pause-button {
    padding: 0;
    margin-right: 16px;
    margin-bottom: 16px;
    background: none;
    display: flex;
    width: 38px;
    min-width: 38px;
    height: 38px;
    opacity: 0;
    border: none;
    position: relative;
    justify-self: flex-end;
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    cursor: pointer;
    background-repeat: no-repeat;
    transition: opacity 100ms linear, transform 0.2s ease;
}

/* 圆形半透明背景 (scrim) — 视觉锚点 */
.wp-block-jd-portal-section.portal-layout .video-container.with-media-ui .inline-media-ui .play-pause-button::before {
    content: "";
    position: absolute;
    background-color: var(--inline-media-playpause-scrim-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

/* Play icon via SVG mask — 居中于按钮 */
.wp-block-jd-portal-section.portal-layout .video-container.with-media-ui .inline-media-ui .play-pause-button::after {
    content: "";
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 15.25V4.77a1.44 1.44 0 0 1 1.44-1.62 1.86 1.86 0 0 1 1.11.31l8.53 5c.76.44 1.17.8 1.17 1.51s-.41 1.07-1.17 1.51l-8.53 5a1.86 1.86 0 0 1-1.11.31A1.42 1.42 0 0 1 5 15.25z'/%3E%3C/svg%3E");
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 15.25V4.77a1.44 1.44 0 0 1 1.44-1.62 1.86 1.86 0 0 1 1.11.31l8.53 5c.76.44 1.17.8 1.17 1.51s-.41 1.07-1.17 1.51l-8.53 5a1.86 1.86 0 0 1-1.11.31A1.42 1.42 0 0 1 5 15.25z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: 20px 20px;
    background-color: var(--inline-media-playpause-icon-color);
}

/* Pause icon (playing state) */
.wp-block-jd-portal-section.portal-layout .video-container.with-media-ui .inline-media-ui.playing .play-pause-button::after {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3.75' y='3' width='4.5' height='14' rx='1.5'/%3E%3Crect x='11.75' y='3' width='4.5' height='14' rx='1.5'/%3E%3C/svg%3E");
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3.75' y='3' width='4.5' height='14' rx='1.5'/%3E%3Crect x='11.75' y='3' width='4.5' height='14' rx='1.5'/%3E%3C/svg%3E");
}

.wp-block-jd-portal-section.portal-layout .video-container.with-media-ui .inline-media-ui .play-pause-button:hover::after {
    background-color: var(--inline-media-playpause-icon-color-hover);
}

/* Loaded → visible */
.wp-block-jd-portal-section.portal-layout .video-container.with-media-ui .inline-media-ui.loaded .play-pause-button {
    pointer-events: all;
    opacity: 1;
}

/* Loading empty → hidden */
.wp-block-jd-portal-section.portal-layout .video-container.with-media-ui .inline-media-ui.loading-empty .play-pause-button {
    opacity: 0;
}

.wp-block-jd-portal-section.portal-layout .video-container.with-media-ui .inline-media-ui .play-pause-button:disabled {
    pointer-events: none;
    opacity: 0.32;
}

/* ═══ Play Progress Circle ═══ */
.wp-block-jd-portal-section.portal-layout .play-pause-button .play-progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wp-block-jd-portal-section.portal-layout .play-pause-button .play-progress-circle .progress-background {
    stroke: rgba(255, 255, 255, 0.3);
    fill: none;
    stroke-width: 2;
}

.wp-block-jd-portal-section.portal-layout .play-pause-button .play-progress-circle .progress-circle {
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dashoffset 100ms linear;
}

/* ═══ Portal Content (正文 + CTA) ═══ */
.wp-block-jd-portal-section.portal-layout .portal-copy {
    color: #86868b;
    margin-top: 0;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media only screen and (max-width: 734px) {
    .wp-block-jd-portal-section.portal-layout .portal-copy {
        margin-top: 22px;
    }
}

.wp-block-jd-portal-section.portal-layout .portal-copy .typography-section-body {
    font-size: 21px;
    line-height: 1.381002381;
    font-weight: 400;
    letter-spacing: .011em;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    color: #86868b;
}

@media only screen and (max-width: 1068px) {
    .wp-block-jd-portal-section.portal-layout .portal-copy .typography-section-body {
        font-size: 19px;
        line-height: 1.4211026316;
        letter-spacing: .012em;
    }
}

@media only screen and (max-width: 734px) {
    .wp-block-jd-portal-section.portal-layout .portal-copy .typography-section-body {
        font-size: 17px;
        line-height: 1.4705882353;
        letter-spacing: -0.022em;
    }
}

/* ═══ Portal CTA ═══ */
.wp-block-jd-portal-section.portal-layout .portal-cta {
    font-size: 21px;
    line-height: 1.381002381;
    font-weight: 400;
    letter-spacing: .011em;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    margin-top: 1.2em;
}

.wp-block-jd-portal-section.portal-layout .portal-cta a {
    color: #06c;
    text-decoration: none;
}

.wp-block-jd-portal-section.portal-layout .portal-cta a:hover {
    text-decoration: underline;
}

.wp-block-jd-portal-section.portal-layout .portal-cta .icon-copy {
    display: inline;
}

.wp-block-jd-portal-section.portal-layout .portal-cta .icon-external::after {
    content: " ↗";
    font-size: 0.85em;
}

@media only screen and (max-width: 1068px) {
    .wp-block-jd-portal-section.portal-layout .portal-cta {
        font-size: 17px;
        line-height: 1.4705882353;
        letter-spacing: -0.022em;
        font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    }
}

@media only screen and (max-width: 734px) {
    .wp-block-jd-portal-section.portal-layout .portal-cta {
        font-size: 19px;
        line-height: 1.4211026316;
        letter-spacing: .012em;
    }
}