/**
 * 平潭蓝眼泪页（/lanyanlei/）样式
 *
 * 由 haitan-pages 插件提供，仅在 page-lanyanlei.php 模板下加载（句柄 haitan-pages-lanyanlei）。
 * 约定（与 pingtan.css、travel.css、tianqi.css 保持一致）：
 *   - 所有选择器都带 ptl- 前缀或挂在 .ptl-page 下，不覆盖 JustNews 全局样式
 *   - 不复用主题的 .container / .row / .card 等通用类
 *   - 不引入任何第三方 CSS 框架，字体不写死、继承站点 body
 *   - 页面本身零 JS
 *
 * 设计目标：夜间追泪的「实时决策」气质——深蓝主色 + 干净卡片，克制、可信，避免满屏 Banner。
 *
 * 目录：
 *   1. 变量与基础
 *   2. 容器与分区
 *   3. Hero（含今日条件卡）
 *   4. 通用元件
 *   5. 今天有蓝眼泪吗（状态）
 *   6. 今晚值得追泪吗（决策）
 *   7. 今晚天气
 *   8. 今晚潮汐
 *   9. 去哪里看蓝眼泪（POI）
 *  10. 什么时候容易看到（知识 + 季节时间轴）
 *  11. 追泪攻略
 *  12. 安全提醒
 *  13. 蓝眼泪是什么（科普）
 *  14. 平潭蓝眼泪攻略（动态文章）
 *  15. 下一步 + 问问平潭岚点
 *  16. 响应式
 */

/* ------------------------------------------------------------------ 1. 变量 */

.ptl-page {
    --ptl-blue: #1684d8;
    --ptl-blue-deep: #0d6aa8;
    --ptl-night: #0f2b46;
    --ptl-night-soft: #163a5c;
    --ptl-ink: #16324a;
    --ptl-text: #46647a;
    --ptl-muted: #7d97a9;
    --ptl-line: #e4eef6;
    --ptl-line-soft: #eef5fa;
    --ptl-surface: #ffffff;
    --ptl-surface-soft: #f5faff;
    --ptl-tag-bg: #edf6fd;
    --ptl-tag-ink: #2c6a94;
    --ptl-good: #1f9d63;
    --ptl-ok: #3f9bd8;
    --ptl-fair: #c98a1c;
    --ptl-bad: #c9603f;
    --ptl-radius-l: 14px;
    --ptl-radius-m: 10px;
    --ptl-radius-s: 8px;
    --ptl-gap: 12px;

    display: block;
    width: 100%;
    max-width: 100%;
    /* 防止任何子元素把页面撑出横向滚动条 */
    overflow-x: clip;
    padding-bottom: 24px;
    color: var(--ptl-text);
    background: var(--ptl-surface-soft);
}

/*
 * 作用域内的 box-sizing 复位。
 * 本页大量使用「width:100% + padding」的写法，这依赖 border-box；
 * 显式声明让本页样式自洽，不依赖外部前提。选择器限定在 .ptl-page 内。
 */
.ptl-page,
.ptl-page *,
.ptl-page *::before,
.ptl-page *::after {
    box-sizing: border-box;
}

.ptl-page img {
    max-width: 100%;
}

/* 长标题、长描述允许在必要时断行，避免撑破栅格 */
.ptl-page .ptl-title,
.ptl-page .ptl-hero-sub,
.ptl-page .ptl-hero-lead,
.ptl-page .ptl-desc,
.ptl-page .ptl-hs-level,
.ptl-page .ptl-status-reason,
.ptl-page .ptl-decision-value,
.ptl-page .ptl-weather-cond,
.ptl-page .ptl-poi-name,
.ptl-page .ptl-poi-desc,
.ptl-page .ptl-timing-text,
.ptl-page .ptl-season-text,
.ptl-page .ptl-guide-list li,
.ptl-page .ptl-safety-list li,
.ptl-page .ptl-science-text,
.ptl-page .ptl-story-title,
.ptl-page .ptl-next-desc {
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- 2. 容器与分区 */

.ptl-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 15px;
}

