/* ============================================================
   PUBLIKUS CÉGOLDAL · RESPONSIVE — MINDEN töréspont EGY helyen
   doc: docs/ceg-publikus-profil/10-…-2026-08-21.md §4

   ⚠️ Ezt a fájlt a template UTOLSÓKÉNT tölti be, hogy a töréspontok felülírják a
   modulok alap-szabályait.

   Cél-felületek (mind ellenőrizve, nincs vízszintes túlcsordulás):
   ┌ PC            ≥ 1025px  → base (2 oszlop: fő + 320px oldalsáv)
   ├ nagy tablet   768–1024  → 2 oszlop 861-ig, alatta 1 oszlop
   ├ telefon       461–767   → 1 oszlop, oldalsáv felül, menü 1 sor
   ├ kis telefon   361–460   → sűrűbb paddingek, „Hogyan működik" 1 oszlop
   └ nagyon kicsi  ≤ 360     → a menü tördel (MIND a 4 link látszik), CTA egymás alatt
   iOS és Android egyaránt (l. a nav.css -webkit-backdrop-filter sorát is).
   ============================================================ */

/* ── ≤ 860px — portrait tablet + nagy telefon: EGY oszlop ───────────── */
@media (max-width: 860px) {
    .cp-layout { grid-template-columns: 1fr; }

    /* Az elérhetőség-kártya menjen ELŐRE: telefonon a hívás a fő cél.
       ⚠️ A hero-átfedés (base.css negatív margó) itt KIKAPCSOL — az oldalsáv a hero ALÁ kerül. */
    .cp-side { order: -1; margin-top: 0; }

    .cp-name { font-size: 1.5rem; }
    .cp-logo { width: 72px; height: 72px; }

    /* „Hogyan működik": 4 → 2 oszlop. */
    .cp-how-grid { grid-template-columns: 1fr 1fr; }

    /* A CTA-gombok töltsék ki a sort — telefonon a nagy találati felület a jó. */
    .cp-hero-cta { width: 100%; }
    .cp-hero-cta .cp-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── ≤ 640px — telefon: a menü MINDEN linkje látszik (tördelve, nem rejtve) ──
   ⚠️ Doc 09 tanulság: a görgethető sáv elrejti a felét → a felfedezhetőség
   fontosabb. Ezért a menü a márka alá esik, teljes szélességben, TÖRDELVE. */
@media (max-width: 640px) {
    /* A NÉV LÁTSZIK (user), a chip-menüpontok a névvel együtt középre tördelnek. */
    .cp-nav-inner { justify-content: center; }
    .cp-nav-brand { width: 100%; justify-content: center; margin-right: 0; }

    /* A több sorba tördelt menü miatt a horgony-ugrás margója nagyobb. */
    #top, #bemutatkozas, #szolgaltatasok, #referenciak, #velemenyek, #kapcsolat {
        scroll-margin-top: 132px;
    }

    .cp-hero { padding: 24px 0; }
    .cp-section-head { margin-bottom: 12px; }

    /* ⭐ 2026-08-26 (user, doc 10 §1c/F7) — FACEBOOK-BANNER: telefonon alacsonyabb kép-sáv.
       (Nincs fátyol: a profil-adatok a sáv alatt, tömör háttéren ülnek.) */
    .cp-cover-banner { height: 190px; }
}

/* ── ≤ 576px — tulajdonos-sáv ───────────────────────────────────────── */
@media (max-width: 576px) {
    /* A súgó-mondat elmarad — a lényeg a gomb, azt ne nyomja le a szöveg. */
    .cp-ownerbar-hint { display: none; }
    .cp-ownerbar-btn { flex: 1 1 auto; text-align: center; }
}

/* ── ≤ 460px — kis kijelzős telefon: sűrűbb, egy oszlop mindenütt ────── */
@media (max-width: 460px) {
    .cp-how-grid { grid-template-columns: 1fr; }
    .cp-card { padding: 16px; }
    .cp-name { font-size: 1.35rem; }
    .cp-hero { padding: 20px 0; }
    .cp-cover-banner { height: 150px; }
    .cp-how { padding: 32px 0; }
}

/* ── ≤ 360px — nagyon kicsi kijelző: a CTA-gombok egymás ALATT ───────── */
@media (max-width: 360px) {
    .cp-hero-cta { flex-direction: column; }
    .cp-hero-cta .cp-btn { width: 100%; }
    .cp-nav-brand { font-size: .98rem; }
}