.wh-page {
    --wh-fs-h2: clamp(22px, 2vw + 0.7rem, 32px);
}

/* news_detail12 extras */

/* ponytail: 封面圖 section 與內文 section 各帶 wh-section padding，這裡壓掉中間重複空白 */
.wh-page .wh-section--light:has(.wh-case-detail__media) {
    padding-bottom: 0;
}

.wh-page .wh-section--light:has(.wh-case-detail__media) + .wh-section--light {
    padding-top: clamp(24px, 4vw, 40px);
}

/* ponytail: 與 news12 同款桌機螢幕框，詳細頁放大 */
.wh-case-detail__media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px) clamp(28px, 4vw, 40px);
    background: transparent;
}

.wh-case-detail__monitor {
    position: relative;
    width: min(92%, 920px);
    flex: 0 0 auto;
    padding: 10px 10px 24px;
    border-radius: 16px 16px 12px 12px;
    background: linear-gradient(180deg, #f2f4f1 0%, #d5dbd5 55%, #c4cbc4 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 20px 40px -14px rgba(31, 45, 37, 0.16),
        0 2px 6px -4px rgba(31, 45, 37, 0.08);
}

.wh-case-detail__monitor::before {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 4px;
    height: 4px;
    content: "";
    border-radius: 50%;
    background: #5f6b62;
    transform: translateX(-50%);
    pointer-events: none;
}

.wh-case-detail__monitor::after {
    position: absolute;
    left: 50%;
    top: calc(100%);
    width: 42%;
    height: 16px;
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
    background:
        linear-gradient(180deg, #c9d0c9, #aeb6ae) 50% 0 / 26% 70% no-repeat,
        radial-gradient(ellipse 100% 70% at 50% 100%, #c5ccc5 0%, #aab2aa 62%, transparent 63%);
}

.wh-case-detail__screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 4px;
    background: #1a211c;
    border: 1px solid rgba(30, 38, 33, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.wh-case-detail__media img,
.wh-case-detail__screen img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

@media (max-width: 639px) {
    .wh-page .wh-section--light:has(.wh-case-detail__media) + .wh-section--light {
        padding-top: 24px;
    }

    .wh-case-detail__media {
        padding: 18px 12px 28px;
    }

    .wh-case-detail__monitor {
        width: 100%;
        padding: 7px 7px 18px;
        border-radius: 12px 12px 8px 8px;
    }
}

.wh-case-detail__content.news_edit {
    display: block;
}

/* ponytail: 無左側標題／摘要／標籤時只剩 Case study kicker，隱藏 aside 讓內文全寬 */
.wh-page .wh-case-detail__aside:not(:has(h2)):not(:has(p:not(.wh-kicker))):not(:has(.wh-case-detail__aside-extra)) {
    display: none;
}

@media (min-width: 960px) {
    .wh-page .wh-case-detail__layout:not(:has(.wh-case-detail__aside h2)):not(:has(.wh-case-detail__aside p:not(.wh-kicker))):not(:has(.wh-case-detail__aside-extra)) .wh-case-detail__content {
        grid-column: span 12;
    }
}

.wh-case-detail__content.news_edit h2 {
    margin: 48px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--wh-line);
    font-size: var(--wh-fs-h2);
    line-height: 1.3;
}

.wh-case-detail__content.news_edit h2:first-child {
    margin-top: 0;
}

.wh-case-detail__content.news_edit p {
    margin: 16px 0 0;
    color: var(--wh-muted);
    line-height: 1.9;
}

.wh-case-detail__content.news_edit ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wh-gap);
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.wh-case-detail__content.news_edit ul li {
    border-top: 1px solid var(--wh-line);
    padding-top: 16px;
}

.wh-case-detail__content.news_edit ul li strong {
    display: block;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.wh-case-detail__aside-extra {
    margin-top: 24px;
}

.wh-case-detail__tags {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.wh-case-detail__tags a {
    color: var(--wh-muted);
    font-size: var(--wh-fs-small);
}

.wh-case-detail__pager {
    display: grid;
    gap: 16px;
    margin-top: 48px;
}

@media (min-width: 700px) {
    .wh-case-detail__pager {
        grid-template-columns: 1fr 1fr;
    }
}

.wh-case-detail__pager a {
    display: block;
    padding-top: 16px;
    border-top: 1px solid var(--wh-line);
    color: inherit;
    text-decoration: none;
}

.wh-case-detail__pager-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    color: var(--wh-muted);
}