/*
 * 面包屑并入 Hero 内容容器：与标题左对齐、上下留白收紧，不再生成主题 .wrap 的独立全宽色带。
 * 主题关了面包屑时不加 .ptl-hero-with-breadcrumb，Hero 恢复自身默认内边距。
 */
.ptl-page .ptl-hero.ptl-hero-with-breadcrumb {
    padding-top: 20px;
}

.ptl-page .ptl-breadcrumb {
    margin: 0 0 16px;
    text-align: left;
}

.ptl-page .ptl-breadcrumb .breadcrumb {
    margin: 0;
}

/* 本页 Hero 顶部是深色渐变，面包屑并入后须改用浅色文字，否则深字压深底看不清 */
.ptl-page .ptl-breadcrumb .breadcrumb,
.ptl-page .ptl-breadcrumb .breadcrumb a,
.ptl-page .ptl-breadcrumb .breadcrumb span,
.ptl-page .ptl-breadcrumb .breadcrumb .active {
    color: rgba(255, 255, 255, 0.85);
}

.ptl-page .ptl-breadcrumb .breadcrumb i,
.ptl-page .ptl-breadcrumb .breadcrumb svg {
    color: rgba(255, 255, 255, 0.85);
    fill: currentColor;
}

@media (min-width: 768px) {
    .ptl-page .ptl-hero.ptl-hero-with-breadcrumb {
        padding-top: 22px;
    }
}

.ptl-section {
    padding: 32px 0 0;
}

/*
 * 页内锚点偏移。主题 JS 会把 a[href^="#"] 劫持并减错偏移量，
 * 本页的锚点按钮统一加 role="button" 让主题跳过、交还浏览器原生跳转，
 * 因此这里用 scroll-margin-top 精确对齐吸顶栈（≥768px 为 124px，以下为 110px）。
 */
.ptl-section[id] {
    scroll-margin-top: 124px;
}

.ptl-head {
    margin: 0 0 16px;
}

/* 蓝色竖条标题，与站点 JustNews 的小节标题风格保持一致 */
.ptl-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ptl-ink);
}

.ptl-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 9px;
    vertical-align: -2px;
    background: var(--ptl-blue);
    border-radius: 2px;
}

.ptl-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ptl-muted);
}

.ptl-grid {
    display: grid;
    gap: var(--ptl-gap);
}

/* ------------------------------------------------------------- 3. Hero */

.ptl-hero {
    padding: 40px 0 30px;
    text-align: center;
    background: linear-gradient(180deg, #0f2b46 0%, #17466e 46%, #e6f3fd 100%);
    border-bottom: 1px solid var(--ptl-line);
}

.ptl-hero-kicker {
    margin: 0 0 10px;
    font-size: 13px;
    letter-spacing: .06em;
    color: #a9d4f4;
}

.ptl-hero-title {
    margin: 0 0 10px;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .04em;
    color: #ffffff;
}

.ptl-hero-sub {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    color: #eaf5ff;
}

.ptl-hero-lead {
    max-width: 620px;
    margin: 0 auto 20px;
    font-size: 14px;
    line-height: 1.8;
    color: #cfe6f8;
}

.ptl-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0;
}

/*
 * Hero 底部说明。渐变到这一带已经转浅（#e6f3fd），文字必须用深色，
 * 否则浅色文字落在浅色底上等于看不见。
 */
.ptl-hero-note {
    max-width: 620px;
    margin: 16px auto 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ptl-text);
}

/* Hero 里的今日条件卡 */
.ptl-hero-status {
    max-width: 560px;
    margin: 0 auto;
    padding: 18px 18px 16px;
    text-align: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--ptl-radius-l);
    backdrop-filter: blur(2px);
}

.ptl-hs-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ptl-hs-label {
    font-size: 13px;
    color: #cfe6f8;
}

.ptl-hs-level {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    border-radius: 999px;
    background: var(--ptl-ok);
}

.ptl-hs-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    margin: 12px 0 0;
}

.ptl-hs-row {
    font-size: 13px;
    color: #d7ecfb;
}

