/* ---- Author box ---- */
.author-box { display:flex; align-items:flex-start; padding:16px; margin:24px 0; border:1px solid #eee; border-radius:10px; background:#fafafa; box-shadow:0 2px 5px rgba(0,0,0,.05); }
.author-avatar-wrap { flex:0 0 80px; margin-right:16px; }
.author-avatar { width:80px; height:80px; border-radius:50%; object-fit:cover; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.author-content { flex:1; }
.author-name { margin:0 0 6px; font-size:1.1rem; font-weight:600; }
.author-name a { text-decoration:none; color:#111; }
.author-bio { margin:0 0 8px; font-size:.95rem; line-height:1.5; color:#444; }
.author-links a { margin-right:12px; font-size:.9rem; color:#0073e6; text-decoration:none; }
.author-links a:hover { text-decoration:underline; }

/* ---- Hero image ---- */
.article-hero { width:100%; max-width:100%; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-lg); margin:0 0 28px; background:#f6f7f8; position:relative; }
.hero-image { display:block; width:100%; height:clamp(220px,36vh,520px); object-fit:cover; object-position:center; -webkit-backface-visibility:hidden; transition:transform var(--animation-duration) var(--animation-timing); will-change:transform; }

@media (max-width:768px){
  .article-hero{ margin-left:-20px; margin-right:-20px; width:calc(100% + 40px); max-width:none; border-radius:0; }
  .hero-image{ height:280px; min-height:280px; object-position:top center; }
}

.article-hero.article-hero--edge { margin-left:calc(-1 * min(24px, env(safe-area-inset-left))); margin-right:calc(-1 * min(24px, env(safe-area-inset-right))); border-radius:0; }

.post-image,.post-thumb,.related-image img { width:100%; height:200px; max-height:220px; object-fit:cover; object-position:center; border-radius:10px; }
@media (max-width:640px){ .post-image,.post-thumb,.related-image img{ height:150px; } }

#currentImage img,#uploadedImages img{ display:block; width:100%; max-width:560px; height:auto; max-height:420px; object-fit:cover; border-radius:12px; box-shadow:var(--shadow-sm); cursor:pointer; }
#uploadedImages img{ width:140px; height:90px; object-fit:cover; margin:6px; }

/* Placeholder if hero missing */
.article-hero:empty,
.article-hero .hero-image[src=""],
.article-hero .hero-image[alt=""]{ background:linear-gradient(90deg,#eee,#f7f7f7); min-height:220px; }

@media print{ .article-hero,.hero-image{ display:none !important; } }

/* ---- Video embeds ---- */
.video-container{ position:relative; width:100%; max-width:560px; margin:20px auto; overflow:hidden; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,.1); }
.video-container iframe{ width:100%; height:100%; display:block; aspect-ratio:16/9; }
.video-thumbnail{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.video-container::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; background-color:rgba(0,0,0,.6); border-radius:50%; z-index:2; transition:background-color .3s; }
.video-container::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:0; height:0; border-left:15px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; z-index:3; }
.video-container:hover::before{ background-color:rgba(0,0,0,.8); }
@media (max-width:640px){ .video-container{ border-radius:0; margin:15px -10px; } }

/* ---- Content wrapper ---- */
.styled-content{ padding:20px; border-radius:8px; transition:all .3s ease; }
@media (max-width:768px){ .styled-content{ padding:5px; } }

/* ---- Related section ---- */
.related-articles{ margin-top:40px; padding:0 20px; }
.related-title{ font-size:1.5rem; margin-bottom:20px; color:#111; }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.related-card{ border-radius:10px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,.1); transition:transform .3s; }
.related-card:hover{ transform:translateY(-5px); }
.related-link{ display:block; text-decoration:none; color:inherit; }
.related-image{ width:100%; height:180px; overflow:hidden; }
.related-image img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.related-card:hover .related-image img{ transform:scale(1.05); }
.related-content{ padding:15px; }
.related-card-title{ margin:0 0 10px; font-size:1.1rem; font-weight:600; color:#111; }
.related-excerpt{ margin:0 0 10px; font-size:.9rem; color:#444; line-height:1.5; }
.related-content time{ font-size:.85rem; color:#666; }
@media (max-width:640px){ .related-grid{ grid-template-columns:1fr; } }

/* ---- Load-more buttons ---- */
.load-more-container{ display:flex; gap:12px; justify-content:center; margin:28px 0 10px; }
.load-more-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border:0; border-radius:10px; cursor:pointer;
  background:var(--primary-color,#0a66c2); color:#fff; font-weight:600;
  box-shadow:0 6px 18px rgba(10,102,194,.12);
  transition:transform .16s, box-shadow .16s, opacity .16s;
}
.load-more-button:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(10,102,194,.14); }
.load-more-button:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.load-more-button.is-secondary{ background:#f0f3f7; color:#0a2233; box-shadow:none; border:1px solid #d9e2ec; }
.load-more-button.is-secondary:hover{ background:#e6edf5; }

/* ---- Editorial (SEO text) ---- */
.sb-editorial{ margin:48px auto; max-width:920px; padding:0 16px; }
.sb-editorial__inner{ line-height:1.75; color:#222; }
.sb-editorial h2{ font-size:1.8rem; margin:0 0 14px; color:var(--primary-color,#0a66c2); }
.sb-editorial h3{ font-size:1.3rem; margin:22px 0 10px; }
.sb-editorial h4{ font-size:1.05rem; margin:16px 0 6px; }
.sb-editorial p{ margin:0 0 12px; text-align:justify; }
@media (max-width:640px){ .sb-editorial{ margin:36px auto; } .sb-editorial h2{ font-size:1.5rem; } }

/* ---- Motion safety ---- */
@media (prefers-reduced-motion:reduce){
  .related-card:hover .related-image img,
  .load-more-button:hover,
  .hero-image { transition:none; }
}