/**
 * רכיבים משותפים: מה שחוזר בכמה עמודים נבנה כאן פעם אחת.
 *
 * - .ov-wrap       המיכל: אותו קו התחלה כמו ההדר והפוטר.
 * - .ov-head       כותרת של רצועה: שורת פתיח בזהב, כותרת, קו זהב, וקישור/חיצים.
 * - .ov-shelf      מדף שגוללים הצידה, עם חיצים (components.js).
 * - .ov-lcard      כרטיס שיעור (template-parts/lesson-card.php).
 * - .ov-play       כפתור הניגון העגול.
 * - .ov-btn        כפתורי גלולה: זהב, ושקוף על רקע כהה.
 * - .ov-rays       קרני האור הזהובות, כמו השמש שבסמל הישיבה.
 * - .ov-invite     הזמנה בסוף עמוד: לוח כחול עם קרני אור וכפתורים.
 *
 * הערכים לקוחים מבית המדרש הדיגיטלי (page-7601) והעלון, שאושרו.
 * גדלים בפיקסלים ולא ב-rem: OceanWP קובע לשורש 10px.
 */

.ov-wrap {
	box-sizing: border-box;
	max-width: calc(var(--ov-maxw) + 2 * var(--ov-edge));
	margin-inline: auto;
	padding-inline: var(--ov-edge);
}

/* ==========================================================================
   כותרת רצועה
   ========================================================================== */

.ov-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 30px;
}

.ov-head__kicker {
	margin: 0 0 8px;
	font-family: var(--ov-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--ov-gold-deep);
}

.ov-head__title {
	margin: 0;
	font-family: var(--ov-font-display);
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ov-navy);
}

.ov-head__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 16px;
	border-radius: 100px;
	background: linear-gradient(90deg, var(--ov-gold) 0%, var(--ov-gold-bright) 100%);
}

.ov-head__tools {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-bottom: 4px;
}

.ov-head__link {
	font-family: var(--ov-font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--ov-gold-deep);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.ov-head__link:hover,
.ov-head__link:focus-visible {
	color: var(--ov-navy);
	border-bottom-color: var(--ov-gold);
}

/* ==========================================================================
   מדף
   ========================================================================== */

/* החיצים תמיד בקצה (שמאל), גם כשאין לידם קישור */
.ov-arrows {
	display: flex;
	gap: 8px;
	margin-inline-start: auto;
}

.ov-arrows[hidden] {
	display: none;
}

/* שתי מחלקות: OceanWP מעצב כל button עם רקע, ריווח אותיות ואותיות גדולות */
.ov-arrows .ov-arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--ov-navy);
	background: #ffffff;
	border: 1px solid var(--ov-border);
	border-radius: 50%;
	box-shadow: var(--ov-shadow-card);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.ov-arrows .ov-arrow:hover,
.ov-arrows .ov-arrow:focus-visible {
	color: #ffffff;
	background: var(--ov-navy);
	border-color: var(--ov-navy);
}

.ov-arrows .ov-arrow:disabled {
	color: var(--ov-navy);
	background: #ffffff;
	border-color: var(--ov-border);
	opacity: 0.4;
	cursor: default;
}

.ov-arrow svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* המדף נכנס גם לשוליים, כדי שהכרטיס הבא יציץ ויזמין לגלול */
.ov-shelf {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * 20px) / 4);
	gap: 20px;
	margin: 0 calc(-1 * var(--ov-edge));
	padding: 4px var(--ov-edge) 22px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--ov-edge);
	scrollbar-width: none;
}

.ov-shelf::-webkit-scrollbar {
	display: none;
}

.ov-shelf__item {
	margin: 0;
	scroll-snap-align: start;
}

.ov-shelf a:focus-visible,
.ov-head a:focus-visible,
.ov-arrows .ov-arrow:focus-visible {
	outline: 3px solid var(--ov-gold-bright);
	outline-offset: 3px;
}

/* ==========================================================================
   כרטיס שיעור

   המסגרת תמיד 16:9. התמונה ממלאת אותה (object-fit), ואם נמדדו בה פסים
   שחורים (OVC_Lesson_Thumbs) היא ממוקמת כך שהפסים נשארים מחוץ למסגרת.
   תמונה צרה או רחבה מדי מוצגת שלמה בחלון באמצע, על רקע של עצמה מוגדלת
   ומטושטשת.
   ========================================================================== */

.ov-lcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	font-family: var(--ov-font-body);
	color: inherit;
	text-decoration: none;
	background: #ffffff;
	border-top: 3px solid transparent;
	border-radius: 16px;
	box-shadow: var(--ov-shadow-card);
	transition: transform 0.4s var(--ov-ease), box-shadow 0.4s ease, border-color 0.3s ease;
}

