/* ═══════════════════════════════════════════════════════════
   ESETTANULMÁNY-OLDAL  ·  /esettanulmany/<slug>

   Egyetlen oldaltípus stíluslapja. A lap a meglévő aloldal-vázat
   használja (core, nav-menu, pages, page-bg), a hero eszközmakettje
   pedig a referencia-oldal .spec-devices komponensét, ezért annak a
   két stíluslapja (services-block.css, referenciak-page.css) is be
   van kötve. Itt CSAK az van, ami sehol máshol nincs meg.

   SZÍN: az adott munka saját színe, a lap tetején --c1 / --c2
   alakban. Ugyanaz a két érték, mint a referenciak.html megfelelő
   .spec-band sávjában – ha ott változik, itt is át kell írni.
   ═══════════════════════════════════════════════════════════ */

.cs-page {
  --c1: #F97316;
  --c2: #FBBF24;
}

/* ── HERO ─────────────────────────────────────────────── */

/* A .sub-hero NEM ad lapszéli margót: azt minden gyereke maga hozza.
   A .breadcrumb és a .pg-wrap is ugyanezt a három sort ismétli
   (max-width + auto margó + gutter), tehát ha ez kimarad, a szöveg
   a képernyő bal széléhez tapad. */
.cs-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 28px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 56px;
}

/* A pages.css minden aloldali hero-ban elrejti a címkét
   (.sub-hero .section-tag { display: none }), mert ott a H1 fölött
   fölösleges. Itt viszont kell: a morzsamenü "Referenciák"-at mond,
   ez a lap pedig esettanulmány, és ez nem ugyanaz. */
.cs-page .sub-hero .section-tag { display: inline-flex; }

/* A referenciak-page.css a sávok beúszásához opacity:0-ra teszi a
   makettet, és a js/referenciak-page.js adja rá a .spec-band.is-in
   osztályt. Ezen a lapon nincs .spec-band és nincs az a szkript,
   ráadásul a makett a hajtás fölött van: azonnal látszódnia kell. */
.cs-page .spec-mock { opacity: 1; transform: none; }

.cs-hero-tx { display: flex; flex-direction: column; align-items: flex-start; }

.cs-h1 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tx-1);
  margin: 10px 0 0;
}
/* A pages.css .accent szabálya fix kék márkaszínt ad. Ezen a lapon
   minden más az adott munka színét viszi (címke, gombok, számbuborékok),
   ezért a kiemelt szavak is azt kapják, különben a lapon két össze nem
   tartozó színvilág futna egymás mellett.

   A -webkit-text-fill-color is kell: a pages.css azt állítja
   átlátszóra, és az erősebb a sima color-nál. */
.cs-page .accent {
  background: linear-gradient(120deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cs-lead {
  font-size: 1rem;
  line-height: 1.78;
  font-weight: 300;
  color: var(--tx-2);
  max-width: 46ch;
  margin: 20px 0 0;
}

.cs-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* A látogatás-gomb a munka saját színét viszi, hogy a hero és a
   referencia-oldali sáv összetartozzon. */
.cs-visit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 0.9rem; font-weight: 500;
  text-decoration: none;
  color: var(--c1);
  border: 1px solid color-mix(in srgb, var(--c1) 38%, transparent);
  background: color-mix(in srgb, var(--c1) 10%, transparent);
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.cs-visit:hover {
  background: color-mix(in srgb, var(--c1) 18%, transparent);
  border-color: color-mix(in srgb, var(--c1) 62%, transparent);
  transform: translateY(-1px);
}
.cs-visit svg { transition: transform 0.25s; }
.cs-visit:hover svg { transform: translate(2px, -2px); }

/* Tényadatsor a hero alján: rövid, ellenőrizhető állítások.
   SZÁMOT CSAK AKKOR tegyél ide, ha a tulajdonostól származik. */
.cs-facts {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  width: 100%;
}
.cs-fact { display: flex; flex-direction: column; gap: 3px; }
.cs-fact-v {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem; font-weight: 600;
  color: var(--tx-1);
}
.cs-fact-k {
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tx-4);
}

/* ── A TÖRTÉNET ───────────────────────────────────────── */

/* Számozott lépések egy folytonos vonalra fűzve. A vonal a bal
   oldali sávban fut, a számbuborékok mögött – ezért kap a lista
   bal oldali belső margót, és a ::before a teljes magasságot. */
.cs-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.cs-steps::before {
  content: "";
  position: absolute; left: 19px; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c1) 45%, transparent),
    var(--line-soft) 55%,
    transparent);
}

