/* ============================================================
   Blog — shared styles for bloglist.html & blog-details.html
   ============================================================ */

/* ── Blog Hero ───────────────────────────────────────────────── */
.blog-hero {
  background: linear-gradient(155deg,#eff6ff 0%,#f8fafc 55%,#f0fdf4 100%);
  border-bottom: 1.5px solid var(--border);
  padding: 48px 0 40px; position: relative; overflow: hidden;
}
.blog-hero::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(30,136,229,.07) 0%,transparent 70%);
  pointer-events:none;
}

/* ── Category filter strip ───────────────────────────────────── */
.blog-filter-bar {
  background:#fff; border-bottom:1.5px solid var(--border);
  position:sticky; top:64px; z-index:40;
}
.blog-filter-inner {
  display:flex; align-items:center; gap:4px;
  overflow-x:auto; scrollbar-width:none; padding:10px 0;
}
.blog-filter-inner::-webkit-scrollbar { display:none; }
.blog-cat-btn {
  padding:7px 18px; font-size:13px; font-weight:700;
  color:var(--text-muted); border-radius:8px;
  border:none; background:transparent; white-space:nowrap;
  cursor:pointer; transition:all .15s; flex-shrink:0;
  font-family:inherit;
}
.blog-cat-btn:hover  { color:var(--primary); background:var(--primary-light); }
.blog-cat-btn.active { color:var(--primary); background:var(--primary-light); }

/* ── Blog list layout ────────────────────────────────────────── */
.blog-body { padding:40px 0 64px; background:var(--bg-gray); }
.blog-layout {
  display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start;
}
.blog-main { min-width:0; }
.blog-sidebar { position:sticky; top:130px; }

/* ── Featured post (large card) ─────────────────────────────── */
.blog-featured {
  background:#fff; border-radius:var(--radius-lg);
  border:1.5px solid var(--border); overflow:hidden;
  margin-bottom:24px; display:grid;
  grid-template-columns:1fr 1fr; min-height:280px;
  transition:box-shadow .2s;
}
.blog-featured:hover { box-shadow:var(--shadow-md); }
.blog-featured-img { position:relative; overflow:hidden; }
.blog-featured-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.blog-featured:hover .blog-featured-img img { transform:scale(1.04); }
.blog-featured-body { padding:28px; display:flex; flex-direction:column; justify-content:center; }

