/**
 * Etz HaHaim Works Gallery — front-end styles.
 * All rules are scoped under .etz-gallery / .etz-lightbox. No global selectors,
 * no :root. Custom properties live on the component root only.
 */

.etz-gallery {
	--etz-olive: #495030;
	--etz-olive-dark: #343a22;
	--etz-olive-soft: #eef0e7;
	--etz-gold: #b99a56;
	--etz-gold-soft: #eee5cf;
	--etz-cream: #f8f6f0;
	--etz-white: #ffffff;
	--etz-text: #2f3129;
	--etz-muted: #74776d;
	--etz-border: #d9dacd;
	--etz-shadow: 0 14px 40px rgba(47, 49, 41, 0.10);
	--etz-cols: 4;

	box-sizing: border-box;
	width: min(1220px, 100%);
	margin-inline: auto;
	color: var(--etz-text);
	font-family: inherit;
	direction: rtl;
	text-align: right;
}

.etz-gallery *,
.etz-lightbox * {
	box-sizing: border-box;
}

/* Header ------------------------------------------------------------------ */
.etz-gallery__header {
	text-align: center;
	margin-bottom: 26px;
}

.etz-gallery__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	color: var(--etz-gold);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.etz-gallery__eyebrow::before,
.etz-gallery__eyebrow::after {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--etz-gold);
	opacity: 0.65;
}

.etz-gallery__title {
	margin: 0;
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.15;
	color: var(--etz-olive-dark);
	font-weight: 700;
}

.etz-gallery__desc {
	max-width: 660px;
	margin: 12px auto 0;
	color: var(--etz-muted);
	font-size: 17px;
	line-height: 1.7;
}

/* Filter panel ------------------------------------------------------------ */
.etz-gallery__filters {
	position: relative;
	overflow: hidden;
	padding: 26px;
	margin-bottom: 28px;
	border: 1px solid rgba(185, 154, 86, 0.30);
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 246, 240, 0.97));
	box-shadow: var(--etz-shadow);
}

.etz-gallery__filters-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 22px;
}

.etz-gallery__filters-intro {
	display: flex;
	align-items: center;
	gap: 12px;
}

.etz-gallery__filters-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--etz-white);
	background: linear-gradient(145deg, var(--etz-olive), var(--etz-olive-dark));
	box-shadow: 0 8px 18px rgba(52, 58, 34, 0.20);
}

.etz-gallery__filters-icon svg {
	width: 22px;
	height: 22px;
}

.etz-gallery__filters-heading {
	margin: 0;
	font-size: 19px;
	color: var(--etz-olive-dark);
}

.etz-gallery__filters-sub {
	margin: 4px 0 0;
	color: var(--etz-muted);
	font-size: 14px;
}

.etz-gallery__reset {
	border: 0;
	padding: 10px 14px;
	border-radius: 999px;
	color: var(--etz-olive);
	background: var(--etz-olive-soft);
	cursor: pointer;
	font: inherit;
	transition: background 0.2s ease, transform 0.2s ease;
}

.etz-gallery__reset:hover {
	background: #e2e6d7;
	color: var(--etz-olive);
	transform: translateY(-1px);
}

.etz-gallery__reset:focus,
.etz-gallery__reset:focus-visible {
	outline: 2px solid var(--etz-olive-dark);
	outline-offset: 2px;
	background: var(--etz-olive-soft);
	color: var(--etz-olive);
}

.etz-gallery__reset:focus:not(:focus-visible) {
	outline: none;
}

.etz-gallery__reset:active {
	background: #d7dcc7;
	color: var(--etz-olive);
	transform: translateY(0);
}

.etz-gallery__filters-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.etz-gallery__filter-group {
	min-width: 0;
	padding: 18px;
	border-radius: 16px;
	border: 1px solid rgba(73, 80, 48, 0.12);
	background: rgba(255, 255, 255, 0.76);
}

.etz-gallery__filter-label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 14px;
	color: var(--etz-olive-dark);
	font-size: 16px;
	font-weight: 700;
}

.etz-gallery__filter-num {
	width: 27px;
	height: 27px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--etz-white);
	background: var(--etz-gold);
	font-size: 13px;
}

