/* ==========================================================================
   KIRUR NISIM THEME - css/nisim/pages/gallery.css          (owner: galleries)
   Projects list - view/pages/gallery.tpl.
   From base.css: .nis-pagehero, .nis-kicker, .nis-title, .nis-b, .nis-rich,
   .nis-cta, .nis-btn (--gold, --ghost), @keyframes nisUp.
   Page blocks: .nis-prjlist (page), .nis-prjgrid, .nis-prjcard.
   Minifier-safe: one declaration per line, single spaces, slash-star comments.
   ========================================================================== */

/* ---------- hero: "פרויקטים" (the CMS h1) + the design's bold "שביצענו" on one line ---------- */
.nis-prjlist__h1 {
	display: inline;
}
/* the projects mocks set the crumbs and the kicker at the font's normal line height */
.nis-prjlist .nis-pagehero__in > .Breadcrumbs,
.nis-prjlist .nis-pagehero__in > .nis-kicker {
	line-height: 1.36;
}

/* ---------- body: intro + grid ---------- */
.nis-prjlist__body {
	padding: clamp(46px, 5vw, 74px) var(--nis-gutter) clamp(56px, 6vw, 92px);
	background: var(--nis-cream);
}
.nis-prjlist__head {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--nis-line-3);
}
.nis-prjlist__intro {
	max-width: 720px;
}
.nis-prjlist__heading {
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.22;
}
.nis-prjlist__text {
	margin: 16px 0 0;
	color: var(--nis-text-soft);
	font-size: 16.5px;
	font-weight: 300;
	line-height: 1.9;
	text-wrap: pretty;
}
/* CMS "content top" / "content bottom" (empty today): two rich-text columns
   printed after the design copy, in the secondary look of owner rule R3
   (hairline above, 15.5px / 1.85 muted text, 21px / 500 titles, 62ch) */
.nis-prjlist__cms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--nis-gap-cols);
	padding-top: 26px;
	border-top: 1px solid var(--nis-line-3);
}
.nis-prjlist__cms > .nis-rich {
	max-width: 62ch;
	color: var(--nis-text-muted);
	font-size: 15.5px;
	line-height: 1.85;
}
.nis-prjlist__cms > .nis-rich h1,
.nis-prjlist__cms > .nis-rich h2,
.nis-prjlist__cms > .nis-rich h3,
.nis-prjlist__cms > .nis-rich h4,
.nis-prjlist__cms > .nis-rich h5,
.nis-prjlist__cms > .nis-rich h6 {
	margin: 1.2em 0 .4em;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0;
}
.nis-prjlist__cms > .nis-rich:empty {
	display: none;
}
/* the intro's hairline is right above the top block */
.nis-prjlist__cms--top {
	padding-top: 0;
	border-top: 0;
	margin-top: clamp(28px, 3vw, 42px);
}
.nis-prjlist__cms--bottom {
	margin-top: var(--nis-gap-sechead);
}

/* ---------- grid of project cards ---------- */
.nis-prjgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(18px, 2vw, 28px);
	margin-top: clamp(28px, 3vw, 42px);
}
.nis-prjcard {
	min-width: 0;
}
.nis-prjcard__in {
	height: 100%;
}
.nis-prjcard__link,
.nis-prjcard__link:hover {
	color: var(--nis-navy);
}
.nis-prjcard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--nis-line-2);
	border-radius: var(--nis-r-card);
	background: var(--nis-white);
	transition: transform var(--nis-t-card) var(--nis-ease), box-shadow var(--nis-t-card) ease, border-color .3s ease;
}
.nis-prjcard__ov {
	display: none;
}
.nis-prjcard__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--nis-mist);
}
.nis-prjcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--nis-ease);
}
.nis-prjcard__foot {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: center;
	align-items: center;
	column-gap: 14px;
	padding: 20px 22px 22px;
	line-height: 1.36;
}
/* The design's category label (DELI, MARKET ...). The CMS has no such field:
   galleries.js writes it into data-nis-cat from the project url, and it is
   drawn here, so the text of the card anchor stays the project name. The line
   is reserved before the script runs (no jump). */
.nis-prjcard__foot::before {
	content: attr(data-nis-cat);
	content: attr(data-nis-cat) / "";
	grid-row: 1;
	grid-column: 1;
	min-height: 16px;
	color: var(--nis-gold-bronze);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
}
.nis-prjcard__name {
	grid-row: 2;
	grid-column: 1;
	margin-top: 9px;
	font-size: 18.5px;
	font-weight: 500;
}
.nis-prjcard__arrow {
	grid-row: 1 / 3;
	grid-column: 2;
	font-size: 20px;
	transition: transform var(--nis-t-card) var(--nis-ease), color .3s ease;
}
@media (hover: hover) {
	.nis-prjcard:hover .nis-prjcard__link {
		border-color: rgba(26, 48, 82, .5);
		box-shadow: var(--nis-sh-hover);
		transform: translateY(-6px);
	}
	.nis-prjcard:hover .nis-prjcard__media img {
		transform: scale(1.07);
	}
	.nis-prjcard:hover .nis-prjcard__arrow {
		color: var(--nis-gold-bronze);
		transform: translateX(-7px);
	}
}
.nis-prjcard__link:active {
	border-color: rgba(26, 48, 82, .5);
}
.nis-prjcard__link:focus-visible {
	outline-offset: 4px;
}

/* ---------- entrance (decorative; only with JS and when motion is allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
	html.nis-js .nis-prjlist .nis-pagehero__in > * {
		animation: nisUp .7s ease backwards;
	}
	html.nis-js .nis-prjlist .nis-pagehero__in > .nis-kicker {
		animation-delay: .06s;
	}
	html.nis-js .nis-prjlist .nis-pagehero__in > .nis-pagehero__title {
		animation-duration: .8s;
		animation-delay: .12s;
	}
	html.nis-js .nis-prjlist .nis-pagehero__in > .nis-pagehero__lead {
		animation-duration: .8s;
		animation-delay: .2s;
	}
	html.nis-js .nis-prjcard {
		animation: nisUp .7s ease backwards;
		animation-delay: calc(min(var(--nis-i, 1), 12) * .06s - .02s);
	}
}

/* ---------- responsive ----------
   1440: 4 columns, 1100: 3, 768: 2, phone: 1 (a wider 16:10 photo keeps the
   list short). */
@media (max-width: 1099.98px) {
	.nis-prjgrid {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	}
}
@media (max-width: 899.98px) {
	.nis-prjgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.nis-prjcard__foot {
		padding: 18px 20px 20px;
	}
	.nis-prjcard__name {
		font-size: 17.5px;
	}
}
@media (max-width: 599.98px) {
	.nis-prjlist__body {
		padding-top: 40px;
		padding-bottom: 56px;
	}
	.nis-prjlist__head {
		padding-bottom: 22px;
	}
	.nis-prjlist__text {
		margin-top: 12px;
		font-size: 16px;
		line-height: 1.8;
	}
	.nis-prjgrid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		margin-top: 26px;
	}
	.nis-prjcard__media {
		aspect-ratio: 16 / 10;
	}
	.nis-prjcard__foot {
		padding: 16px 18px 18px;
	}
	.nis-prjcard__name {
		margin-top: 7px;
	}
}