/* Article page styles — shared by article.html (dynamic fallback)
   and the pre-rendered pages under /blog/ and /ru/blog/ (build_seo.py). */

*, *::before, *::after { box-sizing: border-box; }
body { background: #f7f5f1; margin: 0; }

.art-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:#1E4A8A; height:68px; display:flex; align-items:center; padding:0 40px;
}
.art-nav .nav-inner { width:100%; display:flex; align-items:center; justify-content:space-between; }
.logo-link { text-decoration:none; }
.logo-text { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:500; letter-spacing:0.12em; color:#fff; display:block; }
.logo-sub  { font-family:'DM Sans',sans-serif; font-size:9px; font-weight:500; letter-spacing:0.28em; text-transform:uppercase; color:#c9a96e; display:block; }
.back-link { font-family:'DM Sans',sans-serif; font-size:13px; color:rgba(255,255,255,0.55); text-decoration:none; display:flex; align-items:center; gap:6px; transition:color 0.2s; }
.back-link:hover { color:#c9a96e; }

/* Lang switcher — <button> on article.html, <a> on pre-rendered pages */
.lang-switcher { display:flex; gap:4px; align-items:center; }
.lang-btn {
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.1em;
  padding:4px 10px; border-radius:4px; border:1px solid rgba(255,255,255,0.25);
  background:transparent; color:rgba(255,255,255,0.55); cursor:pointer; transition:all 0.18s;
  text-decoration:none; display:inline-block; line-height:1.4;
}
.lang-btn:hover { color:#fff; border-color:rgba(255,255,255,0.5); }
.lang-btn.active { background:rgba(255,255,255,0.15); color:#fff; border-color:rgba(255,255,255,0.4); }

.art-page { padding-top:68px; min-height:100vh; }

/* Hero */
.art-hero { background:#2A5FA5; padding:56px 40px 52px; }
.art-hero-inner { max-width:800px; margin:0 auto; }
.art-cat { font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:#c9a96e; margin-bottom:16px; }
.art-title { font-family:'Cormorant Garamond',serif; font-size:clamp(1.9rem,4vw,3rem); font-weight:300; color:#fff; line-height:1.18; margin:0 0 20px; }
.art-meta { font-family:'DM Sans',sans-serif; font-size:13px; color:rgba(255,255,255,0.4); display:flex; gap:16px; flex-wrap:wrap; }
.art-meta span { display:flex; align-items:center; gap:5px; }

/* Layout */
.art-layout { max-width:1060px; margin:0 auto; padding:52px 40px 80px; display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start; }

/* Article content */
.art-content { background:#fff; border-radius:14px; padding:48px; border:1px solid #ede9e0; }
.art-excerpt { font-family:'DM Sans',sans-serif; font-size:16px; color:#555; line-height:1.7; border-left:3px solid #c9a96e; padding-left:20px; margin-bottom:32px; font-style:italic; }
.art-body { font-family:'DM Sans',sans-serif; font-size:15px; color:#333; line-height:1.8; }
.art-body h2 { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:400; color:#1a1a1a; margin:40px 0 16px; line-height:1.25; }
.art-body h3 { font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500; color:#1a1a1a; margin:28px 0 10px; }
.art-body p { margin:0 0 18px; }
.art-body ul, .art-body ol { margin:0 0 18px; padding-left:24px; }
.art-body li { margin-bottom:8px; }
.art-body strong { color:#1a1a1a; font-weight:500; }
.art-body a { color:#c9a96e; text-decoration:underline; }
.art-body a:hover { color:#b8903a; }

/* Share */
.art-share { margin-top:40px; padding-top:28px; border-top:1px solid #f0ece4; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.share-label { font-family:'DM Sans',sans-serif; font-size:12px; color:#bbb; }
.share-btn { font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500; padding:7px 16px; border:1px solid #e5e1d8; border-radius:6px; background:#fff; cursor:pointer; color:#555; text-decoration:none; transition:all 0.18s; }
.share-btn:hover { border-color:#c9a96e; color:#c9a96e; }

/* Sidebar */
.art-sidebar { position:sticky; top:88px; display:flex; flex-direction:column; gap:24px; }

.sidebar-cta { background:#2A5FA5; border-radius:12px; padding:32px; }
.sidebar-cta h4 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:400; color:#fff; margin:0 0 10px; }
.sidebar-cta p { font-family:'DM Sans',sans-serif; font-size:13px; color:rgba(255,255,255,0.65); margin:0 0 20px; line-height:1.55; }
.sidebar-cta-btn { display:block; text-align:center; background:#c9a96e; color:#fff; padding:13px; border-radius:7px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; text-decoration:none; letter-spacing:0.04em; transition:background 0.2s; }
.sidebar-cta-btn:hover { background:#b8903a; }

.sidebar-related { background:#fff; border-radius:12px; padding:24px; border:1px solid #ede9e0; }
.sidebar-related h5 { font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:#aaa; margin:0 0 16px; }
.related-item { display:block; text-decoration:none; padding:12px 0; border-bottom:1px solid #f5f3ef; }
.related-item:last-child { border-bottom:none; padding-bottom:0; }
.related-item:first-of-type { padding-top:0; }
.related-title { font-family:'DM Sans',sans-serif; font-size:13px; color:#1a1a1a; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:4px; transition:color 0.18s; }
.related-item:hover .related-title { color:#c9a96e; }
.related-date { font-family:'DM Sans',sans-serif; font-size:11px; color:#bbb; }

/* Loading / error */
.art-loading { text-align:center; padding:80px 24px; font-family:'DM Sans',sans-serif; color:rgba(255,255,255,0.5); }
.art-404 { text-align:center; padding:80px 24px; }
.art-404 h2 { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:400; color:#1a1a1a; }
.art-404 p { font-family:'DM Sans',sans-serif; font-size:14px; color:#aaa; }
.art-404 a { color:#c9a96e; }

.art-footer { background:#1E4A8A; padding:28px; text-align:center; }

@media (max-width:900px) {
  .art-layout { grid-template-columns:1fr; }
  .art-sidebar { position:static; }
}
@media (max-width:640px) {
  .art-nav,.art-hero { padding-left:20px; padding-right:20px; }
  .art-layout { padding:28px 20px 60px; }
  .art-content { padding:28px 20px; }
}

/* Cookie banner */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#0A2540;padding:14px 32px;display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap;box-shadow:0 -2px 24px rgba(0,0,0,0.2);transform:translateY(100%);transition:transform 0.4s ease;}
#cookie-banner.show{transform:translateY(0);}
#cookie-banner p{margin:0;font-family:'DM Sans',sans-serif;font-size:13px;color:rgba(255,255,255,0.7);}
#cookie-banner a{color:#c9a96e;text-decoration:underline;}
.ck-btns{display:flex;gap:8px;flex-shrink:0;}
.ck-accept{background:#c9a96e;color:#fff;border:none;border-radius:6px;padding:8px 20px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;}
.ck-decline{background:none;color:rgba(255,255,255,0.45);border:1px solid rgba(255,255,255,0.2);border-radius:6px;padding:8px 14px;font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;white-space:nowrap;}
@media(max-width:640px){#cookie-banner{padding:14px 16px;}}