/* --------------------------------------------------------------------------
   עמוד הרכזים. כל המידות נמדדו מהמוקאפ ונשמרות ביחידת ה---u של האתר,
   כך שערך 118 כאן הוא 118 פיקסל במוקאפ ברוחב 1920.
   -------------------------------------------------------------------------- */

.reps-page {
	background: var(--paper);
}

/* פס הכותרת הכהה — גובה 331 במוקאפ */
.reps-hero {
	padding: calc(83 * var(--u)) 0;
	background: var(--navy-900);
	text-align: center;
}

.reps-title {
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   סרגל החיפוש
   -------------------------------------------------------------------------- */

.reps-body {
	padding: calc(96 * var(--u)) 0 calc(150 * var(--u));
	background: var(--paper);
}

/* --------------------------------------------------------------------------
   הרשת — 11 עמודות, מרווח עמודות 44.3 ומרווח שורות 53.5
   -------------------------------------------------------------------------- */

.reps-grid {
	display: grid;
	grid-template-columns: repeat(11, calc(118 * var(--u)));
	justify-content: center;
	column-gap: calc(44.3 * var(--u));
	row-gap: calc(53.5 * var(--u));
}

.rep {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	cursor: default;
}

/* כניסה: כל רכז נוחת בקפיצה קלה, בהשהיה לפי מקומו בשורה */
.rep {
	opacity: 0;
	transform: translateY(calc(26 * var(--u))) scale(0.55);
}

.rep.is-in {
	animation: rep-land 620ms cubic-bezier(0.22, 1.4, 0.42, 1) forwards;
	animation-delay: calc(var(--i, 0) * 52ms);
}

@keyframes rep-land {
	from {
		opacity: 0;
		transform: translateY(calc(26 * var(--u))) scale(0.55);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* --------------------------------------------------------------------------
   התצלום העגול
   -------------------------------------------------------------------------- */

.rep-photo {
	position: relative;
	width: calc(118 * var(--u));
	height: calc(118 * var(--u));
	border-radius: 50%;
	overflow: hidden;
	background: var(--panel);
	transition: transform 420ms cubic-bezier(0.2, 1.2, 0.4, 1), box-shadow 420ms;
}

/* נשימה איטית ומתמשכת, כדי שהרשת לא תקפא. ההיסט לפי המיקום בשורה
   יוצר גל רך שעובר לרוחב במקום פעימה אחידה. */
.rep.is-in .rep-photo {
	animation: rep-breathe 6.4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * 180ms + 900ms);
}

@keyframes rep-breathe {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(calc(-5 * var(--u))) scale(1.018);
	}
}

.rep-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* טבעת הזהב נצבעת רק במעבר עכבר, ולכן היא שכבה נפרדת מעל התצלום */
.rep-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: calc(4 * var(--u)) solid transparent;
	transition: border-color 320ms;
	pointer-events: none;
}

.rep:hover .rep-photo,
.rep:focus-within .rep-photo {
	animation-play-state: paused;
	transform: translateY(calc(-9 * var(--u))) scale(1.14);
	box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(9, 32, 58, 0.34);
}

.rep:hover .rep-photo::after,
.rep:focus-within .rep-photo::after {
	border-color: var(--gold);
}

/* צללית למי שטרם הועלתה לו תמונה */
.rep-blank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
}

.rep-blank svg {
	width: 100%;
	height: 100%;
	fill: rgba(255, 255, 255, 0.68);
}

/* --------------------------------------------------------------------------
   השם והיישוב
   -------------------------------------------------------------------------- */

.rep-name {
	margin: calc(11 * var(--u)) 0 0;
	color: var(--ink);
	font-size: calc(18 * var(--u));
	font-weight: 700;
	line-height: 1.15;
	transition: color 260ms;
}

.rep-place {
	margin: calc(5 * var(--u)) 0 0;
	color: var(--ink);
	font-size: calc(14 * var(--u));
	font-weight: 400;
	line-height: 1.2;
	opacity: 0.78;
}

.rep:hover .rep-name,
.rep:focus-within .rep-name {
	color: var(--sky-num);
}

.reps-empty {
	margin: calc(60 * var(--u)) 0 0;
	color: var(--ink);
	font-size: calc(24 * var(--u));
	text-align: center;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   מסכים צרים — פחות עמודות ועיגולים גדולים יותר
   -------------------------------------------------------------------------- */

@media (max-width: 1500px) {
	.reps-grid {
		grid-template-columns: repeat(8, calc(150 * var(--u)));
		column-gap: calc(52 * var(--u));
	}

	.rep-photo {
		width: calc(150 * var(--u));
		height: calc(150 * var(--u));
	}

	.rep-name { font-size: calc(23 * var(--u)); }
	.rep-place { font-size: calc(18 * var(--u)); }
}

@media (max-width: 1100px) {
	.reps-grid {
		grid-template-columns: repeat(6, calc(180 * var(--u)));
	}

	.rep-photo {
		width: calc(180 * var(--u));
		height: calc(180 * var(--u));
	}
}

@media (max-width: 900px) {
	.reps-hero {
		padding: calc(46 * var(--u)) 0;
	}

	.reps-body {
		padding: calc(44 * var(--u)) 0 calc(70 * var(--u));
	}

	/* שוליים אמיתיים בשני הצדדים, במקום העשרים יחידות של שאר האתר */
	.reps-body .wrap {
		padding-inline: 8%;
	}

	.reps-grid {
		grid-template-columns: repeat(3, 1fr);
		column-gap: calc(20 * var(--u));
		row-gap: calc(34 * var(--u));
	}

	/* התצלום קטן מרוחב העמודה, כדי שהעיגולים לא ייגעו זה בזה */
	.rep-photo {
		width: 84%;
		height: auto;
		aspect-ratio: 1;
	}

	.rep-name { font-size: calc(21 * var(--u)); }
	.rep-place { font-size: calc(17 * var(--u)); }
	.reps-empty { font-size: calc(30 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
	.rep {
		opacity: 1;
		transform: none;
	}

	.rep.is-in,
	.rep.is-in .rep-photo {
		animation: none;
	}

	.rep:hover .rep-photo,
	.rep:focus-within .rep-photo {
		transform: none;
	}
}