/* Tarhestan — Page banner (برگه‌ها): breadcrumb, then a low image with the title on it.
 * Heights are low so the content starts early; the image is cropped with object-fit. */

.tph-wrap{max-width:var(--th-max,1320px);margin:1.25rem auto 1.5rem;padding:0 1rem;direction:rtl;text-align:right}
/* Breadcrumb under the banner — same tokens as the header (header.css :root). */
.tph-crumbs{
	margin:.9rem 0 0;font-size:.875rem;line-height:1.6;color:var(--th-muted,#6b7a75);
}
.tph-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;margin:0;padding:0;list-style:none}
.tph-crumbs li{display:flex;align-items:center;min-width:0;max-width:100%}
.tph-crumbs a,
.tph-crumbs span{
	display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .45rem;border-radius:8px;
	color:#82151dcf;text-decoration:none;transition:color .2s var(--th-ease,ease),background-color .2s var(--th-ease,ease);
}
.tph-crumbs a:hover{color:var(--th-primary,#0e7c66);background:var(--th-tint,#e8f3f0)}
.tph-crumbs a:focus-visible{outline:none;box-shadow:var(--th-ring,0 0 0 3px rgba(14,124,102,.3))}
.tph-crumbs [aria-current="page"]{
	color:#82151dcf;font-weight:700;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.tph-crumbs__sep{color:var(--th-line,#d9dedc);padding:0 .1rem}
.tph-crumbs__sep .th-i{color:#82151dcf}
@media (prefers-reduced-motion:reduce){
	.tph-crumbs a{transition:none}
}

.tph{margin:0}
.tph__media{
	position:relative;margin:0;height:clamp(150px,22vw,260px);overflow:hidden;border-radius:18px;background:#1f1518;
}
.tph__img{display:block;width:100%;height:100%;}
.tph__media::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(to top,rgba(20,10,12,.7) 0%,rgba(20,10,12,.15) 60%,transparent 100%);
}
.tph__title{
	position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,1.75rem);left:clamp(1rem,3vw,2rem);z-index:1;
	margin:0;font-size:clamp(1.25rem,2.6vw,2rem);font-weight:900;line-height:1.5;color:#fff;
	text-shadow:0 2px 14px rgba(0,0,0,.35);
}

/* Without an image: the title alone, as a normal heading. */
.tph--plain .tph__title{position:static;padding-bottom:.75rem;border-bottom:1px solid #ecdfe0;color:#1f1518}

@media (max-width:575px){
	.tph__media{height:160px;border-radius:14px}
	.tph-wrap{padding:0 .75rem}
}

@media (prefers-reduced-motion:reduce){
	.tph__media{transition:none}
}