/* ==========================================================================
   OPTIMUM AUTÓSISKOLA — akciok.css (Akciók oldal)
   Fent a lebegő tárgymező (a fejrész: címke, cím, bevezető, körülötte vaskos
   „%” jelek és árcímkék), alatta fehér alapon az akciókártyák (egymás mellett,
   amennyi kifér; egy kártya középen, legfeljebb 560px széles). Ha nincs futó
   akció, a „nincs akció” doboz látszik. A kártyákat az adminfelület írja az
   oldalra (lib.php · adm_akcio_kartya), a láthatóságukat a main.js a dátum
   szerint frissíti. Csak a base.css tokenjeit használja.
   ========================================================================== */

/* A lábléc ne ugorjon fel a képernyő közepére: az oldal kitölti a kijelzőt */
.akciok {
  min-height: calc(100vh - 320px);
  min-height: calc(100svh - 320px);
  padding-top: var(--nav-h);          /* a sáv közvetlenül a fix fejléc alatt kezdődik */
}

/* --- Lebegő tárgymező (a főoldali „Tanulj bárhonnan, bármikor” sáv rendszere: base.css · 18.) ---
   Ugyanaz a technika és ritmus: egy --p szám (main.js · 11., .float-band--top: a lap tetején 0,
   görgetésre +0,5-ig nő), tárgyanként --vy/--hx/--spin/--r0, a tétlen ringás a külön
   translate/rotate-en (float-idle, 3,6–5,4 s, legfeljebb 14px és 8°). A tárgyak a sávban
   maradnak (overflow: hidden), így a sávon kívüli kártyákat sosem érik el.
   A sáv függőleges belső tere a szekció-térköz skáláján van (asztal/tablet 120px, álló telefon
   72px, alacsony kijelző 64/56px) — a tárgyak a szöveghasáb mellett, fölött és a sarkokban férnek
   el, így a kártyák az első képernyőn maradnak.
   Elhelyezés három horgonnyal, hogy minden szélességen a szöveg mellett/fölött/alatt
   maradjanak, ne rajta:
     · szélső tárgy: a képernyő széléhez (left: -Npx, ill. 100% - --w + Npx — túlnyúlik);
     · belső tárgy: a szöveghasáb széléhez (50% ± --half ± rés);
     · fent/lent: a sáv tetejéhez (top: Npx), ill. aljához (top: 100% - Npx).
   Mozgásirány: a szöveg fölötti tárgyak görgetésre fölfelé (negatív --vy), az alattiak
   lefelé (pozitív --vy) távolodnak, az oldalsók a hasáb mellett, kifelé (--hx) mozognak.
   Széles asztalon (≥ 1600px) 14 tárgy, asztalon 12, tableten 10 (alacsony kijelzőn 8),
   telefonon 6. */
.float-band.akciok-sav {
  --half: 320px;                      /* a szöveghasáb félszélessége */
  --prop-fade: 40px;                  /* a tárgyak a sáv alján ennyin olvadnak a fehérbe */
  padding-block: var(--space-11);     /* 120px — a szekció-térköz felső értéke */
}
.akciok-sav .akciok__fej {
  max-width: calc(2 * var(--half));
  margin-bottom: 0;
}
.akciok-sav .akciok__fej h1 { margin-bottom: var(--space-4); }
/* a bevezető Törzs-szerep: 17px / 500, a sáv tónusán --ink (#4b4b4b, 7,9:1 a #eaf5ff-en) */
.akciok-sav .akciok__fej p {
  max-width: 34em;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}
/* A görgetésre lemaradó („távoli”) alsó tárgyak a sáv alján nem éles vonalon vágódnak el a kártyák
   fölött, hanem az utolsó --prop-fade px-en a sáv lágy szélével együtt beleolvadnak a fehérbe. */
.akciok-sav .float-band__props {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--prop-fade)), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--prop-fade)), transparent);
}
/* JS nélkül is rendezett állókép (mint mozgáscsökkentésnél): nincs ringás, --p = 0 */
html:not(.js) .akciok-sav .float-prop { animation: none; }

