/* =====================================================
   Merchant Technologies — Blog Module Stylesheet
   Drop this file in alongside your existing site CSS.
   Adjust the variables below to match your exact brand
   colors/fonts once you share them — everything else
   references these tokens, so one edit updates all 3 pages.
===================================================== */

:root{
  --mt-navy-900:      #0B1F3A;   /* header / dark backgrounds */
  --mt-navy-700:      #142C4F;
  --mt-blue-600:      #1B4F91;   /* primary brand blue */
  --mt-blue-500:      #2563A6;
  --mt-orange-500:    #FF7A29;   /* accent / CTA */
  --mt-orange-600:    #E8630F;
  --mt-bg:            #F6F8FB;
  --mt-card-bg:       #FFFFFF;
  --mt-border:        #E4E9F1;
  --mt-text-900:      #1D2939;
  --mt-text-600:      #4A5568;
  --mt-text-400:      #8A94A6;
  --mt-radius:        12px;
  --mt-shadow:        0 4px 18px rgba(11, 31, 58, 0.07);
  --mt-shadow-hover:  0 14px 30px rgba(11, 31, 58, 0.14);
  --mt-font-head:     'Poppins', 'Segoe UI', sans-serif;
  --mt-font-body:     'Inter', 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
.mt-blog *{ box-sizing: border-box; }
.mt-blog{
  font-family: var(--mt-font-body);
  color: var(--mt-text-900);
  background: var(--mt-bg);
}
.mt-blog img{ max-width:100%; display:block; }
.mt-blog a{ text-decoration:none; color:inherit; }
.mt-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Section eyebrow / heading (reused across pages) ---------- */
.mt-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mt-orange-500);
  margin-bottom:10px;
}
.mt-eyebrow::before{
  content:"";
  width:26px; height:2px;
  background:var(--mt-orange-500);
  display:inline-block;
}
.mt-section-title{
  font-size: 36px;
  color: #413e66;
  font-weight: 700;
  position: relative;
  font-family: "Montserrat", sans-serif;
}
.mt-section-sub{
  color:var(--mt-text-600);
  font-size:16px;
  max-width:640px;
  line-height:1.6;
  margin:0;
}

/* ---------- Buttons (match "Call To Action" style pattern) ---------- */
.mt-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:8px;
  font-weight:600;
  font-size:15px;
  font-family:var(--mt-font-head);
  border:2px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
}
.mt-btn-primary{
  background:var(--mt-orange-500);
  color:#fff;
}
.mt-btn-primary:hover{
  background:var(--mt-orange-600);
  transform:translateY(-2px);
}
.mt-btn-outline{
  background:transparent;
  border-color:var(--mt-navy-900);
  color:var(--mt-navy-900);
}
.mt-btn-outline:hover{
  background:var(--mt-navy-900);
  color:#fff;
}

/* =====================================================
   1. HOMEPAGE BLOG SECTION (compact — 3 cards + CTA)
===================================================== */
.mt-blog-home{
  padding:80px 0;
  background:var(--mt-bg);
}
.mt-blog-home-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:44px;
}
.mt-blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.mt-blog-home-foot{
  text-align:center;
  margin-top:44px;
}

/* ---------- Blog card (shared by home + listing) ---------- */
.mt-card{
  background:var(--mt-card-bg);
  border:1px solid #c4c4c4;
  border-radius:var(--mt-radius);
  overflow:hidden;
  box-shadow:var(--mt-shadow);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}
