/**
 * TECHNO — blog.css
 * Loads: blog index, archives, single posts, classic pages, search, 404.
 */

/* post grid */
.tch-posts{display:grid;gap:14px}
.tch-posts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tch-posts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tch-pcard{position:relative;display:flex;flex-direction:column;border-radius:var(--tch-radius);background:#fff;overflow:hidden;transition:box-shadow .6s var(--tch-ease),transform .6s var(--tch-ease)}
.tch-pcard:hover{box-shadow:var(--tch-shadow-l)}
.tch-pcard__img{display:block;aspect-ratio:16/11;overflow:hidden;background:var(--tch-bg-soft)}
.tch-pcard__img img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 1.4s var(--tch-ease)}
.tch-pcard:hover .tch-pcard__img img{transform:scale(1.07)}
.tch-pcard__ph{display:flex;align-items:center;justify-content:center;block-size:100%;color:rgba(var(--tch-primary-rgb),.25);background:repeating-linear-gradient(90deg,var(--tch-bg-soft) 0 18px,#E4E1DB 18px 20px)}
.tch-pcard__b{position:relative;padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.tch-pcard__m{display:flex;gap:14px;color:var(--tch-body)}
.tch-pcard__m span{color:var(--tch-primary)}
.tch-pcard__t{font-size:16.5px;letter-spacing:-.018em;line-height:1.25;margin:0;padding-inline-end:40px}
.tch-pcard__t a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--tch-ease)}
.tch-pcard:hover .tch-pcard__t a{background-size:100% 1px}
.tch-pcard__x{margin:0;font-size:13.5px;line-height:1.6}
.tch-pcard__go{position:absolute;inset-inline-end:22px;inset-block-start:24px;inline-size:38px;block-size:38px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--tch-line);display:flex;align-items:center;justify-content:center;color:var(--tch-ink);transition:all .5s var(--tch-ease)}
.tch-pcard:hover .tch-pcard__go{background:var(--tch-primary);color:#fff;box-shadow:none;transform:rotate(-45deg)}
@media (max-width:980px){.tch-posts--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tch-posts--3,.tch-posts--2{grid-template-columns:minmax(0,1fr)}}

/* pagination */
.tch-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-block-start:56px}
.tch-pager .page-numbers,.tch-pager>span,.tch-pager>a{min-inline-size:40px;block-size:40px;padding-inline:12px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--tch-line);font-size:14px;color:var(--tch-ink);transition:all .4s var(--tch-ease)}
.tch-pager a.page-numbers:hover{background:var(--tch-ink);color:#fff;box-shadow:none}
.tch-pager .current{background:var(--tch-primary);color:#fff;box-shadow:none}
.tch-pager .prev .tch-ic{transform:scaleX(-1)}

/* article */
.tch-article{padding-block:clamp(60px,7vw,100px) 20px}
.tch-article__wrap{max-inline-size:900px}
.tch-article__meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--tch-body);margin-block-end:34px}
.tch-article__meta a{color:var(--tch-primary)}
.tch-article__fig{margin:0 0 44px;border-radius:var(--tch-radius);overflow:hidden}
.tch-article__fig img{inline-size:100%}
.tch-prose{font-size:16px;line-height:1.85;color:#3A4650}
.tch-prose>*+*{margin-block-start:1.15em}
.tch-prose h2{font-size:clamp(21px,1.8vw,26px);margin-block-start:1.8em}
.tch-prose h3{font-size:clamp(17px,1.4vw,20px);margin-block-start:1.6em}
.tch-prose a{color:var(--tch-primary);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--tch-ease)}
.tch-prose a:hover{background-size:0 1px}
.tch-prose img,.tch-prose figure{border-radius:var(--tch-radius)}
.tch-prose figure{margin-inline:0}
.tch-prose figcaption{font-size:13px;color:var(--tch-body);margin-block-start:10px}
.tch-prose blockquote{margin:2em 0;padding:22px 26px;border-radius:var(--tch-radius);background:#fff;font-size:17.5px;line-height:1.5;color:var(--tch-ink);border-inline-start:3px solid var(--tch-primary)}
.tch-prose ul,.tch-prose ol{padding-inline-start:1.2em}
.tch-prose li::marker{color:var(--tch-primary)}
.tch-prose table{inline-size:100%;border-collapse:collapse;font-size:15px}
.tch-prose th,.tch-prose td{padding:12px 14px;border-block-end:1px solid var(--tch-line);text-align:start}
.tch-prose pre{background:var(--tch-dark);color:#E9ECEE;padding:20px;border-radius:14px;overflow:auto;font-size:14px}
.tch-article__tags{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:40px}
.tch-article__tags a{font-size:12.5px;padding:7px 13px;border-radius:999px;background:var(--tch-bg-soft);transition:all .4s}
.tch-article__tags a:hover{background:var(--tch-ink);color:#fff}
.tch-pnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-block-start:60px}
.tch-pnav__a{position:relative;block-size:150px;border-radius:var(--tch-radius);overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;isolation:isolate;background:var(--tch-slate)}
.tch-pnav__a img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--tch-ease)}
.tch-pnav__a::after{content:"";position:absolute;inset:0;background:rgba(9,15,21,.62);z-index:-1;transition:background .5s}
.tch-pnav__a:hover::after{background:rgba(var(--tch-primary-rgb),.75)}
.tch-pnav__a:hover img{transform:scale(1.08)}
.tch-pnav__a b{font-weight:500;font-size:15.5px;margin-block-start:8px;line-height:1.3}
.tch-pnav__a .tch-mono{opacity:.75}
.tch-pnav__a--next{text-align:end;align-items:flex-end}

