/* ==========================================================================
   JAS header banner: Sabratha theatre artwork on the side of the header area.
   Replaces the theme's header_red.jpg only on the JAS hero.
   ========================================================================== */
.journal_index.jas-hero {
	position: relative;
	overflow: hidden;
	background: #fff !important;
	background-image: none !important;
	border-bottom: 1px solid #e5e7ee;
}
.journal_index.jas-hero::before {
	content: "";
	display: block !important;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: min(70%, 1100px);
	background: url('../img/header/jas-banner.jpg') right center / auto 100% no-repeat;
	pointer-events: none;
}
/* soft fade so the text stays readable over the artwork */
.journal_index.jas-hero::after {
	content: "";
	display: block !important;
	clear: none;
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #fff 0%, #fff 38%, rgba(255, 255, 255, .85) 48%, rgba(255, 255, 255, 0) 64%);
	pointer-events: none;
}
.journal_index.jas-hero > .container { position: relative; z-index: 1; }

/* Arabic (right-to-left): artwork on the left, text on the right */
body.rtl .journal_index.jas-hero::before,
body[dir="rtl"] .journal_index.jas-hero::before {
	right: auto;
	left: 0;
	transform: scaleX(-1);
}
body.rtl .journal_index.jas-hero::after,
body[dir="rtl"] .journal_index.jas-hero::after {
	background: linear-gradient(270deg, #fff 0%, #fff 38%, rgba(255, 255, 255, .85) 48%, rgba(255, 255, 255, 0) 64%);
}

@media (max-width: 991px) {
	.journal_index.jas-hero::before { width: 100%; opacity: .35; }
	.journal_index.jas-hero::after { background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .75)); }
	body.rtl .journal_index.jas-hero::after,
	body[dir="rtl"] .journal_index.jas-hero::after { background: linear-gradient(270deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .75)); }
}