/* ============================================
   The Daily Inquiry — Blog CSS
   Editorial · Refined · Modern Indian Media
   Fonts: Playfair Display (headings) + DM Sans (body)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:        #18120e;
  --ink-soft:   #3d3530;
  --ink-muted:  #7a6f6a;
  --paper:      #faf8f5;
  --paper-warm: #f3ede4;
  --paper-mid:  #e8dfd4;
  --amber:      #c8611a;
  --amber-light:#e8864a;
  --amber-pale: #fdf0e6;
  --rule:       #ddd5ca;
  --white:      #ffffff;
  --radius-sm:  4px;
  --radius:     8px;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --font-mono:  'DM Mono', monospace;
  --shadow-sm:  0 1px 3px rgba(24,18,14,.08);
  --shadow:     0 4px 16px rgba(24,18,14,.1);
  --max-w:      1180px;
  --content-w:  720px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
img { max-width: 100%; height: auto; }

/* ===== HEADER ===== */
.blog-header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}
.blog-header::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--amber) 0%, var(--amber-light) 100%);
}
.blog-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.blog-logo {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1;
  display: flex;
  flex-direction: column;
}
.blog-logo .logo-sub {
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 3px;
}
.blog-nav {
  margin-left: auto;
  display: flex;
  gap: 2rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.blog-nav a { color: var(--ink-soft); transition: color .2s; }
.blog-nav a:hover { color: var(--amber); text-decoration: none; }

/* ===== LAYOUT ===== */
.blog-wrap { max-width: var(--max-w); margin: 0 auto; padding: 3rem 2rem; }
.blog-layout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 4rem;
}
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .blog-sidebar { order: -1; }
}
@media (max-width: 600px) {
  .blog-layout, .blog-wrap { padding: 1.75rem 1.25rem; }
  .blog-header-inner { padding: 0 1.25rem; }
}

/* ===== PAGE HEADING ===== */
.page-heading {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--ink);
  letter-spacing: -.02em;
}

