/**
 * قسم «فاصل» لثيم تنمية الشمالية (template-parts/home/home-divider.php).
 *
 * أشكال من رمز الشعار، كلها في الوسط وبلا خطوط: بلاطة اسم بيضاء برمز الشعار (capsule)، و«نقاط الكوفي» حبّات
 * فسيفساء مائلة تكبر نحو الوسط (ornament)، ورمز الشعار في معيّن متدرّج (icon)، وشريط نعناعي خافت حافته
 * السفلية رأس معيّن (wave)، ومسافة فقط (space). المسافة الرأسية من ‎--space-small/medium/large‎.
 */

.sh-divider {
	--sh-divider-space: 44px;
	position: relative;
	padding: var(--sh-divider-space) 0;
}

.sh-divider--space-small {
	--sh-divider-space: 22px;
}

.sh-divider--space-large {
	--sh-divider-space: 76px;
}

.sh-divider__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
}

/*
 * خطان على الجانبين (.sh-divider__line): خط رفيع بتدرّج الرمز يتلاشى نحو طرف الصفحة، وعند طرفه القريب من الوسط
 * مربع ذهبي مائل صغير كمربعات الشعار. للبلاطة والنقاط والأيقونة.
 */
.sh-divider__line {
	position: relative;
	flex: 1;
	max-width: 340px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(to right, rgba(var(--theme-primary-rgb), 0.5), rgba(68, 170, 143, 0.3) 55%, transparent);
}

/* في الصفحة العربية: الخط الأول يمين الوسط يتلاشى نحو اليمين، والثاني يساره يتلاشى نحو اليسار */
.sh-divider__line--end {
	background: linear-gradient(to left, rgba(var(--theme-primary-rgb), 0.5), rgba(68, 170, 143, 0.3) 55%, transparent);
}

.sh-divider__line i {
	position: absolute;
	top: 50%;
	left: -4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 2px;
	background: var(--theme-secondary);
	transform: rotate(45deg);
}

.sh-divider__line--end i {
	right: -4px;
	left: auto;
}
/* ==========================================================================
   بلاطة الاسم
   ========================================================================== */

.sh-divider__plate {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	padding: 10px 22px 10px 14px;
	border-radius: var(--sh-radius);
	background: var(--sh-card);
	box-shadow: var(--sh-shadow);
}

.sh-divider__plate-mark {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 34px;
	height: 34px;
}

.sh-divider__plate-mark img,
.sh-divider__plate-mark svg {
	display: block;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.sh-divider__plate-name {
	overflow: hidden;
	color: var(--sh-ink);
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.5;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   نقاط الكوفي: النعناعي في الطرفين، ثم الأساسي، والذهبية الكبرى في القلب
   ========================================================================== */

.sh-divider__dots {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.sh-divider__dot {
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--sh-mint);
	opacity: 0.55;
	transform: rotate(45deg);
}

.sh-divider__dot:nth-child(2),
.sh-divider__dot:nth-child(6) {
	width: 8px;
	height: 8px;
	opacity: 1;
}

.sh-divider__dot:nth-child(3),
.sh-divider__dot:nth-child(5) {
	width: 10px;
	height: 10px;
	background: var(--theme-primary);
	opacity: 1;
}

.sh-divider__dot:nth-child(4) {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--theme-secondary);
	opacity: 1;
}

/* ==========================================================================
   رمز الشعار في معيّن متدرّج
   ========================================================================== */

.sh-divider__diamond {
	position: relative;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
}

.sh-divider__diamond::before {
	content: '';
	position: absolute;
	inset: 11px;
	border-radius: 12px;
	background: linear-gradient(to bottom, var(--sh-mint), var(--theme-primary));
	box-shadow: 0 12px 24px -14px rgba(var(--theme-primary-rgb), 0.8);
	transform: rotate(45deg);
}

.sh-divider__emblem {
	position: relative;
	width: 28px;
	height: 28px;
}

/* ==========================================================================
   شريط بحافة رأس المعيّن
   ========================================================================== */

.sh-divider__band {
	display: block;
	height: 64px;
	background: linear-gradient(to bottom, var(--sh-mist), var(--sh-mist-deep));
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
}

@media (max-width: 640px) {
	.sh-divider__band {
		height: 44px;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px));
	}
}