.cs-step { position: relative; padding: 0 0 44px 60px; }
.cs-step:last-child { padding-bottom: 0; }

.cs-step-n {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 39px; height: 39px;
  border-radius: 50%;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem; font-weight: 600;
  color: var(--c1);
  background: #0A0B10;
  border: 1px solid color-mix(in srgb, var(--c1) 34%, transparent);
  box-shadow: 0 0 0 5px #060608;
}

.cs-h3 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.18rem, 1.8vw, 1.45rem);
  line-height: 1.32; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tx-1);
  margin: 5px 0 0;
}

.cs-p {
  font-size: 0.97rem; line-height: 1.82; font-weight: 300;
  color: var(--tx-2);
  max-width: 68ch;
  margin: 12px 0 0;
}
.cs-p strong { font-weight: 500; color: var(--tx-1); }

.cs-list { margin: 14px 0 0; padding: 0; list-style: none; max-width: 68ch; }
.cs-list li {
  position: relative;
  padding: 0 0 0 20px;
  margin-top: 8px;
  font-size: 0.95rem; line-height: 1.7; font-weight: 300;
  color: var(--tx-2);
}
.cs-list li::before {
  content: "";
  position: absolute; left: 2px; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--c1) 70%, transparent);
}

/* Kiemelt doboz: a projekt fordulópontja. Egy lapon legfeljebb
   kettő legyen belőle, különben elveszti a súlyát. */
.cs-note {
  margin: 18px 0 0;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--c1) 22%, transparent);
  border-left-width: 2px;
  background: color-mix(in srgb, var(--c1) 6%, transparent);
  max-width: 68ch;
}
.cs-note p {
  margin: 0;
  font-size: 0.97rem; line-height: 1.75; font-weight: 300;
  color: rgba(255,255,255,0.78);
}
.cs-note strong { font-weight: 500; color: var(--tx-1); }

/* ── AMIVEL DOLGOZTUNK ────────────────────────────────── */

.cs-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.cs-chip {
  padding: 8px 15px;
  border-radius: 100px;
  font-size: 0.85rem; font-weight: 400;
  color: rgba(255,255,255,0.72);
  border: 1px solid var(--line);
  background: var(--surface);
}

/* ── ZÁRÓ SÁV ─────────────────────────────────────────── */

.cs-end {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 46px 32px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 50% 0%,
      color-mix(in srgb, var(--c1) 11%, transparent) 0%,
      transparent 62%),
    var(--surface);
}
.cs-end-h {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.24; font-weight: 600; letter-spacing: -0.015em;
  color: var(--tx-1);
  margin: 0;
}
.cs-end-p {
  font-size: 0.97rem; line-height: 1.75; font-weight: 300;
  color: var(--tx-2);
  max-width: 52ch;
  margin: 14px 0 0;
}
.cs-end-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

/* ── RESZPONZÍV ───────────────────────────────────────── */

/* A 900 képpontos küszöb az egész oldalon ez, ne írd át:
   a mobil elrendezés ehhez van hangolva. */
@media (max-width: 900px) {
  .cs-hero-inner { grid-template-columns: 1fr; gap: 36px; margin-top: 20px; }
  .cs-hero-tx { align-items: center; text-align: center; }
  .cs-lead { max-width: 100%; }
  .cs-cta-row { justify-content: center; }
  .cs-facts { justify-content: center; text-align: center; gap: 14px 22px; }
  .cs-fact { align-items: center; }
}

@media (max-width: 640px) {
  .cs-steps::before { left: 15px; }
  .cs-step { padding-left: 46px; padding-bottom: 36px; }
  .cs-step-n { width: 31px; height: 31px; font-size: 0.82rem; box-shadow: 0 0 0 4px #060608; }
  .cs-p, .cs-list li { font-size: 0.93rem; }
  .cs-note { padding: 15px 17px; }
  .cs-end { padding: 34px 20px; }
}