/* Asztal (≥ 1200px): 12 tárgy — 4-4 a két oldalon, 2 a címke fölött, 2 a bevezető alatt (kicsi, „távoli”) */
.akciok-sav .ap-1  { --w: 150px; --vy: -400px; --hx: -40px; --spin: 24deg;  --r0: -14deg; left: -40px; top: 14px; }
.akciok-sav .ap-2  { --w: 84px;  --vy: 190px;  --hx: -16px; --spin: -30deg; --r0: 10deg;  left: calc((50% - var(--half)) * 0.55); top: 132px; }
.akciok-sav .ap-3  { --w: 66px;  --vy: 160px;  --hx: -14px; --spin: 34deg;  --r0: 8deg;   left: calc(50% - var(--half) - 48px - var(--w)); top: 262px; }
.akciok-sav .ap-4  { --w: 140px; --vy: -320px; --hx: -50px; --spin: -22deg; --r0: -8deg;  left: -36px; top: calc(100% - 186px); }
.akciok-sav .ap-5  { --w: 130px; --vy: -420px; --hx: 50px;  --spin: -24deg; --r0: 12deg;  left: calc(100% - var(--w) + 34px); top: 10px; }
.akciok-sav .ap-6  { --w: 74px;  --vy: 200px;  --hx: 18px;  --spin: 40deg;  --r0: -12deg; left: calc(100% - (50% - var(--half)) * 0.6 - var(--w)); top: 142px; }
.akciok-sav .ap-7  { --w: 92px;  --vy: -170px; --hx: 30px;  --spin: -26deg; --r0: -10deg; left: calc(50% + var(--half) + 44px); top: 252px; }
.akciok-sav .ap-8  { --w: 150px; --vy: -340px; --hx: 50px;  --spin: 22deg;  --r0: 10deg;  left: calc(100% - var(--w) + 38px); top: calc(100% - 176px); }
.akciok-sav .ap-9  { --w: 60px;  --vy: -120px; --hx: -10px; --spin: -30deg; --r0: -10deg; left: calc(50% - 230px); top: 26px; }
.akciok-sav .ap-10 { --w: 66px;  --vy: -110px; --hx: 10px;  --spin: 26deg;  --r0: 14deg;  left: calc(50% + 150px); top: 12px; }
.akciok-sav .ap-11 { --w: 62px;  --vy: 170px;  --hx: -12px; --spin: 30deg;  --r0: -8deg;  left: calc(50% - 250px); top: calc(100% - 92px); }
.akciok-sav .ap-12 { --w: 84px;  --vy: 150px;  --hx: 14px;  --spin: -20deg; --r0: 6deg;   left: calc(50% + 150px); top: calc(100% - 96px); }
/* széles asztalon a szélső és a belső tárgyak közti üres sávba még egy-egy (a párjuktól messze) */
.akciok-sav .ap-13,
.akciok-sav .ap-14 { display: none; }
@media (min-width: 1600px) {
  .akciok-sav .ap-13 { display: block; --w: 96px; --vy: 180px; --hx: -20px; --spin: 28deg;  --r0: -16deg; left: calc((50% - var(--half)) * 0.22); top: 214px; }
  .akciok-sav .ap-14 { display: block; --w: 76px; --vy: 210px; --hx: 20px;  --spin: -34deg; --r0: 12deg;  left: calc(100% - (50% - var(--half)) * 0.26 - var(--w)); top: 222px; }
}

/* Tablet (700–1199px): 10 tárgy — 4 a címke fölött, 1-1 a szöveg két oldalán (a szélen túlnyúlva),
   2-2 lent: a szélen a bevezető mellett, középen a bevezető alatt (kicsi, „távoli”). */
