/* Blog-specific styles extracted from blog.html and enhanced for layered hero background */

/* Define custom properties for the blog page. These control the hero sizing,
   frost blur and tint, card blur, and noise layer settings. The variables
   mirror those from index.html so the look and feel remain consistent. */
:root {
  /* Adjust the minimum height of the hero banner here */
  --hero-min-h: 52vh;
  /* Global background blur for the frost layer */

 
}

:root {
      /* Frost controls */
      --frost-blur: 14px;
      --frost-tint: rgba(32, 32, 32, 0.815);

      /* Noise controls */
      --noise-opacity: 0.52;
      --noise-size: 76px;
    }


/* HERO — grow by content, no clipping */
.hero-blog{
  position: relative;
  display: grid;
  place-items: center;
  /* remove viewport constraint: */
  /* min-height: 52vh; */
  padding: 48px 0 56px;
  background: url("/img/blog_hero.png") center/cover no-repeat;
  border-bottom: 1px solid var(--line);
  /* don't hide overflow; let content define height */
  overflow: visible;
  isolation: isolate;
}
.hero-blog::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.22);
  z-index: 0;
}
.hero-frost{
  position:absolute; inset:0; z-index:1;
  background: var(--frost-tint);
  backdrop-filter: blur(var(--frost-blur)) saturate(115%);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .hero-frost{ background: rgba(20,20,22,.55); }
}

/* Grain layer (matches index) */
.noise-layer{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIj48ZmlsdGVyIGlkPSJuIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjE1IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+");
  background-repeat: repeat;
  background-size: var(--noise-size) var(--noise-size);
  opacity: var(--noise-opacity);
  mix-blend-mode: overlay;
}

/* Content card in hero (already above overlays) */
.hero-card{
  position: relative;
  z-index: 3;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width: 780px; width: min(92vw, 780px);
  padding: 44px 24px;
  border-radius: 22px;
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(120%);
}

.hero-card h1{
  margin:0 0 6px 0;
  font: 800 clamp(30px, 4.6vw, 44px)/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:#fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero-card p{
  margin: 6px 0 24px;
  max-width: 60ch;
  color: rgba(255,255,255,.82);
  font-size: 18px;
}

/* Search + categories */
.search-bar{ position:relative; width:100%; max-width:560px; }
.search-bar input{
  width:100%; padding:14px 16px 14px 46px; border:1px solid var(--line);
  border-radius:12px; background:#fff; font-size:16px; box-shadow:var(--shadow-sm);
}
.search-bar input::placeholder{ color: color-mix(in srgb, var(--muted) 80%, transparent); }
.search-bar svg{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; stroke:var(--muted);
}
.category-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; justify-content:center; }
.category{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:999px; font-size:14px; font-weight:700;
  border:1px solid var(--line); background:#fff;
  color: color-mix(in srgb, var(--ink) 85%, transparent);
  cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.category.active{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}

/* Posts grid + pagination */
.posts-section{ padding:60px 0; }
.posts-grid{ display:grid; gap:20px; }
@media (min-width:560px){ .posts-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:900px){ .posts-grid{ grid-template-columns: repeat(3,1fr); } }
.card.article .read{ padding:8px 14px; }

.pagination{ margin-top:40px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.pagination .page-btn{
  padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:#fff;
  font-weight:700; font-size:14px; cursor:pointer;
  color: color-mix(in srgb, var(--ink) 90%, transparent);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pagination .page-btn:hover{ background: color-mix(in srgb, var(--accent) 10%, #fff); }
.pagination .page-btn.active{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}
.pagination .page-btn.disabled{ opacity:.5; pointer-events:none; }

@media (max-width:600px){
  .hero-card{ padding: 34px 20px; }
}