.ptl-hs-key {
    margin-right: 6px;
    color: #9fc7e6;
}

.ptl-hs-row b {
    font-weight: 600;
    color: #ffffff;
}

.ptl-hs-empty {
    margin: 0;
    font-size: 15px;
    color: #e6f2fc;
}

.ptl-hero-status .ptl-hero-actions {
    margin-top: 16px;
}

/* --------------------------------------------------------- 4. 通用元件 */

.ptl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: background .18s, border-color .18s, color .18s;
}

.ptl-btn-primary {
    color: #fff;
    background: var(--ptl-blue);
    border-color: var(--ptl-blue);
}

.ptl-btn-primary:hover {
    color: #fff;
    background: var(--ptl-blue-deep);
    border-color: var(--ptl-blue-deep);
}

.ptl-btn-ghost {
    color: var(--ptl-blue-deep);
    background: var(--ptl-surface);
    border-color: #bcdcf4;
}

.ptl-btn-ghost:hover {
    color: var(--ptl-blue);
    border-color: var(--ptl-blue);
}

/* Hero 深色底上的 ghost 按钮需要浅色描边，否则看不见 */
.ptl-hero .ptl-btn-ghost {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
}

.ptl-hero .ptl-btn-ghost:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .22);
    border-color: #ffffff;
}

.ptl-btn-sm {
    min-height: 38px;
    padding: 0 18px;
    font-size: 13px;
}

.ptl-more {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ptl-blue);
}

.ptl-note {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--ptl-muted);
}

.ptl-after {
    margin: 16px 0 0;
}

.ptl-card {
    padding: 20px;
    background: var(--ptl-surface);
    border: 1px solid var(--ptl-line);
    border-radius: var(--ptl-radius-l);
}

.ptl-card-actions {
    margin: 16px 0 0;
}

.ptl-empty {
    margin: 0;
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--ptl-muted);
}

.ptl-chip {
    display: inline-block;
    padding: 2px 9px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ptl-tag-ink);
    background: var(--ptl-tag-bg);
    border-radius: 999px;
}

/* 条件等级配色：good / ok / fair / bad / unknown */
.ptl-lv-good    { --ptl-lv: var(--ptl-good); }
.ptl-lv-ok      { --ptl-lv: var(--ptl-ok); }
.ptl-lv-fair    { --ptl-lv: var(--ptl-fair); }
.ptl-lv-bad     { --ptl-lv: var(--ptl-bad); }
.ptl-lv-unknown { --ptl-lv: var(--ptl-muted); }

.ptl-hs-level.ptl-lv-good,
.ptl-hs-level.ptl-lv-ok,
.ptl-hs-level.ptl-lv-fair,
.ptl-hs-level.ptl-lv-bad,
.ptl-hs-level.ptl-lv-unknown {
    background: var(--ptl-lv, var(--ptl-ok));
}

/* ------------------------------------------------- 5. 今天有蓝眼泪吗 */

.ptl-status-card {
    border-left: 4px solid var(--ptl-ok);
}

.ptl-status-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.ptl-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    background: var(--ptl-lv, var(--ptl-ok));
    border-radius: 999px;
}

.ptl-status-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, .85);
    border-radius: 50%;
}

.ptl-status-window {
    font-size: 13.5px;
    color: var(--ptl-text);
}

.ptl-status-window b {
    color: var(--ptl-ink);
}

.ptl-status-reason {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ptl-text);
}

.ptl-status-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px dashed var(--ptl-line);
}

.ptl-status-meta dt {
    margin: 0 0 3px;
    font-size: 12px;
    color: var(--ptl-muted);
}

.ptl-status-meta dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ptl-ink);
}

.ptl-status-note {
    margin: 16px 0 0;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ptl-text);
    background: var(--ptl-surface-soft);
    border-radius: var(--ptl-radius-m);
}

/* ------------------------------------------------- 6. 今晚值得追泪吗 */

.ptl-decision-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ptl-decision-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ptl-line-soft);
}

.ptl-decision-item:last-child {
    border-bottom: 0;
}