.mt-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--mt-shadow-hover);
}
.mt-card-img{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--mt-navy-700);
}
.mt-card-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.mt-card:hover .mt-card-img img{ transform:scale(1.06); }
.mt-card-tag{
  position:absolute;
  top:14px; left:14px;
  background:var(--mt-orange-500);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:20px;
}
.mt-card-body{
  padding:22px 22px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.mt-card-meta{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12.5px;
  color:var(--mt-text-400);
  margin-bottom:12px;
}
.mt-card-meta span{ display:flex; align-items:center; gap:5px; }
.mt-card-title{
  font-family:var(--mt-font-head);
  font-size:19px;
  font-weight:600;
  line-height:1.4;
  color:var(--mt-navy-900);
  margin:0 0 10px;
}
.mt-card:hover .mt-card-title{ color:var(--mt-blue-600); }
.mt-card-excerpt{
  font-size:14.5px;
  color:var(--mt-text-600);
  line-height:1.6;
  margin:0 0 18px;
  flex:1;
}
.mt-card-link{
  font-family:var(--mt-font-head);
  font-size:13.5px;
  font-weight:600;
  color:var(--mt-blue-600);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.mt-card-link svg{ transition:transform .2s ease; }
.mt-card:hover .mt-card-link svg{ transform:translateX(4px); }

/* =====================================================
   2. BLOG LISTING PAGE
===================================================== */
.mt-blog-hero{
  background:linear-gradient(135deg, var(--mt-navy-900), var(--mt-navy-700));
  padding:70px 0 60px;
  text-align:center;
  color:#fff;
}
.mt-blog-hero .mt-eyebrow{ justify-content:center; color:var(--mt-orange-500); }
.mt-blog-hero .mt-eyebrow::before{ display:none; }
.mt-blog-hero h1{
  font-family:var(--mt-font-head);
  font-size:clamp(30px,4vw,44px);
  font-weight:700;
  margin:0 0 14px;
}
.mt-blog-hero p{
  color:#C7D0E0;
  max-width:560px;
  margin:0 auto;
  font-size:16px;
  line-height:1.6;
}
.mt-breadcrumb{
  display:flex;
  justify-content:center;
  gap:8px;
  font-size:13px;
  color:#9FADC7;
  margin-top:18px;
}
.mt-breadcrumb a{ color:#C7D0E0; }
.mt-breadcrumb a:hover{ color:var(--mt-orange-500); }

.mt-blog-layout{
  display:grid;
  grid-template-columns:2.3fr 1fr;
  gap:44px;
  padding:20px 0 90px;
  align-items:start;
}
.mt-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:34px;
}
.mt-filter-btn{
  font-family:var(--mt-font-head);
  font-size:13.5px;
  font-weight:600;
  padding:9px 18px;
  border-radius:24px;
  border:1px solid var(--mt-border);
  background:#fff;
  color:var(--mt-text-600);
  cursor:pointer;
  transition:.2s ease;
}
.mt-filter-btn:hover, .mt-filter-btn.active{
  background:var(--mt-navy-900);
  border-color:var(--mt-navy-900);
  color:#fff;
}
.mt-listing-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.mt-pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:48px;
}
.mt-pagination a{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  border:1px solid var(--mt-border);
  background:#fff;
  font-size:14px;
  font-weight:600;
  color:var(--mt-text-600);
}
.mt-pagination a.active, .mt-pagination a:hover{
  background:var(--mt-orange-500);
  border-color:var(--mt-orange-500);
  color:#fff;
}

/* ---------- Sidebar (shared: listing + detail) ---------- */
.mt-sidebar-widget{
  background:#e3e3e3;
  border:1px solid #CACACA;
  border-radius:var(--mt-radius);
  padding:26px;
  margin-bottom:26px;
  box-shadow:var(--mt-shadow);
}
.mt-widget-title{
  font-family:var(--mt-font-head);
  font-size:16.5px;
  font-weight:700;
  color:var(--mt-navy-900);
  margin:0 0 20px;
  padding-bottom:14px;
  border-bottom:2px solid var(--mt-bg);
  display:flex;
  align-items:center;
  gap:8px;
}
.mt-widget-title::before{
  content:"";
  width:4px; height:16px;
  background:var(--mt-orange-500);
  border-radius:2px;
}
.mt-recent-item{
  display:flex;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--mt-bg);
}
.mt-recent-item:last-child{ border-bottom:none; padding-bottom:0; }
.mt-recent-thumb{
  width:64px; height:64px;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--mt-navy-700);
}
.mt-recent-thumb img{ width:100%; height:100%; object-fit:cover; }
.mt-recent-info a{
  font-family:var(--mt-font-head);
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--mt-navy-900);
  display:block;
  margin-bottom:5px;
}
.mt-recent-info a:hover{ color:var(--mt-blue-600); }
.mt-recent-date{
  font-size:11.5px;
  color:var(--mt-text-400);
}
.mt-cat-list{ list-style:none; margin:0; padding:0; }
.mt-cat-list li{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--mt-bg);
  font-size:14px;
  color:var(--mt-text-600);
}
.mt-cat-list li:last-child{ border-bottom:none; }
.mt-cat-list a:hover{ color:var(--mt-blue-600); }
.mt-cat-list span{
  background:var(--mt-bg);
  color:var(--mt-text-400);
  font-size:11.5px;
  font-weight:600;
  padding:2px 9px;
  border-radius:10px;
}
.mt-widget-cta{
  background:linear-gradient(135deg, var(--mt-navy-900), var(--mt-blue-600));
  color:#fff;
  text-align:center;
  border:none;
}
.mt-widget-cta .mt-widget-title{ color:#fff; border-color:rgba(255,255,255,.15); justify-content:center; }
.mt-widget-cta .mt-widget-title::before{ display:none; }
.mt-widget-cta p{ font-size:13.5px; color:#C7D0E0; line-height:1.6; margin:0 0 18px; }

/* =====================================================
   3. BLOG DETAIL PAGE
===================================================== */
.mt-detail-hero{
  padding: 140px 0 64px;
  color: #122a4b;
}
.mt-detail-hero-inner{ max-width:820px; margin:0 auto; text-align:center; }
.mt-detail-tag{
  display:inline-block;
  background:var(--mt-orange-500);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:5px 14px;
  border-radius:20px;
  margin-bottom:18px;
}
.mt-detail-hero h1{
  font-family:var(--mt-font-head);
  font-size:clamp(26px,3.6vw,40px);
  font-weight:700;
  line-height:1.3;
  margin:0 0 20px;
}
.mt-detail-meta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:22px;
  font-size:13.5px;
  color:#C7D0E0;
}
.mt-detail-meta span{ display:flex; align-items:center; gap:6px; }

.mt-detail-layout{
  display:grid;
  grid-template-columns:2.3fr 1fr;
  gap:44px;
  padding:0px 0 90px;
  align-items:start;
}
.mt-detail-cover{
  border-radius:var(--mt-radius);
  overflow:hidden;
  margin-bottom:36px;
  box-shadow:var(--mt-shadow);
}
.mt-article{
  font-size:16px;
  line-height:1.85;
  color:var(--mt-text-600);
}
.mt-article h2{
  font-family:var(--mt-font-head);
  font-size:24px;
  font-weight:700;
  color:var(--mt-navy-900);
  margin:38px 0 16px;
}
.mt-article h3{
  font-family:var(--mt-font-head);
  font-size:19px;
  font-weight:600;
  color:var(--mt-navy-900);
  margin:28px 0 14px;
}
.mt-article p{ margin:0 0 18px; }
.mt-article ul{ margin:0 0 20px; padding-left:22px; }
.mt-article li{ margin-bottom:8px; }
.mt-article blockquote{
  border-left:4px solid var(--mt-orange-500);
  background:var(--mt-bg);
  padding:18px 24px;
  border-radius:0 8px 8px 0;
  font-style:italic;
  color:var(--mt-navy-900);
  margin:26px 0;
}
.mt-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:38px 0;
}
.mt-tag-pill{
  font-size:12.5px;
  font-weight:600;
  color:var(--mt-text-600);
  background:var(--mt-bg);
  padding:6px 14px;
  border-radius:20px;
}
.mt-share-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:26px;
  border-top:1px solid var(--mt-border);
}
.mt-share-row span{
  font-family:var(--mt-font-head);
  font-weight:600;
  font-size:13.5px;
  color:var(--mt-navy-900);
}
.mt-share-icons{ display:flex; gap:10px; }
.mt-share-icons a{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--mt-bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--mt-navy-900);
  transition:.2s ease;
}
.mt-share-icons a:hover{ background:var(--mt-orange-500); color:#fff; }

.mt-author-box{
  display:flex;
  gap:18px;
  align-items:center;
  background:#fff;
  border:1px solid var(--mt-border);
  border-radius:var(--mt-radius);
  padding:24px;
  margin-top:34px;
  box-shadow:var(--mt-shadow);
}
.mt-author-box img{
  width:64px; height:64px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.mt-author-box h4{
  font-family:var(--mt-font-head);
  font-size:15.5px;
  margin:0 0 4px;
  color:var(--mt-navy-900);
}
.mt-author-box p{
  font-size:13.5px;
  color:var(--mt-text-600);
  margin:0;
  line-height:1.5;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .mt-blog-grid{ grid-template-columns:repeat(2,1fr); }
  .mt-blog-layout, .mt-detail-layout{ grid-template-columns:1fr; }
  .mt-listing-grid{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  .mt-blog-grid{ grid-template-columns:1fr; }
  .mt-blog-home{ padding:56px 0; }
  .mt-author-box{ flex-direction:column; text-align:center; }
}