/* ============================================================
   kreativkontroll.hu — MOBIL RESPONSIVE réteg (Kai)
   Kiegészítő stylesheet a sablonok inline CSS-éhez. A WP-témában
   enqueue-old MINDEN oldalra (a fő/inline stílus UTÁN tölt).
   Csak <=768px-en hat (desktop érintetlen). Az !important az inline
   desktop-méretek felülírásához kell, media-query-scope-olva.
   ============================================================ */

/* Hide hamburger on desktop */
.nav-toggle{display:none}

@media (max-width:768px){
  .wrap{padding-left:20px!important;padding-right:20px!important}

  /* HEADER: hamburger nav mobilon */
  .bar{gap:12px;height:62px;position:relative}
  .bar .spacer{flex:1}
  nav.main{display:none!important;overflow-x:visible}
  header{position:relative}

  /* Hamburger gomb */
  .nav-toggle{display:flex!important;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px 4px;flex-shrink:0;margin-left:4px}
  .nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
  header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.nav-open .nav-toggle span:nth-child(2){opacity:0}
  header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Dropdown nav nyitott állapotban */
  header.nav-open nav.main{display:flex!important;flex-direction:column;position:absolute;top:62px;left:0;right:0;background:var(--navy,#0f1c38);padding:8px 20px 20px;gap:0!important;z-index:9999;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 12px 32px rgba(0,0,0,.4)}
  header.nav-open nav.main a{padding:14px 0;font-size:16px!important;white-space:normal;border-bottom:1px solid rgba(255,255,255,.08)}
  header.nav-open nav.main a:last-child{border-bottom:none}

  .cta-red{padding:9px 14px;font-size:13px;flex-shrink:0}
  .logo img{height:34px}

  /* HERO + szekció-headingek: clamp, hogy ne csorduljon túl */
  h1,h1.hero-title,h1.title{font-size:clamp(28px,8vw,40px)!important;line-height:1.1!important}
  .hero-sub,.lead,.dek{font-size:16px!important}
  .sec-title,.big,.why .big{font-size:clamp(25px,6.6vw,32px)!important;line-height:1.16!important}
  .closing h2,.ccta h2,.midcta h3,.free h3,.band h2{font-size:clamp(26px,7vw,34px)!important;line-height:1.14!important}
  .pull,.quote .line1,.quote .line2{font-size:24px!important;line-height:1.25!important}
  .eyebrow,.kicker{flex-wrap:wrap}

  /* GRIDEK -> 1 oszlop */
  .pillars,.week,.cat-grid,.cat-index,.offer-grid,.offer-cols,.proc-grid,.course-grid,.pack-grid,
  .fmt-grid,.num-grid,.help-grid,.trust3,.who-grid,.incl-list,.out-grid,.team-grid,.ref-wall,
  .dual,.rel-grid,.art-grid,.vgrid,.aud-grid,.foot-grid,.numbers{grid-template-columns:1fr!important;gap:16px!important}

  /* KÉTOSZLOPOS hero/szekció-gridek -> 1 oszlop */
  .hero .wrap,.why .wrap,.story .grid,.svc .grid,.adv .grid,.founder .grid,.hub .grid,
  .author .grid,.instructor .grid,.cred .wrap,.band .wrap,.midcta .wrap,.free .wrap,
  .closing .wrap{grid-template-columns:1fr!important;gap:30px!important}

  /* MAG (cikk-archív 3-oszlop, vonalzókkal) */
  .mag{grid-template-columns:1fr!important;gap:24px!important}
  .rule-v{display:none!important}

  /* SZEKCIÓ-padding csökkentés */
  section{padding:48px 0!important}
  .hero .wrap{padding-top:50px!important;padding-bottom:48px!important}
  .cred .wrap,.band .wrap,.midcta .wrap{padding:36px 20px!important}

  /* CIKK-elrendezés: sticky TOC/share el, olvasó-oszlop teljes szélesség */
  .layout{grid-template-columns:1fr!important;gap:0!important}
  .toc,.share{display:none!important}
  .hero-img{height:240px!important}

  /* SZÁMOK kisebb */
  .num .n,.pnum .n,.hero-meta .n,.stat .n{font-size:34px!important}
  .proof .wrap,.nums .wrap{gap:30px!important}
  .proof .quote{border-left:none!important;padding-left:0!important;border-top:1px solid var(--line);padding-top:20px!important}

  /* ENROLL-box (kurzus-oldal) ne legyen túl magas */
  .enroll-box .vid,.player{border-radius:12px}

  /* SEARCH bar mobilon */
  .searchbar{flex-wrap:wrap}
  .searchbar input{width:100%}
  .searchbar button{width:100%}
}

/* Nagyon kicsi (<=400px) — extra finomítás */
@media (max-width:400px){
  .wrap{padding-left:16px!important;padding-right:16px!important}
  h1,h1.hero-title,h1.title{font-size:clamp(26px,8vw,32px)!important}
  .hero-actions,.actions{flex-direction:column;align-items:stretch}
  .hero-actions a,.actions a{justify-content:center;text-align:center}
}

/* .hub (Tudastar) grid: fixed-track blowout guard mobilon (390px hub-overflow fix, Kai) */
@media (max-width:768px){
  #tudastar .grid,.hub .grid{grid-template-columns:minmax(0,1fr)!important}
  .hub .grid>*{min-width:0!important;max-width:100%!important;width:auto!important}
}
@media (max-width:768px){
  .hub .cta-red{white-space:normal!important;max-width:100%!important}
}