:root{
  --olive:#364025;
  --olive-2:#899064;
  --text:#404040;
  --muted:rgba(64,64,64,.8);
  --light:#f6f6f6;
  --container:1150px;
  --radius:10px;

  /* Adjustable heights */
  --feat-h: 1000px;  /* Featured image height */
  --card-h: 500px;  /* All Blog Post image height */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Poppins,sans-serif;
  color:#222;
  background:#fff;
  line-height:1.5;
}

.page{position:relative;width:100%; margin-bottom: 15px; margin-top: 20px;}
.wrap{max-width: calc(var(--container) + 2*24px); margin:0 auto; padding:0 24px}

/* tighter top/bottom spacing to match contact/projects */
.hero{padding:24px 0 16px}
.hero h1{
  margin:0 auto;
  max-width:700px;
  color:var(--olive);
  font-weight:600;
  font-size:30px;
  line-height:40px;
  text-align: center;
}

.hero p{
  margin:16px auto 0;
  max-width:500px;
  color:rgba(64,64,64,.8);
  font-weight:300;
  font-size:16px;
  line-height:30px;
  text-align:center; 
}

/* =======================
   FEATURED BLOG POST
   ======================= */
.featured{margin:48px auto 0; max-width:1226px}
.featured img{
  width:100%;
  height:var(--feat-h);           /* adjustable height */
  display:block;
  border-radius:var(--radius);
  object-fit:cover;              /* crop for consistent layout */
  object-position:center;
}
.featured-meta{
  display:flex; gap:12px; align-items:center; margin-top:24px;
  flex-wrap:wrap;
}
.date{
  color:#6B6B6B; font-size:15px; font-weight:300; line-height:30px;
}
.featured h2{
  margin:8px 0 12px;
  color:#899064;
  font-size:30px; 
  font-weight:600; 
  line-height:1.5;
  text-align:justify;
}
.summary{
  color:#6B6B6B;
  font-size:16px;
  font-weight:300;
  line-height:1.9;
  text-align:justify;
}
.pills{display:flex; gap:12px; margin-top:8px}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 18px; border-radius:20px;
  border:1px solid rgba(64,64,64,.8);
  color:rgba(64,64,64,.8);
  font-size:16px; font-weight:300; line-height:30px; text-decoration:none;
}

/* =======================
   ALL BLOG POSTS GRID
   ======================= */
.section-title{
  margin:56px 0 -30px; 
  color:var(--olive); 
  font-size:30px; 
  font-weight:600; 
  line-height:1.9;
  text-align:justify;
}
.section-title.olive{ color:var(--olive); }

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:28px;
  align-items:start;
  margin-bottom: 50px;
}
.post{
  grid-column: span 6;
  display:grid; grid-template-columns:1fr;
  gap:8px;
}
.post img{
  width:100%;
  height:var(--card-h);           /* uniform image height */
  border-radius:var(--radius);
  display:block;
  object-fit:cover;
  object-position:center;
}
.post .date{ margin-top:13px }
.post h3{
  margin:-4px 0 0; 
  color:#899064; 
  font-size:20px; 
  font-weight:600; 
  line-height:1.5;
  text-align:justify;
  min-height:56px; /* ensure same height across cards */
}
/* Featured summary (optional clamp; keep if you want to limit lines) */
.summary{
  color:#6B6B6B;
  font-size:16px;
  font-weight:300;
  line-height:1.9;
  text-align:justify;

  /* Multi-line clamp */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 3;  /* WebKit */
  line-clamp: 3;          /* Standard (fixes your linter warning) */
  overflow:hidden;
}

/* All Blog Posts summary */
.post .summary{
  margin-top:3px;
  color:#6B6B6B; 
  font-size:16px; 
  font-weight:300; 
  line-height:1.9; 
  text-align:justify;

  /* Multi-line clamp */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 3;  /* WebKit */
  line-clamp: 3;          /* Standard (fixes your linter warning) */
  overflow:hidden;

  min-height:calc(1.9em * 3); /* keep card heights aligned */
}

.post .pills{ margin-top:-6px }

.block{ margin-top:48px }

.after{ height: 48px }

/* =======================
   SEARCH BAR
   ======================= */
.search-bar{
  margin:10px auto 0;
  max-width:600px;
  display:flex;
  align-items:center;
  border:1px solid #000;
  border-radius:15px;
  background:#fff;
  overflow:hidden;
}
.search-bar input{
  flex:1;
  padding:12px 16px;
  border:none;
  outline:none;
  font-size:16px;
  font-family:Poppins;
  font-weight:300;
  color:#364025;
}
.search-bar button{
  background:none;
  border:none;
  padding:12px 16px;
  font-size:20px;
  cursor:pointer;
  color:#364025;
}
.search-bar button:hover{color:#000}

/* =======================
   RESPONSIVE STYLES
   ======================= */
@media (max-width: 1100px){
  .hero h1{font-size:30px; line-height:40px}
  .hero p{font-size:16px; line-height:28px}
  .post h3, .featured h2{font-size:20px; line-height:28px}
  .post .summary, .hero p{font-size:16px; line-height:28px}
}

/* match contact/projects top offset on mobile */
@media (max-width: 800px){
  .grid{grid-template-columns:1fr}
  .post{grid-column:1 / -1}
  .hero{padding-top:40px}

  :root{
    --feat-h: 300px; /* smaller featured image on mobile */
    --card-h: 200px; /* smaller card images */
  }
}

html { overflow-x: visible; }   
body { margin:0; padding:0; width:100%; overflow-x: hidden; }  

/* notice bar inside grid: keep p at 16/300 for consistency */
.grid.block > p {
  grid-column: 1 / -1;      
  padding: 12px 20px;
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: #555;
  background: #eef0e8;
  border: 1px solid #b5b98c;
  border-radius: 8px;
  margin-bottom: 55px;
}

.section-title + .grid.block { margin-top: 50px; }

/* reveal animation */
.page .reveal,
.page .reveal-part{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.page .reveal.in,
.page .reveal-part.in{
  opacity: 1;
  transform: none;
}

.page .featured.reveal,
.page .featured .reveal-part{ transition-duration: .8s; }

@media (prefers-reduced-motion: reduce){
  .page .reveal, .page .reveal-part{ opacity:1 !important; transform:none !important; transition:none !important; }
}