/**
 * Al-Ansar Redesign — Title Bar / Page Hero (الصفحات الداخلية)
 * مصدر: html/about-strategy.html + gallery/news/matches
 * (انظر components/title-bar.md)
 *
 * @since Redesign 1.0
 */

.ar-title-bar{
	position:relative; min-height:60vh; display:flex; align-items:flex-end;
	overflow:hidden; background:var(--ar-emerald-900);
}

.ar-tb-photo{ position:absolute; inset:0; }
.ar-tb-photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.08) contrast(1.08); }
.ar-tb-photo::after{
	content:''; position:absolute; inset:0;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(0,8,3,.45) 0%, transparent 58%),
		linear-gradient(0deg, rgba(2,25,11,.93) 0%, rgba(4,45,20,.5) 50%, rgba(2,20,9,.7) 100%);
}

/* بدون صورة خلفية: تدرّج زمردي فقط */
.ar-title-bar.no-photo{
	background:
		radial-gradient(120% 100% at 50% 0%, rgba(24,105,57,.45) 0%, transparent 60%),
		linear-gradient(180deg, var(--ar-emerald-900) 0%, var(--ar-emerald-800) 100%);
}

.ar-tb-pattern{
	position:absolute; inset:0; pointer-events:none; z-index:1;
	background-image:url('../../images/redesign/pattern-tile-gold.svg');
	background-repeat:repeat; background-size:80px 78px; opacity:.05;
}
.ar-title-bar.no-photo .ar-tb-pattern{ opacity:.05; }
.ar-title-bar.no-pattern .ar-tb-pattern{ display:none; }

/* تاريخ النادي: صورة أوضح مع لمسة أرشيفية خفيفة */
.ar-title-bar.is-history{ min-height:72vh; }
.ar-title-bar.is-history .ar-tb-photo img{
	filter:saturate(1.05) contrast(1.08);
	object-fit:cover;
	object-position:center 40%;
}
.ar-title-bar.is-history .ar-tb-photo::after{
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(0,8,3,.35) 0%, transparent 58%),
		linear-gradient(0deg, rgba(2,20,9,.88) 0%, rgba(4,35,16,.42) 48%, rgba(2,15,7,.55) 100%);
}

.ar-tb-inner{ position:relative; z-index:3; padding-top:160px; padding-bottom:60px; width:100%; }

.ar-breadcrumb{
	display:flex; align-items:center; gap:8px;
	color:rgba(255,255,255,.6); font-size:13.5px; font-weight:700; margin-bottom:26px;
	font-family:var(--ar-font-body); flex-wrap:wrap;
}
.ar-breadcrumb a{ color:rgba(255,255,255,.6); transition:color .3s var(--ar-ease); }
.ar-breadcrumb a:hover{ color:#fff; }
.ar-breadcrumb .sep{ opacity:.5; }
.ar-breadcrumb .current{ color:var(--ar-gold-300); }

.ar-title-bar .ar-tb-title{
	color:#fff; font-size:clamp(48px,6.8vw,82px); font-weight:800;
	font-family:var(--ar-font-heading); line-height:1.15; letter-spacing:-.01em;
	max-width:760px; margin:0; text-wrap:balance;
}
.ar-title-bar.is-history .ar-tb-title{ font-size:clamp(46px,6vw,72px); }
.single .ar-title-bar .ar-tb-title{ font-size:clamp(36px,5vw,60px); }
.ar-tb-desc{
	color:rgba(255,255,255,.75); font-size:17px; line-height:1.9;
	max-width:560px; margin-top:18px; font-family:var(--ar-font-body);
	text-wrap:pretty;
}

/* ===== Variant: Centered (about / matches) ===== */
.ar-title-bar.is-centered{ min-height:72vh; }
.ar-title-bar.is-centered .ar-tb-inner{
	text-align:center; display:flex; flex-direction:column; align-items:center; padding-bottom:90px;
}
.ar-title-bar.is-centered .ar-breadcrumb{ justify-content:center; }
.ar-title-bar.is-centered .ar-tb-title{ max-width:820px; }
.ar-title-bar.is-centered .ar-tb-desc{ margin-inline:auto; }

.ar-tb-crest{ width:80px; height:auto; margin-bottom:22px; opacity:.95; }
.ar-tb-gold-rule{
	width:64px; height:3px; border-radius:10px; margin:0 auto 26px;
	background:linear-gradient(90deg, transparent, var(--ar-gold-300), transparent);
}

/* ===== إحصائيات اختيارية (hero-stats) ===== */
.ar-tb-stats{
	display:flex; align-items:center; justify-content:center; gap:0; margin-top:56px;
	border-top:1px solid rgba(255,255,255,.16); padding-top:34px; max-width:720px; width:100%;
	font-family:var(--ar-font-body);
}
.ar-title-bar:not(.is-centered) .ar-tb-stats{ justify-content:flex-start; }
.ar-tb-stats > div{
	padding:0 42px; display:flex; flex-direction:column; gap:10px;
	border-inline-start:1px solid rgba(255,255,255,.16);
	opacity:0; transform:translateY(14px); animation:arStatIn .7s var(--ar-ease) forwards;
}
.ar-tb-stats > div:first-child{ border-inline-start:none; padding-inline-start:0; }
.ar-tb-stats > div:nth-child(1){ animation-delay:.15s; }
.ar-tb-stats > div:nth-child(2){ animation-delay:.28s; }
.ar-tb-stats > div:nth-child(3){ animation-delay:.41s; }
.ar-tb-stats > div:nth-child(4){ animation-delay:.54s; }
@keyframes arStatIn{ to{ opacity:1; transform:translateY(0); } }
.ar-tb-stats span{ color:#fff; font-size:clamp(26px,3.6vw,44px); font-weight:800; line-height:1.15; letter-spacing:-.01em; }
.ar-tb-stats small{ color:var(--ar-gold-300); font-size:11.5px; font-weight:700; letter-spacing:.05em; }

/* ===== 404 ===== */
.ar-tb-404-code{
	display:block; font-size:clamp(90px,15.5vw,180px); font-weight:800; line-height:1;
	color:var(--ar-gold-300); font-family:var(--ar-font-heading); opacity:.9; margin-bottom:10px;
}
.ar-title-bar .ar-btn{ margin-top:32px; }

@media (max-width:900px){
	.ar-title-bar{ min-height:52vh; }
	.ar-title-bar.is-centered{ min-height:60vh; }
	.ar-tb-inner{ padding-top:130px; padding-bottom:48px; }
	.ar-tb-stats{ flex-wrap:wrap; gap:24px 0; margin-top:40px; }
	.ar-tb-stats > div{ padding:0 24px; }
	.ar-tb-stats span{ font-size:32px; }
	.ar-tb-crest{ width:64px; }
}

@media (prefers-reduced-motion: reduce){
	.ar-tb-stats > div{ opacity:1; transform:none; animation:none; }
	.ar-breadcrumb a{ transition:none; }
}