/* =====================================================================
   Palatinus Consulting · Referenciák lap (referenciak.html), 2026-10-15
   Lapsajátos kiegészítés a közös css/palatinus.css-hez. Szabályok:
   · a közös szabályt legalább akkora erősségű szelektor írja felül
     (.logofal → .logofal.ref-fal, .logofal-elem → .ref-fal .logofal-elem);
   · csak transform és opacity animál; a díszek pointer-events:none;
   · egy kép sem nagyobb a natív méreténél (a logók --w értéke a 4.12b
     képletéből jön, a fájl mérete fölé soha; a max-width csak kicsinyít).
   ===================================================================== */

/* ── 1. A fal: a 45 cég egy rácsban (pala alapon) ────────────────────
   3 oszlop telefonon, 4 a 640 px-es, 6 az 1001 px-es nézettől. A cellák
   száma minden szélességen 48 egység (24 logó + az MKVK széles cellája
   vagy a neve + 20 név + az arany cella), így a rács hézag nélkül zárul.
   Az MKVK széles mezője a lapforrásban ott áll (13. hely), ahol 4 és 6 oszlopban
   is kifér, ezért nincs grid-auto-flow: dense: a látott sorrend a DOM-sorrend,
   a billentyűzetes fókusz nem ugrál vissza (független átnézés, 2026-10-15).
   A hajszálvonalat a cellák jobb és alsó, a rács bal és felső széle adja. */
.ref-fal-belso { position: relative; z-index: 1; }
.fenyfolt.ref-fal-feny { left: 22%; top: 26%; }

