/*!
 * A&A Forgacs Muhelye - Referenciagaleria (Munkaink oldal, ID 293)
 *
 * Szurosav + haromoszlopos racs a Claude Design latvanyterv szerint.
 * Szinek: kizarolag az Elementor Kit globalis tokenjei, illetve a
 * szovegtoken attetszosegbol szarmaztatott hajszalvonalak.
 */

.aa-ref {
	--aa-ink: var(--e-global-color-text, #F3EEE7);
	--aa-gold: var(--e-global-color-accent, #B88A4A);
	--aa-dark: var(--e-global-color-146552c, #0F0B09);
	--aa-surface: var(--e-global-color-primary, #1E1612);
	--aa-hair: rgba(243, 238, 231, 0.14);
	--aa-muted: rgba(243, 238, 231, 0.55);
	--aa-btn-fg: rgba(243, 238, 231, 0.72);
}

/* =========================================================
 * SZUROSAV
 * ========================================================= */

.aa-ref__bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--aa-hair);
	padding-bottom: 28px;
	margin-bottom: 40px;
}

.aa-ref__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.aa-ref .aa-ref__filters .aa-ref__btn {
	margin: 0;
	padding: 11px 20px;
	border: 1px solid var(--aa-hair);
	border-radius: 0;
	background: transparent;
	color: var(--aa-btn-fg);
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.aa-ref .aa-ref__filters .aa-ref__btn:hover {
	border-color: var(--aa-gold);
	color: var(--aa-ink);
}

.aa-ref .aa-ref__filters .aa-ref__btn:focus-visible {
	outline: 2px solid var(--aa-gold);
	outline-offset: 2px;
}

.aa-ref .aa-ref__filters .aa-ref__btn.is-active {
	background: var(--aa-gold);
	border-color: var(--aa-gold);
	color: var(--aa-dark);
}

.aa-ref__count {
	flex: 0 0 auto;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--aa-muted);
	white-space: nowrap;
	padding-bottom: 2px;
}

/* A szamlalo a latvanyterv szerint a sor jobb szelen marad; a szurogombok
   a sajat dobozukon belul tordelnek tobb sorba. (aa-ref__bar-nowrap) */
@media (min-width: 768px) {
	.aa-ref__bar {
		flex-wrap: nowrap;
	}
}

/* =========================================================
 * RACS
 * ========================================================= */

.aa-ref__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.aa-ref__item {
	margin: 0;
	min-width: 0;
}

.aa-ref__item.is-hidden {
	display: none;
}

/* A keret adja az egyseges keparanyt - a kepek kulonbozo meretuek es
   tajolasuak, ezert object-fit: cover vagja oket torzitas nelkul.
   A fix arany egyben a layout shiftet is kizarja betoltes kozben. */
/* KET DOLOG FONTOS ITT:
   1. A .aa-ref__media egy <span>, tehat alapertelmezetten inline - display:
      block nelkul sem a width, sem az aspect-ratio nem ervenyesul rajta.
   2. Az Elementor `.elementor img { height: auto }` szabalya (0,1,1)
      erosebb, mint a puszta `.aa-ref__img` (0,1,0), ezert a kep szabalya a
      `.aa-ref .aa-ref__media` kontextusban all (0,3,0). !important nem kell. */
.aa-ref .aa-ref__media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 20 / 17;
	overflow: hidden;
	background: var(--aa-surface);
}

.aa-ref .aa-ref__media .aa-ref__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

@supports not (aspect-ratio: 20 / 17) {
	.aa-ref .aa-ref__media {
		height: 340px;
	}
}

/* ---------------------------------------------------------
 * EGYEDI FOKUSZPONTOK
 * A cover alapertelmezese (center center) 158 kepnel jo vagast ad.
 * Ahol nem, ott a kep FAJLNEVEHEZ kotve finomitjuk - igy a beallitas
 * a szures, a sorrend es a kesobbi feltoltesek fuggvenyeben is mindig
 * ugyanarra a kepre vonatkozik.
 * --------------------------------------------------------- */

/* Panorama latvanyterv (3.16:1): kozepre vagva a jobb oldali alak feje
   levagodik, 60%-nal a konyhasziget es az alak is egyben marad. */
.aa-ref .aa-ref__item[data-full*="3d-latvanytervezes-kep14."] .aa-ref__img {
	object-position: 60% center;
}

.aa-ref__caption {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--aa-muted);
	padding-top: 12px;
}

