<!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}}">
    <meta name="author" content="{{htmlEscape .AuthorName}}">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="{{htmlEscape .Canonical}}">

    <meta property="og:type" content="article">
    <meta property="og:title" content="{{htmlEscape .Title}}">
    <meta property="og:description" content="{{htmlEscape .Description}}">
    <meta property="og:url" content="{{htmlEscape .Canonical}}">
    <meta property="og:site_name" content="{{htmlEscape .SiteName}}">
    {{if .Images}}
    <meta property="og:image" content="{{htmlEscape .MainImage.ImageURL}}">
    {{end}}
    <meta property="article:published_time" content="{{htmlEscape .CreatedAt}}">
    <meta property="article:author" content="{{htmlEscape .AuthorName}}">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{htmlEscape .Title}}">
    <meta name="twitter:description" content="{{htmlEscape .Description}}">
    {{if .Images}}
    <meta name="twitter:image" content="{{htmlEscape .MainImage.ImageURL}}">
    {{end}}

    <script type="application/ld+json">{{safe .Schema}}</script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        html{-webkit-text-size-adjust:100%}
        body{font-family:'Nunito',-apple-system,BlinkMacSystemFont,sans-serif;background:#EDE9FE;color:#3B2E5A;line-height:1.85;font-size:1.05rem}
        a{color:#5B3DC4;text-decoration:none;border-bottom:2px solid rgba(91,61,196,.25);transition:color .2s,border-color .2s}
        a:hover{color:#7C5CE0;border-bottom-color:#7C5CE0}
        a:focus-visible{outline:3px solid #7C5CE0;outline-offset:3px;border-radius:6px}

        .ls-wrap{max-width:760px;margin:0 auto;padding:0 22px}

        .ls-top{padding:22px 0}
        .ls-top-inner{max-width:760px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
        .ls-brand{font-weight:700;font-size:1.12rem;color:#3B2E5A;text-decoration:none;border-bottom:none}
        .ls-brand:hover{color:#7C5CE0}
        .ls-top-meta{font-size:.88rem;color:#6B5E8A}

        .ls-hero{margin:18px auto 34px;background:#FFFFFF;border-radius:28px;padding:clamp(30px,5vw,54px);border:1px solid #DDD4FA}
        .ls-hero h1{font-size:clamp(1.85rem,4.7vw,2.85rem);line-height:1.18;font-weight:700;letter-spacing:-.012em}
        .ls-hero-rule{width:48px;height:4px;background:#7C5CE0;border-radius:2px;margin:26px 0}
        .ls-byline{display:flex;flex-wrap:wrap;gap:8px 22px;color:#6B5E8A;font-size:.93rem}

        article{padding-bottom:16px}
        article p{margin:0 0 1.4em}
        article h2{font-size:1.52rem;font-weight:700;margin:2.1em 0 .7em;line-height:1.3;color:#3B2E5A}
        article h3{font-size:1.22rem;font-weight:600;margin:1.7em 0 .55em;color:#5B3DC4}
        article ul,article ol{margin:0 0 1.4em 1.3em}
        article li{margin:.5em 0}
        article blockquote{margin:2em 0;padding:20px 26px;background:#F6F3FF;border-radius:18px;color:#4A3B72}
        article table{width:100%;border-collapse:collapse;margin:2em 0;font-size:.96rem;background:#FFFFFF;border-radius:14px;overflow:hidden}
        article th,article td{padding:12px 15px;text-align:left;border-bottom:1px solid #E7E0FB}
        article th{background:#F0EAFF;font-weight:700}

        .ls-figure{margin:2.4em 0}
        .ls-figure img{width:100%;height:auto;display:block;border-radius:22px}
        .ls-figure figcaption{margin-top:11px;font-size:.87rem;color:#6B5E8A;text-align:center;line-height:1.55}

        .ls-ads{margin:2.2em 0;text-align:center}

        .ls-related{margin-top:46px;background:#FFFFFF;border-radius:28px;border:1px solid #DDD4FA;padding:clamp(24px,4vw,40px)}
        .ls-related h4{font-size:1.18rem;font-weight:700;margin-bottom:20px}
        .ls-related ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
        .ls-related li a{display:block;background:#F6F3FF;border-radius:16px;padding:15px 18px;font-weight:600;border-bottom:none;transition:background .2s,transform .2s}
        .ls-related li a:hover{background:#EDE9FE;transform:translateY(-2px)}

        .ls-footer{margin-top:52px;padding:30px 0 48px;color:#6B5E8A;font-size:.9rem}

        @media (max-width:640px){
            .ls-top-inner{flex-direction:column;align-items:flex-start;gap:6px}
            .ls-related ul{grid-template-columns:1fr}
        }
        @media (prefers-reduced-motion:reduce){
            *{transition:none!important}
        }
    </style>
    {{safe .InjectHeader}}
</head>
<body>
    <nav class="ls-top" aria-label="Site">
        <div class="ls-top-inner">
            <a href="/">{{htmlEscape .SiteName}}</a>
            <span class="ls-top-meta">{{htmlEscape .Date}}</span>
        </div>
    </nav>

    <header class="ls-hero ls-wrap">
        <h1>{{htmlEscape .Title}}</h1>
        <div class="ls-hero-rule" role="presentation"></div>
        <div class="ls-byline">
            <span>{{htmlEscape .AuthorName}}</span>
            <span>{{htmlEscape .Date}}</span>
        </div>
    </header>

    <main class="ls-wrap">
        {{if .InjectAds}}<div class="ls-ads">{{safe .InjectAds}}</div>{{end}}
        <article>
            {{renderCompleteArticle .AIBlocks .Images .InjectAds "lilac-soft"}}
        </article>

        {{if .HasRelated}}
        <section class="ls-related" aria-label="Related articles">
            <h4>Related Articles</h4>
            <ul>
                {{range (truncateArticles .RelatedArticles 10)}}
                <li><a href="{{htmlEscape .Slug}}.html">{{htmlEscape .Keyword}}</a></li>
                {{end}}
            </ul>
        </section>
        {{end}}
    </main>

    <footer class="ls-footer">
        <div class="ls-wrap">
            <p>&copy; 2026 {{htmlEscape .SiteName}}. All rights reserved.</p>
        </div>
        {{safe .InjectFooter}}
    </footer>
</body>
</html>