.ov-lcard:hover,
.ov-lcard:focus-visible {
	color: inherit;
	border-top-color: var(--ov-gold);
	transform: translateY(-4px);
	box-shadow: var(--ov-shadow-card-hover);
}

.ov-lcard__frame {
	position: relative;
	z-index: 0;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e4ded1;
}

/* כל התמונות במסגרת ממוקמות ביד: OceanWP נותן ל-img גובה אוטומטי ורוחב מקסימלי */
.ov-lcard__img,
.ov-lcard__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ov-ease);
}

/* התמונה בלי הפסים השחורים ממלאת את המסגרת */
.ov-lcard__frame--fill .ov-lcard__img,
.ov-lcard__backdrop {
	top: var(--ov-y);
	left: var(--ov-x);
	width: var(--ov-w);
	height: var(--ov-h);
	object-fit: fill;
}

/* החלון שבו התמונה מוצגת שלמה, ובו היא ממלאת אותו */
.ov-lcard__window {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: var(--ov-box-w);
	height: var(--ov-box-h);
	overflow: hidden;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 34px rgba(0, 0, 0, 0.35);
}

.ov-lcard__window .ov-lcard__img {
	top: var(--ov-in-y);
	left: var(--ov-in-x);
	width: var(--ov-in-w);
	height: var(--ov-in-h);
	object-fit: fill;
}

.ov-lcard__backdrop {
	filter: blur(14px) saturate(1.15) brightness(0.72);
	transform: scale(1.12);
}

.ov-lcard:hover .ov-lcard__img {
	transform: scale(1.05);
}

.ov-lcard:hover .ov-lcard__window .ov-lcard__img {
	transform: none;
}

.ov-lcard:hover .ov-lcard__window {
	transform: translate(-50%, -50%) scale(1.04);
	transition: transform 0.7s var(--ov-ease);
}

.ov-lcard__avatar {
	position: absolute;
	z-index: 2;
	bottom: 10px;
	inset-inline-start: 10px;
	width: 42px;
	height: 42px;
	max-width: none;
	object-fit: cover;
	object-position: center 30%;
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* כמה מהשיעור כבר נצפה (המשכתם לצפות) */
.ov-lcard__progress {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	background: rgba(0, 27, 56, 0.45);
}

.ov-lcard__progress[hidden] {
	display: none;
}

.ov-lcard__progress span {
	display: block;
	width: var(--ov-progress, 0%);
	height: 100%;
	margin-inline-start: 0;
	background: linear-gradient(90deg, var(--ov-gold) 0%, var(--ov-gold-bright) 100%);
}

.ov-lcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 14px 18px 18px;
}

.ov-lcard__topic {
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--ov-gold-deep);
}

.ov-lcard__title {
	display: -webkit-box;
	margin-bottom: 10px;
	overflow: hidden;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ov-navy);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ov-lcard__meta {
	margin-top: auto;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ov-muted);
}

.ov-lcard__dot {
	margin-inline: 3px;
}

/* התאריך והדקה לא נשברים באמצע: עוברים שורה שלמים */
.ov-lcard__meta time,
.ov-lcard__resume {
	display: inline-block;
	white-space: nowrap;
}

.ov-lcard__resume {
	font-weight: 700;
	color: var(--ov-gold-deep);
}

/* ==========================================================================
   כפתור ניגון: המשולש תמיד פונה ימינה, גם בעברית
   ========================================================================== */

.ov-play {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	background: rgba(0, 27, 56, 0.5);
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ov-ease), opacity 0.3s ease;
}

.ov-play svg {
	width: 32px;
	height: 32px;
	fill: #ffffff;
	transform: translateX(2px);
	transition: fill 0.3s ease;
}

.ov-play--sm {
	width: 50px;
	height: 50px;
	opacity: 0;
}

.ov-play--sm svg {
	width: 22px;
	height: 22px;
}

.ov-lcard:hover .ov-play,
.ov-lcard:focus-visible .ov-play,
.ov-play-host:hover .ov-play,
.ov-play-host:focus-visible .ov-play {
	opacity: 1;
	background: var(--ov-gold-bright);
	border-color: var(--ov-gold-bright);
	transform: translate(-50%, -50%) scale(1.06);
}

.ov-lcard:hover .ov-play svg,
.ov-lcard:focus-visible .ov-play svg,
.ov-play-host:hover .ov-play svg,
.ov-play-host:focus-visible .ov-play svg {
	fill: var(--ov-navy);
}

/* ==========================================================================
   כפתורים
   ========================================================================== */

