/* ===== BLOG THEME ===== */
.blog-hero{
  background: radial-gradient(1200px 600px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
  linear-gradient(180deg, #001a3a 0%, #00122b 100%);
  padding: 90px 0 70px;
  color: #fff;
}
.blog-title{ font-size: clamp(34px, 4.4vw, 56px); margin: 0 0 10px; }
.blog-sub{ font-size: 18px; opacity: .85; max-width: 680px; }

/* animated gold line under titles (same vibe) */
.title-underline {
  position: relative;
  display: inline-block; /* keeps underline tight to the text */
}

.title-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;                 /* distance below text */
  height: 3px;
  width: 110px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d4af37, #ffe08a);
  transform-origin: left;
  animation: titleUnderline 2.4s ease-in-out infinite;
}

@keyframes titleUnderline {
  0%   { transform: scaleX(0); opacity: 0; }
  25%  { transform: scaleX(1); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}

/* sections */
.section.light{ background:#f2f4f7; padding: 70px 0; }
.section.navy{
  background: radial-gradient(900px 460px at 30% 0%, rgba(255,255,255,.08), transparent 60%),
  linear-gradient(180deg, #001a3a 0%, #00122b 100%);
  padding: 80px 0;
}
.section-title{ font-size: 34px; margin:0 0 10px; }
.section-sub{ margin:15px 0 24px; color:#4a5568; }
.section-title.on-navy, .section-sub.on-navy{ color:#fff; }
.section-sub.on-navy{ opacity:.82; }

/* current project card */
.project-card{
  display:flex;
  gap:26px;
  align-items:stretch;
  background:#fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.project-left{ flex: 1; min-width: 0; }
.project-pill{
  display:inline-block;
  font-weight:700;
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color:#0b1a33;
  background: rgba(202,161,42,.18);
  border: 1px solid rgba(202,161,42,.35);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.project-title{ margin:0 0 10px; font-size: 24px; }
.project-text{ margin:0 0 16px; color:#4a5568; line-height:1.55; }
.project-actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.project-updated{ color:#718096; font-size: 13px; }

.project-media{
  width: 320px;
  border-radius: 16px;
  overflow:hidden;
  background:#f3f4f6;
  flex: 0 0 auto;
}
.project-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 16px; border-radius: 999px; font-weight: 700; text-decoration:none; }
.btn-gold{ background:#caa12a; color:#04132a; }
.btn-gold:hover{ filter: brightness(1.03); }

/* filters */
.blog-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 22px;
}
.filter{
  text-decoration:none;
  color:#fff;
  opacity:.78;
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.filter.active{
  opacity:1;
  border-color: rgba(202,161,42,.55);
  background: rgba(202,161,42,.12);
}

/* posts */
.post-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.post-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(10px);
  color:#fff;
  min-height: 170px;
}
.post-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; gap: 10px; }
.post-pill{
  font-weight:700;
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: #ffd36a;
}
.post-date{ font-size: 12px; opacity: .72; }
.post-title{ margin:0 0 8px; font-size: 18px; line-height:1.25; }
.post-text{ margin:0 0 12px; opacity:.82; line-height:1.55; }
.post-media{ border-radius: 14px; overflow:hidden; background: rgba(255,255,255,.08); margin: 10px 0 10px; }
.post-media img{ width:100%; height: 160px; object-fit: cover; display:block; }
.post-link{ color:#ffd36a; font-weight:700; text-decoration:none; }
.post-link:hover{ text-decoration: underline; }

.empty-box{
  padding: 18px;
  border-radius: 16px;
  background:#fff;
  color:#4a5568;
  border: 1px solid rgba(0,0,0,.06);
}
.empty-box.on-navy{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  opacity:.9;
}

/* reveal animation */
.reveal{
  transform: translateY(14px);
  opacity: 0;
  transition: transform .55s ease, opacity .55s ease;
}
.reveal.in{
  transform: translateY(0);
  opacity: 1;
}

/* anchors */
.team-anchor{ position: relative; top: -90px; }

/* responsive */
@media (max-width: 980px){
  .post-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-card{ flex-direction: column; }
  .project-media{ width:100%; height: 220px; }
}
@media (max-width: 640px){
  .post-grid{ grid-template-columns: 1fr; }
  .blog-hero{ padding: 70px 0 55px; }
  .section.light{ padding: 55px 0; }
  .section.navy{ padding: 65px 0; }
}

/* ✅ Fix: keep PC alignment, but don't affect mobile */
@media (min-width: 992px){
  .blog-hero-inner{
    max-width: 1122px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 991px){
  .blog-hero-inner{
    max-width: none;     /* let it use full container width on phones */
    margin: 0;           /* remove desktop centering behavior */
  }
}