/* ═══════════════════════════════════════════════════════════
   GRUPPA MK — Mobile Responsive Stylesheet
   Targets all pages: index, events, talent, 3we, sales,
                      tickets, contact
   ═══════════════════════════════════════════════════════════ */

/* ── HAMBURGER (always in DOM, hidden ≥901px) ── */
.nav-burger{
  display:none;
  width:36px;height:36px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:transparent;border:1px solid var(--border);cursor:pointer;
  padding:0;
}
.nav-burger span{
  display:block;width:16px;height:1.5px;background:var(--white);
  transition:transform .25s, opacity .2s;
}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ═══════════ TABLET ≤ 1100px ═══════════ */
@media (max-width: 1100px){
  /* index — tighten 4-col grids */
  .stats-grid{grid-template-columns:repeat(3,1fr) !important}
  .events-grid{grid-template-columns:repeat(2,1fr) !important}
  .footer-top{grid-template-columns:1fr 1fr !important;gap:40px !important}

  /* talent / 3we / sales */
  .roster-grid,.talent-grid{grid-template-columns:repeat(3,1fr) !important}
  .services-grid,.services-list,.svc-grid,.results-grid,.talent-services,.how-steps{grid-template-columns:repeat(2,1fr) !important}
  .process-steps{grid-template-columns:repeat(2,1fr) !important}
  .types-grid{grid-template-columns:repeat(2,1fr) !important}
}