/* ===== SEARCH ===== */
.blog-search {
  display: flex;
  margin-bottom: 2.5rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.blog-search input {
  flex: 1;
  padding: .75rem 1.1rem;
  background: var(--white);
  border: none;
  font-family: var(--font-sans);
  font-size: .9rem;
  color: var(--ink);
  outline: none;
}
.blog-search input::placeholder { color: var(--ink-muted); }
.blog-search button {
  padding: .75rem 1.25rem;
  background: var(--ink);
  border: none;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
}
.blog-search button:hover { background: var(--amber); }

/* ===== POST GRID — list style ===== */
.post-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.post-grid--small { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1.25rem; }

.post-card {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.post-card:first-child { border-top: 1px solid var(--rule); }

.post-grid--small .post-card {
  grid-template-columns: 1fr;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  background: var(--white);
  transition: box-shadow .2s, transform .2s;
}
.post-grid--small .post-card:first-child { border-top: 1px solid var(--rule); }
.post-grid--small .post-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.post-thumb {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 16/9;
  order: 2;
}
.post-grid--small .post-thumb { border-radius: 0; order: 0; }
.post-thumb img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.post-card:hover .post-thumb img { transform: scale(1.03); }

.post-card-body { order: 1; display: flex; flex-direction: column; gap: .35rem; }
.post-grid--small .post-card-body { padding: 1rem; }

.post-cat {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--amber);
  display: inline-block;
}
.post-card h2 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
.post-card h2 a { color: inherit; }
.post-card h2 a:hover { color: var(--amber); text-decoration: none; }
.post-card h4 { font-family: var(--font-serif); font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.post-card h4 a { color: inherit; }
.post-card h4 a:hover { color: var(--amber); text-decoration: none; }

.post-excerpt { font-size: .87rem; color: var(--ink-soft); line-height: 1.6; }
.post-meta { display:flex; gap:.9rem; font-size:.72rem; color:var(--ink-muted); margin-top:.2rem; }
.post-date { font-size:.72rem; color:var(--ink-muted); }
.no-posts { color:var(--ink-muted); padding:3rem 0; font-style:italic; }

/* ===== SINGLE POST ===== */
.breadcrumb { font-size:.75rem; color:var(--ink-muted); margin-bottom:2rem; }
.breadcrumb a { color:var(--ink-muted); }
.breadcrumb a:hover { color:var(--amber); text-decoration:none; }

.post-single { max-width: var(--content-w); }
.post-single h1 {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: .75rem 0 1.25rem;
}
.post-hero-img { width:100%; aspect-ratio:16/9; object-fit:cover; margin:1.5rem 0 2rem; border-radius:var(--radius); }

.post-content { font-size:1.05rem; line-height:1.85; color:var(--ink-soft); }
.post-content h2 { font-family:var(--font-serif); font-size:1.55rem; font-weight:700; color:var(--ink); margin:2.5rem 0 .75rem; letter-spacing:-.01em; }
.post-content h3 { font-family:var(--font-serif); font-size:1.2rem; font-weight:600; color:var(--ink); margin:2rem 0 .5rem; }
.post-content p { margin-bottom:1.25rem; }
.post-content ul, .post-content ol { margin:1rem 0 1.25rem 1.5rem; }
.post-content li { margin-bottom:.5rem; }
.post-content img { margin:1.5rem 0; border-radius:var(--radius-sm); }
.post-content a { color:var(--amber); border-bottom:1px solid var(--amber-light); }
.post-content a:hover { text-decoration:none; border-bottom-color:var(--amber); }
.post-content blockquote {
  border-left:3px solid var(--amber);
  padding:1rem 1.5rem;
  background:var(--amber-pale);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  margin:2rem 0;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:1.1rem;
  color:var(--ink-soft);
}
.post-content pre { background:var(--ink); color:#e8dfd4; padding:1.25rem 1.5rem; border-radius:var(--radius); overflow-x:auto; font-family:var(--font-mono); font-size:.85rem; margin:1.5rem 0; line-height:1.6; }
.post-content code { background:var(--paper-warm); padding:.15em .4em; border-radius:3px; font-family:var(--font-mono); font-size:.88em; }
.post-content pre code { background:none; padding:0; }
.post-content table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.9rem; }
.post-content th { background:var(--paper-warm); border:1px solid var(--rule); padding:.6rem .9rem; text-align:left; font-weight:600; }
.post-content td { border:1px solid var(--rule); padding:.6rem .9rem; }
.post-content tr:nth-child(even) td { background:var(--paper); }
.post-content img.float-left  { float:left;  margin:0 1.5rem 1rem 0; }
.post-content img.float-right { float:right; margin:0 0 1rem 1.5rem; }
.post-content img.align-center { display:block; margin:1.5rem auto; }
.post-content img.inline-img { display:inline-block; margin:4px; vertical-align:middle; }

.share-bar {
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--rule);
  display:flex; gap:.75rem; align-items:center; flex-wrap:wrap;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted);
}
.share-bar a { background:var(--paper-warm); border:1px solid var(--rule); padding:.4rem .9rem; border-radius:var(--radius-sm); color:var(--ink-soft); font-size:.75rem; transition:all .2s; }
.share-bar a:hover { background:var(--ink); color:var(--white); text-decoration:none; border-color:var(--ink); }

.tag-list { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.tag { display:inline-block; background:var(--paper-warm); border:1px solid var(--rule); padding:.2rem .65rem; border-radius:2px; font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); transition:all .2s; }
.tag:hover { background:var(--amber); color:var(--white); border-color:var(--amber); text-decoration:none; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:.5rem; }

.related-posts { margin:2.5rem 0; padding-top:2rem; border-top:2px solid var(--ink); }
.related-posts h3 { font-family:var(--font-serif); font-size:1.1rem; font-weight:700; margin-bottom:1.25rem; }

