/* A 定稿｜球閥工業技術型錄：機械切角、管線導引、圓形閥口語彙 */
html.valve-variant-a .valve-page {
    --tech-blue: #526f82;
    --tech-blue-dark: #304957;
    --tech-graphite: #252d32;
    --tech-steel: #7d898f;
    --tech-line: #d6dadd;
    --tech-paper: #f7f7f4;
    --tech-white: #fff;
    --valve-panel: #f1f2ef;
    --valve-sage: #d9e2e7;
}

/* HERO｜產品像工程樣品，而非生活風格照片 */
html.valve-variant-a .valve-page .page-hero {
    min-height: 610px;
    padding: 72px 0 88px;
    background:
        linear-gradient(rgba(82,111,130,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82,111,130,.055) 1px, transparent 1px),
        var(--valve-bg);
    background-size: 42px 42px;
}

html.valve-variant-a .valve-page .page-hero-grid {
    grid-template-columns: minmax(330px, 38%) minmax(0, 1fr);
    gap: clamp(52px, 7vw, 96px);
}

html.valve-variant-a .valve-page .page-hero-text { position: relative; }
html.valve-variant-a .valve-page .page-hero-text::before {
    content: 'BV / 01';
    position: absolute;
    top: -34px;
    right: 0;
    color: #a7afb3;
    font: 600 10px/1 monospace;
    letter-spacing: .16em;
}

html.valve-variant-a .valve-page .page-hero h1 {
    font-size: clamp(34px, 3.7vw, 52px);
    line-height: 1.35;
    letter-spacing: .075em;
}

html.valve-variant-a .valve-page .page-hero h1 small {
    margin-top: 4px;
    color: var(--tech-blue-dark);
    font-size: .64em;
}

html.valve-variant-a .valve-page .page-hero h1::after {
    width: 72px;
    height: 2px;
    background: linear-gradient(90deg, var(--tech-blue) 0 38%, var(--tech-line) 38% 100%);
}

html.valve-variant-a .valve-page .page-hero-subtitle { max-width: 390px; }
html.valve-variant-a .valve-page .page-hero-visual { padding: 16px 18px 18px 0; }

html.valve-variant-a .valve-page .valve-hero-art::before {
    bottom: -24px;
    left: -28px;
    width: 148px;
    height: 148px;
    border: 18px solid rgba(82,111,130,.15);
    border-radius: 50%;
    background: transparent;
}

html.valve-variant-a .valve-page .valve-hero-art::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: -14px;
    right: -14px;
    width: 92px;
    height: 92px;
    border: 1px solid var(--tech-blue);
    border-radius: 50%;
    background: radial-gradient(circle, transparent 0 35%, var(--tech-blue) 36% 38%, transparent 39%);
}

html.valve-variant-a .valve-page .valve-hero-image {
    aspect-ratio: 1.34 / 1;
    border: 1px solid var(--tech-line);
    border-radius: 0;
    clip-path: polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
    background: #fff;
}

html.valve-variant-a .valve-page .valve-hero-image::after {
    top: 18px;
    right: 18px;
    width: 74px;
    height: 20px;
    border: 0;
    border-top: 2px solid var(--tech-blue);
    border-radius: 0;
}

html.valve-variant-a .valve-page .valve-hero-image img { padding: 6% 11% 10%; }
html.valve-variant-a .valve-page .valve-hero-image figcaption {
    right: 24px;
    bottom: 18px;
    left: 24px;
    border-color: var(--tech-line);
}

/* BRAND｜一道工程說明欄，不做大面積色塊 */
html.valve-variant-a .valve-page .valve-brand { padding-bottom: 88px; }
html.valve-variant-a .valve-page .brand-intro {
    grid-template-columns: 78px .8fr 1.35fr;
    gap: 46px;
    padding: 52px 0;
    border-top: 1px solid var(--tech-line);
    border-bottom: 1px solid var(--tech-line);
    background: transparent;
}

html.valve-variant-a .valve-page .brand-intro::before {
    color: #d7dcde;
    border-right: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 34px;
    letter-spacing: -.08em;
}

