/* =============================================================
 *  responsive.css — mobil korrekciók
 *
 *  MIÉRT KÜLÖN FÁJL. A `main.css` a design rendszer VÁLTOZATLAN másolata
 *  (lásd README), tehát nem szerkeszthető. Ez a lap utoljára tölt be, így
 *  azonos fajsúlynál ez nyer — `!important` nélkül.
 *
 *  AMIT ORVOSOL. A `main.css`-ben a médialekérdezések nincsenek töréspont
 *  szerint sorba rendezve: a fájl végén álló `max-width: 1200px` blokk
 *  például a korábbi `max-width: 540px` blokkot írja felül, mert azonos
 *  fajsúlynál a KÉSŐBBI szabály nyer. Emiatt több mobil szabály sosem
 *  érvényesült. Az itteni blokkok szigorúan csökkenő töréspont-sorrendben
 *  állnak, tehát a szűkebb mindig a tágabb után jön.
 *
 *  TÖRÉSPONTOK
 *    1024px  tablet fekvő — a menü ekkor vált fiókra
 *     768px  tablet álló  — a `.container` ekkor esik 24px-re
 *     600px  telefon fekvő / kis tablet
 *     480px  telefon
 *     380px  keskeny telefon (iPhone SE)
 * ============================================================= */

/* ---------- 1. FEJLÉC ---------------------------------------
 * A fejléc sora mobilon: logó + ajánlatkérő gomb + hamburger. Három elem
 * 390px-en 56px-es oldalmargóval nem fér el — a gomb kilógott a képernyőről.
 * A margót és a hézagot szűkítjük, a gombot pedig tömörítjük, mert az
 * ajánlatkérés a legfontosabb konverziós pont: nem rejtjük el, amíg elfér.
 * ----------------------------------------------------------- */