/* ===== COMMENTS ===== */
.comments-section { margin-top:3rem; padding-top:2rem; border-top:2px solid var(--ink); }
.comments-section h3 { font-family:var(--font-serif); font-size:1.3rem; font-weight:700; margin-bottom:1.75rem; }
.comment-list { display:flex; flex-direction:column; gap:0; margin-bottom:2.5rem; }
.comment-item { padding:1.25rem 0; border-bottom:1px solid var(--rule); }
.comment-author { font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:.35rem; }
.comment-author span { font-weight:400; font-size:.75rem; color:var(--ink-muted); margin-left:.5rem; }
.comment-body { font-size:.9rem; color:var(--ink-soft); line-height:1.65; }
.no-comments { color:var(--ink-muted); font-style:italic; margin-bottom:1.5rem; font-size:.9rem; }
.comment-form h4 { font-family:var(--font-serif); font-size:1.1rem; font-weight:700; margin-bottom:1.25rem; }
.comment-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.comment-form input, .comment-form textarea { width:100%; padding:.7rem 1rem; background:var(--white); border:1.5px solid var(--rule); border-radius:var(--radius-sm); color:var(--ink); font-family:var(--font-sans); font-size:.88rem; transition:border-color .2s; outline:none; }
.comment-form input:focus, .comment-form textarea:focus { border-color:var(--ink); }
.comment-form textarea { resize:vertical; margin-bottom:1rem; }
.btn-submit { background:var(--ink); color:var(--white); font-family:var(--font-sans); font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; border:none; padding:.75rem 1.75rem; border-radius:var(--radius-sm); cursor:pointer; transition:background .2s; }
.btn-submit:hover { background:var(--amber); }
@media(max-width:600px){ .comment-form .form-row { grid-template-columns:1fr; } }

/* ===== SIDEBAR ===== */
.blog-sidebar { font-size:.88rem; }
.sidebar-box { margin-bottom:2.5rem; padding-bottom:2rem; border-bottom:1px solid var(--rule); }
.sidebar-box:last-child { border-bottom:none; }
.sidebar-box h3 { font-family:var(--font-sans); font-size:.65rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:1rem; padding-bottom:.5rem; border-bottom:2px solid var(--amber); display:inline-block; }
.cat-list { list-style:none; }
.cat-list li { border-bottom:1px solid var(--rule); }
.cat-list li:last-child { border-bottom:none; }
.cat-list a { display:flex; justify-content:space-between; padding:.55rem 0; color:var(--ink-soft); font-size:.85rem; transition:color .15s; }
.cat-list a:hover { color:var(--amber); text-decoration:none; }
.cat-list span { color:var(--ink-muted); font-size:.75rem; }
.cat-list li.active a { color:var(--amber); font-weight:500; }

/* ===== PAGINATION ===== */
.blog-pagination { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--rule); }
.blog-pagination ul { display:flex; gap:.4rem; list-style:none; flex-wrap:wrap; }
.blog-pagination a { display:block; padding:.5rem .9rem; background:var(--white); border:1.5px solid var(--rule); border-radius:var(--radius-sm); color:var(--ink-soft); font-size:.82rem; font-weight:500; transition:all .15s; }
.blog-pagination li.active a { background:var(--ink); color:var(--white); border-color:var(--ink); }
.blog-pagination a:hover { border-color:var(--ink); text-decoration:none; }

/* ===== FOOTER ===== */
.blog-footer { background:var(--ink); color:rgba(255,255,255,.45); margin-top:5rem; padding:2.5rem 2rem; text-align:center; font-size:.78rem; letter-spacing:.03em; }
.blog-footer a { color:rgba(255,255,255,.5); }
.blog-footer a:hover { color:var(--white); text-decoration:none; }
.footer-links { margin-top:.6rem; display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; }
.blog-footer .footer-brand { font-family:var(--font-serif); font-size:1.1rem; color:var(--white); margin-bottom:.5rem; display:block; }

/* ===== MESSAGES ===== */
.msg-success { background:#f0fdf4; border:1px solid #86efac; color:#166534; padding:.85rem 1.1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:.88rem; }
.msg-error   { background:#fef2f2; border:1px solid #fca5a5; color:#991b1b; padding:.85rem 1.1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:.88rem; }
.cat-desc { color:var(--ink-muted); margin-bottom:2rem; font-size:.95rem; font-style:italic; padding-bottom:1.5rem; border-bottom:1px solid var(--rule); }

@media(max-width:700px){
  .post-card { grid-template-columns:1fr; }
  .post-thumb { order:0; }
  .post-card-body { order:1; }
  .post-single h1 { font-size:1.8rem; }
  .blog-nav { gap:1.2rem; font-size:.72rem; }
}