.ptl-decision-icon {
    flex: none;
    font-size: 15px;
    line-height: 1.6;
}

.ptl-decision-label {
    flex: none;
    min-width: 84px;
    font-size: 13.5px;
    color: var(--ptl-muted);
}

.ptl-decision-value {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ptl-ink);
}

.ptl-decision-item.ptl-lv-good .ptl-decision-value,
.ptl-decision-item.ptl-lv-ok .ptl-decision-value,
.ptl-decision-item.ptl-lv-fair .ptl-decision-value,
.ptl-decision-item.ptl-lv-bad .ptl-decision-value {
    color: var(--ptl-lv);
}

.ptl-decision-advice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--ptl-ink);
    background: #f0f8ff;
    border-radius: var(--ptl-radius-m);
}

.ptl-decision-advice-tag {
    flex: none;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
    color: #fff;
    background: var(--ptl-blue);
    border-radius: 999px;
}

.ptl-decision-note {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--ptl-muted);
}

/* ------------------------------------------------------- 7. 今晚天气 */

.ptl-weather-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ptl-weather-icon {
    flex: none;
    font-size: 34px;
    line-height: 1;
}

.ptl-weather-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ptl-weather-date {
    font-size: 12.5px;
    color: var(--ptl-muted);
}

.ptl-weather-cond {
    font-size: 17px;
    font-weight: 600;
    color: var(--ptl-ink);
}

.ptl-weather-temp {
    margin-left: auto;
    font-size: 17px;
    font-weight: 600;
    color: var(--ptl-blue-deep);
    white-space: nowrap;
}

.ptl-weather-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.ptl-weather-metrics li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ptl-surface-soft);
    border-radius: var(--ptl-radius-m);
}

.ptl-metric-key {
    font-size: 13px;
    color: var(--ptl-muted);
}

.ptl-metric-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--ptl-ink);
}

.ptl-weather-summary {
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ptl-text);
}

/* ------------------------------------------------------- 8. 今晚潮汐 */

.ptl-tide-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 13.5px;
    color: var(--ptl-text);
}

.ptl-tide-head b {
    color: var(--ptl-ink);
}

.ptl-tide-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.ptl-tide-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    background: var(--ptl-surface-soft);
    border-radius: var(--ptl-radius-m);
    border-left: 3px solid #bcdcf4;
}

.ptl-tide-item.ptl-tide-low {
    border-left-color: var(--ptl-blue);
}

.ptl-tide-time {
    font-size: 15px;
    font-weight: 600;
    color: var(--ptl-ink);
}

.ptl-tide-type {
    font-size: 12.5px;
    color: var(--ptl-muted);
}

.ptl-tide-height {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--ptl-muted);
}

.ptl-tide-window {
    margin: 16px 0 0;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ptl-text);
}

.ptl-tide-window b {
    color: var(--ptl-ink);
}

/* --------------------------------------------- 9. 去哪里看蓝眼泪 */

.ptl-grid-poi {
    grid-template-columns: minmax(0, 1fr);
}

.ptl-poi-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    background: var(--ptl-surface);
    border: 1px solid var(--ptl-line);
    border-radius: var(--ptl-radius-l);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.ptl-poi-card:hover {
    border-color: #bcdcf4;
    box-shadow: 0 8px 22px -14px rgba(22, 132, 216, .5);
    transform: translateY(-2px);
}

.ptl-poi-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e9f3fb;
}

.ptl-poi-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ptl-poi-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #b9d6ea;
}

.ptl-poi-region {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 1.7;
    color: #fff;
    background: rgba(15, 43, 70, .72);
    border-radius: 999px;
}

.ptl-poi-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
}

.ptl-poi-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ptl-ink);
}

.ptl-poi-desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--ptl-text);
}

.ptl-poi-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* --------------------------------- 10. 什么时候容易看到 + 季节时间轴 */

.ptl-grid-timing {
    grid-template-columns: minmax(0, 1fr);
}

