/* Slow Croatia — Blog Post Styles */

.post-hero { width:100%; height:60vh; min-height:400px; overflow:hidden; position:relative; }
.post-hero img { width:100%; height:100%; object-fit:cover; }
.post-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(28,28,26,.55) 0%,transparent 60%); }

.post-wrap { max-width:780px; margin:0 auto; padding:4rem 2rem 6rem; }

.post-header { margin-bottom:3rem; }
.post-breadcrumb { display:flex; align-items:center; gap:.6rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:1.5rem; flex-wrap:wrap; }
.post-breadcrumb a { color:var(--sage); text-decoration:none; }
.post-breadcrumb a:hover { text-decoration:underline; }

.post-cats { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.post-cat { font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); background:var(--sage-pale); padding:.25rem .7rem; border-radius:2px; text-decoration:none; }
.post-cat:hover { background:var(--sage); color:var(--white); }

.post-title { font-family:var(--serif); font-size:clamp(2.2rem,5vw,3.6rem); font-weight:300; line-height:1.15; color:var(--ink); margin-bottom:1.2rem; }
.post-subtitle { font-size:1.15rem; color:var(--ink-soft); line-height:1.7; font-style:italic; font-family:var(--serif); margin-bottom:1.8rem; padding-left:1.2rem; border-left:3px solid var(--sage-light); }

.post-byline { display:flex; align-items:center; gap:1.2rem; padding-bottom:2rem; border-bottom:1px solid rgba(125,155,118,.2); }
.post-byline-avatar { width:2.5rem; height:2.5rem; border-radius:50%; background:var(--sage-pale); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1rem; color:var(--sage); flex-shrink:0; }
.post-byline-info { display:flex; flex-direction:column; gap:.1rem; }
.post-byline-name { font-size:.85rem; font-weight:500; color:var(--ink); }
.post-byline-meta { font-size:.75rem; color:var(--ink-muted); }

.post-body { line-height:1.85; }
.post-body p { font-size:1.05rem; color:var(--ink-soft); margin-bottom:1.6rem; }
.post-body h2 { font-family:var(--serif); font-size:2.1rem; font-weight:300; color:var(--ink); margin:2.8rem 0 1.2rem; line-height:1.25; }
.post-body h3 { font-family:var(--serif); font-size:1.45rem; font-weight:400; color:var(--ink); margin:2rem 0 .8rem; }
.post-body strong { color:var(--ink); font-weight:500; }
.post-body a { color:var(--sage); text-decoration:underline; text-underline-offset:3px; }
.post-body a:hover { color:#5e7a58; }
.post-body ul, .post-body ol { margin:1.2rem 0 1.6rem 1.4rem; display:flex; flex-direction:column; gap:.7rem; }
.post-body li { font-size:1.05rem; color:var(--ink-soft); line-height:1.75; }
.post-body blockquote { margin:2.5rem 0; padding:1.8rem 2rem; background:var(--sage-pale); border-left:4px solid var(--sage); border-radius:0 2px 2px 0; }
.post-body blockquote p { font-family:var(--serif); font-size:1.35rem; font-style:italic; color:var(--ink); margin:0; line-height:1.6; }
.post-body figure { margin:2.5rem 0; }
.post-body figure img { width:100%; border-radius:2px; }
.post-body figcaption { font-size:.78rem; color:var(--ink-muted); text-align:center; margin-top:.7rem; letter-spacing:.05em; }
.post-body img { border-radius:2px; margin:1.5rem 0; }

.post-footer { margin-top:4rem; padding-top:2.5rem; border-top:1px solid rgba(125,155,118,.2); }
.post-share { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.post-share-label { font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-muted); }
.share-btn { padding:.5rem 1.1rem; border-radius:2px; font-size:.75rem; font-weight:500; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; transition:opacity .2s; }
.share-btn:hover { opacity:.8; }
.share-btn.fb { background:#1877F2; color:#fff; }
.share-btn.tw { background:#000; color:#fff; }
.share-btn.wa { background:#25D366; color:#fff; }

.related-posts { background:var(--stone); padding:5rem; }
.related-posts .section-label { margin-bottom:.8rem; }
.related-posts h2 { font-family:var(--serif); font-size:2.2rem; font-weight:300; margin-bottom:2.5rem; color:var(--ink); }
.related-posts h2 em { font-style:italic; color:var(--sage); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }

@media(max-width:900px){
  .post-wrap { padding:3rem 1.5rem 5rem; }
  .post-hero { height:50vw; min-height:250px; }
  .related-posts { padding:3rem 1.5rem; }
  .related-grid { grid-template-columns:1fr; }
}