/*
 * המוטיב: "השער".
 *
 * בלוגו ספר התורה עומד בתוך קשת מרוקאית. באתר כל דבר חשוב עובר דרך
 * הקשת: תמונות, כרטיסים, קצוות מקטעים. המוטיב מבני ולא שכבת ציפוי:
 * צורות בקצה מוגדר, בגודל שרואים, שחוזרות באותם ממדים.
 *
 * ארבעה כלים: הקשת, הארקדה (שורת קשתות בקצה מקטע), אריח כוכב
 * שמונה (ח'תם) כמרקם, והיהלום מהלוגו כמפריד.
 */

/* 1. הקשת */
.bs-arch { clip-path: var(--bs-arch); -webkit-clip-path: var(--bs-arch); }

/* מסגרת זהב כפולה בצורת הקשת: זהב, רווח בצבע הרקע, זהב, תמונה. */
.bs-archframe { clip-path: var(--bs-arch); -webkit-clip-path: var(--bs-arch); background: var(--bs-gold); padding: 3px; }
.bs-archframe__gap { clip-path: var(--bs-arch); -webkit-clip-path: var(--bs-arch); background: var(--bs-frame-gap); padding: 7px; }
.bs-archframe__in { clip-path: var(--bs-arch); -webkit-clip-path: var(--bs-arch); background: var(--bs-gold); padding: 2px; }
.bs-archframe__img { aspect-ratio: 3 / 4; background: var(--bs-navy-950); }
.bs-archframe__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* 2. הארקדה: קצה מקטע. רצועה שהרקע שלה הוא צבע המקטע הבא, ומסכה
   שמשאירה רק את "הספנדרלים" (החללים בין הקשתות). כך הקשתות של המקטע
   הכהה נראות ככניסות אל תוך המקטע הבהיר. קו זהב דק לאורך הקשתות. */
.bs-arcade { position: absolute; inset-inline: 0; height: 28px; background: var(--bs-white); pointer-events: none; }
.bs-arcade--bottom { bottom: 0; }
.bs-arcade--top { top: 0; }
.bs-arcade--bottom {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 28H56V0H53V12C53 19 43 24 28 27C13 24 3 19 3 12V0H0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 28H56V0H53V12C53 19 43 24 28 27C13 24 3 19 3 12V0H0Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 56px 28px; mask-size: 56px 28px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: center; mask-position: center;
}
.bs-arcade--top {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 0H56V28H53V16C53 9 43 4 28 1C13 4 3 9 3 16V28H0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 0H56V28H53V16C53 9 43 4 28 1C13 4 3 9 3 16V28H0Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 56px 28px; mask-size: 56px 28px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: center; mask-position: center;
}
/* דפדפן בלי מסכה: הרצועה נעלמת ולא מציירת פס לבן. */
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) { .bs-arcade { display: none; } }

/* קו הזהב על הקשתות של הארקדה */
.bs-arcade-line { position: absolute; inset-inline: 0; height: 28px; pointer-events: none; background-repeat: repeat-x; background-size: 56px 28px; background-position: center; }
.bs-arcade-line--bottom {
	bottom: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M53 0V12C53 19 43 24 28 27C13 24 3 19 3 12V0' fill='none' stroke='%23d2a853' stroke-width='1.5'/%3E%3C/svg%3E");
}
.bs-arcade-line--top {
	top: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M53 28V16C53 9 43 4 28 1C13 4 3 9 3 16V28' fill='none' stroke='%23d2a853' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* 3. אריח כוכב שמונה (ח'תם). מרקם על משטחים כהים. משמש כרקע לא כמוטיב ראשי,
   ולכן מותר לו להיות שקוף. */
.bs-tiles {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23d2a853' stroke-width='1'%3E%3Cpath d='M36 10 62 36 36 62 10 36Z'/%3E%3Cpath d='M17.6 17.6H54.4V54.4H17.6Z'/%3E%3Cpath d='M0 0 8 0 0 8ZM72 0 64 0 72 8ZM0 72 8 72 0 64ZM72 72 64 72 72 64Z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 72px 72px;
}

/* 4. מסגרת הקו הכפול, לכרטיסים ולתיבות */
.bs-frame2 { border: 1px solid var(--bs-gold); outline: 1px solid rgba(210, 168, 83, .45); outline-offset: 5px; }