html.valve-variant-a .valve-page .brand-intro::after {
    top: 116px;
    left: 2px;
    color: var(--tech-blue);
}

html.valve-variant-a .valve-page .brand-logo-box {
    padding-left: 22px;
    border-left: 3px solid var(--tech-blue);
}

/* SERIES｜每一列是一張設備規格頁，取消柔和拱形與漂浮卡片 */
html.valve-variant-a .valve-page .valve-types { padding-top: 24px; }
html.valve-variant-a .valve-page .types-grid { border-top: 2px solid var(--tech-graphite); }

html.valve-variant-a .valve-page .type-card,
html.valve-variant-a .valve-page .type-card:nth-child(even),
html.valve-variant-a .valve-page .type-card:nth-child(3n),
html.valve-variant-a .valve-page .type-card:nth-child(3n + 1) {
    grid-template-columns: 260px minmax(0,1fr);
    gap: 54px;
    min-height: 0;
    margin: 0;
    padding: 54px 22px 60px;
    border-bottom: 1px solid var(--tech-line);
    background: transparent;
}

html.valve-variant-a .valve-page .type-card:nth-child(even) .type-card-left,
html.valve-variant-a .valve-page .type-card:nth-child(even) .type-card-right {
    order: initial;
}

html.valve-variant-a .valve-page .type-card .type-card-left,
html.valve-variant-a .valve-page .type-card:nth-child(even) .type-card-left {
    padding: 0 30px 0 0;
    border: 0;
    border-right: 1px solid var(--tech-line);
}

html.valve-variant-a .valve-page .type-card::after,
html.valve-variant-a .valve-page .type-card:nth-child(even)::after {
    top: 16px;
    right: 18px;
    left: auto;
    color: #c5cbce;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    letter-spacing: .12em;
}

html.valve-variant-a .valve-page .type-icon {
    width: 52px;
    height: 52px;
    padding: 11px;
    border: 1px solid var(--tech-blue);
    border-radius: 50%;
}

html.valve-variant-a .valve-page .type-card h3 { font-size: 24px; }
html.valve-variant-a .valve-page .type-en { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

html.valve-variant-a .valve-page .type-gallery-grid {
    align-items: stretch;
    gap: 14px;
}

html.valve-variant-a .valve-page .type-gallery-item,
html.valve-variant-a .valve-page .type-gallery-item:nth-child(3n + 2),
html.valve-variant-a .valve-page .type-gallery-item:hover {
    min-height: 142px;
    margin-top: 0;
    padding: 8px 8px 10px;
    border: 1px solid var(--tech-line);
    border-radius: 0;
    clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
    background: #fff;
    box-shadow: none;
}

html.valve-variant-a .valve-page .type-gallery-item img,
html.valve-variant-a .valve-page .type-gallery-item:hover img {
    height: 86px;
    padding: 6px;
    border: 0;
    border-radius: 0;
    background: #fff;
    transform: none;
}

html.valve-variant-a .valve-page .type-gallery-item:hover { border-color: var(--tech-blue); }

/* SPEC｜石墨資料帶，像設備銘牌 */
html.valve-variant-a .valve-page .common-specs-row {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 0;
    margin-top: 72px;
    border: 0;
    background: var(--tech-graphite);
    clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}

html.valve-variant-a .valve-page .spec-row,
html.valve-variant-a .valve-page .spec-row:last-child {
    display: block;
    padding: 32px 28px 38px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.15);
    background: transparent;
}

