/* Takwa community blog: index cards, article page, writer page, the writer's editor. Builds on front.css tokens. */

.tk-blog .tk-blogfilter{grid-template-columns:2fr 1fr auto}
.tk-bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin:0 0 26px}
.tk-bcard{display:flex;flex-direction:column;min-width:0;background:#fff;border:2.5px solid var(--tk-slate);border-radius:var(--tk-r);box-shadow:6px 6px 0 var(--tk-wave);overflow:hidden;transition:transform .15s,box-shadow .15s}
.tk-bcard:hover{transform:translateY(-2px);box-shadow:8px 8px 0 var(--tk-wave)}
.tk-bcard-img{display:block;aspect-ratio:1200/630;background:var(--tk-mist);border-bottom:2.5px solid var(--tk-slate);overflow:hidden}
.tk-bcard-img img{display:block;width:100%;height:100%;object-fit:cover}
.tk-bcard-ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--tk-wave),var(--tk-mist) 55%,var(--tk-sage))}
.tk-bcard-b{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1;min-width:0}
.tk-bcard-b .tk-pill{align-self:flex-start}
.tk-bcard-b h3{margin:0;font-size:20px;line-height:1.5;overflow-wrap:anywhere}
.tk-bcard-b h3 a{color:var(--tk-navy);text-decoration:none}
.tk-bcard-b h3 a:hover{color:var(--tk-blue);text-decoration:underline}
.tk-bcard-b p{margin:0;color:var(--tk-slate);font-size:15px;line-height:1.8;overflow-wrap:anywhere}
.tk-bcard-f{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px}
.tk-bcard-who{display:grid;min-width:0;line-height:1.5}
.tk-bcard-who b{color:var(--tk-navy);font-size:15px;overflow-wrap:anywhere}
.tk-bcard-who small{color:var(--tk-slate);font-size:13px}
.tk-ava-s{width:44px;height:44px;font-size:16px;box-shadow:none;border-width:2px}
.tk-pager{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 0 22px;color:var(--tk-slate)}