/* =========================================================
 * SZURESI ATMENET - visszafogott, rovid
 * ========================================================= */

.aa-ref__grid.is-switching .aa-ref__item:not(.is-hidden) {
	animation: aa-ref-in 0.24s ease both;
}

@keyframes aa-ref-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aa-ref__grid.is-switching .aa-ref__item:not(.is-hidden) {
		animation: none;
	}
}

/* =========================================================
 * RESZPONZIV
 * ========================================================= */

@media (max-width: 1024px) {
	.aa-ref__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.aa-ref__bar {
		gap: 24px;
		padding-bottom: 22px;
		margin-bottom: 32px;
	}
}

@media (max-width: 767px) {
	.aa-ref__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.aa-ref__bar {
		align-items: flex-start;
		flex-direction: column;
		gap: 18px;
		padding-bottom: 20px;
		margin-bottom: 26px;
	}

	.aa-ref__filters {
		gap: 8px;
	}

	.aa-ref .aa-ref__filters .aa-ref__btn {
		padding: 10px 15px;
		font-size: 11px;
		letter-spacing: 1.1px;
	}

	.aa-ref__count {
		padding-bottom: 0;
	}
}

/* =========================================================
 * VILAGOS ZARO SZEKCIO - gomb a vilagos hatteren
 * (a Kit arany tokene tul alacsony kontrasztot adna vilagos alapon,
 *  ezert itt a sotet token a felirat szine)
 * ========================================================= */

.aa-light-cta .elementor-button {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* =========================================================
 * LIGHTBOX
 * Teljes kepernyos nezet. A racsban a kepek object-fit: cover-rel
 * vannak vagva, itt viszont contain - a teljes kep latszik, torzitas
 * es levagas nelkul.
 * ========================================================= */

.aa-ref__open {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	appearance: none;
	-webkit-appearance: none;
}

.aa-ref__open:focus-visible {
	outline: 2px solid var(--aa-gold);
	outline-offset: 3px;
}

.aa-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.aa-lb.is-open {
	opacity: 1;
}

.aa-lb[hidden] {
	display: none;
}

.aa-lb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 11, 9, 0.94);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.aa-lb__stage {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 76px 96px 84px;
	pointer-events: none;
}

.aa-lb__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: opacity 0.18s ease;
}

.aa-lb__figure.is-loading {
	opacity: 0.35;
}

.aa-lb__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	pointer-events: auto;
}

.aa-lb__caption {
	flex: 0 0 auto;
	margin-top: 16px;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: rgba(243, 238, 231, 0.62);
	text-align: center;
	pointer-events: auto;
}

.aa-lb__btn {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(243, 238, 231, 0.16);
	border-radius: 0;
	background: rgba(30, 22, 18, 0.72);
	color: var(--aa-ink);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.aa-lb__btn svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.aa-lb__btn:hover {
	border-color: var(--aa-gold);
	background: rgba(184, 138, 74, 0.16);
}

.aa-lb__btn:focus-visible {
	outline: 2px solid var(--aa-gold);
	outline-offset: 2px;
}

.aa-lb__btn[hidden] {
	display: none;
}

.aa-lb__btn--close {
	top: 20px;
	right: 20px;
}

.aa-lb__btn--prev {
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.aa-lb__btn--next {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.aa-lb__counter {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	letter-spacing: 1.8px;
	color: rgba(243, 238, 231, 0.5);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.aa-lb,
	.aa-lb__figure {
		transition: none;
	}
}

@media (max-width: 1024px) {
	.aa-lb__stage {
		padding: 70px 76px 80px;
	}
}

/* Mobil: a kep a teljes szelesseget hasznalja, a vezerlok pedig alul
   sorakoznak, hogy ne takarjak a kepet. */
@media (max-width: 767px) {
	.aa-lb__stage {
		padding: 62px 12px 96px;
	}

	.aa-lb__btn {
		width: 48px;
		height: 48px;
	}

	.aa-lb__btn--close {
		top: 12px;
		right: 12px;
	}

	.aa-lb__btn--prev,
	.aa-lb__btn--next {
		top: auto;
		bottom: 16px;
		transform: none;
	}

	.aa-lb__btn--prev {
		left: 12px;
	}

	.aa-lb__btn--next {
		right: 12px;
	}

	.aa-lb__counter {
		bottom: 32px;
	}

	.aa-lb__caption {
		margin-top: 12px;
		font-size: 11px;
	}
}