html.valve-variant-a .valve-page .spec-row:last-child { border-right: 0; }
html.valve-variant-a .valve-page .spec-row-label { padding: 0 0 18px; border: 0; background: transparent; }
html.valve-variant-a .valve-page .spec-row-label .dot { width: 28px; height: 2px; border-radius: 0; background: #91afc0; }
html.valve-variant-a .valve-page .spec-row-label h4 { color: #fff; }
html.valve-variant-a .valve-page .spec-row-content { padding: 0; }
html.valve-variant-a .valve-page .spec-row-content,
html.valve-variant-a .valve-page .spec-row-content p { color: rgba(255,255,255,.72); }

/* APPLICATIONS｜以管線與節點連接，不使用六個方框 */
html.valve-variant-a .valve-page .valve-applications {
    padding: 76px 0 92px;
    background: #f3f4f1;
}

html.valve-variant-a .valve-page .valve-applications::after { display: none; }
html.valve-variant-a .valve-page .apps-grid {
    position: relative;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 18px;
    margin-top: 54px;
    border: 0;
}

html.valve-variant-a .valve-page .apps-grid::before {
    content: '';
    position: absolute;
    top: 45px;
    right: 7%;
    left: 7%;
    height: 1px;
    background: #aeb8bd;
}

html.valve-variant-a .valve-page .app-item,
html.valve-variant-a .valve-page .app-item:nth-child(3n + 2),
html.valve-variant-a .valve-page .app-item:hover,
html.valve-variant-a .valve-page .app-item:nth-child(3n + 2):hover {
    z-index: 1;
    min-height: 0;
    padding: 0 8px;
    border: 0;
    background: transparent;
    text-align: center;
    transform: none;
    box-shadow: none;
}

html.valve-variant-a .valve-page .app-icon {
    width: 58px;
    height: 58px;
    margin: 16px auto 22px;
    padding: 14px;
    border: 1px solid #aeb8bd;
    border-radius: 50%;
    background: #f3f4f1;
}

/* CTA｜工程圖框與斜切角 */
html.valve-variant-a .valve-page .valve-cta { padding: 82px 0; }
html.valve-variant-a .valve-page .valve-cta::before {
    top: 34px;
    right: 8%;
    bottom: auto;
    width: 104px;
    height: 104px;
    border: 16px solid rgba(82,111,130,.13);
    border-radius: 50%;
    background: transparent;
}

html.valve-variant-a .valve-page .valve-cta .container {
    padding: 52px 58px;
    border: 1px solid var(--tech-line);
    border-left: 6px solid var(--tech-blue);
    border-radius: 0;
    clip-path: polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%);
    background: #fff;
}

html.valve-variant-a .valve-page .valve-cta .container::before { color: #e1e4e5; }
html.valve-variant-a .valve-page .valve-cta .container::after { color: var(--tech-blue); }
html.valve-variant-a .valve-page .valve-cta h2 { color: var(--tech-graphite); }
html.valve-variant-a .valve-page .valve-cta p { color: var(--valve-text); }

@media (max-width: 900px) {
    html.valve-variant-a .valve-page .page-hero { background-size: 34px 34px; }
    html.valve-variant-a .valve-page .valve-hero-image { border-radius: 0; clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
    html.valve-variant-a .valve-page .brand-intro { background: transparent; }
    html.valve-variant-a .valve-page .type-card,
    html.valve-variant-a .valve-page .type-card:nth-child(even) { margin: 0; background: transparent; }
    html.valve-variant-a .valve-page .type-gallery-item,
    html.valve-variant-a .valve-page .type-gallery-item:nth-child(3n + 2) { margin-top: 0; border-radius: 0; background: #fff; }
    html.valve-variant-a .valve-page .type-gallery-item img { border: 0; border-radius: 0; background: #fff; }
    html.valve-variant-a .valve-page .common-specs-row { display: block; clip-path: none; }
    html.valve-variant-a .valve-page .spec-row,
    html.valve-variant-a .valve-page .spec-row:last-child { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
    html.valve-variant-a .valve-page .apps-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    html.valve-variant-a .valve-page .apps-grid::before { display: none; }
    html.valve-variant-a .valve-page .valve-cta .container { border-radius: 0; background: #fff; }
}

@media (max-width: 620px) {
    html.valve-variant-a .valve-page .page-hero { padding-top: 58px; }
    html.valve-variant-a .valve-page .page-hero h1 { font-size: 29px; }
    html.valve-variant-a .valve-page .brand-intro { padding: 38px 24px; }
    html.valve-variant-a .valve-page .type-card,
    html.valve-variant-a .valve-page .type-card:nth-child(even) { grid-template-columns: 1fr; padding: 42px 16px 48px; }
    html.valve-variant-a .valve-page .type-card .type-card-left,
    html.valve-variant-a .valve-page .type-card:nth-child(even) .type-card-left { padding: 0 0 24px; border-right: 0; border-bottom: 1px solid var(--tech-line); }
    html.valve-variant-a .valve-page .apps-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px 12px; }
    html.valve-variant-a .valve-page .app-icon { margin-top: 0; }
    html.valve-variant-a .valve-page .valve-cta .container { padding: 50px 25px 34px; }
}

/* Layer 02｜增加機械型錄的層次與焦點，避免灰白畫面過度單調 */
html.valve-variant-a .valve-page {
    --tech-brass: #b38a45;
    --tech-brass-soft: #eee5d4;
    --tech-ice: #dce8ee;
    --tech-navy: #213843;
}

/* Hero 加入深色結構樑與規格籤 */
html.valve-variant-a .valve-page .page-hero-visual {
    position: relative;
}

html.valve-variant-a .valve-page .page-hero-visual::before {
    content: '';
    position: absolute;
    top: -22px;
    right: -42px;
    bottom: 44px;
    width: 31%;
    background: var(--tech-navy);
    clip-path: polygon(22px 0,100% 0,100% 100%,0 100%,0 22px);
}

html.valve-variant-a .valve-page .page-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

html.valve-variant-a .valve-page .page-hero-kicker::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--tech-brass);
}

html.valve-variant-a .valve-page .page-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-width: 410px;
    margin-top: 24px;
}

html.valve-variant-a .valve-page .page-hero-badges span {
    padding: 7px 10px;
    border: 0;
    border-left: 3px solid var(--tech-blue);
    background: var(--tech-ice);
    color: var(--tech-navy);
    font: 600 11px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .04em;
}

html.valve-variant-a .valve-page .page-hero-badges span:first-child {
    border-left-color: var(--tech-brass);
    background: var(--tech-brass-soft);
}

html.valve-variant-a .valve-page .page-hero-badges span:last-child {
    border-left-color: var(--tech-graphite);
    background: #e5e6e3;
}

html.valve-variant-a .valve-page .valve-hero-image {
    box-shadow: 22px 24px 0 rgba(33,56,67,.10);
}

html.valve-variant-a .valve-page .valve-hero-image figcaption strong::before {
    content: '●';
    margin-right: 7px;
    color: var(--tech-brass);
    font-size: 8px;
    vertical-align: 2px;
}

/* 品牌段落增加材質標記，但不鋪大面積色底 */
html.valve-variant-a .valve-page .brand-logo-box h2 {
    color: var(--tech-navy);
    text-shadow: 1px 1px 0 #fff;
}

html.valve-variant-a .valve-page .brand-logo-box p {
    display: inline-block;
    padding: 5px 9px;
    background: var(--tech-brass-soft);
    color: #70552c;
}

html.valve-variant-a .valve-page .brand-desc strong {
    color: var(--tech-blue-dark);
    box-shadow: inset 0 -5px 0 var(--tech-ice);
}

/* 章節標題加入雙色識別線 */
html.valve-variant-a .valve-page .valve-types .section-header::after,
html.valve-variant-a .valve-page .valve-applications .section-header::after {
    content: '';
    display: block;
    width: 96px;
    height: 4px;
    margin-top: 22px;
    background: linear-gradient(90deg,var(--tech-brass) 0 28%,var(--tech-blue) 28% 70%,var(--tech-line) 70%);
}

/* 系列列交替使用極淡冰藍／暖灰光帶，保留大量白色 */
html.valve-variant-a .valve-page .type-card:nth-child(odd) {
    background: linear-gradient(90deg,rgba(220,232,238,.48),transparent 37%);
}

html.valve-variant-a .valve-page .type-card:nth-child(even) {
    background: linear-gradient(270deg,rgba(238,229,212,.42),transparent 35%);
}

html.valve-variant-a .valve-page .type-card:nth-child(3n + 1) .type-icon {
    border-color: var(--tech-brass);
    color: #906c32;
    background: var(--tech-brass-soft);
}

html.valve-variant-a .valve-page .type-card:nth-child(3n + 2) .type-icon {
    background: var(--tech-ice);
}

html.valve-variant-a .valve-page .type-gallery-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tech-navy);
    font-weight: 700;
}

html.valve-variant-a .valve-page .type-gallery-title::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--tech-brass);
}

