/* ==========================================================================
   brands.css — Márka logó carousel.
   MÉRT (DESIGN-SPEC.md 6. fejezet 11. sora): a szakasz 120 px, tehát a
   szakaszcím 49 px-e után a csík 71 px körüli. A logó ezért 72 px magasságon
   cappol, a képfájl viszont 160 px-ig mehet: a kettő aránya adja a retina
   élességet külön @2x készlet nélkül.
   AZ EGYSZERRE LÁTHATÓ LOGÓK SZÁMÁT a --brands-visible változó adja, amit a
   sablon ír ki az admin beállításából. Telefonon ezt FELÜLÍRJUK 2,2-re: tizenkét
   logó egy 360 pixeles sávban 26 pixel széles lenne, tehát olvashatatlan. A
   tört érték szándékos, ettől kandikál ki a szomszéd logó széle mindkét
   oldalon, ahogy a terv mutatja.
   NULLA ÜRES SOR.
   ========================================================================== */
/* TARTALÉK ÉRTÉK. A sablon a szakaszra írja ki az admin beállítását inline
   stílusban, ami ezt a szabályt legyőzi. Ez a deklaráció arra az esetre van,
   ha a blokk sablon nélkül, például egy régi mentésből renderelne: a nulla
   osztó érvénytelen calc()-ot adna, és a csík egy sorba omlana. */
/* A CSIK FELETT 50 PIXEL (kliens-keres). A csik 2026-09-10 ota MINDEN lapon
   megjelenik a lablec felett, es ott KOZVETLENUL a `<main>` utan all, tehat
   nem kap semmilyen szakasz-tavolsagot: MERVE az Akciok lapon a res nulla
   volt, a termekkartyak hozzaertek.
   .
   A fooldalon a csik szakaszkent all, ahol az elozo szakasz 30 pixeles also
   margoja adta a rest. A ket margo SZOMSZEDOS, tehat OSSZEOLVAD, es a nagyobb
   nyer: ott a res 30-rol 50 pixelre no. Ez szandekos, igy a tavolsag minden
   lapon ugyanannyi. */
.brands {
	--brands-visible: 8;
	--brands-gap: var(--gutter);
	margin-top: 50px;
	/* A CSIK ALSO LEVEGOJE (kliens-keres): a lablec folott futo hullam igy nem
	   er hozza a logokhoz. Belso margo, nem kulso: a kulso margo a lablec
	   sajat margojaval OSSZEOLVADNA (szomszedos fuggoleges margok), tehat a
	   nagyobbik nyerne, es a 40 pixel egyszeruen elveszne. */
	padding-bottom: 40px;
}
/* A CSIKNAK NINCS SAJAT DOBOZA (kliens-dontes): se hatter, se lekerekites, se
   arnyek. A lablec folott futo hullam igy a logok MOGOTT is latszik, egy feher
   sav kulonben kettevagta volna.
   .
   A belso margo MARAD: a nyilaknak es a logoknak ugyanannyi hely kell, mint
   eddig, tehat a csik magassaga es a logok merete valtozatlan. */
.brands__carousel {
	padding: var(--sp-4) var(--sp-16);
}
.brands__row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--brands-visible) - 1) * var(--brands-gap)) / var(--brands-visible));
	gap: var(--brands-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.brands__row::-webkit-scrollbar {
	display: none;
}
.brands__item {
	scroll-snap-align: start;
	min-width: 0;
}
.brands__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	padding: var(--sp-1) var(--sp-2);
	color: var(--c-text);
	text-align: center;
	text-decoration: none;
}
.brands__link:hover {
	text-decoration: none;
}
/* A LOGÓK SZÜRKÉN ÁLLNAK, és ez nem stílusgyakorlat: a márkalogók egymás
   mellett tucatféle saját színt hoznak, és egy tarka csík elviszi a figyelmet
   a fölötte lévő termékekről. Rámutatva vagy fókuszba kerülve visszakapja a
   saját színét, tehát a márka azonosítása nem sérül. */
/* A LOGOK MOGOTT NINCS FEHER DOBOZ (kliens-keres). A kepek egy resze BEEGETETT
   feher hatterrel jott (peldaul a Lenor), ami a korabbi feher savon nem
   latszott, a kek hatteren viszont feher teglalapkent allt a logo korul.
   .
   A `mix-blend-mode: multiply` a feher pixeleket ATLATSZOVA teszi: a szorzas
   feher (1,0) tenyezovel a hatteret adja vissza valtozatlanul, minden sotetebb
   pixel pedig marad. A megoldas ezert MINDEN logora all, a mar atlatszo
   PNG-kre is, es nem kell 133 kepfajlt ujra vagni.
   .
   FELTETELE A VILAGOS HATTER, ami itt teljesul: a csik a lap also, majdnem
   feher savjaban all. Sotet hatteren a szorzas a logot is eltuntetne. */
