/* 病蟲害防治系統產品頁專用樣式（共用版型在 farmerpack.css、cloudsys.css）：
   只放本頁才有的「誘捕點配置示意圖」（設計規格 P-H4：四角＋中央 Z1–Z5），用 HTML＋CSS 畫，不用圖片，文字可翻譯。 */

/* ── 誘捕點配置：一塊果園（虛線框＋淡格線），五個圓點以百分比定位 ── */
.pest-zones {
    margin: 0 auto;
    max-width: 24rem;
}

.pest-zones-field {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 2px dashed rgba(var(--fp-glow-rgb), 0.45);
    border-radius: 1.25rem;
    background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 25% 25%,
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 25% 25%,
        var(--fp-ink-2);
}

/* 每個誘捕點：--x、--y 是在果園裡的百分比位置 */
.pest-zone {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fp-ink);
    background: var(--fp-grad);
    box-shadow: 0 0 0 6px rgba(var(--fp-glow-rgb), 0.18);
}

/* 中央那一點略大，表示全場的參考點 */
.pest-zone-center {
    width: 3rem;
    height: 3rem;
}

.pest-zones figcaption {
    margin-top: 0.9rem;
    text-align: center;
    font-size: var(--fs-small);
    color: var(--fp-dim);
}

@media (max-width: 575.98px) {
    .pest-zones {
        max-width: 18rem;
    }

    .pest-zone {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 0.78rem;
    }

    .pest-zone-center {
        width: 2.5rem;
        height: 2.5rem;
    }
}