<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{htmlEscape .Title}}</title>
    <meta name="description" content="{{htmlEscape .Description}}">
    <link rel="canonical" href="{{htmlEscape .Canonical}}">
    <script type="application/ld+json">{{safe .Schema}}</script>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Outfit', sans-serif; background: #f0f7fa; color: #1a2a35; line-height: 1.75; }
        .ocean-nav {
            background: #0c2d48;
            padding: 0 24px;
        }
        .ocean-nav-inner {
            max-width: 960px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 56px;
        }
        .ocean-nav-brand {
            font-weight: 800;
            font-size: 1.15rem;
            color: #48cae4;
        }
        .ocean-nav-tag {
            font-size: 0.7rem;
            background: rgba(72,202,228,0.15);
            color: #48cae4;
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .ocean-hero {
            background: linear-gradient(160deg, #0c2d48 0%, #145374 40%, #2e8b8b 100%);
            padding: 60px 24px 70px;
            position: relative;
        }
        .ocean-hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background: #f0f7fa;
            border-radius: 40px 40px 0 0;
        }
        .ocean-hero-inner {
            max-width: 960px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        .ocean-hero h1 {
            color: #fff;
            font-size: clamp(1.8rem, 5vw, 2.8rem);
            font-weight: 800;
            line-height: 1.15;
            max-width: 700px;
        }
        .ocean-hero-meta {
            margin-top: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255,255,255,0.6);
            font-size: 0.85rem;
        }
        .ocean-hero-badge {
            display: inline-block;
            background: #48cae4;
            color: #0c2d48;
            padding: 3px 10px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.75rem;
        }
        .ocean-layout {
            max-width: 960px;
            margin: 0 auto;
            padding: 0 24px 60px;
            display: grid;
            grid-template-columns: 1fr 260px;
            gap: 36px;
        }
        .ocean-article {
            background: #fff;
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 1px 16px rgba(12,45,72,0.06);
        }
        .ocean-article article { font-size: 1rem; color: #2a3f4f; }
        .ocean-article h2 { font-size: 1.6rem; font-weight: 700; color: #145374; margin: 2rem 0 0.7rem; position: relative; padding-bottom: 8px; }
        .ocean-article h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: #48cae4; border-radius: 2px; }
        .ocean-article h3 { font-size: 1.3rem; font-weight: 600; color: #2e8b8b; margin: 1.5rem 0 0.5rem; }
        .ocean-figure { margin: 24px 0; border-radius: 12px; overflow: hidden; position: relative; }
        .ocean-figure img { width: 100%; display: block; }
        .ocean-figure figcaption { text-align: center; font-size: 0.78rem; color: #8aa8b8; padding: 8px 0; }
        table { width: 100%; border-collapse: collapse; margin: 24px 0; border-radius: 12px; overflow: hidden; border: 1px solid #dce8ee; }
        th { background: #145374; color: #fff; padding: 12px 16px; text-align: left; font-weight: 600; font-size: 0.9rem; }
        td { padding: 11px 16px; border-bottom: 1px solid #e8f0f4; font-size: 0.95rem; }
        tr:nth-child(even) { background: #f7fbfc; }
        .ocean-ads { margin: 28px 0; text-align: center; }
        .ocean-sidebar { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
        .ocean-sidebar-card {
            background: #fff;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 1px 16px rgba(12,45,72,0.06);
        }
        .ocean-sidebar-card h4 {
            font-size: 0.85rem;
            font-weight: 700;
            color: #145374;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e8f0f4;
        }
        .ocean-sidebar-list { list-style: none; padding: 0; }
        .ocean-sidebar-list li { margin-bottom: 6px; }
        .ocean-sidebar-list li a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            color: #2a3f4f;
            text-decoration: none;
            font-size: 0.88rem;
            font-weight: 500;
            border-radius: 10px;
            transition: all 0.2s;
        }
        .ocean-sidebar-list li a::before {
            content: '';
            width: 8px;
            height: 8px;
            min-width: 8px;
            background: #48cae4;
            border-radius: 50%;
            opacity: 0.5;
            transition: all 0.2s;
        }
        .ocean-sidebar-list li a:hover { background: #e8f6fa; color: #145374; }
        .ocean-sidebar-list li a:hover::before { opacity: 1; background: #0c7b93; }
        .ocean-footer {
            background: #0c2d48;
            color: rgba(255,255,255,0.5);
            text-align: center;
            padding: 32px 24px;
            font-size: 0.82rem;
        }
        .ocean-footer strong { color: #48cae4; }
        @media (max-width: 768px) {
            .ocean-layout { grid-template-columns: 1fr; }
            .ocean-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
            .ocean-sidebar-card { flex: 1; min-width: 200px; }
            .ocean-article { padding: 24px; }
            .ocean-hero { padding: 40px 20px 50px; }
        }
    </style>
    {{safe .HeaderInject}}
</head>
<body>
    <nav class="ocean-nav">
        <div class="ocean-nav-inner">
            <span class="ocean-nav-brand">{{htmlEscape .SiteName}}</span>
            <span class="ocean-nav-tag">{{htmlEscape .Date}}</span>
        </div>
    </nav>
    <header class="ocean-hero">
        <div class="ocean-hero-inner">
            <h1>{{htmlEscape .Title}}</h1>
            <div class="ocean-hero-meta">
                <span class="ocean-hero-badge">{{htmlEscape .AuthorName}}</span>
                <span>{{htmlEscape .Date}}</span>
            </div>
        </div>
    </header>
    <div class="ocean-layout">
        <main>
            <div class="ocean-article">
                {{if .InjectAds}}<div class="ocean-ads">{{safe .InjectAds}}</div>{{end}}
                <article>
                    {{renderCompleteArticle .AIBlocks .Images .InjectAds "ocean"}}
                </article>
            </div>
        </main>
        <aside class="ocean-sidebar">
            {{if .HasRelated}}
            <div class="ocean-sidebar-card">
                <h4>Related</h4>
                <ul class="ocean-sidebar-list">
                    {{range (truncateArticles .RelatedArticles 10)}}
                    <li><a href="{{htmlEscape .Slug}}.html">{{htmlEscape .Keyword}}</a></li>
                    {{end}}
                </ul>
            </div>
            {{end}}
            {{if .InjectAds}}<div class="ocean-sidebar-card">{{safe .InjectAds}}</div>{{end}}
        </aside>
    </div>
    <footer class="ocean-footer">
        <p>&copy; 2026 <strong>{{htmlEscape .SiteName}}</strong>. All rights reserved.</p>
        {{safe .FooterInject}}
    </footer>
</body>
</html>