/* 淹水警示系統產品頁：沿用 farmerpack.css 的新品發表式版型（fp- 開頭），這裡只換色並補上本頁專用的區塊（fl- 開頭）。
   深色區塊用代表警報的珊瑚紅漸層（和工安守護者的琥珀、稼動精靈的靛紫區隔），淺色區塊的小標、圖示沿用石板灰藍（--slate-700）；
   按鈕與連結維持品牌綠（farmerpack.css 的 --fp-green-ink／--fp-green-glow），不換色。
   舊版頁面保留在 repo 根目錄 Docs/舊版頁面/products-flood-alert-2026-10/ */
.fp-flood {
    --fp-ink: #0d0a0b;
    --fp-ink-2: #171213;
    --fp-ink-3: #211a1b;
    --fp-text: #f8f3f3;
    --fp-dim: rgba(244, 234, 234, 0.68);
    --fp-grad: linear-gradient(100deg, #ffd6cc 0%, #ff9f8a 34%, #f76a5c 64%, #e0475f 100%);
    /* 淺底文字 slate-700（淺灰底 7.9:1）、深底文字 #ff9f8a（近黑底 9.3:1） */
    --fp-accent-ink: var(--slate-700);
    --fp-accent-glow: #ff9f8a;
    --fp-glow-rgb: 255, 140, 120;
    --fp-glow-2-rgb: 247, 106, 92;
    --fp-brand-rgb: 224, 71, 95;
    --fp-teal-rgb: 240, 90, 80;
    --fp-hi: #ffd6cc;
    --fp-hi-rgb: 255, 214, 204;
    --fp-tag-bg: var(--slate-700);
    --fp-soft: var(--slate-50);
}

/* ── 主視覺：淹水的地下停車場照片壓暗（照片上沒有文字），白色主機以紅色光暈襯底 ── */
.fp-flood .fp-hero {
    --fp-accent-ink: var(--fp-accent-glow);
    background:
        radial-gradient(ellipse 46% 34% at 50% 82%, rgba(var(--fp-glow-rgb), 0.2), transparent 72%),
        linear-gradient(180deg, rgba(13, 10, 11, 0.72) 0%, rgba(13, 10, 11, 0.86) 55%, var(--fp-ink) 100%),
        url("../../img/products/flood_alert/fl_hero.webp") center 45% / cover no-repeat,
        var(--fp-ink);
    color: var(--fp-text);
    padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* 照片較亮處：麵包屑、定義句比其他深色區塊的 --fp-dim 再亮一些（最亮處仍有 4.5:1） */
.fp-flood .fp-hero .fp-breadcrumb ol,
.fp-flood .fp-hero .fp-definition {
    color: rgba(244, 234, 234, 0.86);
}

.fp-flood .fp-hero .fp-breadcrumb li + li::before {
    color: var(--fp-dim);
}

.fp-flood .fp-hero .fp-lead {
    max-width: 40rem;
    color: rgba(248, 243, 243, 0.88);
}

.fl-hero-photo {
    display: block;
    width: min(360px, 70vw);
    height: auto;
    margin: 2rem auto 0;
    filter:
        drop-shadow(0 0 26px rgba(var(--fp-glow-rgb), 0.26))
        drop-shadow(0 26px 30px rgba(0, 0, 0, 0.55));
}

/* ── 產品說明：舊頁的兩行長標題、產品照 ── */
.fl-headline-long {
    font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.4rem);
    line-height: 1.3;
}

.fl-product {
    margin: 0;
    text-align: center;
}

.fl-product img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
    border-radius: var(--fp-radius);
}

.fl-product figcaption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #515154;
}

.fl-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--fp-radius);
}

/* ── 導入前後：site.css 的 compare-panel（照片背景＋深色遮罩），改成圓角卡片 ── */
.fl-compare {
    height: 100%;
    min-height: 0;
    border-radius: var(--fp-radius);
    overflow: hidden;
    color: #fff;
}

/* ── 應用場景：fp-case 卡片內的標題與兩段說明 ── */
.fl-app figcaption h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fp-text);
    margin-bottom: 0.6rem;
}

.fl-app figcaption h3 .bi {
    color: var(--fp-accent-glow);
}

.fl-app figcaption p {
    margin-bottom: 0.75rem;
}

/* 段落裡的粗體：fp-case 的 strong 是卡片標題（獨立一行、大字），這裡改回一般行內粗體 */
.fl-app figcaption p strong {
    display: inline;
    font-size: inherit;
    margin: 0;
    color: var(--fp-text);
}

/* 整列的應用場景卡（魚塭）：桌機左圖右文 */
@media (min-width: 992px) {
    .fl-app-wide {
        display: grid;
        grid-template-columns: 5fr 7fr;
        height: auto;
    }

    .fl-app-wide img {
        height: 100%;
        aspect-ratio: auto;
    }

    .fl-app-wide figcaption {
        align-self: center;
        padding: 2rem 2.5rem;
    }
}

/* 方案配置與常見問題都是淺色區塊：常見問題上方不再留整段空白 */
.fl-faq {
    padding-top: 0;
}

/* ── 結尾行動呼籲：抽水機照片壓暗（照片上沒有文字） ── */
.fl-finale {
    background:
        linear-gradient(180deg, rgba(13, 10, 11, 0.8), rgba(13, 10, 11, 0.9)),
        url("../../img/products/flood_alert/fl_after.webp") center / cover no-repeat,
        var(--fp-ink);
}

.fl-finale .fp-lead {
    max-width: 40rem;
    margin: 1.25rem auto 0;
    color: rgba(248, 243, 243, 0.86);
}