.etz-gallery__options {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.etz-gallery__option {
	appearance: none;
	border: 1px solid var(--etz-border);
	border-radius: 999px;
	padding: 10px 15px;
	color: #55584f;
	background: var(--etz-white);
	cursor: pointer;
	font: inherit;
	box-shadow: 0 4px 12px rgba(47, 49, 41, 0.05);
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.etz-gallery__option:hover {
	border-color: var(--etz-olive);
	color: var(--etz-olive-dark);
	background: var(--etz-olive-soft);
	transform: translateY(-1px);
}

/* Explicit brand styling for every focus/active state so neither the browser
   default nor the theme can apply an off-brand colour. */
.etz-gallery__option:focus,
.etz-gallery__option:focus-visible {
	outline: 2px solid var(--etz-olive-dark);
	outline-offset: 2px;
	border-color: var(--etz-olive);
	color: var(--etz-olive-dark);
	background: var(--etz-white);
}

/* Mouse click keeps no ring; keyboard focus (above) keeps the brand ring. */
.etz-gallery__option:focus:not(:focus-visible) {
	outline: none;
}

.etz-gallery__option:active {
	border-color: var(--etz-olive);
	color: var(--etz-white);
	background: var(--etz-olive);
	transform: translateY(0);
}

/* Selected option (class + aria-pressed), including while hovered/focused. */
.etz-gallery__option.is-active,
.etz-gallery__option[aria-pressed="true"],
.etz-gallery__option.is-active:hover,
.etz-gallery__option.is-active:focus,
.etz-gallery__option.is-active:focus-visible,
.etz-gallery__option[aria-pressed="true"]:hover,
.etz-gallery__option[aria-pressed="true"]:focus {
	color: var(--etz-white);
	border-color: var(--etz-olive);
	background: linear-gradient(145deg, var(--etz-olive), var(--etz-olive-dark));
	box-shadow: 0 8px 18px rgba(52, 58, 34, 0.20);
}

/* Keyboard focus ring on the selected option: gold for contrast on olive. */
.etz-gallery__option.is-active:focus-visible,
.etz-gallery__option[aria-pressed="true"]:focus-visible {
	outline: 2px solid var(--etz-gold);
	outline-offset: 2px;
}

/* Status row -------------------------------------------------------------- */
.etz-gallery__status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	color: var(--etz-muted);
	font-size: 14px;
}

.etz-gallery__summary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.etz-gallery__chip {
	padding: 7px 11px;
	border-radius: 999px;
	color: var(--etz-olive-dark);
	background: var(--etz-gold-soft);
	font-weight: 600;
}

/* Grid + cards ------------------------------------------------------------ */
.etz-gallery__grid {
	display: grid;
	grid-template-columns: repeat(var(--etz-cols, 4), minmax(0, 1fr));
	gap: 18px;
}

.etz-gallery__card {
	overflow: hidden;
	border-radius: 18px;
	background: var(--etz-white);
	border: 1px solid rgba(73, 80, 48, 0.12);
	box-shadow: 0 10px 28px rgba(47, 49, 41, 0.09);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.etz-gallery__card.is-hidden {
	display: none;
}

.etz-gallery__card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 36px rgba(47, 49, 41, 0.14);
}

.etz-gallery__figure {
	margin: 0;
}

.etz-gallery__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #2f332c;
	cursor: zoom-in;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.etz-gallery__zoom:focus-visible {
	outline: 3px solid var(--etz-gold);
	outline-offset: -3px;
}

.etz-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.etz-gallery__card:hover .etz-gallery__img {
	transform: scale(1.04);
}

.etz-gallery__caption {
	padding: 15px;
}

.etz-gallery__card-title {
	margin: 0 0 10px;
	color: var(--etz-olive-dark);
	font-size: 17px;
}

.etz-gallery__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.etz-gallery__tag {
	padding: 6px 9px;
	border-radius: 999px;
	font-size: 12px;
	color: var(--etz-muted);
	background: var(--etz-cream);
	border: 1px solid #e8e4d9;
}

/* Empty state ------------------------------------------------------------- */
.etz-gallery__empty {
	padding: 50px 20px;
	text-align: center;
	border: 1px dashed rgba(73, 80, 48, 0.30);
	border-radius: 18px;
	color: var(--etz-muted);
	background: rgba(255, 255, 255, 0.72);
}

.etz-gallery__empty[hidden] {
	display: none;
}

.etz-gallery__empty strong {
	display: block;
	margin-bottom: 7px;
	color: var(--etz-olive-dark);
	font-size: 19px;
}

/* Lightbox ---------------------------------------------------------------- */
.etz-lightbox {
	width: min(92vw, 1100px);
	max-width: 92vw;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #141611;
	color: #fff;
	overflow: hidden;
}

.etz-lightbox::backdrop {
	background: rgba(20, 22, 17, 0.82);
}

.etz-lightbox__inner {
	position: relative;
	display: grid;
	place-items: center;
	padding: 22px;
	direction: rtl;
}

.etz-lightbox__figure {
	margin: 0;
	text-align: center;
	max-width: 100%;
}

.etz-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 74vh;
	margin: 0 auto;
	border-radius: 8px;
	background: #23261f;
}

.etz-lightbox__caption {
	margin-top: 12px;
	font-size: 15px;
	color: #e9e6dc;
}

.etz-lightbox__close,
.etz-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.etz-lightbox__close:hover,
.etz-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.28);
}

.etz-lightbox__close {
	top: 14px;
	inset-inline-start: 14px;
	transform: none;
	width: 40px;
	height: 40px;
	font-size: 26px;
}

/* In RTL the "prev" (›) sits on the right, "next" (‹) on the left. */
.etz-lightbox__prev {
	inset-inline-end: 14px;
}

.etz-lightbox__next {
	inset-inline-start: 14px;
}

.etz-lightbox__close:focus-visible,
.etz-lightbox__nav:focus-visible {
	outline: 3px solid var(--etz-gold, #b99a56);
	outline-offset: 2px;
}

/* Responsive -------------------------------------------------------------- */
/* On smaller viewports the desktop `columns` setting steps down to a fixed
   layout (3 / 2 / 1), matching the reference mockup. `columns` is primarily a
   desktop control. */
@media (max-width: 1024px) {
	.etz-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.etz-gallery__filters-grid {
		grid-template-columns: 1fr;
	}

	.etz-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.etz-gallery__filters {
		padding: 18px 14px;
		border-radius: 17px;
	}

	.etz-gallery__filters-top {
		align-items: flex-start;
	}

	.etz-gallery__filter-group {
		padding: 14px;
	}

	.etz-gallery__options {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.etz-gallery__option {
		width: 100%;
		padding: 10px 8px;
		font-size: 13px;
	}

	.etz-gallery__option[data-value="all"] {
		grid-column: 1 / -1;
	}

	.etz-gallery__status {
		flex-direction: column;
		align-items: flex-start;
	}

	.etz-gallery__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.etz-gallery__card,
	.etz-gallery__img,
	.etz-gallery__option,
	.etz-gallery__reset {
		transition: none !important;
	}

	.etz-gallery__card:hover {
		transform: none;
	}

	.etz-gallery__card:hover .etz-gallery__img {
		transform: none;
	}
}