.logofal.ref-fal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: clamp(30px, 4vw, 52px) 0 0;
  background: none; border: 0;
  border-top: 1px solid var(--sz-vonal); border-left: 1px solid var(--sz-vonal);
}
.ref-fal .logofal-elem {
  position: relative; display: block; min-height: 0; padding: 0;
  background: transparent; border-right: 1px solid var(--sz-vonal); border-bottom: 1px solid var(--sz-vonal);
  font: inherit; letter-spacing: normal; text-transform: none; text-align: center;
}
.ref-fal-link {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 92px; padding: 14px 8px;
  color: var(--sz-cim, var(--feher)); text-decoration: none;
}
/* hover és fókusz: halvány fényréteg és a jel arany négyzete a sarokban (csak opacity) */
.ref-fal-link::before {
  content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .08);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.ref-fal-link::after {
  content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; background: var(--arany);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.ref-fal-link:hover::before, .ref-fal-link:focus-visible::before,
.ref-fal-link:hover::after, .ref-fal-link:focus-visible::after { opacity: 1; }
.ref-fal-link:focus-visible { outline: 2px solid var(--sz-fokusz, var(--feher)); outline-offset: -6px; }

.ref-fal-kep { position: relative; width: calc(var(--w, 120px) * .8); height: auto; max-width: 100%; }
.ref-fal-nev-szoveg {
  position: relative; max-width: 100%;
  font: 400 15px/1.24 var(--betu-cim); letter-spacing: 0; color: var(--sz-cim, var(--feher));
  overflow-wrap: anywhere; text-wrap: balance;
}
/* az MKVK: 56 px magasan 384 px széles logó; 3 oszlopban a neve áll helyette */
.ref-fal-szeles .ref-fal-kep { display: none; }
/* az arany zárócella a listához visz */
.ref-fal .ref-fal-tovabb { grid-column: 1 / -1; background: var(--arany); }
.ref-fal-tovabb-link {
  gap: 10px; min-height: 64px;
  font: 600 14.5px/1.25 var(--betu-sans); letter-spacing: .05em; color: var(--ejszaka);
  --sz-fokusz: var(--ejszaka);
}
.ref-fal-tovabb-link::before { background: rgba(255, 255, 255, .2); }
.ref-fal-tovabb-link::after { display: none; }
.ref-nyil-le { position: relative; transition: transform .3s var(--athuzas); }
.ref-fal-tovabb-link:hover .ref-nyil-le { transform: translateY(3px); }
.ref-fal-tovabb-link > span { position: relative; }

@media (min-width: 640px) {
  .logofal.ref-fal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ref-fal-link { min-height: 112px; padding: 20px 12px; }
  .ref-fal-kep { width: var(--w, 120px); }
  .ref-fal-nev-szoveg { font-size: 17px; }
  .ref-fal .ref-fal-szeles { grid-column: span 3; }
  .ref-fal-szeles .ref-fal-kep { display: block; }
  .ref-fal-szeles .ref-fal-csak-keskeny { display: none; }
  .ref-fal .ref-fal-tovabb { grid-column: auto; }
  .ref-fal-tovabb-link { min-height: 112px; flex-direction: column; gap: 12px; padding: 20px 16px; }
}
@media (min-width: 1001px) {
  .logofal.ref-fal { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ref-fal-link { min-height: 124px; padding: 22px 14px; }
  .ref-fal-nev-szoveg { font-size: 18px; }
  .ref-fal-tovabb-link { min-height: 124px; }
}

/* ── 2. Ugrás betűre ──────────────────────────────────────────────── */
.ref-ugro { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 clamp(28px, 4vw, 44px); }
.ref-ugro-cim { margin: 0; font: 500 12.5px/1.4 var(--betu-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--sz-szem, var(--pala)); }
/* A 15 betű telefonon két teli sorban áll (8 + 7; a régi 7 + 7 + 1 egy magányos „V”-t hagyott),
   600 px-től egy sorban, legfeljebb 44 px-es négyzetekkel (a keskenyebb nézetben a sor kitölti a szélességet). */
.ref-ugro-lista {
  display: grid; grid-template-columns: repeat(8, minmax(0, 48px)); gap: 4px;
  flex: 1 1 auto; margin: 0; padding: 0; list-style: none;
}
@media (min-width: 600px) { .ref-ugro-lista { grid-template-columns: repeat(15, minmax(0, 44px)); } }
.ref-ugro-link {
  position: relative; isolation: isolate;
  display: grid; place-items: center; width: 100%; height: 44px;
  border: 1px solid rgba(94, 110, 125, .4);
  font: 600 15px/1 var(--betu-sans); color: var(--sz-cim, var(--tinta)); text-decoration: none;
}
/* hover: halvány arany réteg úszik be (csak opacity animál, ahogy a .gomb-szellemnél) */
.ref-ugro-link::after { content: ""; position: absolute; inset: -1px; z-index: -1; background: rgba(170, 153, 96, .18); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.ref-ugro-link:hover::after { opacity: 1; }
.ref-ugro-link:hover { border-color: var(--arany-sotet); }

/* ── 3. A regiszter: betűcsoportok ────────────────────────────────────
   Telefonon a betű sávként ragad a fejléc alatt, amíg a csoportja tart
   (ehhez a csoport blokk, nem rács). Gépen (900 px-től) a betűcsempe a bal
   hasábban ragad. A kártyák a szerződés .referenciak hasábjaiban állnak. */
.ref-regiszter { border-bottom: 1px solid var(--sz-vonal); }
.ref-csoport { display: block; padding: 0 0 26px; border-top: 1px solid var(--sz-vonal); }
.ref-betu {
  position: sticky; top: var(--fej); z-index: 2;
  display: flex; align-items: center; margin: 0 0 6px; padding: 14px 0;
  background: var(--sz-hatter, var(--papir));
}
.ref-betu-jel {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--pala); color: var(--feher);
  font: 400 24px/1 var(--betu-cim); font-variant-numeric: lining-nums;
}
/* a jel arany négyzete a csempe bal felső sarkán; mozgásban a csoport beérésekor pattan a helyére */
.ref-betu-sarok { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--arany); pointer-events: none; }
/* Rács a közös hasábos .referenciak helyett (független átnézés, 2026-10-15): a hasábok fentről
   lefelé töltődtek, így egy betűn belül a sorokban olvasva összekeveredett a betűrend
   (G: Gamax, Gebruder, GPSmart | Gate, Goodwill). A rácsban balról jobbra, soronként halad,
   és egy sor kártyái egyforma magasak. Ugyanígy döntött a kiválasztás-lap (.kt-referenciak). */
.referenciak.ref-kartyak {
  columns: auto; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.ref-kartyak .referencia {
  margin: 0; padding: 18px 18px 14px;
  border: 1px solid var(--sz-kartya-vonal, var(--pala-halvany)); border-top: 3px solid var(--pala);
  scroll-margin-top: calc(var(--fej) + 96px);   /* telefonon a ragadós betűsáv is a fejléc alatt áll */
}
.ref-kartyak .referencia-ceg { overflow-wrap: break-word; }
/* a falról ideugorva a cég kártyája kiemelve áll (csak a keret színe, animáció nélkül). A közös
   horgony-kezelő a címet replaceState-tel írja (ilyenkor a :target nem vált), a célt viszont fókuszálja:
   ezért a :focus is kiemel; a :target a megosztott, horgonyos címről érkezőnek szól. */
.ref-kartyak .referencia:target,
.ref-kartyak .referencia:focus { outline: none; border-color: var(--arany-sotet); border-top-color: var(--arany); }
@media (min-width: 600px) {
  .referenciak.ref-kartyak { gap: 20px; }
  .ref-kartyak .referencia { padding: 22px 22px 18px; }
}
@media (min-width: 900px) {
  .ref-csoport { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: clamp(24px, 3vw, 44px); padding: 36px 0 16px; }
  .ref-betu { top: calc(var(--fej) + 28px); align-self: start; margin: 0; padding: 0; background: none; }
  .ref-betu-jel { width: 80px; height: 80px; font-size: 40px; }
  .ref-betu-sarok { left: -7px; top: -7px; width: 14px; height: 14px; }
  .ref-kartyak .referencia { scroll-margin-top: calc(var(--fej) + 24px); }
}

/* ── 4. Partnereink: logó · név · webcím ─────────────────────────────
   A partnerlogók színesek; a lap két színe mellett szürkeárnyalatosan,
   fehér lapon állnak (statikus szűrő, nem animál). */
.partner-lista { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.partner {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--sz-vonal);
}
.partner:first-child { border-top: 1px solid var(--sz-vonal); }
.partner-logo {
  display: block; height: 80px; padding: 0 8px;
  background: var(--feher); border: 1px solid var(--sz-kartya-vonal, var(--pala-halvany));
}
.partner-logo picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.partner-logo .partner-logo-kep {
  height: var(--logo-h, 40px); width: auto; max-width: 100%;
  object-fit: contain; filter: grayscale(1);
}
.partner-adat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.partner-nev { font: 600 16.5px/1.35 var(--betu-sans); color: var(--sz-cim, var(--tinta)); overflow-wrap: break-word; }
.partner-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  font: 500 15px/1.3 var(--betu-sans); color: var(--sz-szoveg, var(--tinta));
  text-decoration: underline; text-decoration-color: var(--sz-alahuzas, var(--arany-sotet));
  overflow-wrap: anywhere;
}
.partner-link-ikon { width: 14px; height: 14px; flex: none; transition: transform .3s var(--athuzas); }
.partner-link:hover .partner-link-ikon { transform: translate(2px, -2px); }
@media (min-width: 600px) {
  .partner { grid-template-columns: 160px minmax(0, 1fr); gap: 22px; padding: 16px 0; }
  .partner-logo { height: 92px; padding: 0 12px; }
}
@media (min-width: 900px) {
  .partner-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); }
  .partner:nth-child(2) { border-top: 1px solid var(--sz-vonal); }
}

