/* ==========================================================================
   Tarabichi — blog.css
   News index, archives, single post, search, 404 and default pages.
   ========================================================================== */

/* ---- Bar: filter + search ---- */
.tpp-blog__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; margin-block-end: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
.tpp-searchform { position: relative; display: flex; align-items: center; min-inline-size: min(100%, 17rem); }
.tpp-searchform .tpp-ic { position: absolute; inset-inline-start: 1rem; color: var(--tpp-body); pointer-events: none; }
.tpp-searchform input { inline-size: 100%; block-size: 3rem; padding-inline: 2.75rem 1.1rem; border: 1px solid var(--tpp-line); border-radius: 999px; background: #fff; font-size: .92rem; outline: none; transition: border-color .3s, box-shadow .3s; }
.tpp-searchform input:focus { border-color: var(--tpp-primary); box-shadow: 0 0 0 4px var(--tpp-primary-soft); }

/* ---- Featured post ---- */
.tpp-feat { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: #fff; border: 1px solid var(--tpp-line); border-radius: var(--tpp-radius); overflow: hidden; margin-block-end: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); transition: box-shadow .55s var(--tpp-ease), transform .55s var(--tpp-ease); }
.tpp-feat:hover { box-shadow: var(--tpp-shadow-m); transform: translateY(-4px); }
.tpp-feat__img { border-radius: 0; min-block-size: 22rem; display: block; }
.tpp-feat__img img, .tpp-feat__img .tpp-ph { position: absolute; inset: 0; }
.tpp-feat__tag { position: absolute; inset-block-start: 1.25rem; inset-inline-start: 1.25rem; background: var(--tpp-primary); color: #fff; padding: .35rem .85rem; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.tpp-feat__body { padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .9rem; }
.tpp-feat__title { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -.025em; }
.tpp-feat__title a:hover { color: var(--tpp-primary); }
.tpp-feat__ex { margin: 0; font-size: 1rem; }

/* ---- Article ---- */
.tpp-article__hero { aspect-ratio: 2 / 1; margin-block-end: 1.75rem; }
.tpp-article__meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block-end: 1.35rem; margin-block-end: 2rem; border-block-end: 1px solid var(--tpp-line); }
.tpp-share { display: flex; gap: .45rem; }
.tpp-share a, .tpp-share button { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; border: 1px solid var(--tpp-line); background: #fff; display: grid; place-items: center; color: var(--tpp-ink); transition: all .35s var(--tpp-ease); }
.tpp-share a:hover, .tpp-share button:hover { background: var(--tpp-primary); color: #fff; border-color: var(--tpp-primary); transform: translateY(-2px); }
.tpp-share button.is-copied { background: var(--tpp-ink); color: #fff; }
.tpp-entry > p:first-child { font-size: 1.2rem; line-height: 1.65; color: var(--tpp-ink); font-weight: 500; }
.tpp-pageBody .tpp-entry > p:first-child { font-size: inherit; color: inherit; font-weight: inherit; }
.tpp-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 2rem; }
.tpp-postnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block-start: 2.75rem; padding-block-start: 2rem; border-block-start: 1px solid var(--tpp-line); }
.tpp-postnav__it { display: grid; gap: .35rem; padding: 1.1rem 1.25rem; border-radius: var(--tpp-r-sm); transition: background-color .35s; }
.tpp-postnav__it:hover { background: var(--tpp-bg-soft); }
.tpp-postnav__it span { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--tpp-primary); font-weight: 600; }
.tpp-postnav__it b { color: var(--tpp-ink); font-size: .98rem; line-height: 1.4; }
.tpp-postnav__it--next { text-align: end; justify-items: end; }

/* ---- Comments ---- */
.tpp-comments { margin-block-start: 3rem; }
.tpp-comments__title { font-size: 1.3rem; margin-block-end: 1.25rem; }
.tpp-comments__list { list-style: none; display: grid; gap: 1rem; }
.tpp-comments .comment-body { padding: 1.25rem; border: 1px solid var(--tpp-line); border-radius: var(--tpp-r-sm); }
.tpp-comments .avatar { border-radius: 50%; float: inline-start; margin-inline-end: .85rem; }
.comment-respond { margin-block-start: 2rem; }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { inline-size: 100%; padding: .85rem 1rem; border: 1px solid var(--tpp-line); border-radius: 12px; }
.comment-form .submit { background: var(--tpp-primary); color: #fff; border: 0; border-radius: 999px; padding: .85rem 1.5rem; font-weight: 600; }

/* ---- Search ---- */
.tpp-search__box { margin-block-end: 1.5rem; }
.tpp-search__box .tpp-searchform { inline-size: 100%; }
.tpp-search__box input { block-size: 3.5rem; font-size: 1rem; }
.tpp-search__count { font-size: .88rem; margin-block-end: 1rem; }
.tpp-results { list-style: none; display: grid; gap: .75rem; }
.tpp-result a { display: flex; align-items: center; gap: 1.1rem; padding: .9rem; border: 1px solid var(--tpp-line); border-radius: var(--tpp-radius); background: #fff; transition: all .45s var(--tpp-ease); }
.tpp-result a:hover { box-shadow: var(--tpp-shadow-m); transform: translateY(-3px); border-color: transparent; }
.tpp-result a > .tpp-ar { color: var(--tpp-primary); flex: none; margin-inline-end: .5rem; transition: transform .35s var(--tpp-ease); }
.tpp-result a:hover > .tpp-ar { transform: translateX(4px); }
.tpp-result__img { inline-size: 5.5rem; block-size: 4.5rem; border-radius: 12px; overflow: hidden; flex: none; background: var(--tpp-bg-soft); }
.tpp-result__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tpp-result__img .tpp-ph { min-block-size: 0; }
.tpp-result__txt { display: grid; gap: .2rem; flex: 1; min-inline-size: 0; }
.tpp-result__txt b { color: var(--tpp-ink); font-size: 1rem; }
.tpp-result__txt > span:last-child { font-size: .86rem; }

/* ---- Empty / 404 ---- */
.tpp-empty { text-align: center; display: grid; justify-items: center; gap: .85rem; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem); border: 1px dashed #D6D0C7; border-radius: var(--tpp-radius); background: var(--tpp-paper); }
.tpp-empty h2 { font-size: 1.35rem; }
.tpp-empty p { margin: 0; }
.tpp-404__box { display: grid; gap: 1.5rem; justify-items: center; }
.tpp-404__box .tpp-searchform { inline-size: min(100%, 30rem); }
.tpp-404__acts { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.tpp-feat { grid-template-columns: minmax(0, 1fr); }
	.tpp-feat__img { min-block-size: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
	.tpp-postnav { grid-template-columns: minmax(0, 1fr); }
	.tpp-postnav__it--next { text-align: start; justify-items: start; }
	.tpp-searchform { inline-size: 100%; }
	.tpp-blog__bar .tpp-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; inline-size: 100%; padding-block-end: .2rem; }
	.tpp-blog__bar .tpp-filter__it { flex: none; }
}