.ov-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	margin: 0;
	padding: 0 28px;
	font-family: var(--ov-font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	border-radius: 100px;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.ov-btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ov-btn--gold,
.ov-btn--gold:visited {
	color: var(--ov-navy);
	background: linear-gradient(135deg, var(--ov-gold-bright) 0%, var(--ov-gold) 100%);
	border: 0;
	box-shadow: 0 12px 28px -10px rgba(213, 155, 42, 0.85);
}

.ov-btn--gold:hover,
.ov-btn--gold:focus-visible {
	color: var(--ov-navy);
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -10px rgba(213, 155, 42, 0.95);
}

/* שקוף: על רקע כהה */
.ov-btn--ghost,
.ov-btn--ghost:visited {
	color: #ffffff;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.ov-btn--ghost:hover,
.ov-btn--ghost:focus-visible {
	color: var(--ov-gold-bright);
	background: rgba(240, 182, 65, 0.08);
	border-color: var(--ov-gold-bright);
}

.ov-btn:focus-visible {
	outline: 3px solid var(--ov-gold-bright);
	outline-offset: 3px;
}

/* ==========================================================================
   קרני האור: יוצאות מפינה ודועכות. ההורה צריך position ו-overflow: hidden.
   ========================================================================== */

.ov-rays {
	position: absolute;
	z-index: -1;
	width: 1900px;
	height: 1900px;
	pointer-events: none;
	background: repeating-conic-gradient(from 4deg, rgba(240, 182, 65, 0.13) 0deg 1.6deg, transparent 1.6deg 7.5deg);
	-webkit-mask: radial-gradient(circle closest-side, #000000 8%, rgba(0, 0, 0, 0.55) 42%, transparent 100%);
	mask: radial-gradient(circle closest-side, #000000 8%, rgba(0, 0, 0, 0.55) 42%, transparent 100%);
}

/* מהפינה העליונה בצד ההתחלה (ימין) */
.ov-rays--start {
	top: -950px;
	inset-inline-start: -950px;
}

/* מהפינה התחתונה בצד הסוף, כמו סגירה של הפתיח */
.ov-rays--end {
	bottom: -950px;
	inset-inline-end: -950px;
	opacity: 0.8;
}

/* ==========================================================================
   הזמנה בסוף עמוד: לוח כחול עם קרני אור, טקסט וכפתורים
   ========================================================================== */

.ov-invite {
	position: relative;
	z-index: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px 40px;
	padding: clamp(32px, 4.5vw, 52px) clamp(26px, 4.5vw, 60px);
	overflow: hidden;
	color: #ffffff;
	background:
		radial-gradient(620px 380px at 0% 100%, rgba(213, 155, 42, 0.2), transparent 66%),
		linear-gradient(165deg, #06305c 0%, var(--ov-navy) 50%, var(--ov-navy-deep) 100%);
	border-radius: 24px;
	box-shadow: var(--ov-shadow-float);
}

.ov-invite__text {
	flex: 1 1 360px;
}

.ov-invite__kicker {
	margin: 0 0 8px;
	font-family: var(--ov-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--ov-gold-bright);
}

.ov-invite__title {
	margin: 0;
	font-family: var(--ov-font-display);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
}

.ov-invite__lede {
	max-width: 60ch;
	margin: 12px 0 0;
	font-family: var(--ov-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.ov-invite__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   רוחבים
   ========================================================================== */

@media (max-width: 1080px) {
	.ov-shelf {
		grid-auto-columns: calc((100% - 2 * 20px) / 3);
	}
}

@media (max-width: 680px) {
	.ov-head {
		margin-bottom: 22px;
	}

	.ov-head__tools {
		width: 100%;
		justify-content: space-between;
	}

	.ov-shelf {
		grid-auto-columns: 78%;
		gap: 14px;
	}

	.ov-play {
		width: 62px;
		height: 62px;
	}

	.ov-play svg {
		width: 26px;
		height: 26px;
	}

	.ov-play--sm {
		width: 50px;
		height: 50px;
	}

	.ov-play--sm svg {
		width: 22px;
		height: 22px;
	}

	.ov-invite__actions,
	.ov-invite__actions .ov-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ov-lcard,
	.ov-lcard__img,
	.ov-lcard__window,
	.ov-play,
	.ov-btn,
	.ov-arrows .ov-arrow {
		transition: none;
	}

	.ov-lcard:hover,
	.ov-lcard:hover .ov-lcard__img,
	.ov-lcard:hover .ov-lcard__window,
	.ov-btn:hover {
		transform: none;
	}

	.ov-lcard:hover .ov-lcard__window {
		transform: translate(-50%, -50%);
	}
}