html.valve-variant-a .valve-page .type-gallery-grid:has(.type-gallery-item:nth-child(4)) .type-gallery-item:first-child {
    grid-column: span 2;
    border-top: 3px solid var(--tech-blue);
}

html.valve-variant-a .valve-page .type-gallery-grid:has(.type-gallery-item:nth-child(4)) .type-gallery-item:first-child img {
    height: 104px;
}

html.valve-variant-a .valve-page .type-gallery-item {
    position: relative;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

html.valve-variant-a .valve-page .type-gallery-item:nth-child(3n + 2) {
    border-top: 3px solid var(--tech-brass);
}

html.valve-variant-a .valve-page .type-gallery-item:nth-child(3n) {
    border-top: 3px solid var(--tech-navy);
}

html.valve-variant-a .valve-page .type-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(33,56,67,.10);
}

/* 深色銘牌加入黃銅分隔與大型數字 */
html.valve-variant-a .valve-page .spec-row { position: relative; }
html.valve-variant-a .valve-page .spec-row::before {
    position: absolute;
    top: 14px;
    right: 18px;
    color: rgba(255,255,255,.09);
    font: 700 42px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
html.valve-variant-a .valve-page .spec-row:nth-child(1)::before { content: '01'; }
html.valve-variant-a .valve-page .spec-row:nth-child(2)::before { content: '02'; }
html.valve-variant-a .valve-page .spec-row:nth-child(3)::before { content: '03'; }
html.valve-variant-a .valve-page .spec-row:nth-child(2) { box-shadow: inset 0 4px 0 var(--tech-brass); }

/* 應用管線改成雙色節點 */
html.valve-variant-a .valve-page .apps-grid::before {
    height: 2px;
    background: linear-gradient(90deg,var(--tech-brass),var(--tech-blue) 48%,var(--tech-navy));
}

html.valve-variant-a .valve-page .app-item:nth-child(3n + 1) .app-icon {
    border-color: var(--tech-brass);
    background: var(--tech-brass-soft);
    color: #8a672e;
}

html.valve-variant-a .valve-page .app-item:nth-child(3n + 2) .app-icon {
    border-color: var(--tech-blue);
    background: var(--tech-ice);
}

html.valve-variant-a .valve-page .app-item:nth-child(3n) .app-icon {
    border-color: var(--tech-navy);
    background: var(--tech-navy);
    color: #fff;
}

/* CTA 增加工程斜紋與黃銅狀態線 */
html.valve-variant-a .valve-page .valve-cta .container {
    background:
        repeating-linear-gradient(135deg,transparent 0 13px,rgba(82,111,130,.035) 13px 14px),
        #fff;
}

html.valve-variant-a .valve-page .valve-cta .container::after {
    padding-bottom: 7px;
    border-bottom: 3px solid var(--tech-brass);
}

@media (max-width: 900px) {
    html.valve-variant-a .valve-page .page-hero-visual::before { right: -20px; width: 28%; }
    html.valve-variant-a .valve-page .type-card:nth-child(odd),
    html.valve-variant-a .valve-page .type-card:nth-child(even) { background: linear-gradient(90deg,rgba(220,232,238,.34),transparent 58%); }
}

@media (max-width: 620px) {
    html.valve-variant-a .valve-page .page-hero-badges { display: grid; grid-template-columns: 1fr 1fr; }
    html.valve-variant-a .valve-page .page-hero-visual::before { top: 12px; right: -10px; bottom: 24px; }
    html.valve-variant-a .valve-page .type-gallery-grid:has(.type-gallery-item:nth-child(4)) .type-gallery-item:first-child { grid-column: span 2; }
}