/* ═══════════ MOBILE ≤ 900px ═══════════ */
@media (max-width: 900px){

  /* ─── NAV ─── */
  #nav,nav#nav{padding:14px 20px !important}
  .nav-links{
    display:none !important;
    position:fixed;top:64px;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--black);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:8px 0;
    z-index:99;
  }
  .nav-links.open{display:flex !important}
  .nav-links a{
    padding:18px 24px;font-size:13px;
    border-bottom:1px solid var(--border);
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-cta{display:none !important}
  .nav-burger{display:flex}
  .nav-wordmark{font-size:11px}
  .nav-logo{width:32px;height:32px}

  /* ─── GLOBAL SECTION PADDING ─── */
  section,#hero,#intro,#brands,#stats,#portfolio,#integration,
  #upcoming,#testimonials,#talent,#tickets,#services,#spotlight,
  #roster,#what,#process,#results,#apply,#how,#organizer,#types,
  #waitlist,#contact,#cta,#apply-org,footer,#footer{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  section{padding-top:56px !important;padding-bottom:56px !important}
  #hero{padding-top:100px !important;padding-bottom:48px !important;min-height:auto !important}

  /* ─── HEROES ─── */
  .hero-title{font-size:clamp(40px,11vw,64px) !important;line-height:.9 !important}
  .hero-desc,.hero-sub{font-size:14px !important;max-width:100% !important}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:8px !important}
  .hero-ctas .btn{justify-content:center;width:100%}
  .hero-inner{grid-template-columns:1fr !important;gap:32px !important;padding:0 !important}
  .hero-img{height:240px !important;margin:0 -20px}
  .hero-stat-bar{flex-wrap:wrap;margin:0 -20px !important}
  .hero-stat-bar > *{flex:1 1 50%;border-right:none !important;border-bottom:1px solid var(--border)}

  .hero-ring-deco{display:none !important}

  /* ─── COLLAPSE ALL MULTI-COL GRIDS ─── */
  .brand-split,
  .portfolio-grid,
  .integration-inner,
  .testi-grid,
  .what-inner,
  .svc-header,
  .apply-inner,
  .org-inner,
  .talent-header,
  .services-header,
  .spotlight,
  .spotlight-card,
  .waitlist-band,
  .org-band,
  #page{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }

  /* All card grids → single col */
  .stats-grid,.events-grid,.testi-grid,.svc-grid,.results-grid,
  .services-grid,.services-list,.types-grid,.talent-services,
  .how-steps,.process-steps,.roster-grid,.talent-grid,
  .portfolio-grid,.portfolio-masonry,.integration-visual{
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
  }
  .talent-grid{grid-template-columns:repeat(2,1fr) !important}
  .roster-grid{grid-template-columns:repeat(2,1fr) !important}
  .stats-grid{grid-template-columns:repeat(2,1fr) !important}

  /* portfolio: kill row spans on mobile */
  .port-item:first-child{grid-row:auto !important}
  .portfolio-item{grid-column:auto !important;grid-row:auto !important}

  .integration-visual{height:auto !important}
  .integration-visual > *{min-height:140px}

  /* ─── SECTION HEADERS ─── */
  .section-title,.brand-name,.svc-title,.what-title,.apply-title,
  .org-title,.results-title,.process-title,.services-title,.types-title,
  .roster-title,.audience-title{
    font-size:clamp(32px,8vw,48px) !important;
  }
  .section-sub,.brand-desc,.svc-desc,.services-desc,.audience-desc{
    max-width:100% !important;font-size:14px !important;
  }
  .results-header,.svc-header,.services-header,.roster-header,
  .talent-header{
    flex-direction:column;align-items:flex-start !important;
    gap:24px !important;margin-bottom:32px !important;
  }

  /* ─── TIMELINE / EVENT ROWS ─── */
  .tl-item{
    grid-template-columns:60px 1fr !important;
    grid-template-rows:auto auto;
  }
  .tl-item > *:nth-child(3){grid-column:1/-1;padding-left:60px !important}

  .event-row,
  [class*="event-row"],
  .events-list > div[style*="grid-template-columns"]{
    grid-template-columns:60px 1fr !important;
    grid-template-rows:auto auto !important;
    gap:0 !important;
    padding:16px 0 !important;
  }
  .event-row > *,
  .events-list > div > *{
    border-right:none !important;
    padding:6px 12px !important;
    font-size:13px !important;
  }
  .event-row .er-date,
  .events-list > div > div:first-child{
    grid-row:1/3;border-right:1px solid var(--border) !important;
  }

  /* ─── FORMS ─── */
  .form-grid,.field-grid,.field-grid-2,.check-grid{
    grid-template-columns:1fr !important;gap:16px !important;
  }
  .check-grid{grid-template-columns:1fr 1fr !important}
  .waitlist-form{flex-direction:column;border:none;gap:8px}
  .waitlist-form .waitlist-input{border:1px solid var(--border);width:100%}
  .waitlist-form .btn,
  .waitlist-form button{width:100%;justify-content:center;padding:16px !important}

  /* contact page split — stack panels */
  #page{padding-top:64px !important}
  #page > *{padding:32px 20px !important}

  /* ─── BRAND CARDS / STATS ─── */
  .brand-card{padding:48px 24px !important;min-height:auto !important}
  .brand-stats{flex-wrap:wrap;gap:20px !important}
  .stat-item{padding:28px 16px !important}
  .stat-number{font-size:36px !important}

  /* ─── FOOTER ─── */
  footer,#footer{padding:48px 20px 24px !important}
  .footer-top{
    grid-template-columns:1fr !important;
    gap:36px !important;margin-bottom:36px !important;
  }
  .footer-bottom{
    flex-direction:column;gap:16px;align-items:flex-start !important;
    text-align:left;
  }
  .footer-policy{flex-wrap:wrap;gap:14px !important}
  .footer-brand-logos{flex-wrap:wrap}
  .footer-desc{max-width:100% !important}

  /* ─── BUTTONS ─── */
  .btn{padding:14px 20px !important;font-size:11px !important}

  /* ─── MISC ─── */
  .reveal{transform:none !important} /* mobile—skip heavy parallax */
  .audience-grid{grid-template-columns:1fr !important}
  .pf-tabs{flex-wrap:wrap}

  /* tighten inline-styled grids that hardcode columns */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}

/* ═══════════ SMALL PHONE ≤ 480px ═══════════ */
@media (max-width: 480px){
  .talent-grid,.roster-grid{grid-template-columns:1fr !important}
  .stats-grid{grid-template-columns:1fr !important}
  .check-grid{grid-template-columns:1fr !important}
  .hero-title{font-size:42px !important}
  .nav-wordmark{display:none}
  section{padding-top:40px !important;padding-bottom:40px !important}
}