/* comments */
.tch-comments{margin-block:60px 40px}
.tch-comments__h{font-size:26px}
.tch-comments__list{list-style:none;padding:0}
.tch-comments__list .comment-body{padding:22px;border-radius:16px;background:#fff;margin-block-end:12px}
.tch-comments__list .children{list-style:none;padding-inline-start:28px}
.comment-respond{margin-block-start:34px}
.comment-form{display:grid;gap:16px}
.comment-form .form-submit{margin:0}

/* search & rows */
.tch-search-bar{max-inline-size:760px;margin-block-end:34px}
.tch-sform{display:flex;align-items:center;gap:10px;padding:8px;border-radius:999px;background:#fff;box-shadow:var(--tch-shadow-s)}
.tch-sform__ic{padding-inline-start:14px;color:var(--tch-body);display:flex}
.tch-sform__in{flex:1;border:0!important;box-shadow:none!important;background:transparent!important;padding:10px 4px!important}
.tch-blog__count{color:var(--tch-body);margin-block-end:14px}
.tch-results{border-block-start:1px solid var(--tch-line)}
.tch-row{display:grid;grid-template-columns:140px minmax(0,1fr) 40px;gap:20px;align-items:center;padding:22px 16px;border-block-end:1px solid var(--tch-line);border-radius:14px;position:relative;transition:background .45s,padding .5s var(--tch-ease)}
.tch-row::before{content:"";position:absolute;inset-inline-start:0;inset-block:18px;inline-size:3px;border-radius:3px;background:var(--tch-primary);transform:scaleY(0);transition:transform .45s var(--tch-ease)}
.tch-row:hover{background:#fff;padding-inline-start:26px;border-block-end-color:transparent}
.tch-row:hover::before{transform:scaleY(1)}
.tch-row__type{color:var(--tch-primary)}
.tch-row__t b{display:block;font-weight:500;font-size:15px;color:var(--tch-ink)}
.tch-row__t span{display:block;font-size:14px;margin-block-start:4px}
.tch-row__go{inline-size:36px;block-size:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--tch-line);color:var(--tch-ink);transition:all .45s var(--tch-ease)}
.tch-row:hover .tch-row__go{background:var(--tch-primary);color:#fff;box-shadow:none;transform:rotate(-45deg)}
@media (max-width:700px){.tch-row{grid-template-columns:minmax(0,1fr) 36px}.tch-row__type{grid-column:1 / -1}}

/* empty & 404 */
.tch-empty{text-align:center;padding:70px 20px;border-radius:var(--tch-panel-radius);background:#fff;max-inline-size:760px;margin-inline:auto}
.tch-empty__mark{color:var(--tch-primary);margin-inline:auto;margin-block-end:20px}
.tch-empty .tch-sform{margin-block-start:26px}
.tch-404__in{max-inline-size:760px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:34px}
.tch-404__n{display:inline-flex;align-items:center;gap:14px;font-size:clamp(72px,9vw,120px);font-weight:500;letter-spacing:-.06em;line-height:1;color:var(--tch-ink)}
.tch-404__mark{color:var(--tch-primary);block-size:.72em;inline-size:auto;animation:tch-float 5s ease-in-out infinite}
@keyframes tch-float{50%{transform:translateY(-10px) rotate(-4deg)}}
.tch-404 .tch-sform{inline-size:100%}