/* ============================================================
   Márka-adatlap (a mockup szerint): hero-galéria, fejléc,
   megközelítés + koncepció, arany elválasztó, vezető-kártyák.
   ============================================================ */

/* ---------- Kép-placeholder (szürke doboz, mint a mockupon) ---------- */
.er-bimg-ph {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 90px;
	background: #d9d9d9;
	border-radius: 12px;
	position: relative;
}
.er-bimg-ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b5b5b5'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") no-repeat center / 34px;
	opacity: .8;
}

/* ---------- 1. Hero-galéria: 4 kicsi + 1 nagy ----------
   Méretek a widget „Méretek” szekciójából (CSS-változók):
   --er-bgal-h (magasság), --er-bgal-main-w (nagy kép), --er-bgal-thumb-w (kicsik). */
.er-bgal {
	display: grid;
	grid-template-columns: var(--er-bgal-thumb-w, 96px) var(--er-bgal-main-w, 1fr);
	gap: 14px;
	height: 100%;
	align-items: stretch;
}
.er-bgal__thumbs {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	/* A csempesor a nagy kép magasságáig ér; azon túl görgethető (egérgörgővel is),
	   így a galéria tetszőleges számú képet kezel. A scrollbart elrejtjük – a
	   görgethetőséget a szélek lágy elhalványítása jelzi (lásd .can-scroll-*). */
	max-height: var(--er-bgal-h, 430px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* régi Edge */
	-webkit-mask-image: var(--er-bgal-mask, none);
	mask-image: var(--er-bgal-mask, none);
}
.er-bgal__thumbs::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit */

/* Lágy elhalványítás ott, ahol van még görgethető tartalom. */
.er-bgal__thumbs.can-scroll-up   { --er-bgal-mask: linear-gradient(to bottom, transparent 0, #000 22px); }
.er-bgal__thumbs.can-scroll-down { --er-bgal-mask: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%); }
.er-bgal__thumbs.can-scroll-up.can-scroll-down {
	--er-bgal-mask: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
/* Húzható a sor – a marker-osztályok csak akkor vannak kint, ha van hova görgetni. */
.er-bgal__thumbs.can-scroll-up,
.er-bgal__thumbs.can-scroll-down { cursor: grab; }
.er-bgal__thumbs.is-dragging { cursor: grabbing; user-select: none; }
.er-bgal__thumbs.is-dragging .er-bgal__thumb { pointer-events: none; }

.er-bgal__thumb {
	/* Mindig NÉGYZET – a csempe szélességéhez igazodva, a nagy kép magasságától függetlenül. */
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #d9d9d9;
	position: relative;
	padding: 0;
	border: 0;
	cursor: pointer;
	appearance: none;
	display: block;
}
/* Az aktív csempe teljes fényű, a többi sötétített (konvenció szerint).
   A keret BELÜL rajzolódik (::after), mert a csempesor overflow-a a kívülre
   eső box-shadow-t levágná; inset box-shadow-t pedig a kép takarna el. */
.er-bgal__thumb.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 3px solid var(--e-global-color-primary, #CAA05C);
	border-radius: 12px;
	pointer-events: none;
}
/* Az átmenetet a lenti közös kép-szabály adja (transform+filter+opacity) –
   itt szándékosan NEM írunk transitiont, hogy a hover-nagyítás megmaradjon. */
.er-bgal__thumb img { filter: brightness(.58); }
.er-bgal__thumb.is-active img,
.er-bgal__thumb:hover img,
.er-bgal__thumb:focus-visible img { filter: brightness(1); }
.er-bgal__thumb:focus-visible { outline: 2px solid var(--e-global-color-primary, #CAA05C); outline-offset: 2px; }
.er-bgal__thumb--ph { cursor: default; }
.er-bgal__thumb--ph img { filter: none; }
/* A képek ABSZOLÚT kitöltéssel fedik a dobozukat – a téma globális
   img{height:auto} szabálya ellen !important-tal védve, hogy soha ne
   maradjon szürke sáv a kép körül. */
.er-bgal__thumb img,
.er-bgal__main img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.er-bgal__main {
	border-radius: 14px;
	overflow: hidden;
	background: #d9d9d9;
	height: var(--er-bgal-h, auto);
	min-height: var(--er-bgal-h, 430px);
	position: relative;
}
.er-bgal__main .er-bimg-ph { min-height: 430px; border-radius: 14px; }

/* ---------- 2. Fejléc (jobb hasáb) ---------- */
.er-bhead__title {
	margin: 0 0 14px;
	font-family: var(--e-global-typography-secondary-font-family, "Cal Sans"), sans-serif;
	font-size: 34px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, #1C1C1D);
}
.er-bhead__logo { margin: 0 0 16px; }
.er-bhead__logo img { max-height: 88px; width: auto; display: block; }
.er-bhead__ratings {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 16px;
}
.er-brate {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--e-global-color-secondary, #1C1C1D);
	text-decoration: none;
}
.er-brate__src {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, #1C1C1D);
	min-width: 86px;
}
.er-brate__val { font-weight: 600; }
.er-brate__count { color: var(--e-global-color-text, #59585D); }

/* Üzemeltető holding + Szakmai igazgatók (Eventrend Világa változat) */
.er-bhead__holding {
	border-top: 1px solid #1C1C1D;
	padding: 13px 0;
	font-size: 13.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, #1C1C1D);
}
.er-bhead__holding span { font-weight: 700; }
.er-bhead__directors { padding-top: 2px; }
.er-bhead__directors-label {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 0 0 8px;
	color: var(--e-global-color-secondary, #1C1C1D);
}
.er-bhead__directors ul { list-style: none; margin: 0; padding: 0; }
.er-bhead__directors li {
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 4px 0;
	color: var(--e-global-color-secondary, #1C1C1D);
}
.er-bhead__directors li span { color: var(--e-global-color-text, #59585D); }

/* Dinamikus csillagok: 5 csillag, tört-kitöltéssel (pl. 4,5 → 4½; 4,33 → 4⅓) */
.er-stars { display: inline-flex; gap: 1px; line-height: 1; }
.er-star {
	position: relative;
	display: inline-block;
	font-size: 16px;
	line-height: 1;
}
.er-star__base { color: #d8d3c8; }
.er-star__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	color: var(--e-global-color-secondary, #1C1C1D);
}

/* Gombok: online asztalfoglalás (arany) + aktuális étlap (keretes) */
.er-bbtns {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 18px 0 8px;
}
.er-bbtn {
	display: block;
	text-align: center;
	padding: 13px 18px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}
.er-bbtn--gold {
	background: var(--e-global-color-primary, #CAA05C);
	color: #fff;
	border: 1px solid var(--e-global-color-primary, #CAA05C);
}
.er-bbtn--gold:hover { opacity: .88; color: #fff; }
.er-bbtn--line {
	border: 1px solid var(--e-global-color-secondary, #1C1C1D);
	color: var(--e-global-color-secondary, #1C1C1D);
	background: transparent;
}
.er-bbtn--line:hover {
	background: var(--e-global-color-secondary, #1C1C1D);
	color: #fff;
}

/* ---------- Accordion (details/summary) ---------- */
.er-acc {
	border-top: 1px solid #1C1C1D;
	padding: 0;
	margin: 0 0 4px;
}
.er-acc summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, #1C1C1D);
}
.er-acc summary::-webkit-details-marker { display: none; }
.er-acc summary::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
	flex: 0 0 auto;
	margin-left: 12px;
}
.er-acc[open] summary::after { transform: rotate(-135deg); margin-top: 5px; }
.er-acc__body {
	padding: 0 0 16px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--e-global-color-text, #59585D);
}
.er-acc__body p { margin: 0 0 12px; }
.er-acc__body p:last-child { margin-bottom: 0; }

/* ---------- 3. Megközelítés ---------- */
.er-bsec-title {
	margin: 0 0 12px;
	font-family: var(--e-global-typography-secondary-font-family, "Cal Sans"), sans-serif;
	font-size: 20px;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, #1C1C1D);
}
/* Megközelítés fejléc-sor: cím balra, pin + address jobbra */
.er-bmap__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.er-bmap__head .er-bsec-title { margin: 0; }
.er-bmap__address {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	margin: 0;
	color: var(--e-global-color-secondary, #1C1C1D);
}
.er-bmap__address svg { color: var(--e-global-color-primary, #CAA05C); flex: 0 0 auto; }
.er-bmap__frame iframe {
	width: 100%;
	border: 0;
	border-radius: 14px;
	display: block;
}
.er-bmap__link {
	display: inline-block;
	margin-top: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--e-global-color-primary, #CAA05C);
	text-decoration: none;
}
.er-bmap__link:hover { text-decoration: underline; }

/* ---------- 4. Gasztro koncepció ---------- */
.er-bconcept__imgs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 14px;
}
.er-bconcept__img {
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: #d9d9d9;
	position: relative;
}
.er-bconcept__img img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* ---------- Arany elválasztó háromszög ----------
   A .e-con.er-tri-divider kettős osztály szándékos: az Elementor 4.1.4
   konténer-CSS-e (.e-con { --height:auto; height:var(--height); }) a betöltési
   sorrend miatt elütné az egyszeres osztályú height-et, és a háromszög
   0 magasra esne össze. A magasabb specificitás sorrendtől függetlenül nyer. */
.er-tri-divider,
.e-con.er-tri-divider {
	--height: 58px;
	--min-height: 58px;
	height: 58px;
	min-height: 58px;
	background: var(--e-global-color-primary, #CAA05C);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: relative;
}

/* A konténerbe javításként beszúrt láthatatlan töltelék-widget (nélküle az
   Elementor 4.1.4 az üres kimenetű konténert eldobná) ne hasson a layoutra. */
.er-tri-divider > .elementor-element {
	position: absolute;
	inset: 0 auto auto 0;
	width: 0;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* ---------- 5. Vezető-kártyák ---------- */
.er-bleaders {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 56px;
}
/* Ha csak egy vezető van megadva: egy kártya, középen. */
.er-bleaders--single {
	grid-template-columns: 1fr;
	max-width: 560px;
	margin: 0 auto;
}
.er-bleader { text-align: left; }
.er-bleader__role {
	text-align: center;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #CAA05C);
	margin: 0 0 8px;
}
.er-bleader__name {
	text-align: center;
	margin: 0 0 10px;
	font-family: var(--e-global-typography-secondary-font-family, "Cal Sans"), sans-serif;
	font-size: 28px;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, #1C1C1D);
}
.er-bleader__badge {
	display: flex;
	align-items: center;
	justify-content: var(--er-bl-justify, center);
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 0 0 18px;
	color: var(--e-global-color-secondary, #1C1C1D);
}
.er-bleader__badge svg { color: var(--e-global-color-primary, #CAA05C); flex-shrink: 0; }
/* Szellem-jelvény: a másik kártyán van partner-felirat – azonos magasságú üres
   sor, hogy a két arckép mindig egy vonalban legyen. */
.er-bleader__badge--ghost { visibility: hidden; }
.er-bleader__photo {
	border-radius: 14px;
	overflow: hidden;
	background: #d9d9d9;
	/* Alap: álló 9:16 arány (placeholdernek és képnek is), visszafogott
	   mérettel, középre igazítva; a widget Fotó magasság/szélesség
	   controljai felülírják (aspect-ratio: auto, saját width). */
	aspect-ratio: 9 / 16;
	width: min(100%, 320px);
	margin: 0 auto 22px;
	position: relative;
}
.er-bleader__photo img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.er-bleader__contact { list-style: none; margin: 0; padding: 0; }
.er-bleader__contact li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 4px 0;
	font-size: 14px;
}
.er-bleader__contact svg { color: var(--e-global-color-secondary, #1C1C1D); flex: 0 0 auto; }
.er-bleader__contact a { color: var(--e-global-color-text, #59585D); text-decoration: none; }
.er-bleader__contact a:hover { color: var(--e-global-color-primary, #CAA05C); }

/* ---------- Kép-hover: finom ráközelítés ---------- */
.er-bgal__thumb img,
.er-bgal__main img,
.er-bconcept__img img,
.er-bleader__photo img {
	/* az opacity is itt animál (helycsere-áttűnés) – így az inline stílus
	   sosem írja felül a hover-nagyítás transform-átmenetét */
	transition: transform .45s ease, filter .45s ease, opacity .22s ease;
}
/* Nagyító-kurzor csak ott, ahol modal nyílik. */
.er-bgal__main img,
.er-bconcept__img img,
.er-bleader__photo img { cursor: zoom-in; }
/* A kis képek a nagy képet váltják (nem nagyítanak): a kattintást/húzást a
   gomb kapja el, a natív kép-húzás pedig tiltva, hogy ne vigye el a drag-et. */
.er-bgal__thumb img { pointer-events: none; -webkit-user-drag: none; user-drag: none; }
.er-bgal__thumb:hover img,
.er-bgal__main:hover img,
.er-bconcept__img:hover img,
.er-bleader__photo:hover img {
	transform: scale(1.05);
	filter: brightness(1.04);
}

/* ---------- Lightbox (modal) ---------- */
body.er-lightbox-open { overflow: hidden; }
.er-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(16, 15, 14, 0.86);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 0;
	transition: opacity .25s ease;
	cursor: zoom-out;
}
.er-lightbox.is-visible { display: flex; }
.er-lightbox.is-open { opacity: 1; }
.er-lightbox__img {
	max-width: 92vw;
	max-height: 88vh;
	width: auto !important;
	height: auto !important;
	border-radius: 14px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
	transform: scale(0.92);
	transition: transform .28s cubic-bezier(.2, .7, .3, 1.05);
	cursor: default;
}
.er-lightbox.is-open .er-lightbox__img { transform: scale(1); }
.er-lightbox__close {
	position: absolute;
	top: 22px;
	right: 26px;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, transform .25s ease, border-color .2s ease;
}
.er-lightbox__close:hover {
	background: var(--e-global-color-primary, #CAA05C);
	border-color: transparent;
	transform: rotate(90deg);
}

/* ---------- Reszponzív ---------- */
@media (max-width: 900px) {
	.er-bgal { grid-template-columns: 1fr; }
	.er-bgal__thumbs { flex-direction: row; order: 2; }
	.er-bgal__thumb { flex: 1 1 0; aspect-ratio: 1 / 1; }
	.er-bgal__main { min-height: 260px; }
	.er-bgal__main .er-bimg-ph { min-height: 260px; }

	/* A nagy kép alá került csempesor ne lógjon a márkanévbe.
	   A hero galéria-oszlopa flexből block-flow-ra vált, így a teljes
	   galéria (nagy kép + csempesor) magasságát tartalmazza; flexben a
	   csempék (aspect-ratio, flex:1 1 0) min-content magassága 0, ezért
	   az oszlop a nagy kép magasságára zsugorodott és a sor kilógott a
	   következő (márkanév) blokkra. A height:100% láncot (Elementor
	   widget-wrapper + galéria) is feloldjuk, a csempesort kiengedjük. */
	.er-bp-row1 > .e-con:first-child,
	.er-bp-row1 > .e-con:has( .er-bgal ) { display: block !important; }
	.elementor-widget-eventrend-brand-gallery > .elementor-widget-container { height: auto !important; }
	.er-bgal { height: auto !important; }
	.er-bgal__thumbs { max-height: none !important; overflow: visible !important; }

	.er-bhead__title { font-size: 27px; margin-top: 8px; }
	.er-bleaders { grid-template-columns: 1fr; gap: 40px; }
	.er-tri-divider,
	.e-con.er-tri-divider { --height: 36px; --min-height: 36px; height: 36px; min-height: 36px; }
	.er-bconcept__imgs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}