/* M Creation blog listing and article reader */

.blog-page-hero{
  padding:42px 0 34px !important;
  background:linear-gradient(135deg,#f7fbff 0%,#eaf6ff 100%);
}
.blog-page-hero .container{max-width:1050px}
.blog-page-hero h1{
  max-width:1000px;
  margin:14px auto 10px;
  font-size:clamp(38px,4.7vw,62px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.blog-page-hero p{max-width:780px;margin:0 auto;color:#5d6b82;font-size:18px}
.blog-list-section{padding:52px 0 64px !important}
.blog-index-grid{align-items:stretch}
.blog-card-clickable{
  display:flex;
  flex-direction:column;
  color:inherit;
  min-width:0;
  position:relative;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
  cursor:pointer;
}
.blog-card-clickable:hover{
  transform:translateY(-7px);
  border-color:#aac8ff;
  box-shadow:0 20px 50px rgba(10,43,92,.13);
}
.blog-card-clickable .blog-body{display:flex;flex-direction:column;flex:1}
.blog-card-clickable .text-link{margin-top:auto;padding-top:8px}
.blog-card-clickable h2{font-size:23px;line-height:1.28;margin:10px 0 10px;color:#091d43}
.blog-card-clickable p{color:#5d6b82;margin:0 0 15px}
.blog-card-clickable .blog-image{transition:transform .35s ease}
.blog-card-clickable:hover .blog-image{transform:scale(1.025)}
.blog-card-image-link{display:block;overflow:hidden}

/* Article header */
.article-hero{
  padding:46px 0 30px !important;
  background:linear-gradient(180deg,#f5faff 0%,#ffffff 100%);
  text-align:center;
  border-bottom:1px solid #edf2f8;
}
.article-hero-inner{max-width:980px}
.article-category{
  display:inline-flex;
  align-items:center;
  padding:7px 13px;
  border-radius:999px;
  background:#eaf2ff;
  color:#155fd5;
  font-size:12px;
  font-weight:850;
  letter-spacing:.09em;
  text-decoration:none;
}
.article-hero h1{
  font-size:clamp(38px,4.6vw,64px);
  line-height:1.08;
  letter-spacing:-.038em;
  color:#071b40;
  max-width:980px;
  margin:18px auto 14px;
}
.article-subtitle{
  max-width:830px;
  margin:0 auto;
  color:#53667f;
  font-size:19px;
  line-height:1.55;
}
.article-byline{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:20px;
  color:#6d7d92;
  font-size:13px;
}
.article-byline span,.article-byline a{display:inline-flex;align-items:center}
.article-byline span:not(:first-child):before,.article-byline a:before{
  content:'•';
  margin-right:18px;
  color:#a9b4c3;
}
.article-byline a{color:#175dce;font-weight:750}

/* Featured image */
.article-featured{
  width:min(1120px,calc(100% - 38px));
  margin:30px auto 34px;
}
.article-featured .post-featured{
  width:100%;
  max-height:none;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:24px;
  margin:0;
  box-shadow:0 22px 60px rgba(8,35,78,.14);
  background:#eef4fb;
}
.article-featured figcaption,.article-inline-image figcaption,.article-video figcaption{
  text-align:center;
  color:#718096;
  font-size:12px;
  margin-top:9px;
  line-height:1.45;
}

/* Main reader layout */
.article-layout{
  display:grid;
  grid-template-columns:minmax(0,780px) 280px;
  justify-content:center;
  gap:54px;
  align-items:start;
  padding-top:20px;
  padding-bottom:62px;
}
.article-content{
  min-width:0;
  font-size:18px;
  line-height:1.82;
  color:#263952;
}
.article-content>p:first-of-type,.article-richtext>p:first-child{font-size:20px;color:#334b68}
.article-content h2{
  font-size:36px;
  line-height:1.2;
  letter-spacing:-.025em;
  margin:46px 0 16px;
  color:#071c42;
  scroll-margin-top:110px;
}
.article-content h3{
  font-size:27px;
  line-height:1.25;
  margin:34px 0 13px;
  color:#0b244e;
  scroll-margin-top:110px;
}
.article-content h4{font-size:22px;margin:28px 0 11px;color:#0b244e}
.article-richtext p{margin:0 0 21px}
.article-richtext ul,.article-richtext ol{padding-left:25px;margin:0 0 24px}
.article-richtext li{margin:8px 0}
.article-richtext a{color:#075fd5;text-decoration:underline;text-underline-offset:3px}
.article-richtext blockquote{border-left:4px solid #21bfb8;margin:30px 0;padding:14px 22px;background:#f1fbfa;border-radius:0 12px 12px 0}
.article-share{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  padding:14px 0 23px;
  border-bottom:1px solid #e3eaf4;
  margin-bottom:28px;
  font-size:12px;
}
.article-share span{font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:#263e5f}
.article-share a{padding:7px 10px;border:1px solid #d6e0ed;border-radius:8px;color:#264465;background:#fff;transition:.2s}
.article-share a:hover{border-color:#7daaff;color:#0b59cd;background:#f4f8ff}
.article-inline-image{margin:34px 0}
.article-inline-image img{width:100%;height:auto;border-radius:18px;display:block;box-shadow:0 14px 38px rgba(8,35,78,.1)}
.article-inline-image.size-wide{width:min(1040px,calc(100vw - 40px));margin-left:50%;transform:translateX(-50%)}
.article-inline-image.size-full{width:100vw;margin-left:50%;transform:translateX(-50%)}
.article-inline-image.size-full img{border-radius:0}
.article-video{margin:38px 0}
.article-video>h3{font-size:22px;margin:0 0 12px}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#061a3c;border-radius:18px;overflow:hidden;box-shadow:0 16px 42px rgba(8,35,78,.15)}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-external-link{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800}
.article-quote{margin:38px 0;padding:28px 34px;border:0;border-radius:20px;background:linear-gradient(135deg,#061f4e,#0d55c8);color:#fff;position:relative}
.article-quote:before{content:'“';position:absolute;top:4px;left:17px;font-size:68px;color:rgba(255,255,255,.2)}
.article-quote p{font-size:24px;line-height:1.45;margin:0;position:relative}
.article-quote cite{display:block;margin-top:14px;color:#a9f4ed;font-size:13px;font-style:normal}
.article-callout{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:23px;border-radius:16px;margin:32px 0;border:1px solid #cfe2fa;background:#eef7ff}
.article-callout.note{background:#f5f2ff;border-color:#ded5ff}
.article-callout.warning{background:#fff8e5;border-color:#f3dda1}
.article-callout strong{display:block;font-size:19px;margin-bottom:5px}.article-callout p{margin:0;white-space:normal}
.article-divider{border:0;border-top:1px solid #dce5f1;margin:42px 0}
.article-ad{margin:30px auto;padding:10px;min-height:115px;display:grid;align-content:center;border-top:1px solid #e1e7ef;border-bottom:1px solid #e1e7ef;text-align:center}
.article-ad>span{display:block;font-size:10px;color:#8b96a7;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.article-ad.placeholder>div{height:105px;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#f6f8fb,#f6f8fb 12px,#eef2f7 12px,#eef2f7 24px);color:#8895a7;border-radius:10px}
.article-author-box{display:grid;grid-template-columns:64px 1fr;gap:18px;margin-top:50px;padding:25px;border:1px solid #dce6f2;border-radius:18px;background:#f8fbff}
.author-mark{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0b45bd,#25cfc6);color:#fff;font-weight:900}
.article-author-box span{font-size:11px;color:#7c899c;text-transform:uppercase}.article-author-box h3{font-size:20px;margin:2px 0 5px}.article-author-box p{font-size:14px;line-height:1.55;margin:0;color:#62718a}

/* Sidebar */
.article-sidebar{position:sticky;top:104px;display:grid;gap:18px}
.article-toc,.sidebar-cta{border:1px solid #dfe7f2;border-radius:16px;padding:20px;background:#fff;box-shadow:0 10px 30px rgba(10,42,90,.05)}
.article-toc strong{display:block;margin-bottom:11px;color:#0a234e}.article-toc a{display:block;padding:7px 0;color:#52647c;font-size:13px;border-bottom:1px solid #edf1f6}.article-toc a:last-child{border:0}.article-toc a.level-3{padding-left:13px}.article-toc a.level-4{padding-left:25px}
.sidebar-cta{background:linear-gradient(145deg,#061f4e,#0d54c2);color:#fff}.sidebar-cta span{font-size:11px;color:#9ef0eb;text-transform:uppercase;letter-spacing:.09em}.sidebar-cta h3{font-size:25px;margin:8px 0 18px;color:#fff}

/* Related posts and comments */
.related-section,.more-posts-section{border-top:1px solid #e5ebf3;padding:58px 0 !important}
.related-section .section-head,.more-posts-section .section-head{margin-bottom:30px}
.related-section .blog-card h3,.more-posts-section .blog-card h3{font-size:21px;line-height:1.3}.related-section .blog-card h3 a,.more-posts-section .blog-card h3 a{color:inherit}.blog-card-image-link{display:block;overflow:hidden}.blog-card-image-link img{transition:transform .3s ease}.blog-card-image-link:hover img{transform:scale(1.025)}
.comments-section{padding:58px 0 !important}
.comments-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start}
.comments-list h2{font-size:36px;margin:12px 0 25px}.comment-card{display:grid;grid-template-columns:46px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid #e1e8f2}.comment-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#e7f1ff;color:#1457c5;font-weight:850}.comment-head{display:flex;justify-content:space-between;gap:15px;font-size:14px}.comment-head time{font-size:12px;color:#7c899b}.comment-card p{color:#465970;line-height:1.65;margin:8px 0 0}.comment-form{padding:27px;border:1px solid #dae4f1;border-radius:20px;background:#f8fbff;position:sticky;top:108px}.comment-form h3{font-size:25px;margin:0 0 8px}.comment-form>p{color:#6b7b91;font-size:13px}.comment-notice,.comment-error{padding:13px;border-radius:10px;margin-bottom:20px}.comment-notice{background:#e8fff5;color:#087756}.comment-error{background:#fff0f0;color:#a32727}.empty-comments{color:#738196}

@media(max-width:1000px){
  .article-layout{grid-template-columns:1fr;gap:34px}
  .article-sidebar{position:static;grid-template-columns:1fr 1fr}
  .comments-wrap{grid-template-columns:1fr}.comment-form{position:static}
  .article-inline-image.size-wide,.article-inline-image.size-full{width:100%;margin-left:0;transform:none}
  .article-inline-image.size-full img{border-radius:18px}
}
@media(max-width:700px){
  .blog-page-hero{padding:34px 0 27px !important}.blog-page-hero p{font-size:16px}
  .blog-list-section{padding:38px 0 48px !important}
  .article-hero{padding:34px 0 24px !important}.article-hero h1{font-size:38px}.article-subtitle{font-size:17px}
  .article-byline{gap:6px 12px}.article-byline span:not(:first-child):before,.article-byline a:before{display:none}
  .article-featured{width:min(100% - 24px,1120px);margin:22px auto 25px}.article-featured .post-featured{border-radius:15px}
  .article-layout{padding-top:12px;padding-bottom:45px;gap:28px}.article-content{font-size:17px}.article-content h2{font-size:30px;margin-top:38px}.article-content h3{font-size:24px}
  .article-sidebar{grid-template-columns:1fr}.article-callout{align-items:flex-start;flex-direction:column}.article-quote{padding:24px}.article-quote p{font-size:21px}
  .comments-wrap{gap:32px}.comment-head{flex-direction:column;gap:3px}.article-share{align-items:flex-start}.comment-form{padding:20px}
}

/* Blog featured image display fix
   Keep the full artwork visible without oversized cropping. */
.article-featured{
  width:min(1000px,calc(100% - 38px));
  margin:28px auto 34px;
  padding:14px;
  background:#f4f8fd;
  border:1px solid #dfe8f3;
  border-radius:24px;
  box-shadow:0 18px 48px rgba(8,35,78,.10);
}
.article-featured .post-featured{
  display:block;
  width:100%;
  height:clamp(320px,43vw,540px);
  max-height:540px;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center center;
  margin:0 auto;
  border-radius:16px;
  background:#fff;
  box-shadow:none;
}
.article-featured figcaption{
  padding:0 8px 2px;
}
@media(max-width:700px){
  .article-featured{
    width:calc(100% - 24px);
    margin:20px auto 24px;
    padding:8px;
    border-radius:16px;
  }
  .article-featured .post-featured{
    height:clamp(230px,72vw,390px);
    max-height:390px;
    border-radius:11px;
  }
}

/* Smaller featured image for easier article reading */
.article-featured{
  width:min(820px,calc(100% - 38px));
  margin:24px auto 30px;
  padding:10px;
  border-radius:20px;
}
.article-featured .post-featured{
  width:100%;
  height:clamp(240px,34vw,390px);
  max-height:390px;
  object-fit:contain;
  object-position:center;
  border-radius:13px;
}
@media(max-width:700px){
  .article-featured{
    width:calc(100% - 24px);
    margin:18px auto 22px;
    padding:7px;
    border-radius:14px;
  }
  .article-featured .post-featured{
    height:clamp(200px,58vw,300px);
    max-height:300px;
    border-radius:10px;
  }
}