@media (max-width: 768px) {
  .site-header__inner {
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .site-header__inner {
    padding-left: 20px;
    padding-right: 20px;
    gap: 12px;
  }

  /* A gomb tömör változata: kisebb belső tér és betű, nyíl nélkül. */
  .site-header__utility .btn--primary {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 13.5px;
    white-space: nowrap;
  }

  .site-header__utility .btn--primary .btn__icon {
    display: none;
  }

  .site-header__utility {
    gap: 10px;
  }
}

/* Keskeny telefonon a gomb már tényleg nem fér el a logó és a hamburger
   mellé. A fiók alján ott az ajánlatkérés, tehát nem vész el. */
@media (max-width: 400px) {
  .site-header__utility .btn--primary {
    display: none;
  }
}

/* ---------- 2. LÁBLÉC ---------------------------------------
 * A lábléc rácsa 1200px alatt `1.6fr repeat(3, 1fr)` maradt EGÉSZEN 0-ig,
 * mert az a szabály a fájl végén áll. Négy hasáb 390px-en 603px széles
 * lett: ez okozta az oldalak vízszintes görgetését, MINDEN oldalon.
 * ----------------------------------------------------------- */

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 768px) {
  /* A lábléc rácsa saját 56px-es margót visz, a `.container`-rel ellentétben
     ezt semmi nem húzta be. */
  .site-footer__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 600px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------- 3. A `minmax(0, …)` nélküli rács-sávok -----------
 * A GYÖKÉROK, ami a legtöbb oldalt eltörte. A CSS rácsban az `1fr` valójában
 * `minmax(auto, 1fr)`, és az `auto` alsó határa a sáv MIN-CONTENT szélessége.
 * Ha az elemben van egy kép, egy nem törhető szó vagy egy beágyazott rács, a
 * sáv ettől szélesebb lesz a szülőnél — a rács kilóg, hiába egyhasábos.
 *
 * Mérve 390px-en: a `.post-grid` doboza 342px volt, a sávja 507px.
 *
 * Ezért mindenhol `minmax(0, 1fr)`, és a rács-gyerekek `min-width: 0`-t
 * kapnak, hogy ténylegesen zsugorodni tudjanak.
 * ----------------------------------------------------------- */

@media (max-width: 900px) {
  .about-hero__grid,
  .faq__grid,
  .os-team__grid,
  .pd-hero__grid,
  .svc-hero__grid,
  .pkg-cta__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-hero__grid,
  .pd-hero__grid,
  .svc-hero__grid {
    gap: 40px;
  }

  /* A PILLÉR-KÁRTYA SZEKCIÓJA (`why-pillars`) KIMARADT EBBŐL A SEPRÉSBŐL
     (M360-241). A `.why-seo` `1.3fr 1fr` maradt minden képernyőn, 72px-es köz
     mellett: 390px-en a jobb hasáb — a fekete pillér-kártya — mérve 117px
     széles volt, tehát a sorszám-körök mellett a címeknek egy-két szó fért.

     A köz is visszaáll a 40px-re: asztalon a 72px a két hasáb elválasztása,
     egymás alatt viszont csak üres képernyő. */
  .why-seo {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 768px) {
  /* Ezek a burkolók NEM `.container`-ek, saját 56px-es margót visznek —
     ezért maradtak ki a 768px-es behúzásból. */
  .about-hero__inner,
  .pd-hero__inner,
  .os-team__inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .newsletter__inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 600px) {
  .post-grid,
  .logo-grid,
  .os-cost__grid,
  .pd-channel-grid,
  .pd-channel-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A rács- és flex-gyerekek alapértelmezett `min-width: auto`-ja tartja
     szét a dobozokat; enélkül a fenti `minmax(0, …)` sem elég. */
  .post-card,
  .post-card__body,
  .post-card__cover,
  .svc-hero__text,
  .pd-hero__text,
  .about-hero__text,
  .about-hero__aside,
  .summary-card,
  .pd-summary {
    min-width: 0;
  }

  /* A kártyaképek intrinsic szélessége hajtotta ki a `.post-grid` sávját. */
  .post-card__cover img,
  .post-card__cover .image-fill {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* ---------- 4. Nem törő flex-sorok -------------------------
 * Ugyanaz a minta, csak flexben: `flex-wrap: nowrap` + egy `white-space:
 * nowrap` gomb. A sor nem tud tördelni, tehát kilóg. Mobilon ezek egymás
 * alá kerülnek.
 * ----------------------------------------------------------- */

@media (max-width: 900px) {
  /* A `.faq--pkg` változat saját, erősebb szabállyal írja felül a rácsot
     (`.faq--pkg .faq__grid`), ezért itt is a kettes fajsúly kell. */
  .faq--pkg .faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  /* Eszköz-kategória fejléce: ikon + név + címke + kitöltő vonal. */
  .toolset-cat__head {
    flex-wrap: wrap;
  }

  /* Hírlevél-doboz: az e-mail mező és a nem törhető gomb egy sorban áll.
     Mobilon egymás alá kerülnek, teljes szélességben. */
  .newsletter-embed .mailster-email-wrapper,
  .newsletter-embed .mailster-firstname-wrapper,
  .newsletter-embed .mailster-lastname-wrapper,
  .newsletter-embed .mailster-submit-wrapper {
    flex: 1 0 100%;
  }

  .newsletter-embed .submit-button {
    width: 100%;
    justify-content: center;
  }

  /* Összefoglaló kártya lába: szöveg/ár és gomb egy sorban. */
  .summary-card__foot,
  .summary-card__foot--price {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .summary-card__foot .btn,
  .summary-card__foot--price .btn {
    width: 100%;
    justify-content: center;
  }

  /* A szerepkör-csempék kéthasábosak maradnak, de a sávok zsugorodhatnak,
     és a felirat tördelhet. */
  .os-roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .os-role {
    min-width: 0;
  }

  .os-role__label {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ---------- 5. A mobil fiók görgetése ----------------------
 * A fiók a ragadós fejléc gyereke, magasság-korlát nélkül. Nyitva mérve
 * 3221px magas volt (a duplikált linkek miatt); a duplikáció megszűnt, de
 * a lenyitott accordionokkal még mindig könnyen túlnő a képernyőn — és
 * mivel az `overflow-y: visible`, az alja se görgetéssel, se vonszolással
 * nem érhető el.
 *
 * A `100dvh` a lényeg: a `100vh` mobil böngészőben a be-kicsúszó címsort
 * NEM veszi figyelembe, ezért a fiók alja a sáv mögé kerülne. A `vh` sor
 * csak tartalék a régi böngészőknek.
 *
 * 75px = a fejléc sávjának mért magassága mobilon (16px felül + 16px alul
 * belső tér + a 42px-es hamburger + 1px alsó vonal).
 * ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .mobile-nav[data-open='true'] {
    max-height: calc(100vh - 75px);
    max-height: calc(100dvh - 75px);
    overflow-y: auto;
    /* A görgetés a fiókban maradjon: ne az oldal mozduljon meg alatta, ha a
       lista végére érünk. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 6. Beégetett oldalmargók --------------------------
 * A `.container` 768px alatt már 24px-re húz (main.css 10925), de ~40 szekció
 * burkolója NEM `.container`: saját `padding-left/right: 56px`-öt visz, és
 * abból soha nem esett vissza. 390px-es képernyőn ez 112px elveszett hely —
 * a tartalomnak 278px maradt, és emiatt csordult túl több rács is.
 *
 * A kártyák (44/42/40px) külön csoportban: ott CSAK a vízszintes margót
 * húzzuk be, a függőleges levegő a design szerinti marad.
 * ------------------------------------------------------------- */

@media (max-width: 768px) {
  .container--wide,
  .hero__inner,
  .site-footer__bottom,
  .car-hero__inner,
  .car-about__inner,
  .car-jobs__inner,
  .car-benefits__inner,
  .car-team__inner,
  .car-past__inner,
  .pkg-hero__inner,
  .criteria__inner,
  .pkg-grid-section__inner,
  .blog-hero__inner,
  .blog-filterbar,
  .kpi-band-wrap__inner,
  .case-hero__inner,
  .article-wrap,
  .jd-hero__inner,
  .jd-layout,
  .jd-more__inner,
  .pd-intro__inner,
  .pd-included__inner,
  .pd-price__inner,
  .pd-topics__inner,
  .pd-industries__inner,
  .os-builder__inner,
  .os-timeline__inner,
  .os-cost__inner,
  .os-fit__inner,
  .pkg-cta__inner,
  .breadcrumb--bar,
  .breadcrumb--car,
  .breadcrumb--pkg,
  .breadcrumb--blog,
  .breadcrumb--case,
  .breadcrumb--jd,
  .breadcrumb--pd {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Kártyák: csak a vízszintes margó szűkül. */
  .mission__note,
  .contact-form,
  .svc-contact__intro,
  .svc-contact__form-card,
  .car-greet__card,
  .pkg-cta__aside,
  .pkg-cta__form,
  .newsletter__card {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* A REFERENCIÁK ESETTANULMÁNY-DOBOZAI SOHA NEM KAPTÁK MEG A MOBIL MARGÓT
   (M360-239). A `.container--wide` 768px alatt 24px-re húz, de a szekció saját
   szabálya — `.result-section--compact .container--wide` (main.css) — a design
   56px-ét írja rá, és két osztállyal ERŐSEBB az egyosztályos behúzásnál. A
   médialekérdezés nem számít bele a fajsúlyba, tehát a felülírás minden
   képernyőn nyert.

   Következmény egy 390px-es képernyőn: a rácsnak oldalanként 56px ment el,
   tehát az esettanulmány-kártya 278px széles volt a 342 helyett.

   A javítás UGYANAZZAL a két osztállyal áll, mert kevesebbel nem tudná
   felülírni. */
@media (max-width: 768px) {
  .result-section--compact .container--wide {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* A HÍRLEVÉL-DOBOZ KÉTSZER FIZETI MEG A MARGÓT (M360-237). A burkoló 24px-et
   visz, a benne álló kártya megint 24px-et: egy 390px-es képernyőn a
   feliratkozás címének, felvezetőjének és mezőjének 294px marad. A doboz ezen
   az oldalon az egyetlen átalakító elem, itt a szélesség többet ér a levegőnél.

   A KÁRTYA belső margója a fenti közös listából jön, ezért ITT írjuk felül, és
   nem ott: a lista többi kártyája (kapcsolatűrlap, csomag-ajánló) hosszabb
   szöveget visz, azoknak a 24px marad a helyes.

   Ennek a szabálynak a fenti blokk UTÁN kell állnia: a fajsúlyuk azonos, tehát
   a sorrend dönt. */
@media (max-width: 600px) {
  .newsletter__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .newsletter__card {
    padding: 36px 20px;
  }
}

/* ---------- 7. A maradék rács-sávok ---------------------------
 * Ugyanaz a min-content csapda, mint a §3-ban, csak a szűkebb képernyőkön
 * (320–768px) előbújó szekciókon. Mind egyhasábos már, csak a sáv nem tud
 * a min-content alá menni — ezért `minmax(0, 1fr)`.
 * ------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Esettanulmány KPI-sávja. A `.kpi-band` 420px-es `min-width`-et visz
     (main.css 12212), ami mobilon eleve szélesebb a képernyőnél — a szülő
     flex-doboza így 12px-re zsugorodott, miközben a rács 423px maradt. */
  .kpi-band {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .kpi-band--lg {
    gap: 20px;
  }

  .ref-closing,
  .topics-split,
  .section-head--split-15,
  .hero__inner,
  .founder__inner,
  .result-grid,
  .pd-price__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  /* Cégadat-sor: címke + érték. Szűk képernyőn egymás alá, így az érték
     nem kap 60px-es sávot egy hosszú adószámhoz. */
  .company-data__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* A sötét „küldetés" doboz ikon + szöveg rácsa. */
  .reason-section--dark .mission__note {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 28px 24px;
    font-size: 19px;
  }
}

/* A legszűkebb készülékeken (320–360px) még két rács szorul: három
   mutató, illetve két mérőszám egymás mellett. */
@media (max-width: 380px) {
  .founder__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .dash__metrics {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }
}

/* ---------- 8. Nem törő flex-sorok, második kör -----------------
 * Mind ugyanaz az alak: `justify-content: space-between` egy címkével balra
 * és egy értékkel jobbra, `flex-wrap: nowrap`-pel. Amíg elfér, szép; amint
 * nem, kilóg a dobozból. Mobilon tördelhetnek — a címke marad az első
 * sorban, az érték alá kerül.
 * --------------------------------------------------------------- */

@media (max-width: 600px) {
  .pd-summary__price-row,
  .pd-channel__head,
  .subfeature-card__head,
  .os-panel__row,
  .os-panel__total,
  .result-card__metric,
  .pd-tier__price-row {
    flex-wrap: wrap;
  }

  /* A GYIK kérdéssora nem tördelhet, mert a nyitó-jel a sor végén ül —
     helyette a kérdés szövege törhet, és a hézag szűkül. */
  .faq__q {
    gap: 12px;
  }

  .faq__q > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* A leghosszabb gombfeliratok 320px-en sem férnek egy sorba. */
@media (max-width: 380px) {
  .btn {
    white-space: normal;
    text-align: center;
  }
}

/* ---------- 9. Kiszorított szöveg -----------------------------
 * Az utolsó két eset nem a DOBOZ méretén látszott — a dobozok elfértek, a
 * SZÖVEG lógott ki belőlük. Ezért a szokásos „melyik elem szélesebb a
 * szülőjénél" vizsgálat nem találta meg, csak a szövegcsomópontok mérése.
 * ------------------------------------------------------------- */

/* 9/a — Esettanulmány KPI-sávja. A burkoló `flex-wrap: wrap`, a fejléc
   260px, a mutatók sávja `flex: 1`. 390px-en a kettő ELFÉRT egy sorban
   (260 + 40 hézag), így a sáv 42px-re préselődött — a `white-space: nowrap`
   mérőszámok pedig kifutottak a képernyőről. Mobilon egymás alá. */
@media (max-width: 900px) {
  .kpi-band-wrap__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .kpi-band__head {
    max-width: none;
  }
}

/* 9/b — Hosszú magyar összetett szavak. A „keresőoptimalizálásban" 360px-en
   nem fér a címsorba, és mivel nincs benne törési pont, kilóg. Elválasztás,
   és végszükségben tördelés — a `lang="hu"` a <html>-en már ott van, tehát
   a `hyphens: auto` valódi magyar szótagolást ad. */
@media (max-width: 600px) {
  h1, h2, h3, h4,
  .hero__title,
  .section-head__title,
  .kpi-band__title,
  .faq__q,
  .post-card__title {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* ---------- 10. Kattintási felületek --------------------------
 * Mérve mobilon: a lábléc linkjei 17px, a szekció-linkek 18px, a
 * „bővebben" linkek 15–22px magasak. Ujjal ez nem cél, hanem célzás.
 * A hivatkozási érték ~44px; a listákban 40px már elég, mert a sorok
 * között ott a hézag.
 *
 * CSAK önálló, listás linkeket bővítünk — a folyószövegbe ágyazott
 * hivatkozásokat nem, mert azoknak a sormagasság a helyes viselkedésük.
 * ------------------------------------------------------------- */

@media (max-width: 900px) {
  .footer-col__link,
  .jd-toc__link,
  .topic-card__link,
  .case-card__link,
  .result-card__link,
  .capability-card__link,
  .section-link,
  .contact-note__link,
  .pd-industries__all,
  .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* A lábléc oszlopainak sorköze ne nőjön meg a magasabb linkektől. */
  .footer-col__list li {
    line-height: 1;
  }

  .founder__social,
  .social-link {
    min-width: 40px;
    min-height: 40px;
  }

  .logo-wall__link {
    display: flex;
    align-items: center;
    min-height: 40px;
  }
}

/* ---------- 11. Apró feliratok --------------------------------
 * A látványterv 9–10.5px-es jelvényeit és címkéit mobilon 11–12px-re
 * emeljük. KIZÁRÓLAG médialekérdezésben, tehát az asztali nézet
 * pixelpontos marad — a méretek ott szándékosak.
 * ------------------------------------------------------------- */

@media (max-width: 600px) {
  .chip,
  .post-avatar,
  .post-meta .post-avatar,
  .dash__live-label,
  .capability-card__slug,
  .case-card__tag,
  .blog-card__tag,
  .post-card__tag,
  .result-card__tag,
  .agency-card__badge,
  .case-light__tag,
  .case-hero__tag,
  .case-summary__key,
  .price-card__badge,
  .pd-tier__badge,
  .job-card__cat,
  .jd-minicard__cat,
  .blog-chip__count,
  .badge-feat,
  .feat-case__badge,
  .feat-case__tag {
    font-size: 11.5px;
  }

  .brand__mark {
    font-size: 11px;
  }
}

/* A lábléc jogi linkjei és a morzsa: ezek egy sorban futó, másodlagos
   navigációk. Az `inline-flex` szétvágná a sort, ezért itt csak függőleges
   belső teret adunk — a sor képe marad, a koppintható sáv nő. */
@media (max-width: 900px) {
  .legal-links a,
  .breadcrumb a {
    padding-block: 8px;
  }

  .svc-contact__method {
    min-height: 40px;
  }

  .brand {
    min-height: 40px;
  }
}

/* ---------- 12. Cikkoldal és a maradék szekciók ----------------
 * A teljes, 354 URL-es sepréskor bukkantak fel: a mintában szereplő
 * EGYETLEN bejegyzésen nem volt hírlevél-doboz és prose-CTA, a másik
 * 250-en viszont igen. Ugyanaz a három minta, mint eddig.
 * -------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Bejegyzés-lábléc hírlevele: kéthasábos rács, sáv 367px a 278px-es
     dobozban. */
  .post-newsletter__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* Szolgáltatás-kártya fejsora: cím + monospace címke `flex-shrink: 0`-val,
     tehát a cím nem tudott zsugorodni. */
  .feature-card__head,
  .price-card__head {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .post-newsletter__inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .post-newsletter__card {
    padding-left: 24px;
    padding-right: 24px;
  }

  .prose-cta {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* A cikktörzs SZERKESZTŐI tartalom: hosszú URL-ek, kódrészletek és magyar
   összetett szavak kerülnek bele, amikre a látványterv nem készülhetett.
   Ezért itt a tördelés engedélyezése nem kozmetika, hanem védőháló. */
@media (max-width: 900px) {
  .article-prose p,
  .article-prose li,
  .article-prose h2,
  .article-prose h3,
  .article-prose h4,
  .article-prose td,
  .article-prose a,
  .pullquote__q {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* A soron belüli kód nem szó, hanem azonosító: nincs benne törési pont,
     és elválasztani sem szabad. Itt az `anywhere` kell, mert ez az EGYETLEN
     érték, ami a min-content szélességet is csökkenti. */
  .article-prose code,
  .article-prose kbd,
  .article-prose samp {
    overflow-wrap: anywhere;
    hyphens: none;
  }

  /* Táblázat és kódblokk nem tördelhető: kapjon SAJÁT vízszintes görgetést,
     hogy ne az egész oldalt tolja el. */
  .article-prose table,
  .article-prose pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .article-prose img,
  .article-prose iframe,
  .article-prose video {
    max-width: 100%;
    height: auto;
  }
}

/* ---------- 13. Az utolsó min-content csapdák ------------------
 * FONTOS KÜLÖNBSÉG: az `overflow-wrap: break-word` a MEGJELENÍTÉSKOR tördel,
 * de a doboz MIN-CONTENT szélességét nem csökkenti — a rács sávja tehát
 * továbbra is a leghosszabb szóhoz igazodik. A sávot ezért `minmax(0, 1fr)`
 * fogja meg, a szöveget pedig a tördelés; a kettő EGYÜTT kell.
 * -------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Cikk-elrendezés: a jegyzék fölé kerül, a törzs pedig végre zsugorodhat.
     Enélkül egy hosszú URL a szövegben 604px-re feszítette a sávot. */
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .price-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-card {
    min-width: 0;
  }

  .price-card__name,
  .price-card__kicker,
  .price-card__cap {
    overflow-wrap: anywhere;
  }
}

/* Két utolsó eset a teljes seprésből.

   A `.price-card__cap` `white-space: nowrap`-et visz: az ERŐSEBB, mint a
   tördelés, tehát hiába engedtük meg az `anywhere`-t, a sor nem törhetett.
   Mobilon a felirat két sorba mehet — a csomag ára fontosabb, mint az
   egysoros ritmus. */
@media (max-width: 900px) {
  .price-card__cap {
    white-space: normal;
  }

  /* Számozott listába ágyazott kódrészlet: a lista behúzása + a kód
     hossza együtt lógott ki. A behúzás mobilon szűkebb. */
  .prose-list {
    padding-left: 20px;
  }

  /* A listaelem FLEX sor (jelölő + szöveg). A szöveg-oldal flex-elem, tehát
     `min-width: auto` az alapja: nem tud a min-content alá menni, hiába
     tördelhet a benne lévő kód. A `min-width: 0` a gyerekre kell. */
  .prose-list__item,
  .prose-list__item > * {
    min-width: 0;
  }
}

/* A szekció-fejléc flex sor; a szöveg-oldala flex-elem, tehát `min-width:
   auto` az alapja, és a leghosszabb szónál keskenyebb nem lehet. Betöltött
   webfonttal ez épp elfér, a tartalék betűvel viszont már nem — a fejléc
   ilyenkor kilóg, amíg a font meg nem érkezik. A `min-width: 0` ettől
   független: a doboz mindig a rácshoz igazodik, a szó pedig tördel. */
@media (max-width: 900px) {
  .section-head__main,
  .section-head__aside {
    min-width: 0;
  }
}

/* ---------- 14. Lábléc-accordion ------------------------------
 * Mobilon a négy linkoszlop egymás alá kerülve nagyon hosszú láblécet ad
 * (négy cím + ~24 link). Összecsukva a lábléc négy sor, és a látogató azt
 * nyitja ki, amire kíváncsi.
 *
 * A `[data-collapsible]` kapcsolót a `footer.js` teszi ki futásidőben, és
 * csak 900px alatt. Ha a JS nem fut le, ez a blokk NEM aktiválódik, tehát
 * minden link látszik — ugyanúgy, mint eddig. A nyitott/zárt állapot
 * szerződése ugyanaz, mint a fejléc fiókjában: `aria-expanded` a kapcsolón.
 * -------------------------------------------------------------- */

@media (max-width: 900px) {
  .site-footer[data-collapsible] .footer-col {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .site-footer[data-collapsible] .footer-col__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    /* Az egész sor koppintható, nem csak a felirat. */
    padding: 18px 0;
    cursor: pointer;
    /* A cím <span>, tehát a böngésző nem védi meg a jelölés-kihúzástól,
       amikor a látogató gyorsan nyitogat. */
    user-select: none;
  }

  .site-footer[data-collapsible] .footer-col__title:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
  }

  /* A +/− jel tisztán CSS-ből. Két egymásra fektetett vonal: a függőleges
     eltűnik nyitott állapotban, marad a vízszintes — így a „+" mínusszá
     válik, animálva, extra elem nélkül. */
  .site-footer[data-collapsible] .footer-col__title::after {
    content: '';
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    background-image:
      linear-gradient(to bottom, currentColor, currentColor),
      linear-gradient(to bottom, currentColor, currentColor);
    background-size: 12px 1.5px, 1.5px 12px;
    background-position: center, center;
    background-repeat: no-repeat;
    transition: transform 0.2s ease;
  }

  .site-footer[data-collapsible] .footer-col__title[aria-expanded='true']::after {
    /* A függőleges szár elforog a vízszintesbe: marad az egy vonal. */
    background-size: 12px 1.5px, 0 0;
  }

  .site-footer[data-collapsible] .footer-col__list {
    display: none;
    margin-top: 0;
    padding-bottom: 14px;
  }

  .site-footer[data-collapsible] .footer-col__title[aria-expanded='true'] + .footer-col__list {
    display: block;
  }

  /* Nyitva a linkek kapjanak rendes koppintási magasságot. */
  .site-footer[data-collapsible] .footer-col__list li {
    padding: 0;
  }

  .site-footer[data-collapsible] .footer-col__link {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: 14px;
  }
}

/* Összecsukott állapotban a sorok ÜLJENEK EGYMÁSON: a rács 28px-es
   sorköze a saját elválasztó vonala mellett dupla hézagot adott, és a
   lábléc szétesett. A márkatömb kapja meg a levegőt külön. */
@media (max-width: 900px) {
  .site-footer[data-collapsible] .site-footer__grid {
    row-gap: 0;
  }

  .site-footer[data-collapsible] .site-footer__brand {
    margin-bottom: 28px;
  }
}

/* Koppintásra ne villanjon. Mobil böngészőben minden kattintható elem kap egy
   alapértelmezett félátlátszó „tap highlight" négyszöget — az accordion
   nyitogatásánál ez sötét háttéren szürke felvillanásnak látszik. A saját
   :focus-visible jelölésünk marad, tehát billentyűzettel továbbra is látszik,
   hol állunk. */
@media (max-width: 900px) {
  .site-footer[data-collapsible] .footer-col__title,
  .site-footer[data-collapsible] .footer-col__link,
  .mobile-nav__toggle,
  .mobile-nav__link,
  .nav-toggle {
    -webkit-tap-highlight-color: transparent;
  }

  /* A gomb saját :focus gyűrűje egérrel/ujjal ne jelenjen meg — csak
     billentyűzetes fókusznál. */
  .mobile-nav__toggle:focus:not(:focus-visible),
  .site-footer[data-collapsible] .footer-col__title:focus:not(:focus-visible) {
    outline: none;
  }
}

/* A háromsoros lábléc-copyright. Három igazítás kell hozzá:

   1. `display: block` + sorköz — a 11px-es mono szöveg sorai összetapadnának.
   2. `text-transform: none` — a design nagybetűsíti ezt a sort, de itt már
      cím és e-mail cím áll benne, amit nagybetűvel írni hibás („HELLO@360-
      MARKETING.HU”). A szöveg úgy jelenik meg, ahogy a szerkesztő beírta.
   3. Szűkebb betűköz mobilon — 1.4px-szel az elérhetőség sora nem fért ki
      390px-en, és kettétört az e-mail cím közepén. */
.site-footer__copy {
  display: block;
  line-height: 1.9;
  text-transform: none;
}

@media (max-width: 600px) {
  .site-footer__copy {
    letter-spacing: 0.4px;
  }
}

/* ---------- 15. Blog-listázó apróságok ------------------------ */

/* A lapozó EGY SORBAN. Kilenc elem (8 gomb + a hármaspont) 42px-es
   gombokkal és 8px-es hézaggal 417px — a 342px-es sávban ez két sorra
   tört, és a „következő" nyíl külön sorba került.
   A gombok szűkülnek, a hézag feleződik, és a sor `nowrap`: ha egy nagyon
   keskeny készüléken vagy sok oldalszámnál még így sem férne ki, a sáv
   VÍZSZINTESEN GÖRGETHETŐ — a saját dobozán belül, tehát az oldalt nem
   tolja el. Így egy sor marad minden szélességen. */
@media (max-width: 600px) {
  .pagination {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    /* A görgetősáv elrejtése: a lapozó rövid, a sáv csak zajt adna. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Hogy a szélső gomb ne tapadjon a képernyő szélére görgetés közben. */
    padding-bottom: 4px;
  }

  .pagination::-webkit-scrollbar {
    display: none;
  }

  .pagination > * {
    flex: 0 0 auto;
  }

  .pagination__btn {
    min-width: 36px;
    height: 38px;
    padding: 0 8px;
  }

  .pagination__ellipsis {
    padding: 0 2px;
  }
}

/* A kiemelt bejegyzés kártyáján a cím és az „Olvass tovább" gomb
   összeért — a gombsor kap egy kis levegőt. */
.feat-card__actions {
  margin-top: 20px;
}

/* ---------- 16. Álláshirdetés mobilon -------------------------
 * Két baj egy helyen (M360-213).
 *
 * 1. A RAGADÓS SÁV A LAP ALJÁRA KERÜLT. Asztalon jobbra ül, és a bal
 *    oszloppal együtt görög — ott van értelme. 900px alatt a rács
 *    egyhasábossá esik, és a forrás-sorrend miatt a hirdetés TELJES
 *    szövege elé kerül. A jelentkezés gombja, a határidő és a
 *    kapcsolattartó így tíz képernyőnyi görgetés mögé csúszott.
 *
 * 2. A TARTALOMJEGYZÉK A SÁV FELÉT ELVITTE. Egy tizenegy pontos jegyzék
 *    mobilon ~380 pixel: felülre húzva pont az összefoglaló kártyát és a
 *    gombot tolta volna le, amiért az egészet felhozzuk.
 *
 * Ezért a sáv `order`-rel a szöveg elé kerül, a jegyzék pedig becsukva
 * indul. A `[data-collapsible]` kapcsolót a `toc-collapse.js` teszi ki
 * futásidőben, ugyanazzal a szerződéssel, mint a lábléc oszlopainál:
 * `aria-expanded` a kapcsolón, testvér-szelektor a panelen. JS nélkül a
 * jegyzék teljesen látszik, csak lejjebb, tehát semmi nem vész el.
 * ------------------------------------------------------------- */

@media (max-width: 900px) {
  /* A rács egyhasábos, tehát az `order` a megjelenés sorrendjét adja. A
     bal oszlop kap explicit 2-est: `order` nélkül 0 lenne, és a negatív
     érték ugyan elé vinné a sávot, de a szándék így olvasható. */
  .jd-aside {
    order: 1;
  }

  .jd-main {
    order: 2;
  }

}

/* ---------- 16b. Összecsukható jegyzékek ---------------------
 * KÉT JEGYZÉK, EGY VISELKEDÉS: az álláshirdetésé és a cikké. A vizuális
 * kezelés ezért közös, és NEM médialekérdezésben áll — a
 * `[data-collapsible]` jelzőt a `toc-collapse.js` csak a saját
 * töréspontja alatt teszi ki (a hirdetésen 900px, a cikkben 1024px), tehát
 * a kapu maga a jelző. Két külön médiablokk ugyanezt adná, két másolatban.
 *
 * A CIKK JEGYZÉKE KORÁBBAN EGYSZERŰEN ELTŰNT (M360-238). 1024px alatt
 * `display: none` volt, tehát mobilon nem lehetett a cikk közepére ugrani,
 * és a megosztó gombok sem látszottak sehol. Most felül áll, becsukva.
 *
 * A MEGOSZTÓ GOMBOK NYITVA MARADNAK. Saját elválasztó vonaluk fölött külön
 * szakasz a jegyzéken belül, és egy telefonon a megosztás a cikk egyik fő
 * művelete — a kapcsoló ezért csak a listát vezérli, és az `aria-controls`
 * is pontosan azt mondja.
 * ------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* A main.css itt `display: none`-t ír a jegyzékre. A ragadós pozíció és a
     képernyőhöz kötött magasság is az oldalsávé: felül, a szöveg előtt
     állva mindkettő értelmetlen. */
  .article-toc {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.jd-toc[data-collapsible] .jd-toc__eyebrow,
.article-toc[data-collapsible] .article-toc__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  /* Az egész sor koppintható, nem csak a felirat. */
  margin-bottom: 0;
  padding: 4px 0;
  cursor: pointer;
  /* A felirat <span>, tehát a böngésző nem védi meg a jelölés-kihúzástól
     gyors nyitogatáskor. */
  user-select: none;
}

.jd-toc[data-collapsible] .jd-toc__eyebrow:focus-visible,
.article-toc[data-collapsible] .article-toc__label:focus-visible {
  outline: 2px solid #25759c;
  outline-offset: 4px;
}

/* A +/− jel tisztán CSS-ből, ugyanaz a két egymásra fektetett vonal,
   mint a láblécben: a függőleges szár tűnik el nyitáskor. */
.jd-toc[data-collapsible] .jd-toc__eyebrow::after,
.article-toc[data-collapsible] .article-toc__label::after {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-image:
    linear-gradient(to bottom, currentColor, currentColor),
    linear-gradient(to bottom, currentColor, currentColor);
  background-size: 12px 1.5px, 1.5px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease;
}

.jd-toc[data-collapsible] .jd-toc__eyebrow[aria-expanded='true']::after,
.article-toc[data-collapsible] .article-toc__label[aria-expanded='true']::after {
  background-size: 12px 1.5px, 0 0;
}

.jd-toc[data-collapsible] .jd-toc__list,
.article-toc[data-collapsible] .article-toc__list {
  display: none;
}

.jd-toc[data-collapsible] .jd-toc__eyebrow[aria-expanded='true'] + .jd-toc__list,
.article-toc[data-collapsible] .article-toc__label[aria-expanded='true'] + .article-toc__list {
  display: block;
  margin-top: 8px;
}

/* ---------- 17. Függőleges térközök mobilon -------------------
 * A design a szekciók közé 80–120 pixel levegőt tesz. Asztalon ez tartja
 * össze a lapot; egy 390 pixel széles képernyőn viszont a 96 pixeles
 * szegély a képernyőmagasság negyede, tehát két szekció közt egy majdnem
 * üres kép áll (M360-214).
 *
 * A SKÁLA: ~40%-kal kevesebb, a design fokainak arányát megtartva.
 *
 *     120 → 64      88 → 52      56 → 36      40 → 28
 *     104 → 60      80 → 48      52 → 32      28 → 20
 *   96/100 → 56     72 → 44      44 → 28       8 → 8
 *                   64 → 40
 *
 * A vízszintes margókhoz NEM nyúlunk: azokat a 6. szakasz húzza be 24px-re.
 * Ezért mindenütt csak `padding-top`/`padding-bottom` áll, sosem a rövid
 * `padding` — az felülírná a 24 pixeles oldalmargót is.
 *
 * MIÉRT TÉTELES A LISTA. A szekció-burkolók fele `.section`-t visz a
 * design fokaival, a másik fele saját osztályt saját beégetett értékkel
 * (`.consult`, `.jd-body`, `.pd-hero`…). Egy `section { }` elemszelektor
 * mindkettőt eltalálná, de a hero-kártyákat és a beágyazott szekciókat is,
 * és a felülírásuk `!important`-ba fulladna. A 91 szekció-szintű blokk
 * burkolója viszont véges lista, tehát felsorolható.
 *
 * EGY LÉPCSŐ, 768px-nél. A tablet álló és a telefon közt a design fokai
 * arányosan viselkednek; ha egy konkrét oldalon 480px-en még mindig sok a
 * levegő, az külön hangolás, nem ennek a szabálynak a dolga.
 * ------------------------------------------------------------- */

@media (max-width: 768px) {
  /* A design fokai. Sorrend szerint: az alap előbb, a módosítók utána,
     ugyanúgy, ahogy a main.css-ben állnak. */
  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .section--tight {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .section--tight-y {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .section--sm {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section--md {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .section--lg {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .section--xl {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Saját osztályú szekciók, a beégetett értékük szerint csoportosítva. */

  /* 120px */
  .in-house {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* 96–100px */
  .ai-platforms,
  .consult,
  .en-expect,
  .final-cta,
  .founder,
  .os-builder,
  .os-cost,
  .os-fit,
  .os-team,
  .os-timeline,
  .pd-included,
  .pd-intro,
  .pd-price,
  .pkg-cta,
  .system,
  .workflow {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* 88px */
  .car-about,
  .car-benefits,
  .car-jobs,
  .car-past,
  .car-team,
  .pkg-grid-section,
  .svc-contact {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  /* 80px */
  .jd-more,
  .pd-industries {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* 64px */
  .criteria,
  .newsletter,
  .post-newsletter {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* 56px */
  .author-bio-section {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  /* 40px */
  .logo-wall {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* Aszimmetrikus szekciók: a design szándéka a KÜLÖNBSÉG a két oldal
     közt (a hero alul nyit a következő szekcióra, a lezáró felül), ezért
     az arányt is visszük, nem csak az értéket. */
  .about-hero,
  .pd-hero,
  .svc-hero {
    padding-top: 40px;
    padding-bottom: 44px;
  }

  .car-hero,
  .contact-hero {
    padding-top: 40px;
    padding-bottom: 36px;
  }

  .pkg-hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .hero {
    padding-top: 48px;
    padding-bottom: 36px;
  }

  /* A morzsasor alatt nyíló hero-k: alul nincs szegélyük, a következő
     szekció adja a levegőt. */
  .article-hero,
  .blog-hero,
  .case-hero,
  .jd-hero {
    padding-top: 32px;
  }

  .gloss-hero {
    padding-top: 32px;
    padding-bottom: 28px;
  }

  .ref-hero {
    padding-top: 32px;
    padding-bottom: 40px;
  }

  .kpi-band-wrap {
    padding-top: 28px;
  }

  .article-body {
    padding-top: 36px;
  }

  .gloss-list {
    padding-top: 36px;
    padding-bottom: 48px;
  }

  .jd-body {
    padding-top: 36px;
    padding-bottom: 52px;
  }

  .post-section {
    padding-top: 36px;
    padding-bottom: 56px;
  }

  /* A hirdetés szakaszai közti hézag ugyanez a probléma egy szinttel
     beljebb: tíz szakasz 52 pixeles hézaggal fél képernyőnyi üres helyet
     ad össze. */
  .jd-main {
    gap: 36px;
  }
}

/* ---------- 18. Olvasásjelző ---------------------------------
 * A cikk-törzs kapcsolójához (M360-78). ALAPBÓL KIKAPCSOLVA: a handoffban
 * nincs ilyen elem, tehát bekapcsolás nélkül az oldal karakterre a designé
 * marad. Ami eddig hiányzott, az nem a döntés volt, hanem hogy a kapcsoló
 * BEKAPCSOLVA sem csinált semmit — se stílus, se szkript nem tartozott hozzá.
 * Egy kapcsoló, ami nem kapcsol, csapda a szerkesztőnek.
 *
 * A FEJLÉC ALATT ÜL, nem fölötte. A fejléc ragadós (`position: sticky`,
 * `top: 0`), tehát sosem görög el; a magassága viszont töréspontonként más
 * (144 és 75 pixel közt). Ezért nem beégetett érték áll itt, hanem a
 * `--m360-header-h` változó, amit az `article.js` a MÉRT magasságból tölt fel.
 * Szkript nélkül a tartalék `0px`: a csík a lap tetejére kerül, ami rosszabb,
 * de nem törött — és szkript nélkül amúgy sem mozdulna.
 *
 * A `z-index` a fejléc 100-a ALATT van. Átfedés nincs, de ha egy jövőbeli
 * változtatás mégis egymásra tolná őket, a fejléc legyen elöl.
 * ------------------------------------------------------------- */

.reading-progress {
  position: fixed;
  top: var(--m360-header-h, 0px);
  left: 0;
  right: 0;
  height: 3px;
  z-index: 99;
  background: rgba(11, 18, 32, 0.06);
  pointer-events: none;
}

.reading-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: #25759C;
  /* Rövid átmenet, hogy a görgetés ne ugráltassa. Hosszabb csík lemaradna a
     görgetés mögött, és attól tűnne akadozónak. */
  transition: width 0.1s linear;
}

/* A csík MOZGÁS. Aki kérte, hogy ne mozogjon a felület, annak a szélessége
   ugorjon, ne csússzon — az információ megmarad, az animáció nem. */
@media (prefers-reduced-motion: reduce) {
  .reading-progress__bar {
    transition: none;
  }

  /* A KIEMELKEDŐ KÁRTYÁK NEM MOZDULNAK (M360-245). Három kártya emelkedik két
     pixelt az egér alatt; aki kérte, hogy ne mozogjon a felület, annak a
     keret és az árnyék marad, a mozgás nem. Az információ („ezen állsz")
     megvan nélküle is.

     A `price-card` most kapta ezt az effektet, a másik kettő régebben — de
     ugyanaz a mozdulat, tehát egy helyen áll a kivétel is. */
  .pkgcard:hover,
  .post-card:hover,
  .price-card:not(.price-card--featured):hover {
    transform: none;
  }
}

/* ---------- 19. Szótári fogalom oldala -----------------------
 * A törzs kéthasábos: `minmax(0, 1fr) 320px`. A 320 pixeles sáv FIX, tehát
 * 390px-es képernyőn a szócikknek 14 pixel maradna, és a szöveg
 * karakterenként tördelne — mérve 39 903 pixel magas lap.
 *
 * A töréspont 900px, ugyanaz, ahol az álláshirdetés törzse is egyhasábossá
 * esik: a két oldal ugyanazt a szerkezetet viseli, tehát ne két különböző
 * szélességen viselkedjenek másképp.
 *
 * Az oldalsáv MARAD ALUL, szemben az álláshirdetéssel (M360-213). Ott a
 * jelentkezés gombja a lap célja, itt viszont a szócikk maga: a
 * kapcsolattartó és a kapcsolódó fogalmak az olvasás UTÁN következnek.
 * ------------------------------------------------------------- */

@media (max-width: 900px) {
  .gloss-term__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .gloss-term__aside {
    position: static;
  }

  .gloss-term__title {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .gloss-term__lead {
    font-size: 18px;
    padding-left: 18px;
  }
}

@media (max-width: 768px) {
  .gloss-term__inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 600px) {
  /* A két lapozó-kártya egymás mellett 390px-en 150 pixel széles: a fogalom
     neve két-három sorra törik bennük. Egymás alatt teljes szélességet
     kapnak, és a „következő" jobbra igazítása is értelmét veszti. */
  .nav-pair {
    flex-direction: column;
  }

  .nav-card--next {
    text-align: left;
    margin-left: 0;
  }
}

/* ---------- 20. Képesség-kártya szűk képernyőn ----------------
 * A kártya belül KÉTHASÁBOS: balra a cím, a leírás és az al-szolgáltatások,
 * jobbra a kiemelt szám (`1.5fr 1fr`). A rács maga 1024px alatt egyhasábossá
 * esik (main.css), a KÁRTYÁN BELÜLI osztás viszont minden szélességen
 * megmaradt.
 *
 * Mérve 390px-en: a kártya 342px, mínusz 56px belső margó és 24px hézag, tehát
 * a szövegnek 157px marad, a számnak 105px. A „+127%" ebben még elfér, a
 * „120 pont" már nem, és az al-szolgáltatás-pirulák szavanként törnek.
 *
 * 600px alatt ezért a szám a szöveg ALÁ kerül, teljes szélességben. Ez a
 * Szolgáltatások oldalon és a főoldalon egyaránt ez a kártya.
 * ------------------------------------------------------------- */

@media (max-width: 600px) {
  .capability-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 24px 20px;
  }

  /* Teljes szélességben a szám és a magyarázata egy sorba fér, a doboz így
     nem lesz feleslegesen magas. */
  .capability-card__stat {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    padding: 14px 16px;
  }

  .capability-card__stat-value {
    font-size: 28px;
    flex-shrink: 0;
  }

  .capability-card__stat-label {
    margin-top: 0;
  }
}

/* Cikk-értékelő: a kérdés és a gombsor egymás alá kerül (M360-177). */
@media (max-width: 560px) {
  .helpful .helpful__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .helpful .helpful__stat {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
}