/* css/blog.css - /blog and /blog/<slug> (Part 18), on the page frame (css/pages.css). */

/* Card grid: list and "More from the blog". */
.tt-blog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:var(--sp-5); }
.tt-blog-card{ display:flex; flex-direction:column; min-width:0; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.tt-blog-card__img{ display:block; aspect-ratio:16/9; background:#EEF4FC; }
.tt-blog-card__img img{ display:block; width:100%; height:100%; object-fit:cover; }
.tt-blog-card__img--none{ display:flex; align-items:center; justify-content:center; color:var(--blue-600); }
.tt-blog-card__body{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4) var(--sp-5) var(--sp-5); }
.tt-blog-card__meta{ margin:0; font-size:14px; color:var(--ink-500); }
.tt-blog-card__title{ margin:0; font:700 19px/1.35 var(--font-display); color:var(--navy-900); }
.tt-blog-card__title a{ color:inherit; text-decoration:none; }
.tt-blog-card__title a:hover{ color:var(--blue-700); text-decoration:underline; }
.tt-blog-card__title a:focus-visible{ outline:2px solid var(--blue-600); outline-offset:2px; border-radius:4px; }
.tt-blog-card__text{ margin:0; color:var(--ink-700); line-height:1.6; }
.tt-blog-empty{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); max-width:60ch; margin:0 auto; text-align:center; }
.tt-blog-empty p{ margin:0; }
.tt-blog-list .tt-pager{ margin-top:var(--sp-6); }

/* The article: one readable column. */
.tt-blog-article{ max-width:760px; margin:0 auto; }
.tt-blog-article__cover{ display:block; width:100%; height:auto; border-radius:var(--r-lg); margin:0 0 var(--sp-6); }
.tt-blog-preview{ margin:var(--sp-4) auto 0; max-width:760px; padding:var(--sp-3) var(--sp-4); border-radius:var(--r);
  background:#FFF4E5; color:#7A4100; border:1px solid #F5C17A; }

/* Body: HTML saved from SunEditor (cleaned on save). Its inline sizes are desktop sizes, so they yield on phones. */
.tt-blog-body{ font-size:18px; line-height:1.75; color:var(--ink-900); overflow-wrap:anywhere; overflow:hidden; }
.tt-blog-body > *:first-child{ margin-top:0; }
.tt-blog-body p, .tt-blog-body ul, .tt-blog-body ol, .tt-blog-body blockquote, .tt-blog-body figure, .tt-blog-body pre,
.tt-blog-body .se-component{ margin:0 0 var(--sp-5); }
.tt-blog-body h2{ margin:var(--sp-7) 0 var(--sp-3); font:700 26px/1.3 var(--font-display); color:var(--navy-900); }
.tt-blog-body h3{ margin:var(--sp-6) 0 var(--sp-2); font:700 21px/1.35 var(--font-display); color:var(--navy-900); }
.tt-blog-body h4{ margin:var(--sp-5) 0 var(--sp-2); font:700 18px/1.4 var(--font-display); color:var(--navy-900); }
.tt-blog-body a{ color:var(--blue-700); text-decoration:underline; text-underline-offset:2px; }
.tt-blog-body ul, .tt-blog-body ol{ padding-left:1.4em; }
.tt-blog-body li{ margin:0 0 var(--sp-2); }
.tt-blog-body blockquote{ padding:var(--sp-3) var(--sp-5); border-left:4px solid var(--blue-600); background:#F4F8FD; border-radius:0 var(--r) var(--r) 0; color:var(--ink-700); }
.tt-blog-body blockquote > *:last-child{ margin-bottom:0; }
.tt-blog-body hr{ border:0; border-top:1px solid var(--line); margin:var(--sp-6) 0; }
.tt-blog-body img{ max-width:100% !important; height:auto !important; border-radius:var(--r); }
.tt-blog-body figure{ max-width:100% !important; }
.tt-blog-body figcaption{ margin-top:var(--sp-2); font-size:15px; color:var(--ink-500); text-align:center; }
.tt-blog-body pre{ padding:var(--sp-4); background:#0F172A; color:#E2E8F0; border-radius:var(--r); overflow-x:auto; font-size:15px; }
.tt-blog-body code{ font-size:.92em; }
/* Video: SunEditor saves a fixed 560x315 box; make it 16:9 at any width. */
.tt-blog-body .se-video-container figure{ position:relative; width:100% !important; height:0 !important; padding-bottom:56.25% !important; margin:0; }
.tt-blog-body .se-video-container iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; border:0; border-radius:var(--r); }
.tt-blog-body .__se__float-left{ float:left; margin-right:var(--sp-5); max-width:50%; }
.tt-blog-body .__se__float-right{ float:right; margin-left:var(--sp-5); max-width:50%; }
.tt-blog-body .__se__float-center{ text-align:center; }
@media (max-width:600px){ .tt-blog-body .__se__float-left, .tt-blog-body .__se__float-right{ float:none; margin:0 0 var(--sp-5); max-width:100%; } }
/* Tables scroll inside their figure instead of widening the page. */
.tt-blog-body .se-scroll-figure-x, .tt-blog-body figure:has(> table){ overflow-x:auto; }
.tt-blog-body table{ border-collapse:collapse; width:100%; font-size:16px; }
.tt-blog-body th, .tt-blog-body td{ padding:var(--sp-2) var(--sp-3); border:1px solid var(--line); text-align:left; vertical-align:top;
  overflow-wrap:normal; min-width:5.5em; }   /* "anywhere" split "Class 10" into "Clas / s 10" at 390px; the figure scrolls instead */
.tt-blog-body th{ background:#F4F8FD; font-weight:700; }
.tt-blog-body td > div, .tt-blog-body th > div{ margin:0; }
@media (max-width:600px){ .tt-blog-body{ font-size:17px; } .tt-blog-body h2{ font-size:23px; } }

/* Share row */
.tt-blog-share{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.tt-blog-share__label{ font-weight:700; color:var(--navy-900); margin-right:var(--sp-2); }
.tt-blog-share__btn{ display:inline-flex; align-items:center; min-height:44px; padding:0 var(--sp-4); border:1px solid #C7D3E3;
  border-radius:var(--r-pill); background:var(--white); color:var(--ink-900); font:600 15px/1 var(--font-body); text-decoration:none; cursor:pointer; }
.tt-blog-share__btn:hover{ border-color:var(--blue-600); color:var(--blue-700); }
.tt-blog-share__btn:focus-visible{ outline:2px solid var(--blue-600); outline-offset:2px; }
.tt-blog-share__ok{ font-size:14px; color:var(--ink-500); }
/* A table outside SunEditor's figure (pasted HTML) scrolls on its own; long words never widen a title. */
.tt-blog-body > table{ display:block; overflow-x:auto; }
.tt-blog-page .tt-pg-hero__title, .tt-blog-card__title{ overflow-wrap:anywhere; }