/* ── Post card ───────────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:28px; }
.post-card {
  background:#fff; border-radius:var(--radius-lg);
  border:1.5px solid var(--border); overflow:hidden;
  transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
.post-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.post-card-img { position:relative; height:180px; overflow:hidden; }
.post-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.post-card:hover .post-card-img img { transform:scale(1.06); }
.post-card-body { padding:16px; flex:1; display:flex; flex-direction:column; gap:8px; }

/* ── Shared post meta ────────────────────────────────────────── */
.post-cat-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700;
  width:fit-content;
}
.cat-tips     { background:#eff6ff; color:var(--primary); }
.cat-dest     { background:#f0fdf4; color:#16a34a; }
.cat-umrah    { background:#fef3c7; color:#d97706; }
.cat-news     { background:#fce7f3; color:#db2777; }
.cat-hotels   { background:#f5f3ff; color:#7c3aed; }

.post-title {
  font-size:15px; font-weight:800; color:var(--text); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post-excerpt {
  font-size:13px; color:var(--text-muted); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  flex:1;
}
.post-meta {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:11px; color:var(--text-muted); padding-top:8px;
  border-top:1px solid var(--border-light);
}
.post-meta-sep { opacity:.4; }
.post-meta .author-av {
  width:22px; height:22px; border-radius:50%;
  font-size:10px; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ── Pagination ──────────────────────────────────────────────── */
.blog-pagination { display:flex; align-items:center; justify-content:center; gap:6px; }
.pag-btn {
  width:36px; height:36px; border-radius:8px;
  border:1.5px solid var(--border); background:#fff;
  font-size:13px; font-weight:700; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; font-family:inherit;
}
.pag-btn:hover  { border-color:var(--primary); color:var(--primary); }
.pag-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.pag-btn.dots   { border-color:transparent; background:transparent; cursor:default; }

/* ── Sidebar shared ──────────────────────────────────────────── */
.bs-card {
  background:#fff; border-radius:var(--radius-lg);
  border:1.5px solid var(--border); overflow:hidden; margin-bottom:18px;
}
.bs-head {
  padding:14px 18px; font-size:14px; font-weight:800; color:var(--text);
  border-bottom:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:space-between;
}
.bs-head-title { display:flex; align-items:center; gap:8px; }
.bs-head-title svg { color:var(--primary); }
.bs-body { padding:16px 18px; }
.bs-body.p0 { padding:0; }

/* Featured company card in sidebar */
.feat-company {
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; border-bottom:1px solid var(--border-light);
  text-decoration:none; transition:background .15s; cursor:pointer;
}
.feat-company:last-child { border-bottom:none; }
.feat-company:hover { background:var(--primary-light); }
.feat-company-logo {
  width:44px; height:44px; border-radius:10px; flex-shrink:0;
  overflow:hidden; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--bg-gray);
}
.feat-company-info { flex:1; min-width:0; }
.feat-company-name  { font-size:13px; font-weight:800; color:var(--text); }
.feat-company-loc   { font-size:11px; color:var(--text-muted); margin-top:1px; }
.feat-company-stars { font-size:11px; color:#f59e0b; }
.feat-company-badge {
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px;
  background:#fff7ed; color:#c2410c; white-space:nowrap;
}

/* Related post mini card */
.rel-post {
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 0; border-bottom:1px solid var(--border-light);
  text-decoration:none; color:inherit;
}
.rel-post:last-child { border-bottom:none; padding-bottom:0; }
.rel-post-img {
  width:64px; height:56px; border-radius:8px;
  overflow:hidden; flex-shrink:0;
}
.rel-post-img img { width:100%; height:100%; object-fit:cover; }
.rel-post-title {
  font-size:12px; font-weight:700; color:var(--text); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rel-post-date { font-size:10px; color:var(--text-muted); margin-top:4px; }
.rel-post:hover .rel-post-title { color:var(--primary); }

/* Tag cloud */
.tag-cloud { display:flex; flex-wrap:wrap; gap:7px; }
.tag-pill {
  padding:5px 13px; border-radius:20px; font-size:12px; font-weight:700;
  border:1.5px solid var(--border); color:var(--text-muted); background:#fff;
  cursor:pointer; transition:all .15s; text-decoration:none;
}
.tag-pill:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }

/* Newsletter widget */
.newsletter-widget {
  background:linear-gradient(135deg,var(--primary),#0d47a1);
  border-radius:var(--radius-lg); padding:20px 18px; text-align:center; margin-bottom:18px;
}
.newsletter-widget h4 { font-size:14px; font-weight:800; color:#fff; margin-bottom:6px; }
.newsletter-widget p  { font-size:12px; color:rgba(255,255,255,.75); margin-bottom:14px; line-height:1.5; }
.newsletter-inp {
  width:100%; padding:10px 14px; border-radius:8px; border:none;
  font-family:inherit; font-size:13px; margin-bottom:8px; outline:none;
}
.newsletter-btn {
  width:100%; padding:10px; border-radius:8px; border:none;
  background:rgba(255,255,255,.2); color:#fff; font-size:13px; font-weight:700;
  font-family:inherit; cursor:pointer; transition:background .15s;
}
.newsletter-btn:hover { background:rgba(255,255,255,.3); }

/* ── Featured companies row (in article body) ───────────────── */
.bd-companies-row {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  padding: 16px 36px; margin: 24px -36px;
  border-top: 1.5px solid var(--border-light);
  border-bottom: 1.5px solid var(--border-light);
  background: var(--bg-gray);
}
.bd-companies-row::-webkit-scrollbar { display: none; }
.bd-co-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius);
  border: 1.5px solid var(--border); background: #fff;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.bd-co-card:hover {
  border-color: var(--primary); box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.bd-co-logo {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: var(--bg-gray); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.bd-co-name  { font-size: 12px; font-weight: 800; color: var(--text); }
.bd-co-stars { font-size: 11px; color: #f59e0b; margin-top: 1px; }
.bd-co-badge {
  font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 8px;
  background: var(--primary-light); color: var(--primary); margin-top: 2px;
  display: inline-block;
}

/* ── Blog Detail ─────────────────────────────────────────────── */
.bd-hero {
  position:relative; height:420px; overflow:hidden;
}
.bd-hero img { width:100%; height:100%; object-fit:cover; }
.bd-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(10,20,40,.80) 0%,rgba(10,20,40,.2) 60%,transparent 100%);
}
.bd-hero-content {
  position:absolute; bottom:0; left:0; right:0; padding:32px 0;
}
.bd-breadcrumb {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:rgba(255,255,255,.7); margin-bottom:14px;
}
.bd-breadcrumb a { color:rgba(255,255,255,.7); text-decoration:none; }
.bd-breadcrumb a:hover { color:#fff; }
.bd-breadcrumb span { opacity:.5; }
.bd-hero-title {
  font-size:30px; font-weight:900; color:#fff; line-height:1.3; margin-bottom:14px;
}
.bd-hero-meta {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:12px; color:rgba(255,255,255,.75);
}
.bd-hero-meta span { display:flex; align-items:center; gap:5px; }

/* Article body */
.bd-body { padding:40px 0 64px; background:var(--bg-gray); }
.bd-layout {
  display:grid; grid-template-columns:minmax(0,720px) 320px;
  gap:28px; align-items:start; max-width:1080px; margin:0 auto;
}

/* Article content */
.bd-article {
  background:#fff; border-radius:var(--radius-lg);
  border:1.5px solid var(--border); overflow:hidden; margin-bottom:20px;
}
.bd-article-body { padding:32px 36px; }
.bd-article-lead {
  font-size:16px; font-weight:600; color:var(--text); line-height:1.8;
  margin-bottom:24px; padding-bottom:24px; border-bottom:2px solid var(--primary-light);
}
.bd-article-body h2 {
  font-size:20px; font-weight:800; color:var(--text); margin:28px 0 12px;
  display:flex; align-items:center; gap:8px;
}
.bd-article-body h2::before {
  content:''; display:block; width:4px; height:22px;
  background:var(--primary); border-radius:2px; flex-shrink:0;
}
.bd-article-body h3 {
  font-size:16px; font-weight:800; color:var(--text); margin:20px 0 8px;
}
.bd-article-body p {
  font-size:14px; color:var(--text-muted); line-height:1.85; margin-bottom:16px;
}
.bd-article-body ul, .bd-article-body ol {
  padding-right:20px; margin-bottom:16px;
}
.bd-article-body li {
  font-size:14px; color:var(--text-muted); line-height:1.8; margin-bottom:6px;
}
.bd-article-body strong { color:var(--text); font-weight:700; }
.bd-article-img {
  width:100%; border-radius:var(--radius); overflow:hidden;
  margin:20px 0;
}
.bd-article-img img { width:100%; height:260px; object-fit:cover; display:block; }
.bd-article-img figcaption {
  padding:8px 12px; font-size:12px; color:var(--text-muted);
  background:var(--bg-gray); border-top:1px solid var(--border-light); text-align:center;
}
.bd-blockquote {
  border-right:4px solid var(--primary); background:var(--primary-light);
  padding:16px 20px; border-radius:0 var(--radius) var(--radius) 0;
  margin:20px 0; font-size:15px; font-weight:700; color:var(--text);
  font-style:italic; line-height:1.7;
}
.bd-tip-box {
  background:#f0fdf4; border:1.5px solid #bbf7d0; border-radius:var(--radius);
  padding:16px 18px; margin:20px 0;
  display:flex; gap:12px; align-items:flex-start;
}
.bd-tip-box svg { color:#16a34a; flex-shrink:0; margin-top:2px; }
.bd-tip-box-text { font-size:13px; color:#15803d; line-height:1.7; }
.bd-tip-box-text strong { font-weight:800; display:block; margin-bottom:4px; }

/* Article footer */
.bd-article-foot {
  padding:18px 36px; border-top:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.bd-tags { display:flex; gap:7px; flex-wrap:wrap; }
.bd-share { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text-muted); }
.share-btn {
  width:34px; height:34px; border-radius:8px; border:1.5px solid var(--border);
  background:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; color:var(--text-muted);
}
.share-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }

/* Author box */
.bd-author {
  background:#fff; border-radius:var(--radius-lg); border:1.5px solid var(--border);
  padding:24px; display:flex; gap:18px; align-items:flex-start; margin-bottom:20px;
}
.bd-author-av {
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  font-size:24px; font-weight:900; color:#fff;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),#0d47a1);
}
.bd-author-name  { font-size:15px; font-weight:800; color:var(--text); margin-bottom:3px; }
.bd-author-role  { font-size:12px; color:var(--text-muted); margin-bottom:8px; }
.bd-author-bio   { font-size:13px; color:var(--text-muted); line-height:1.7; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:1024px) {
  .blog-layout, .bd-layout { grid-template-columns:1fr 280px; }
}
@media (max-width:768px) {
  .blog-layout, .bd-layout { grid-template-columns:1fr; }
  .blog-sidebar, .bd-sidebar { position:static; }
  .blog-featured { grid-template-columns:1fr; min-height:unset; }
  .blog-featured-img { height:220px; }
  .blog-grid { grid-template-columns:1fr; }
  .bd-hero { height:300px; }
  .bd-hero-title { font-size:22px; }
  .bd-article-body { padding:20px; }
  .bd-article-foot { padding:14px 20px; }
  .bd-companies-row { padding:14px 20px; margin:20px -20px; }
}
@media (max-width:480px) {
  .blog-grid { grid-template-columns:1fr; }
  .bd-hero { height:240px; }
}