/*
==================================================
RR COMPUTERS - BLOG.CSS
Premium Blog Stylesheet
==================================================
*/

/* ---------- VARIABLES ---------- */
:root{
  --primary:#1f4d8b;
  --primary-dark:#173b69;
  --secondary:#f58220;
  --white:#fff;
  --light:#f7f9fc;
  --text:#1f2937;
  --muted:#667085;
  --border:#e5e7eb;
  --radius:18px;
  --shadow:0 18px 40px rgba(0,0,0,.08);
  --transition:.3s ease;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--light);color:var(--text);font-family:Arial,Helvetica,sans-serif}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(92%,1280px);margin:auto}

/* ---------- HERO ---------- */
.blog-hero{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  color:#fff;
  padding:90px 0;
  overflow:hidden;
}
.blog-hero .container{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:center;
}
.hero-tag{
  display:inline-block;
  padding:10px 18px;
  background:rgba(255,255,255,.15);
  border-radius:50px;
  margin-bottom:20px;
}
.hero-left h1{font-size:58px;line-height:1.1;margin-bottom:20px}
.hero-left p{font-size:18px;line-height:1.8;color:#d9e8ff;max-width:620px}
.hero-btns{display:flex;gap:16px;margin:35px 0}
.primary-btn,.secondary-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:10px;font-weight:700;
  transition:var(--transition)
}
.primary-btn{background:var(--secondary);color:#fff}
.primary-btn:hover{transform:translateY(-3px)}
.secondary-btn{border:2px solid #fff;color:#fff}
.secondary-btn:hover{background:#fff;color:var(--primary)}
.hero-stats{display:flex;gap:40px;margin-top:20px}
.hero-stats h3{font-size:34px}
.hero-stats span{color:#d9e8ff}

/* ---------- SEARCH ---------- */
.blog-search{padding:40px 0;background:#fff}
.blog-search form{
  max-width:900px;margin:auto;display:flex;
  background:#fff;border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow)
}
.blog-search input{
  flex:1;border:none;outline:none;
  padding:20px;font-size:16px
}
.blog-search button{
  width:180px;border:none;background:var(--secondary);
  color:#fff;font-weight:700;cursor:pointer
}

/* ---------- CATEGORIES ---------- */
.blog-category{padding:30px 0}
.category-scroll{
 display:flex;flex-wrap:wrap;gap:14px;justify-content:center
}
.category-scroll a{
 padding:12px 22px;background:#fff;border:1px solid var(--border);
 border-radius:40px;transition:var(--transition)
}
.category-scroll a:hover,
.category-scroll a.active{
 background:var(--primary);color:#fff;border-color:var(--primary)
}

/* ---------- SECTION ---------- */
.section-heading{text-align:center;margin-bottom:50px}
.section-heading span{color:var(--secondary);font-weight:700}
.section-heading h2{font-size:40px;margin:10px 0}
.section-heading p{max-width:700px;margin:auto;color:var(--muted);line-height:1.8}

/* ---------- FEATURED ---------- */
.featured-post{padding:80px 0}
.featured-card{
 display:grid;
 grid-template-columns:1fr 1fr;
 background:#fff;
 border-radius:22px;
 overflow:hidden;
 box-shadow:var(--shadow)
}
.featured-image img{height:100%;width:100%;object-fit:cover}
.featured-content{padding:50px}
.featured-badge{
 display:inline-block;
 background:var(--secondary);
 color:#fff;
 padding:8px 16px;
 border-radius:30px;
 margin-bottom:18px;
 font-size:13px;
 font-weight:700
}
.featured-content h2{font-size:38px;margin-bottom:18px}
.featured-meta{display:flex;gap:12px;color:var(--muted);margin-bottom:20px}
.featured-content p{line-height:1.9;color:var(--muted);margin-bottom:28px}

/* ---------- BLOG GRID ---------- */
.blog-posts{padding:80px 0}
.blog-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:30px
}
.blog-card{
 background:#fff;
 border-radius:18px;
 overflow:hidden;
 box-shadow:var(--shadow);
 transition:var(--transition)
}
.blog-card:hover{transform:translateY(-8px)}
.card-image{height:230px;overflow:hidden}
.card-image img{
 width:100%;height:100%;object-fit:cover;
 transition:.5s
}
.blog-card:hover .card-image img{transform:scale(1.08)}
.card-content{padding:24px}
.card-meta{
 display:flex;gap:10px;
 font-size:14px;
 color:var(--secondary);
 margin-bottom:12px
}
.card-content h3{
 font-size:24px;
 line-height:1.35;
 margin-bottom:14px;
 transition:var(--transition)
}
.blog-card:hover h3{color:var(--primary)}
.card-content p{
 color:var(--muted);
 line-height:1.8;
 margin-bottom:20px
}
.read-more{
 color:var(--primary);
 font-weight:700
}

/* ---------- PAGINATION ---------- */
.pagination-wrapper{
 margin-top:60px;
 display:flex;
 justify-content:center
}
.pagination-wrapper .page-numbers{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:44px;
 height:44px;
 margin:0 6px;
 border-radius:10px;
 background:#fff;
 box-shadow:0 6px 20px rgba(0,0,0,.05)
}
.pagination-wrapper .current{
 background:var(--primary);
 color:#fff
}

/* ---------- NEWSLETTER ---------- */
.newsletter-section{padding:80px 0}
.newsletter-box{
 background:linear-gradient(135deg,var(--primary),var(--primary-dark));
 color:#fff;
 border-radius:22px;
 padding:60px;
 text-align:center
}
.newsletter-box h2{font-size:38px;margin:14px 0}
.newsletter-box p{max-width:700px;margin:0 auto 30px;color:#d9e8ff}
.newsletter-form{
 display:flex;
 max-width:650px;
 margin:auto;
 background:#fff;
 border-radius:12px;
 overflow:hidden
}
.newsletter-form input{
 flex:1;border:none;outline:none;padding:18px
}
.newsletter-form button{
 border:none;background:var(--secondary);
 color:#fff;padding:0 30px;font-weight:700
}

/* ---------- CTA ---------- */
.blog-cta{padding:80px 0}
.cta-box{
 background:#fff;
 border-radius:22px;
 box-shadow:var(--shadow);
 padding:50px;
 display:flex;
 justify-content:space-between;
 gap:30px;
 align-items:center
}
.cta-content h2{font-size:38px;margin:14px 0}
.cta-content p{color:var(--muted);line-height:1.8}
.cta-buttons{display:flex;gap:16px}

/* ---------- EMPTY ---------- */
.no-posts{
 background:#fff;
 padding:60px;
 border-radius:18px;
 text-align:center;
 grid-column:1/-1
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:992px){
.blog-hero .container,
.featured-card,
.cta-box{grid-template-columns:1fr;display:grid}
.blog-grid{grid-template-columns:repeat(2,1fr)}
.hero-left{text-align:center}
.hero-btns,.hero-stats{justify-content:center}
}
@media(max-width:768px){
.hero-left h1{font-size:42px}
.section-heading h2,.featured-content h2,.cta-content h2,.newsletter-box h2{font-size:30px}
.blog-grid{grid-template-columns:1fr}
.blog-search form,.newsletter-form{flex-direction:column}
.blog-search button,.newsletter-form button{width:100%;padding:18px}
.cta-buttons,.hero-btns{flex-direction:column}
}