.ptl-timing-card {
    padding: 16px;
    background: var(--ptl-surface);
    border: 1px solid var(--ptl-line);
    border-radius: var(--ptl-radius-l);
}

.ptl-timing-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ptl-ink);
}

.ptl-timing-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ptl-text);
}

.ptl-season {
    position: relative;
    margin: 20px 0 0;
    padding: 0 0 0 22px;
    list-style: none;
    border-left: 2px solid var(--ptl-line);
}

.ptl-season-step {
    position: relative;
    padding: 0 0 18px;
}

.ptl-season-step:last-child {
    padding-bottom: 0;
}

.ptl-season-step::before {
    content: "";
    position: absolute;
    left: -29px;
    top: 4px;
    width: 12px;
    height: 12px;
    background: var(--ptl-blue);
    border: 2px solid var(--ptl-surface);
    border-radius: 50%;
}

.ptl-season-phase {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ptl-blue);
}

.ptl-season-body {
    display: block;
    margin-top: 3px;
}

.ptl-season-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ptl-ink);
}

.ptl-season-text {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ptl-text);
}

/* ----------------------------------------------------- 11. 追泪攻略 */

.ptl-grid-guide {
    grid-template-columns: minmax(0, 1fr);
}

.ptl-guide-card {
    padding: 18px;
    background: var(--ptl-surface);
    border: 1px solid var(--ptl-line);
    border-radius: var(--ptl-radius-l);
}

.ptl-guide-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ptl-ink);
}

.ptl-guide-emoji {
    font-size: 18px;
}

.ptl-guide-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ptl-guide-list li {
    position: relative;
    padding: 6px 0 6px 18px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ptl-text);
}

.ptl-guide-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 13px;
    width: 6px;
    height: 6px;
    background: #bcdcf4;
    border-radius: 50%;
}

/* ----------------------------------------------------- 12. 安全提醒 */

.ptl-safety-card {
    padding: 20px;
    background: #fff8f1;
    border: 1px solid #f6dcc4;
    border-radius: var(--ptl-radius-l);
}

.ptl-safety-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.ptl-safety-emoji {
    font-size: 20px;
}

.ptl-safety-title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    color: #9a5a20;
}

.ptl-safety-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ptl-safety-list li {
    position: relative;
    padding: 6px 0 6px 20px;
    font-size: 13.5px;
    line-height: 1.75;
    color: #7a4d20;
}

.ptl-safety-list li::before {
    content: "!";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 14px;
    height: 14px;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    color: #fff;
    background: #e0863a;
    border-radius: 50%;
}

.ptl-safety-slogan {
    margin: 16px 0 0;
    padding-top: 14px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #9a5a20;
    border-top: 1px dashed #f0cdae;
}

/* ------------------------------------------------- 13. 蓝眼泪是什么 */

.ptl-science-card {
    border-left: 4px solid var(--ptl-blue);
}

.ptl-science-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.95;
    color: var(--ptl-text);
}

/* --------------------------------------------- 14. 平潭蓝眼泪攻略 */

.ptl-grid-story {
    grid-template-columns: minmax(0, 1fr);
}

.ptl-story-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    background: var(--ptl-surface);
    border: 1px solid var(--ptl-line);
    border-radius: var(--ptl-radius-l);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.ptl-story-card:hover {
    border-color: #bcdcf4;
    box-shadow: 0 8px 22px -14px rgba(22, 132, 216, .5);
    transform: translateY(-2px);
}

.ptl-story-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e9f3fb;
}

.ptl-story-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ptl-story-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #b9d6ea;
}

.ptl-story-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
}

.ptl-story-cat {
    align-self: flex-start;
    padding: 1px 9px;
    font-size: 11.5px;
    line-height: 1.8;
    color: var(--ptl-tag-ink);
    background: var(--ptl-tag-bg);
    border-radius: 999px;
}

.ptl-story-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--ptl-ink);
}

.ptl-story-date {
    font-size: 12px;
    color: var(--ptl-muted);
}

/* ----------------------------------------- 15. 下一步 + 问问平潭岚点 */

.ptl-grid-next {
    grid-template-columns: minmax(0, 1fr);
}