@media (max-width: 1199px) {
  /* a hasáb mellett mindkét oldalon marad legalább ~110px a tárgyaknak (700–800px-en keskenyebb hasáb) */
  .float-band.akciok-sav { --half: min(280px, calc(50% - 112px)); }
  .akciok-sav .ap-3, .akciok-sav .ap-12 { display: none; }
  .akciok-sav .ap-1  { --w: 110px; left: -30px; top: 10px; }
  .akciok-sav .ap-9  { --w: 52px;  left: calc(50% - 200px); top: 30px; }
  .akciok-sav .ap-10 { --w: 56px;  left: calc(50% + 140px); top: 16px; }
  .akciok-sav .ap-5  { --w: 100px; left: calc(100% - var(--w) + 26px); top: 6px; }
  /* a szöveg két oldala: 768px-en a szélen túlnyúlva, szélesebb tableten beljebb */
  .akciok-sav .ap-6  { --w: 76px;  --vy: -160px; --hx: -18px; left: calc((50% - var(--half)) * 0.6 - 72px); top: 44%; }
  .akciok-sav .ap-2  { --w: 68px;  --vy: 170px;  --hx: 16px;  left: calc(100% - (50% - var(--half)) * 0.6 + 72px - var(--w)); top: 42%; }
  .akciok-sav .ap-4  { --w: 104px; left: -26px; top: calc(100% - 150px); --vy: 160px; }
  .akciok-sav .ap-11 { --w: 56px;  left: calc(50% - 160px); top: calc(100% - 90px); }
  .akciok-sav .ap-7  { --w: 62px;  --vy: 150px; --hx: 14px; left: calc(50% + 96px); top: calc(100% - 94px); }
  .akciok-sav .ap-8  { --w: 110px; left: calc(100% - var(--w) + 28px); top: calc(100% - 156px); --vy: 170px; }
}
/* Telefon (< 700px): 6 tárgy — 4 a címke fölött és mellett (a képernyő szélén túlnyúlva), 2 kicsi,
   „távoli” a bevezető alatt; a szöveg mellett nincs. */
@media (max-width: 699px) {
  .float-band.akciok-sav { --half: 50%; --prop-fade: 22px; padding-block: 72px; }
  .akciok-sav .ap-2, .akciok-sav .ap-3, .akciok-sav .ap-4, .akciok-sav .ap-6,
  .akciok-sav .ap-7, .akciok-sav .ap-12 { display: none; }
  .akciok-sav .ap-1  { --w: 74px; --vy: -150px; left: -18px; top: 18px; }
  .akciok-sav .ap-9  { --w: 34px; --vy: -110px; left: calc(50% - 96px); top: 10px; }
  .akciok-sav .ap-10 { --w: 32px; --vy: -100px; left: calc(50% + 58px); top: 6px; }
  .akciok-sav .ap-5  { --w: 62px; --vy: -140px; left: calc(100% - var(--w) + 14px); top: 16px; }
  /* a bevezető alatti két kicsi „távoli”: alig mozdul, görgetésre lassan a sáv lágy aljába süllyed */
  .akciok-sav .ap-11 { --w: 34px; --vy: 60px;   left: calc(50% - 112px); top: calc(100% - 56px); }
  .akciok-sav .ap-8  { --w: 38px; --vy: 70px;   left: calc(50% + 72px); top: calc(100% - 57px); }
}

/* ALACSONY KIJELZŐ (≤ 600px magas: fekvő telefon, kis telefon): a kártyák az első képernyő aljáig
   feljöjjenek — kisebb sáv (64/56px); a tárgyak a felső sarkokban, a szöveghasáb melletti szegélyben
   (a címke és a cím mellett), telefonon pedig két kicsi a bevezető alatt is (körbeveszik a szöveget). */
