/* Blog. Lives inside general_template.html, so the menubar, footer, fonts and
   the green (#74b743) come from general.css / menubar.css / footer.css. */

.blog-wrap { max-width: 1180px; margin: 0 auto; }
.blog-wrap strong, .blog-wrap b { font-family: IRANYekanBold, sans-serif; font-weight: normal; }

/* header strip */
.blog-hero { padding: 8px 0 26px; border-bottom: 1px solid #ececec; margin-bottom: 34px; }
.blog-hero h1 { text-align: right; font-size: 34px; margin: 0 0 6px; padding: 0; }
.blog-hero p { color: #666; font-size: 16px; margin: 0; text-align: right; }
.blog-eyebrow { font-family: IRANYekanRegular, sans-serif; color: #74b743; font-size: 13px; margin: 0 0 4px; }

/* two columns */
.blog-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.blog-side { position: sticky; top: 84px; }

/* cards */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.blog-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.card .thumb { display: block; aspect-ratio: 16 / 10; background: #eef5e8; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .thumb.ph { display: flex; align-items: flex-end; padding: 16px; background: linear-gradient(135deg, #74b743 0%, #4fae8a 60%, #3d9fb0 100%); }
.card .thumb.ph span { font-family: IRANYekanBold, sans-serif; font-size: 13px; color: #fff; opacity: .92; }
.card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .cat { font-family: IRANYekanRegular, sans-serif; font-size: 12px; color: #74b743; }
.card h3 { font-family: IRANYekanBold, sans-serif; font-weight: normal; font-size: 16.5px; line-height: 1.6; margin: 0; color: #222; }
.card h3 a { color: inherit; }
.card h3 a:hover { color: #74b743; }
.card p { font-size: 13.5px; color: #555; line-height: 1.8; margin: 0; text-align: right; flex: 1; }
.card .meta { font-size: 12px; color: #999; display: flex; gap: 10px; }

/* featured row on the index */
.blog-featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; margin-bottom: 36px; }
.blog-featured .card.big .thumb { aspect-ratio: 16 / 9; }
.blog-featured .card.big h3 { font-size: 22px; }
.blog-featured .stack { display: grid; gap: 22px; }
.blog-featured .stack .card { flex-direction: row; }
.blog-featured .stack .thumb { width: 140px; flex: 0 0 140px; aspect-ratio: auto; }
.blog-featured .stack .body { padding: 12px 14px; }
.blog-featured .stack h3 { font-size: 15px; }

.blog-section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 16px; }
.blog-section-title h2 { font-family: IRANYekanBold, sans-serif; font-weight: normal; font-size: 20px; margin: 0; color: #222; }
.blog-section-title a { font-size: 14px; }

/* sidebar */
.side-box { background: #fafafa; border: 1px solid #ececec; border-radius: 14px; padding: 18px 18px 14px; margin-bottom: 20px; }
.side-box h4 { font-family: IRANYekanBold, sans-serif; font-weight: normal; font-size: 15px; margin: 0 0 12px; color: #222; }
.side-box ul { list-style: none; margin: 0; padding: 0; }
.side-box li { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px dashed #e6e6e6; font-size: 14px; }
.side-box li:last-child { border-bottom: none; }
.side-box li a { color: #333; }
.side-box li a:hover { color: #74b743; }
.side-box .n { font-family: IRANYekanRegular, sans-serif; background: #eef5e8; color: #4e8a2a; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; }
.side-box .mini { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed #e6e6e6; }
.side-box .mini:last-child { border-bottom: none; }
.side-box .mini img, .side-box .mini .ph { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; flex: 0 0 58px; background: linear-gradient(135deg, #74b743, #3d9fb0); }
.side-box .mini a { font-size: 13.5px; color: #333; line-height: 1.55; }
.side-box .mini small { display: block; color: #999; font-size: 11.5px; margin-top: 2px; }
.side-cta { background: linear-gradient(135deg, #74b743, #4fae8a); border-radius: 14px; padding: 20px 18px; text-align: center; }
.side-cta p { color: #fff; font-size: 14px; text-align: center; margin: 0 0 12px; }
.side-cta a { display: inline-block; background: #fff; color: #4e8a2a; border-radius: 999px; padding: 8px 22px; font-family: IRANYekanBold, sans-serif; font-size: 14px; }

/* single post */
.post-head { max-width: 800px; margin: 0 auto 26px; }
.crumbs { font-size: 13px; color: #999; margin-bottom: 14px; }
.crumbs a { color: #777; }
.crumbs a:hover { color: #74b743; }
.crumbs span { margin: 0 6px; }
.post-head .cat { display: inline-block; font-family: IRANYekanRegular, sans-serif; font-size: 12.5px; color: #4e8a2a; background: #eef5e8; padding: 3px 12px; border-radius: 999px; margin-bottom: 12px; }
.post-head h1 { text-align: right; font-size: 32px; line-height: 1.5; margin: 0 0 12px; padding: 0; }
.post-head .meta { font-size: 13.5px; color: #888; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.post-feat { max-width: 800px; margin: 0 auto 30px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.post-feat img { width: 100%; display: block; }
.post-body { max-width: 760px; margin: 0 auto; }
.post-body p { font-size: 17px; line-height: 2.05; color: #333; margin: 0 0 1.1em; text-align: justify; }
.post-body h2, .post-body h3, .post-body h4 { font-family: IRANYekanBold, sans-serif; font-weight: normal; color: #222; line-height: 1.6; margin: 1.6em 0 .6em; text-align: right; }
.post-body h2 { font-size: 24px; }
.post-body h3 { font-size: 20px; }
.post-body h4 { font-size: 17px; }
.post-body a { color: #4e8a2a; border-bottom: 1px solid #b9dba3; }
.post-body a:hover { color: #74b743; }
.post-body img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 1.2em auto; }
.post-body figure { margin: 1.4em 0; }
.post-body figcaption { text-align: center; color: #888; font-size: 13px; margin-top: 6px; }
.post-body ul, .post-body ol { padding-right: 1.4em; padding-left: 0; margin: 0 0 1.1em; }
.post-body li { font-size: 16.5px; line-height: 2; color: #333; margin-bottom: .3em; }
.post-body blockquote { border-right: 4px solid #74b743; margin: 1.4em 0; padding: .4em 1.2em; background: #f7fbf4; border-radius: 8px; }
.post-body table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 1.2em 0; }
.post-body td, .post-body th { border: 1px solid #e3e3e3; padding: 8px 10px; }
.post-body hr { border: 0; border-top: 1px solid #e6e6e6; margin: 2em 0; }
.post-body .wp-block-table { overflow-x: auto; }
.post-tags { max-width: 760px; margin: 30px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags a { font-size: 12.5px; color: #555; background: #f2f2f2; padding: 4px 12px; border-radius: 999px; }
.post-tags a:hover { background: #eef5e8; color: #4e8a2a; }
.post-note { max-width: 760px; margin: 22px auto 0; font-size: 12.5px; color: #999; border-top: 1px solid #eee; padding-top: 12px; }
.post-note a { color: #999; text-decoration: underline; }
.post-nav { max-width: 800px; margin: 36px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.post-nav a { display: block; background: #fafafa; border: 1px solid #ececec; border-radius: 12px; padding: 12px 16px; color: #333; font-size: 14px; line-height: 1.6; }
.post-nav a small { display: block; color: #999; font-size: 12px; margin-bottom: 2px; }
.post-nav a:hover { border-color: #74b743; }
.post-nav .next { text-align: left; }
.related { max-width: 1180px; margin: 50px auto 0; }

/* pagination */
.pager { display: flex; justify-content: center; gap: 8px; margin: 34px 0 0; }
.pager a, .pager span { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #e3e3e3; color: #333; font-size: 14px; padding: 0 10px; }
.pager span.cur { background: #74b743; border-color: #74b743; color: #fff; }
.pager a:hover { border-color: #74b743; color: #74b743; }

/* about / contact pages */
.blog-page { max-width: 800px; margin: 0 auto; }

@media (max-width: 1000px) {
  .blog-cols { grid-template-columns: 1fr; }
  .blog-side { position: static; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-featured { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .blog-grid, .blog-grid.two { grid-template-columns: 1fr; }
  .blog-hero h1, .post-head h1 { font-size: 24px; }
  .post-body p { font-size: 16px; }
  .post-nav { grid-template-columns: 1fr; }
  .blog-featured .stack .card { flex-direction: column; }
  .blog-featured .stack .thumb { width: auto; flex: none; aspect-ratio: 16 / 10; }
}

/* video embeds (Aparat / YouTube) */
.video-embed { position: relative; width: 100%; padding-top: 56.25%; margin: 1.4em 0; border-radius: 12px; overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }