/* ==============================
   RESET & BASE
============================== */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Poppins', sans-serif; 
}
body { 
  background: #f4f6f8; 
  color: #333; 
  line-height: 1.6; 
}

/* ==============================
   HEADER
============================== */  
.header {  
  position: sticky;  
  top: 0;  
  background: #5D4037;  
  color: #fff;  
  z-index: 1000;  
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);  
  height: 60px;  
}  
.header-container {  
  max-width: 1140px;  
  margin: 0 auto;  
  padding: 0 20px;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  height: 100%;  
}  
.logo img { height: 40px; object-fit: contain; }  

/* ==============================
   MENU
============================== */  
.menu { list-style: none; display: flex; gap: 18px; }  
.menu li a {  
  color: #FFF3E0;  
  text-decoration: none;  
  font-weight: 500;  
  padding: 5px 12px;  
  border-radius: 5px;  
  transition: background 0.3s, color 0.3s;  
  font-size: 0.95em;  
}  
.menu li a:hover { background: #D7CCC8; color: #5D4037; }  

/* ==============================
   MOBILE MENU
============================== */  
.hamburger {  
  display: none;  
  font-size: 28px;  
  cursor: pointer;  
  color: #FFF3E0;  
}  

.mobile-menu {  
  position: fixed;  
  top: 0;  
  right: -250px;  
  width: 250px;  
  height: 100%;  
  background: #5D4037;  
  box-shadow: -2px 0 5px rgba(0,0,0,0.2);  
  transition: right 0.3s ease;  
  z-index: 9999;  
  padding-top: 50px;  
  display: flex;  
  flex-direction: column;  
}  

.mobile-menu .close-btn {  
  color: #FFF3E0;  
  font-size: 24px;  
  padding: 10px 20px;  
  cursor: pointer;  
  position: absolute;  
  top: 10px;  
  right: 10px;  
}  

.mobile-menu a {  
  color: #FFF3E0;  
  text-decoration: none;  
  padding: 12px 20px;  
  border-bottom: 1px solid #6d4c41;  
  font-weight: 500;  
}  

.mobile-menu a:hover { background: #D7CCC8; color: #5D4037; }  

/* Overlay fix (prevents click blocking) */
.overlay {  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background: rgba(0,0,0,0.4);  
  z-index: 998;  
  display: none;  
  pointer-events: none; /* IMPORTANT FIX */
}

/* ==============================
   LAYOUT
============================== */  
.main-wrapper { 
  display: flex; 
  max-width: 1140px; 
  margin: 30px auto; 
  gap: 20px; 
}  
.content { flex: 3; }  

/* ==============================
   POSTS GRID
============================== */  
.posts-grid {  
  display: grid;  
  grid-template-columns: repeat(2, 1fr);  
  gap: 20px 15px;  
}  

.post-card {  
  background: #fff;  
  border: 1.2px solid #ccc;  
  border-radius: 10px;  
  overflow: hidden;  
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);  
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;  
  position: relative;  
  padding-bottom: 10px;  
  pointer-events: auto; /* FIX for clicks */
}  

.post-card:hover {  
  transform: translateY(-5px) scale(1.01);  
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);  
  border-color: #ff6b6b;  
}  

/* ✅ BIGGER THUMBNAIL */
.post-card img {  
  width: 95%;  /* INCREASED */
  margin: 12px auto 0;  
  height: 150px; /* SLIGHTLY SHORTER */
  object-fit: cover;  
  border-radius: 6px;  
  display: block;  
  transition: transform 0.3s;  
}  

.post-card img:hover { transform: scale(1.03); }  

/* ✅ NARROWER TITLE + DESCRIPTION */
.post-card h2 {  
  margin: 12px auto 8px;  
  max-width: 78%;  
  font-size: 1.05em;  
  color: #1a1a2e;  
}  

.post-card p {  
  margin: 0 auto 12px;  
  max-width: 78%;  
  color: #555;  
  font-size: 0.88em;  
  line-height: 1.4;  
}  

/* ==============================
   BUTTON
============================== */  
.btn {  
  display: inline-block;  
  margin: 20px auto;  
  padding: 8px 25px;  
  background: #ff6b6b;  
  color: #fff;  
  text-decoration: none;  
  border-radius: 5px;  
  font-weight: 500;  
  font-size: 0.95em;  
  text-align: center;  
  transition: background 0.3s;  
}  

.btn:hover { background: #e55b5b; }  

/* ==============================
   SIDEBAR
============================== */  
.sidebar { flex: 1; height: fit-content; }  

.direct-links {  
  background: #fff;  
  padding: 16px;  
  border: 2px solid #f0f0f0;  
  border-radius: 10px;  
  box-shadow: 0 0 5px rgba(0,0,0,0.05);  
  width: 100%;  
  max-width: 420px;  
  margin: 0 auto;  
}  

.direct-links a {  
  display: block;  
  background: #f9f9f9;  
  border-left: 5px solid #007bff;  
  margin: 6px 0;  
  padding: 8px 16px;  
  border-radius: 6px;  
  text-decoration: none;  
  color: #333;  
  font-weight: 500;  
}  

.direct-links a:hover {  
  background: #007bff;  
  color: #fff;  
}  

/* ==============================
   FOOTER
============================== */  
footer {  
  margin-top: 50px;  
  background: #1a1a2e;  
  color: #fff;  
  text-align: center;  
  padding: 20px;  
  font-size: 0.9em;  
}  

/* ==============================
   MOBILE FIXES (MOST IMPORTANT)
============================== */  

@media(max-width: 900px) { 
  .main-wrapper { flex-direction: column; } 
}

@media(max-width: 768px) {   
  .menu { display: none; }  
  .hamburger { display: block; }  
  .posts-grid { grid-template-columns: 1fr; }  

  /* ✅ HOME: SHOW ONLY 2 POSTS */
  body.home-page .post-card:nth-child(n+3) { 
    display: none; 
  }

  /* ✅ EXPLORE: SHOW ALL POSTS */
  body.explore-page .post-card { 
    display: block !important; 
  }

  /* Keep text readable on mobile */
  .post-card h2,
  .post-card p { 
    max-width: 92%; 
  }
}