/**
 * DataAssist-IO — custom blog listing (/blog/). Dark theme, responsive 3->2->1
 * card grid, live search + category filter + sort + infinite scroll (dhp-blog.js).
 */
.dhp-blog-page{ background:#000; }
.dhp-blog-page :is(h1,h2,h3,h4){ color:#ecebf3 !important; }
.dhp-blog{
  max-width:1180px; margin:0 auto; padding:54px 22px 96px; min-height:70vh;
  color:#ecebf3; line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.dhp-blog *{ box-sizing:border-box; }
.dhp-blog-head{ text-align:center; margin:0 auto 30px; max-width:640px; }
.dhp-blog-head .k{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#7aadf2; margin-bottom:12px; }
.dhp-blog-head h1{ font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.02em; margin:0 0 10px; }
.dhp-blog-head p{ color:#a6a4b2; font-size:16px; margin:0; }

/* toolbar: search | category | sort */
.dhp-blog-toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:0 0 32px; }
.dhp-blog-search{ position:relative; flex:1 1 300px; min-width:220px; }
.dhp-blog-search input{ width:100%; background:#0e0e15; border:1px solid #26262f; color:#ecebf3;
  border-radius:11px; padding:12px 14px 12px 40px; font-size:14.5px; outline:none; transition:border-color .15s; }
.dhp-blog-search input::placeholder{ color:#6b6a76; }
.dhp-blog-search input:focus{ border-color:#3b82f6; }
.dhp-blog-search::before{ content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2523a6a4b2%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; pointer-events:none; }
.dhp-blog-cat, .dhp-blog-sort{ background:#0e0e15; border:1px solid #26262f; color:#ecebf3;
  border-radius:11px; padding:12px 15px; font-size:14px; font-weight:600; cursor:pointer;
  transition:border-color .15s,color .15s; }
.dhp-blog-cat{ min-width:160px; appearance:none; -webkit-appearance:none;
  /* the theme forces select height:40px; with border-box + vertical padding the
     content box gets shorter than the line-height and clips the text. Zero the
     vertical padding and center the value with line-height instead. */
  height:40px; line-height:38px; padding:0 34px 0 15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23a6a4b2' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.dhp-blog-cat:hover, .dhp-blog-sort:hover{ border-color:#3b82f6; }
.dhp-blog-sort{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.dhp-blog-sort .ic{ color:#7aadf2; font-size:15px; line-height:1; }

/* grid: max 3 per row -> 2 -> 1 */
.dhp-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .dhp-blog-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:600px){ .dhp-blog-grid{ grid-template-columns:1fr; }
  .dhp-blog-toolbar{ gap:10px; } .dhp-blog-cat, .dhp-blog-sort{ flex:1 1 auto; } }

.dhp-card{ display:flex; flex-direction:column; background:#0c0c12; border:1px solid #1c1c26;
  border-radius:14px; overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.dhp-card:hover{ transform:translateY(-3px); border-color:#3b82f6; box-shadow:0 14px 34px rgba(0,0,0,.5); }
.dhp-card-img{ position:relative; aspect-ratio:16/9; background:#111119; overflow:hidden; }
.dhp-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.dhp-card:hover .dhp-card-img img{ transform:scale(1.04); }
.dhp-card-ph{ background:linear-gradient(135deg,#0e1830,#161125); }
.dhp-card-ph::after{ content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2790%27%20height%3D%2763%27%20viewBox%3D%270%200%20800%20560%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-width%3D%2722%27%3E%3Cline%20x1%3D%27120%27%20y1%3D%27200%27%20x2%3D%27220%27%20y2%3D%27200%27%20stroke%3D%27%238ec5ff%27%20opacity%3D%270.9%27%2F%3E%3Cline%20x1%3D%27250%27%20y1%3D%27200%27%20x2%3D%27345%27%20y2%3D%27200%27%20stroke%3D%27%2356a8ff%27%2F%3E%3Cline%20x1%3D%27160%27%20y1%3D%27250%27%20x2%3D%27240%27%20y2%3D%27250%27%20stroke%3D%27%2356a8ff%27%20opacity%3D%270.9%27%2F%3E%3Cline%20x1%3D%27270%27%20y1%3D%27250%27%20x2%3D%27395%27%20y2%3D%27250%27%20stroke%3D%27%232f80ed%27%2F%3E%3Cline%20x1%3D%27100%27%20y1%3D%27300%27%20x2%3D%27180%27%20y2%3D%27300%27%20stroke%3D%27%238ec5ff%27%20opacity%3D%270.85%27%2F%3E%3Cline%20x1%3D%27210%27%20y1%3D%27300%27%20x2%3D%27350%27%20y2%3D%27300%27%20stroke%3D%27%232f80ed%27%2F%3E%3Cline%20x1%3D%27380%27%20y1%3D%27300%27%20x2%3D%27430%27%20y2%3D%27300%27%20stroke%3D%27%2356a8ff%27%2F%3E%3Cline%20x1%3D%27170%27%20y1%3D%27350%27%20x2%3D%27260%27%20y2%3D%27350%27%20stroke%3D%27%2356a8ff%27%20opacity%3D%270.9%27%2F%3E%3Cline%20x1%3D%27290%27%20y1%3D%27350%27%20x2%3D%27400%27%20y2%3D%27350%27%20stroke%3D%27%232f80ed%27%2F%3E%3Cline%20x1%3D%27140%27%20y1%3D%27400%27%20x2%3D%27220%27%20y2%3D%27400%27%20stroke%3D%27%238ec5ff%27%20opacity%3D%270.8%27%2F%3E%3Cline%20x1%3D%27250%27%20y1%3D%27400%27%20x2%3D%27370%27%20y2%3D%27400%27%20stroke%3D%27%2356a8ff%27%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27dhpSfGB%27%20x1%3D%270%27%20y1%3D%271%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23047857%27%2F%3E%3Cstop%20offset%3D%2755%25%27%20stop-color%3D%27%2310b981%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%236ee7b7%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27dhpSfGA%27%20x1%3D%270%27%20y1%3D%271%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%2310b981%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23a7f3d0%27%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%27dhpSfLC%27%3E%3Ccircle%20cx%3D%27500%27%20cy%3D%27280%27%20r%3D%27148%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%27url%28%23dhpSfLC%29%27%3E%3Cg%20fill%3D%27url%28%23dhpSfGB%29%27%3E%3Crect%20x%3D%27408%27%20y%3D%27320%27%20width%3D%2728%27%20height%3D%2760%27%20rx%3D%274%27%2F%3E%3Crect%20x%3D%27448%27%20y%3D%27298%27%20width%3D%2728%27%20height%3D%2782%27%20rx%3D%274%27%2F%3E%3Crect%20x%3D%27488%27%20y%3D%27270%27%20width%3D%2728%27%20height%3D%27110%27%20rx%3D%274%27%2F%3E%3Crect%20x%3D%27528%27%20y%3D%27240%27%20width%3D%2728%27%20height%3D%27140%27%20rx%3D%274%27%2F%3E%3Crect%20x%3D%27568%27%20y%3D%27210%27%20width%3D%2728%27%20height%3D%27170%27%20rx%3D%274%27%2F%3E%3C%2Fg%3E%3Cpolyline%20points%3D%27412%2C300%20452%2C278%20492%2C250%20532%2C222%20572%2C196%27%20fill%3D%27none%27%20stroke%3D%27url%28%23dhpSfGA%29%27%20stroke-width%3D%2710%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolygon%20points%3D%27572%2C176%20600%2C196%20572%2C216%27%20fill%3D%27url%28%23dhpSfGA%29%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27rotate%2845%20613%20393%29%27%3E%3Crect%20x%3D%27613%27%20y%3D%27371%27%20width%3D%27130%27%20height%3D%2744%27%20rx%3D%2722%27%20fill%3D%27%23ecebf3%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%27500%27%20cy%3D%27280%27%20r%3D%27160%27%20fill%3D%27none%27%20stroke%3D%27%23ecebf3%27%20stroke-width%3D%2718%27%2F%3E%3C%2Fsvg%3E") center/86px no-repeat; opacity:.5; }
.dhp-card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:9px; flex:1; }
.dhp-card-cat{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7aadf2; }
.dhp-card-title{ font-size:16.5px; font-weight:700; line-height:1.32; margin:0; }
.dhp-card-ex{ font-size:13.5px; color:#a6a4b2; line-height:1.55; margin:0; flex:1; }
.dhp-card-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; font-size:12.5px; }
.dhp-card-date{ color:#6b6a76; }
.dhp-card-read{ color:#7aadf2; font-weight:700; }

/* states */
.dhp-blog-status{ text-align:center; padding:30px 0 4px; min-height:20px; }
.dhp-blog-spin{ width:26px; height:26px; border:3px solid #26262f; border-top-color:#3b82f6;
  border-radius:50%; margin:0 auto; animation:dhpBlogSpin .8s linear infinite; }
@keyframes dhpBlogSpin{ to{ transform:rotate(360deg); } }
.dhp-blog-empty, .dhp-blog-end{ color:#a6a4b2; font-size:14px; margin:0; }
.dhp-blog-sentinel{ height:1px; }