.brands__logo {
	max-width: 100%;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: grayscale(1);
	opacity: 0.72;
	transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.brands__link:hover .brands__logo,
.brands__link:focus-visible .brands__logo {
	filter: none;
	opacity: 1;
}
/* NÉVRE VISSZAESÉS. Csak akkor fordul elő, ha az admin kézzel választott egy
   logó nélküli márkát: a csík ilyenkor sem hagy üres helyet. */
.brands__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-text);
}
.brands__link:hover .brands__name {
	color: var(--c-primary-dark);
}
/* A NYILAK A KÁRTYÁN BELÜL ÁLLNAK, nem rajta kívül, ahogy a terven is. Az
   alapstílus (base.css) a konténeren kívülre teszi őket, mert a
   termék-carousel a teljes sávot használja. Itt a kártya 64 pixeles oldalsó
   paddingja pontosan a 12 pixel + 40 pixel gombnak van kihagyva. A szögletes
   sarok is a terv sajátja, a kör alakú alapváltozat helyett. */
.brands__carousel .carousel__arrow {
	border-radius: var(--r-sm);
	color: var(--c-primary);
}
.brands__carousel .carousel__arrow--prev {
	left: var(--sp-3);
}
.brands__carousel .carousel__arrow--next {
	right: var(--sp-3);
}
.brands__carousel .carousel__arrow:hover:not(:disabled) {
	border-color: var(--c-primary);
	color: var(--c-primary-dark);
}
@media (max-width: 991px) {
	.brands__carousel {
		--brands-visible: 4;
	}
}
@media (max-width: 767px) {
	/* TELEFON: EGY TELJES LOGO KOZEPEN, mindkét oldalon egyenlő kandikálással.
	   .
	   MÉRT hiba javítása. Korábban itt is a `--brands-visible: 2.2` és a
	   `scroll-snap-align: start` volt érvényben, és attól a logó a sáv BAL
	   SZÉLÉHEZ tapadt: a maradék rés mindig a jobb oldalon jelent meg, tehát a
	   csík láthatóan félrehúzott volt (a bal nyíl egy hajszálvékony csíkot
	   takart, a jobb oldali logó pedig a jobb nyílhoz szorult).
	   .
	   A megoldás nem egy másik törtszám, hanem MÁS ILLESZTÉS. A sín 28
	   százalék belső margót kap mindkét oldalon, az elem szélessége a maradék
	   100 százalék, az illesztés pedig KÖZÉPRE megy. Mérve 390 pixeles
	   nézeten: 82 pixel kandikálás, 12 pixel rés, a 147 pixeles teljes logó,
	   12 pixel rés, 82 pixel kandikálás, tehát a logó közepe 168 pixel, ami
	   pontosan a 335 pixeles kártya közepe, MINDEN állásban.
	   .
	   A 28 százalék nem esztétikai szám: a kandikáló sáv így elég széles
	   ahhoz, hogy a szomszédos logó SZÉLE tényleg kilátszódjon. Egy szűkebb
	   kandikálás (34 pixel) mellett a szomszéd cellájának üres része látszott
	   csak, mert a logó a saját cellájában is középen áll, és a csík úgy
	   egyetlen logónak tűnt két nyíl között.
	   .
	   A legelső álláson a bal oldalon nincs mit kandikálni, de a belső margó
	   miatt a logó ott IS középen áll, nem a szélen.
	   .
	   A nyilak szándékosan a kandikáló logón állnak, nem mellette: egy 360
	   pixeles sávban a gomboknak kihagyott hely a teljes logóból vinne el. A
	   féligáttetsző háttér ezért kell, így a gomb alatti logó nem tűnik el,
	   csak halványul. */
	/* TELEFONON A CSIK A KEPERNYO KET SZELEIG ER (kliens-keres). A negativ
	   oldalso margo pontosan a konteneren belso margoja, tehat a sav kilep
	   belole: merve 390 pixeles nezeten 335 -> 375 pixel, ami a teljes
	   tartalom-szelesseg. Igy a kandikalo logokbol tobb latszik, es a csik nem
	   ul beljebb, mint a folotte levo szakaszok. */
	.brands__carousel {
		margin-inline: calc(var(--gutter) * -1);
		padding: var(--sp-3) 0;
	}
	.brands__row {
		--brands-gap: var(--sp-3);
		grid-auto-columns: 100%;
		padding-inline: 28%;
	}
	.brands__item {
		scroll-snap-align: center;
	}
	.brands__link {
		height: 64px;
	}
	.brands__logo {
		max-height: 64px;
	}
	.brands__carousel .carousel__arrow {
		background: rgba(255, 255, 255, 0.92);
	}
	.brands__carousel .carousel__arrow--prev {
		left: var(--sp-1);
	}
	.brands__carousel .carousel__arrow--next {
		right: var(--sp-1);
	}
}