/* tablet-szélességű fekvő telefon (pl. 844×390, 740×360): 8 tárgy, 3-3 a két szegélyben, 2 fent */
@media (min-width: 700px) and (max-width: 1199px) and (max-height: 600px) {
  .float-band.akciok-sav { --half: min(280px, calc(50% - 130px)); --prop-fade: 24px; padding-block: var(--space-8) 56px; }
  .akciok-sav .ap-7, .akciok-sav .ap-11 { display: none; }
  .akciok-sav .ap-1  { --w: 88px; left: -22px; top: 4px; }
  .akciok-sav .ap-9  { --w: 40px; left: calc(50% - 190px); top: 8px; }
  .akciok-sav .ap-10 { --w: 42px; left: calc(50% + 150px); top: 4px; }
  .akciok-sav .ap-5  { --w: 78px; left: calc(100% - var(--w) + 20px); top: 2px; }
  .akciok-sav .ap-6  { --w: 58px; --vy: 150px; --hx: -16px; left: calc(50% - var(--half) - 40px - var(--w)); top: 112px; }
  .akciok-sav .ap-2  { --w: 54px; --vy: 160px; --hx: 16px;  left: calc(50% + var(--half) + 40px); top: 108px; }
  .akciok-sav .ap-4  { --w: 92px; --vy: 150px; left: -24px; top: calc(100% - 118px); }
  .akciok-sav .ap-8  { --w: 96px; --vy: 160px; left: calc(100% - var(--w) + 24px); top: calc(100% - 122px); }
}
/* telefon-szélességű fekvő telefon (pl. 667×375, 568×320): keskenyebb hasáb, 6 tárgy —
   2 a felső sarkokban, 1-1 a szegélyben a cím mellett, 2 kicsi „távoli” a bevezető alatt */
@media (max-width: 699px) and (max-height: 600px) and (orientation: landscape) {
  .float-band.akciok-sav { --half: min(240px, calc(50% - 92px)); padding-block: var(--space-8) 56px; }
  .akciok-sav .ap-9, .akciok-sav .ap-10 { display: none; }
  .akciok-sav .ap-1  { --w: 76px; left: -20px; top: 8px; }
  .akciok-sav .ap-5  { --w: 66px; left: calc(100% - var(--w) + 16px); top: 6px; }
  /* a bevezető alatti pár kisebb ringással (a 56px-es alsó sávban marad, a szöveget nem éri el) */
  .akciok-sav .ap-11 { --w: 34px; --vy: 60px; --bob: 6px; left: calc(50% - 132px); top: calc(100% - 46px); }
  .akciok-sav .ap-12 { display: block; --w: 38px; --vy: 70px; --hx: 10px; --spin: -20deg; --r0: 8deg; --bob: 6px; left: calc(50% + 92px); top: calc(100% - 47px); }
  .akciok-sav .ap-4  { display: block; --w: 52px; --vy: 130px; --hx: -30px; left: calc(50% - var(--half) - 30px - var(--w)); top: 96px; }
  .akciok-sav .ap-8  { --w: 56px; --vy: 140px; --hx: 30px;  left: calc(50% + var(--half) + 30px); top: 92px; }
}
/* kis álló telefon (pl. 320×568): 6 tárgy — a két szélen egy-egy nagy, a címke fölött két kicsi,
   és (mint a nagyobb telefonokon) két kicsi „távoli” a bevezető alatt, a sáv 56px-es aljában */
@media (max-width: 699px) and (max-height: 600px) and (orientation: portrait) {
  .float-band.akciok-sav { padding-block: var(--space-8) 56px; }
  .akciok-sav .ap-11 { --bob: 6px; left: calc(50% - 104px); top: calc(100% - 46px); }
  .akciok-sav .ap-8  { --bob: 6px; left: calc(50% + 66px);  top: calc(100% - 48px); }
  .akciok-sav .ap-1  { --w: 72px; left: -20px; top: 14px; }
  .akciok-sav .ap-9  { --w: 32px; left: calc(50% - 84px); top: 6px; }
  .akciok-sav .ap-10 { --w: 30px; left: calc(50% + 52px); top: 4px; }
  .akciok-sav .ap-5  { --w: 58px; left: calc(100% - var(--w) + 12px); top: 16px; }
}
/* alacsony kijelzőn a címke, a cím és a bevezető közti rés is kisebb (24 → 16px, 16 → 12px) */
@media (max-width: 1199px) and (max-height: 600px) {
  .akciok-sav .akciok__fej .eyebrow { margin-bottom: var(--space-4); }
  .akciok-sav .akciok__fej h1 { margin-bottom: var(--space-3); }
}