/* a single article */
.tk-art{max-width:760px}
.tk-art-by{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 20px}
.tk-art-by>span:not(.tk-ava):not(.tk-pill){display:grid;line-height:1.5;flex:1 1 200px;min-width:0}
.tk-art-by b{color:var(--tk-navy)}
.tk-art-by a{color:var(--tk-blue);font-weight:700}
.tk-art-by small{color:var(--tk-slate);font-size:14px}
.tk-art-cover{margin:0 0 24px;border:2.5px solid var(--tk-slate);border-radius:var(--tk-r);overflow:hidden;box-shadow:6px 6px 0 var(--tk-wave)}
.tk-art-cover img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.tk-art-body{font-size:18px;line-height:2;color:var(--tk-ink);overflow-wrap:anywhere}
.tk-art-body>*:first-child{margin-top:0}
.tk-art-body p{margin:0 0 1.1em}
.tk-art-body h2{font-size:clamp(22px,3.2vw,28px);margin:1.6em 0 .5em}
.tk-art-body h3{font-size:21px;margin:1.4em 0 .4em}
.tk-art-body ul,.tk-art-body ol{margin:0 0 1.2em;padding-inline-start:1.6em}
.tk-art-body li{margin:0 0 .4em}
.tk-art-body blockquote{margin:1.4em 0;padding:6px 20px;border-inline-start:5px solid var(--tk-blue);background:var(--tk-mist);border-radius:0 14px 14px 0;color:var(--tk-navy)}
.tk-art-body blockquote p{margin:.4em 0}
.tk-art-body a{color:var(--tk-blue);font-weight:600}
.tk-art-body img{max-width:100%;height:auto;border-radius:14px}
.tk-art-author{margin-top:34px;display:grid;gap:10px}
.tk-art-author h3{margin:0}
.tk-art-author p{margin:0}
.tk-art-author small{color:var(--tk-slate);font-weight:600}
.tk-art-author-h{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.tk-art-author-h>div{flex:1 1 200px;min-width:0}
.tk-actions-start{justify-content:flex-start}

/* writer page */
.tk-wcard{margin-bottom:10px}

/* the writer's own list */
.tk-mine{display:grid;gap:16px}
.tk-mine-row{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin:0}
.tk-mine-main{flex:1 1 280px;min-width:0}
.tk-mine-main h4{margin:0 0 6px;overflow-wrap:anywhere}
.tk-mine-main .tk-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tk-mine-note{margin:10px 0 0;font-weight:400}
.tk-mine-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tk-mine-acts form{margin:0}
.tk-mine-acts .tk-btn{min-height:40px;padding:0 18px;font-size:15px}
.tk-btn-danger{color:#8a2a1c!important;border-color:var(--tk-coral)}
.tk-btn-danger:hover{background:var(--tk-coral)!important;border-color:var(--tk-coral)!important;color:#fff!important}
.tk-gate{max-width:560px;margin-inline:auto}

/* editor */
.tk-artform .tk-fields{gap:18px}
.tk-artform input[type=text],.tk-artform input[type=date],.tk-artform textarea,.tk-artform select{width:100%;border:2px solid var(--tk-wave);border-radius:14px;padding:10px 14px;font:400 16px/1.7 inherit;font-family:inherit;background:#fff;color:inherit}
.tk-artform textarea{resize:vertical}
.tk-cover-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.tk-cover-row>div{flex:1 1 240px;min-width:0;display:grid;gap:8px}
.tk-cover-thumb{width:200px;max-width:100%;aspect-ratio:1200/630;object-fit:cover;border:2px solid var(--tk-wave);border-radius:12px}
.tk-editor{display:grid;gap:8px}
.tk-editor>label{display:block;font-weight:600;color:var(--tk-navy)}
.tk-tb{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--tk-mist);border:2px solid var(--tk-wave);border-radius:14px}
.tk-tb-b{min-height:38px;padding:0 14px;border-radius:10px;border:2px solid var(--tk-wave);background:#fff;color:var(--tk-navy);font:600 15px/1 inherit;font-family:inherit;cursor:pointer}
.tk-tb-b:hover{border-color:var(--tk-blue)}
.tk-tb-b:focus-visible{outline:3px solid var(--tk-wave);outline-offset:2px}
.tk-tb-b[aria-pressed=true]{background:var(--tk-blue);border-color:var(--tk-blue);color:#fff}
.tk-tb-prev{margin-inline-start:auto}
.tk-art-ta{min-height:320px}
.tk-art-preview{padding:18px 20px;border:2px dashed var(--tk-wave);border-radius:14px;background:#fff;min-height:220px}
.tk-counter{margin:0}
.tk-counter.is-short .tk-wc{color:var(--tk-coral)}
.tk-counter.is-ok .tk-wc{color:#2f6b45}
.tk-listed{margin-top:4px}

@media (max-width:700px){
	.tk-blog .tk-blogfilter{grid-template-columns:1fr}
	.tk-art-body{font-size:17px}
	.tk-mine-row{display:grid}
	.tk-tb-prev{margin-inline-start:0}
	.tk-cover-thumb{width:100%}
}

/* the same article preview inside wp-admin */
.tk-admin .tk-art-body{font-size:17px}

/* share + like under an article (0.7.12) */
.tk-engage{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin:30px 0 10px;padding:18px 0;border-block:2px dashed var(--tk-wave)}
.tk-like{min-width:0}
.tk-like-form{margin:0}
.tk-like-btn{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--tk-navy);background:#fff;color:var(--tk-navy);font:inherit;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
a.tk-like-btn:hover,button.tk-like-btn:hover{background:var(--tk-mist)}
.tk-like-btn:focus-visible,.tk-soc-copy:focus-visible,.tk-soc-native:focus-visible{outline:3px solid var(--tk-blue);outline-offset:3px}
.tk-wrap a.tk-like-btn{color:var(--tk-navy)}
.tk-like-btn:disabled{opacity:.6;cursor:progress}
.tk-like-btn .tk-heart{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;flex:none}
.tk-like-btn.is-on{background:#C95F49;border-color:#C95F49;color:#fff}
.tk-like-btn.is-on .tk-heart{fill:currentColor}
.tk-like-btn.is-static{cursor:default;border-style:dashed}
.tk-like-n{min-width:1.6em;padding:0 8px;border-radius:999px;background:var(--tk-mist);color:var(--tk-navy);font-size:14px;text-align:center}
.tk-like-btn.is-on .tk-like-n{background:rgba(255,255,255,.25);color:#fff}
.tk-like-n[hidden]{display:none}
.tk-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;min-width:0}
.tk-share-l{color:var(--tk-slate);font-weight:600;font-size:15px}
.tk-share-b{display:flex;flex-wrap:wrap;gap:10px}
.tk-engage .tk-soc{width:42px;height:42px;font-size:19px;border:0;padding:0;cursor:pointer;box-shadow:2px 2px 0 var(--tk-wave)}
.tk-engage .tk-soc[hidden]{display:none}
.tk-share-st{flex-basis:100%;color:var(--tk-blue);font-size:14px;font-weight:600}
.tk-share-st:empty{display:none}
@media (max-width:560px){.tk-engage{flex-direction:column;align-items:stretch}.tk-like-btn{width:100%;justify-content:center}}
@media print{.tk-engage{display:none}}