/* ==========================================================================
   Blog module styles — extends the existing RPTech Global theme.
   Palette reused from css/style.css: orange #e87b29, navy #233d80,
   grey bg #f5f5f5, card grey #f7f7f7, font "Barlow".
   ========================================================================== */

.page-hero{ background:#0d1330; padding: 100px 0 70px; text-align:center; }
.page-hero h1{ color:#ffffff; margin-bottom: 12px; font-size: 46px; }
.page-hero p{ color:#c9cce0; font-size:18px; margin-bottom:0; max-width:700px; margin-left:auto; margin-right:auto; }

.blog-sec{ padding: 70px 0; }
.blog-sec.bg-grey{ background-color:#f5f5f5; }

/* toolbar: search + category filters */
.blog-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-bottom:40px; }
.blog-search{ position:relative; flex: 0 0 320px; max-width:100%; }
.blog-search input[type="text"]{ background:#ffffff; border:1px solid #e2e2e2; border-radius:6px; height:48px; padding:0 45px 0 18px; }
.blog-search i{ position:absolute; right:16px; top:50%; transform:translateY(-50%); color:#e87b29; font-size:18px; pointer-events:none; }
.blog-categories{ display:flex; flex-wrap:wrap; gap:10px; }
.blog-categories button{ border:1px solid #e2e2e2; background:#ffffff; color:#000; font-family:"Barlow", sans-serif; font-weight:600; font-size:14px; padding:10px 20px; border-radius:30px; cursor:pointer; transition: all 0.25s ease-in-out; }
.blog-categories button:hover{ border-color:#e87b29; color:#e87b29; }
.blog-categories button.active{ background:#e87b29; border-color:#e87b29; color:#fff; }

/* grid of cards */
.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:30px; }
.blog-card{ background:#f7f7f7; border-radius:15px; overflow:hidden; display:flex; flex-direction:column; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; text-decoration:none; }
.blog-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); text-decoration:none; }
.blog-card-img{ width:100%; height:210px; overflow:hidden; background:#e9e9e9; }
.blog-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-img img{ transform: scale(1.06); }
.blog-card-body{ padding:24px 24px 28px; flex:1; display:flex; flex-direction:column; }
.blog-tag{ display:inline-block; align-self:flex-start; background: rgba(232,123,41,0.12); color:#e87b29; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:5px 12px; border-radius:20px; margin-bottom:14px; }
.blog-card-body h3{ font-size:21px; line-height:1.35; margin-bottom:12px; color:#000; }
.blog-card-body p{ font-size:15px; color:#696687; margin-bottom:16px; flex:1; }
.blog-meta{ display:flex; align-items:center; gap:16px; font-size:13px; color:#888; margin-bottom:14px; }
.blog-meta span{ display:inline-flex; align-items:center; gap:6px; }
.blog-readmore{ font-size:14px; font-weight:700; color:#e87b29; letter-spacing:0.5px; text-transform:uppercase; }
.blog-card:hover .blog-readmore{ color:#233d80; }

.blog-empty, .blog-loading, .blog-error{ text-align:center; padding:60px 20px; color:#696687; font-size:18px; grid-column: 1/-1; }
.blog-error{ color:#c0392b; }

/* pagination */
.blog-pagination{ display:flex; justify-content:center; gap:10px; margin-top:50px; }
.blog-pagination button{ width:44px; height:44px; border-radius:50%; border:1px solid #e2e2e2; background:#fff; font-weight:700; cursor:pointer; font-family:"Barlow", sans-serif; }
.blog-pagination button.active{ background:#e87b29; border-color:#e87b29; color:#fff; }
.blog-pagination button:hover:not(.active){ border-color:#e87b29; color:#e87b29; }

/* ---------------- Blog detail page ---------------- */
.blog-detail-sec{ padding:70px 0; }
.blog-detail-head{ max-width:860px; margin:0 auto 40px; text-align:center; }
.blog-detail-head .blog-tag{ align-self:center; }
.blog-detail-head h1{ font-size:40px; line-height:1.3; margin:16px 0 20px; }
.blog-detail-meta{ display:flex; justify-content:center; gap:24px; flex-wrap:wrap; font-size:15px; color:#888; }
.blog-detail-meta span{ display:inline-flex; align-items:center; gap:8px; }
.blog-detail-hero-img{ max-width:960px; margin: 0 auto 40px; border-radius:15px; overflow:hidden; }
.blog-detail-hero-img img{ width:100%; display:block; }
.blog-detail-body{ max-width:800px; margin:0 auto; }
.blog-detail-body h2, .blog-detail-body h3{ margin-top:36px; }
.blog-detail-body p{ font-size:18px; line-height:1.8; }
.blog-detail-body ul, .blog-detail-body ol{ margin: 0 0 20px 20px; }
.blog-detail-body ul li{ list-style: disc; margin-bottom:10px; }
.blog-detail-body ol li{ margin-bottom:10px; }
.blog-detail-body img{ max-width:100%; border-radius:10px; margin: 20px 0; }
.blog-back-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#000; margin-bottom:30px; text-transform:uppercase; font-size:14px; letter-spacing:0.5px; }
.blog-back-link:hover{ color:#e87b29; }

.blog-share{ display:flex; align-items:center; gap:14px; margin: 40px auto 0; max-width:800px; }
.blog-share span{ font-weight:700; color:#000; }
.blog-share a{ width:38px; height:38px; border-radius:50%; background:#f1f1f1; display:inline-flex; align-items:center; justify-content:center; color:#000; }
.blog-share a:hover{ background:#e87b29; color:#fff; }

.blog-related{ background:#f5f5f5; padding:70px 0; margin-top:60px; }
.blog-related h2{ text-align:center; margin-bottom:40px; }

@media (max-width: 991px){
  .blog-grid{ grid-template-columns: repeat(2, 1fr); }
  .page-hero h1{ font-size:34px; }
}
@media (max-width: 640px){
  .blog-grid{ grid-template-columns: 1fr; }
  .blog-toolbar{ flex-direction:column; align-items:stretch; }
  .blog-search{ flex-basis:auto; }
  .blog-detail-head h1{ font-size:28px; }
}