/* ── 5. A fal apró kiegészítései ──────────────────────────────────── */
.ref-fal-nev-szoveg { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 359px) { .ref-fal-nev-szoveg { font-size: 14px; } }

/* ── 6. Ügyfeleink írták: az ALD Automotive hivatalos logója az aláírás fölött
   (a 4.12b fehér változata éjszakai alapon; 135 × 36 px, a 449 × 120-as fájlnál kisebb) */
.idezet-forras .ref-hang-logo { width: var(--w, 120px); height: auto; margin: 0 0 14px; }
/* Ahol minden szó egészben elfér a cellában (mérve: 900–1000 px és 1180 px fölött; a leghosszabb,
   „Biztonságtechnikai” 18 px-en 138 px, a cella tartalma 1180 px-en 148 px), ott nincs elválasztás:
   a kiegyensúlyozott tördelés különben fölöslegesen is elválasztana („CYEB Energia-kereskedő”). */
@media (min-width: 900px) and (max-width: 1000px), (min-width: 1180px) {
  .ref-fal-nev-szoveg { hyphens: none; -webkit-hyphens: none; }
}

/* ── 7. Fejléc: az első 8 px görgetés után tömör (független átnézés, 2026-10-15) ──
   A js/lapok/referenciak.js 5. pontja teszi fel a html.rf-gorgetve osztályt (mérés és ok ott):
   a közös fejléc a sötét nyitókép végéig átlátszó, és a nyitókép tartalma a logó és a menü
   mögött futott. A szelektor (0,4,2) erősebb a közös html.mozog .fejlec-atlatszo::before
   szabálynál (0,2,2). Ugyanez áll a testvérlapokon; ha a közös fejléc megoldja, törölhető. */
html.mozog.rf-gorgetve .lap-referenciak .fejlec-atlatszo::before { opacity: 1; }