.ptl-next-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    text-decoration: none;
    background: var(--ptl-surface);
    border: 1px solid var(--ptl-line);
    border-radius: var(--ptl-radius-l);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.ptl-next-card:hover {
    border-color: #bcdcf4;
    box-shadow: 0 8px 22px -14px rgba(22, 132, 216, .5);
    transform: translateY(-2px);
}

.ptl-next-emoji {
    flex: none;
    font-size: 26px;
}

.ptl-next-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ptl-next-title {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ptl-ink);
}

.ptl-next-desc {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ptl-text);
}

.ptl-next-arrow {
    flex: none;
    margin-left: auto;
    font-size: 18px;
    color: var(--ptl-blue);
}

.ptl-ask {
    padding: 34px 0 4px;
}

.ptl-ask-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 18px;
    background: linear-gradient(120deg, #0f2b46 0%, #1d5c8d 100%);
    border-radius: var(--ptl-radius-l);
}

.ptl-ask-kicker {
    margin: 0 0 6px;
    font-size: 13px;
    color: #a9d4f4;
}

.ptl-ask-title {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
}

.ptl-ask-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: #cfe6f8;
}

.ptl-ask-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ptl-content {
    padding: 20px;
    background: var(--ptl-surface);
    border: 1px solid var(--ptl-line);
    border-radius: var(--ptl-radius-l);
}

/* --------------------------------------------------------- 16. 响应式 */

@media (min-width: 560px) {
    .ptl-grid-poi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ptl-grid-timing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ptl-grid-story {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ptl-weather-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .ptl-grid-guide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ptl-grid-next {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ptl-next-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .ptl-next-arrow {
        margin: 4px 0 0;
    }

    .ptl-ask-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 26px 28px;
    }

    .ptl-ask-actions {
        flex: none;
    }

    .ptl-decision-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
    }
}

@media (min-width: 992px) {
    .ptl-grid-poi {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ptl-grid-timing {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ptl-grid-story {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ptl-section {
        padding: 26px 0 0;
    }

    /* 吸顶栈在窄屏为 110px（60 顶栏 + 50 头部） */
    .ptl-section[id] {
        scroll-margin-top: 110px;
    }

    .ptl-hero {
        padding: 28px 0 22px;
    }

    .ptl-hero-title {
        font-size: 30px;
    }

    .ptl-hero-sub {
        font-size: 15px;
    }

    .ptl-hero-lead {
        font-size: 13.5px;
    }

    .ptl-title {
        font-size: 19px;
    }

    .ptl-title::before {
        height: 16px;
    }

    .ptl-card,
    .ptl-content {
        padding: 16px;
    }

    .ptl-ask {
        padding: 26px 0 4px;
    }

    .ptl-ask-card {
        padding: 22px 16px;
    }
}

/* 小屏：潮汐两列改单列，避免时间与类型被挤断 */
@media (max-width: 560px) {
    .ptl-tide-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .ptl-decision-label {
        min-width: 72px;
    }
}

/*
 * 手机首屏压缩：Hero 目标 ≤300px（不含条件卡），让用户不用滚动就能看到条件与按钮。
 * 两个主按钮在 375px 下用「缩小内边距」保持一行，只有在极窄屏（≤320px）才改为纵向铺满。
 */
@media (max-width: 420px) {
    .ptl-hero {
        padding: 24px 0 18px;
    }

    .ptl-hero-actions {
        gap: 8px;
    }

    .ptl-btn {
        padding: 0 16px;
    }

    .ptl-hero-lead {
        margin-bottom: 16px;
        font-size: 13px;
    }

    .ptl-hero-status {
        padding: 16px 14px 14px;
    }

    .ptl-hs-level {
        font-size: 18px;
    }
}

@media (max-width: 400px) {
    .ptl-hero-title {
        font-size: 27px;
    }
}

@media (max-width: 320px) {
    .ptl-hero-actions {
        flex-direction: column;
    }

    .ptl-hero-actions .ptl-btn {
        width: 100%;
    }
}