/* --- Kártyák (a sáv alatt, fehér alapon) --- */
.akciok__inner { padding-top: var(--space-2); }

.akciok__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-6) var(--space-5);
}
.akciok__lista:empty { display: none; }   /* (a generált rész jelölői megjegyzések — azokat a :empty nem számolja) */

.akcio {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 320px;
  max-width: 560px;
  min-width: 0;
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
}
.akcio[hidden] { display: none; }

.akcio__fej {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}
/* A kártya „matricája”: rozsda kitöltés, fehér felirat (7,3:1) */
.akcio__cimke {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  max-width: 100%;
  padding: 0.375rem 0.875rem;
  margin-bottom: 4px;
  background: var(--brand);
  color: #fff;
  border: 2px solid var(--brand-lip);
  border-radius: var(--radius-sm);
  box-shadow: var(--lip-brand);
  font-size: var(--fs-btn);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.akcio__kat { white-space: normal; text-align: left; }

.akcio__cim {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.akcio__leiras { margin: 0; max-width: none; font-size: var(--fs-body); line-height: 1.5; overflow-wrap: anywhere; }

/* Ár: az eredeti áthúzva, az akciós nagy rozsda */
.akcio__ar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  max-width: none;
}
.akcio__ar-regi { font-size: var(--fs-sub); font-weight: 700; color: var(--ink-soft); }
.akcio__ar-regi s { text-decoration-thickness: 2px; text-decoration-color: var(--ink); }
.akcio__ar-uj { font-size: var(--fs-h3); font-weight: 900; line-height: 1.15; color: var(--brand); overflow-wrap: anywhere; }

/* Érvényesség */
.akcio__ido {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  max-width: none;
  font-size: var(--fs-note);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}
.akcio__ido svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: -1px; color: var(--brand-lip); }

/* „Már csak 5 napig!” — csak az utolsó héten (main.js) */
.akcio__hatra {
  align-self: flex-start;
  margin: 0;
  padding: 0.3125rem 0.75rem;
  background: var(--amber-wash);
  border: 2px solid var(--amber);
  border-radius: var(--radius-sm);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.akcio__hatra[hidden] { display: none; }

/* Apró betűs feltételek: 14px, --ink (a 19px alatti szöveg ≥ 4,5:1) */
.akcio__feltetel {
  margin: 0;
  max-width: none;
  padding-top: var(--space-3);
  border-top: 2px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.akcio__gomb { margin-top: auto; width: 100%; white-space: normal; text-align: center; }
@media (max-width: 400px) {
  .akcio__gomb { padding-inline: 1rem; letter-spacing: 0.02em; }
}
/* Legkeskenyebb telefonon (320–359px) az összeg-matrica és a kategória egy sorban férjen el
   (kisebb oldalsó belső tér és rés), hogy az első kártya címe is feljöjjön az első képernyőre. */
@media (max-width: 359px) {
  .akcio__fej { column-gap: var(--space-2); }
  .akcio__cimke { padding-inline: 0.625rem; }
}

/* --- Nincs futó akció --- */
.akciok__ures {
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
}
.akciok__ures[hidden] { display: none; }
.akciok__ures .icon-box { margin-inline: auto; }
.akciok__ures-cim { margin-bottom: var(--space-3); font-size: var(--fs-h3); font-weight: 800; color: var(--ink); }
.akciok__ures p { margin-inline: auto; }
.akciok__ures-gombok { justify-content: center; margin-top: var(--space-5); }

.akciok__megj {
  max-width: 60ch;
  margin: var(--space-7) auto 0;
  text-align: center;
  font-size: var(--fs-note);
  line-height: 1.5;
}