/* --- Reset / base --- */
.blog-html-template{
  background: #fff !important;
}
.blog-html-template .page--blog { max-width: 1200px; margin: 0 auto; padding: 20px 16px; font-family: "Host Grotesk", system-ui, sans-serif; color:#0f2740; }
.blog-html-template .hero{ position: relative; border-radius: 18px; overflow:hidden; aspect-ratio: 16/7; margin-bottom: 36px; display:grid; place-items:end start; }
.blog-html-template .hero__image{ position:absolute; inset:0; background-size:cover; background-position:center; filter: saturate(1.05); }
.blog-html-template .hero__shade{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(3,34,48,.35) 40%, rgba(5,56,78,.82) 100%); }
.blog-html-template .hero__content{ position:relative; padding: 28px; color:#fff; max-width:70ch; }
.blog-html-template .hero__eyebrow{ font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; opacity:.9; margin-bottom:8px; }
.blog-html-template .hero__title{ font-weight:700; font-size: clamp(28px, 4.8vw, 44px); margin:0 0 12px 0; line-height:1.1; }
.blog-html-template .hero__excerpt{ font-size: 16px; opacity:.95; margin:0 0 16px 0; }
.blog-html-template .hero__cta{position:absolute; right:20px; bottom: 20px; width: 50px;z-index:20;}
.blog-html-template .hero__cta img{width:100%}

/* search */
.blog-html-template .search{ display:flex; align-items:center; gap:10px; margin: 0 auto 28px; max-width:40%; padding:6px 2px; border-bottom:1px solid #e5e7eb; }
.blog-html-template .search__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 8px 2px;
  font-size: 16px;
  color: #1f3d7a; /* Adjust as needed */
  box-shadow: none;
}

.blog-html-template .search__input::placeholder {
  color: #6b7280; /* Tailwind's gray-500 */
  border: none;
}

/* Optional: make border color change on focus */
.blog-html-template .search__input:focus {
  border: none;
  outline: none;
  background: transparent;
  /* Optional focus border color effect */
  box-shadow: none;
}
/* Optional: make border color change on focus */
.blog-html-template .search__input:active {
  border: none;
  outline: none;
  background: transparent;
  /* Optional focus border color effect */
  box-shadow: none;
}

/* post list grid */
.blog-html-template .post-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
@media (max-width:980px){ .post-list{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:620px){ .post-list{ grid-template-columns: 1fr; } }



/* loader */
.blog-html-template .feed-loader{ display:grid; place-items:center; padding:24px; color:#6b7280; }