/* ═══════════════════════════════════════════════════════════
   mobile.css — goCorporate™ Global Mobile Responsive Styles
   Breakpoints: 860px (nav), 768px (layouts), 480px (small)
   ═══════════════════════════════════════════════════════════ */

/* ── HAMBURGER BUTTON ──────────────────────────────────── */
.gc-hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background .2s;
  flex-shrink: 0;
}
.gc-hamburger:hover { background: rgba(33,60,81,.07); }
.gc-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #213C51;
  border-radius: 2px;
  transition: transform .27s, opacity .2s, width .2s;
  transform-origin: center;
}
.gc-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gc-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.gc-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE NAV DRAWER ─────────────────────────────────── */
.gc-mobile-nav {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 36px;
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.gc-mobile-nav.open { transform: translateX(0); }

.gc-mn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6ebf1;
}
.gc-mn-logo {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 23px;
  font-weight: 800;
  color: #249E94;
  letter-spacing: -.02em;
  text-decoration: none;
  line-height: 1;
}
.gc-mn-logo span { color: #213C51; }
.gc-mn-logo sup { font-size: 17px; vertical-align: super; color: #249E94; }

.gc-mn-close {
  width: 34px; height: 34px;
  border: none; background: #f4f7fa; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  color: #213C51;
  font-family: inherit;
  transition: background .15s;
  line-height: 1;
}
.gc-mn-close:hover { background: #e6ebf1; }

.gc-mn-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.gc-mn-section {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: #a0aab4;
  padding: 12px 14px 4px;
}
.gc-mn-links a {
  display: block;
  padding: 12px 14px;
  font-size: 15.5px;
  font-weight: 600;
  color: #213C51;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, color .15s;
  font-family: 'Inter', Arial, sans-serif;
}
.gc-mn-links a:hover,
.gc-mn-links a.active { background: #f0f9f6; color: #249E94; }
.gc-mn-links a.sub-link {
  padding-left: 26px;
  font-size: 14.5px;
  font-weight: 500;
  color: #4a5568;
}
.gc-mn-links a.sub-link:hover { color: #249E94; }
.gc-mn-divider {
  height: 1px;
  background: #e6ebf1;
  margin: 8px 4px;
}
.gc-mn-cta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e6ebf1;
}
.gc-mn-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: #3BC1A8;
  color: #fff !important;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  font-family: 'Inter', Arial, sans-serif;
  transition: background .15s;
}
.gc-mn-cta a:hover { background: #249E94; }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE STYLES
   ───────────────────────────────────────────────────────── */

/* ── NAV ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  .gc-hamburger { display: flex !important; }
  nav.site .nav-links { display: none !important; }
  nav.site .nav-cta { display: none !important; }
  nav.site .inner { height: 62px; }
}

/* ── TOPBAR ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .gc-topbar-inner, [class*="topbar"] > div { flex-direction: column; gap: 5px; text-align: center; padding: 8px 12px; }
  .gc-topbar-cta { font-size: 11px; padding: 4px 10px; }
}

/* ── GLOBAL SPACING ────────────────────────────────────── */
@media (max-width: 768px) {
  .container { padding: 0 16px !important; }
  section.block, .section { padding-top: 52px !important; padding-bottom: 52px !important; }
  .section-head { margin-bottom: 36px !important; }
  .section-head p { font-size: 15px; }
  img { max-width: 100%; height: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  iframe { max-width: 100%; }
}

/* ── TYPOGRAPHY ────────────────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: clamp(26px, 7.5vw, 40px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(22px, 5.5vw, 32px) !important; }
  h3 { font-size: 18px !important; }
  p { font-size: 15.5px; }
}

/* ── BUTTONS ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .btn { padding: 11px 18px !important; font-size: 14px !important; }
  .btn-lg { padding: 13px 22px !important; font-size: 14.5px !important; }
  .btn-xl { padding: 15px 26px !important; font-size: 15px !important; }
}

/* ── HERO SECTIONS ─────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 52px 0 0 !important; }
  .page-hero { padding: 52px 0 56px !important; }
  .article-hero { padding: 40px 0 0 !important; }
  .hero-text { padding-bottom: 48px !important; }
  .page-hero p.sub, .hero .sub { font-size: 16px !important; max-width: 100% !important; }
  .hero-badges { gap: 8px; }
  .hero-badge { font-size: 12px; padding: 6px 12px; }
  .hero-orb { display: none; }
}

/* ── HOMEPAGE ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .h-grid { grid-template-columns: 1fr !important; gap: 40px !important; padding-bottom: 52px !important; }
  .h-right { display: none; }
}
@media (max-width: 768px) {
  .deliver { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(2,1fr) !important; }
  .segments { grid-template-columns: 1fr !important; }
  .tiers { grid-template-columns: 1fr !important; max-width: 480px; margin: 0 auto; }
  .tier.featured { transform: none !important; }
  .testimonial-track { gap: 14px; }
  .testimonial-card { min-width: 260px; padding: 20px; }
  .logo-strip { gap: 20px; flex-wrap: wrap; justify-content: center; }
  .logo-strip img { height: 28px !important; }
  .process-step { flex-direction: column; text-align: center; align-items: center; }
  .section-head { text-align: center; }
  .final-btns { flex-direction: column; align-items: center; gap: 12px; }
}
@media (max-width: 480px) {
  .deliver { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: 1fr !important; }
}

/* ── BLOG PAGE ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .featured-card { grid-template-columns: 1fr !important; }
  .featured-img { min-height: 210px !important; }
  .featured-body { padding: 28px 20px !important; }
}
@media (max-width: 768px) {
  .articles-grid { grid-template-columns: 1fr !important; }
  .filter-inner { gap: 6px; }
  .filter-btn { padding: 6px 14px !important; font-size: 12px !important; }
  .blog-layout { grid-template-columns: 1fr !important; }
  .blog-sidebar { display: none; }
  .article-cards { grid-template-columns: 1fr !important; }
  .article-card-img { height: 160px !important; }
}

/* ── ARTICLE PAGES ─────────────────────────────────────── */
@media (max-width: 768px) {
  .article-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .article-sidebar { display: none; }
  .article-cover { height: 220px !important; }
  .article-header h1 { font-size: clamp(22px, 6vw, 34px) !important; }
  .article-header .standfirst { font-size: 15.5px !important; }
  .article-meta { gap: 10px; flex-wrap: wrap; }
  .meta-divider { display: none; }
  .article-body h2 { font-size: 22px !important; }
  .article-body h3 { font-size: 18px !important; }
  .article-body p, .article-body li { font-size: 16px !important; line-height: 1.75 !important; }
  .pullquote { padding: 16px 18px !important; margin: 24px 0 !important; }
  .callout { padding: 16px 18px !important; }
  .sidebar-widget { margin-bottom: 18px; }
  .breadcrumb { flex-wrap: wrap; }
  .article-grid { grid-template-columns: 1fr !important; }
}

/* ── COMPANY PAGE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .origin-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .founder-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .team-profile { grid-template-columns: 1fr !important; min-height: auto !important; }
  .team-profile.flip { grid-template-columns: 1fr !important; }
  .team-profile.flip .tp-photo { order: -1 !important; }
  .tp-photo { min-height: 260px !important; }
  .values-grid { grid-template-columns: 1fr !important; }
  .impact-grid { grid-template-columns: repeat(2,1fr) !important; }
  .mission-grid { grid-template-columns: 1fr !important; }
  .timeline { padding-left: 20px !important; }
  .origin-img { display: none; }
}

/* ── SUCCESS STORIES ───────────────────────────────────── */
@media (max-width: 768px) {
  .sc-grid { grid-template-columns: 1fr !important; }
  .comm-grid { grid-template-columns: 1fr !important; }
  .sc-body { display: flex !important; flex-direction: column !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; overflow: visible !important; }
  .comm-body { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  .featured-body { display: block !important; }
  .perk-desc { display: block !important; }
  .perks-grid { grid-template-columns: 1fr !important; }
  .join-grid { grid-template-columns: 1fr !important; }
  .join-form { padding: 28px 20px !important; }
}

/* ── HOW IT WORKS ──────────────────────────────────────── */
@media (max-width: 768px) {
  .steps-grid { grid-template-columns: 1fr !important; }
  .how-grid { grid-template-columns: 1fr !important; }
  .benefits-grid { grid-template-columns: 1fr !important; }
  .process-grid { grid-template-columns: 1fr !important; }
  .comparison-grid { grid-template-columns: 1fr !important; }
}

/* ── PRICING PAGE ──────────────────────────────────────── */
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr !important; max-width: 480px; margin: 0 auto; }
  .pricing-card.featured { transform: none !important; }
}
@media (max-width: 768px) {
  .compare-table { display: block; overflow-x: auto; }
  .pricing-faq { padding: 0 !important; }
}

/* ── TIERS PAGE ────────────────────────────────────────── */
@media (max-width: 900px) {
  .tiers-grid { grid-template-columns: 1fr !important; }
  .tier-card.featured { transform: none !important; }
  .compare-row { grid-template-columns: 1fr !important; }
}

/* ── BLUEPRINT / ACCELERATOR / LAUNCH PROGRAM PAGES ───── */
@media (max-width: 768px) {
  .program-hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .program-features { grid-template-columns: 1fr !important; }
  .module-grid { grid-template-columns: 1fr !important; }
  .outcomes-grid { grid-template-columns: 1fr !important; }
  .checklist-grid { grid-template-columns: 1fr !important; }
  .who-grid { grid-template-columns: 1fr !important; }
  .timeline-grid { grid-template-columns: 1fr !important; }
  .deliverables-grid { grid-template-columns: 1fr !important; }
  .include-grid { grid-template-columns: 1fr !important; }
  .steps-row { flex-direction: column !important; }
}

/* ── BOOKING PAGE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .booking-wrap { flex-direction: column !important; gap: 20px !important; }
  .booking-sidebar, .calendar-wrap { width: 100% !important; }
  .time-slots { grid-template-columns: repeat(2,1fr) !important; }
  .booking-form { padding: 20px !important; }
}

/* ── BLUEPRINT COURSE (learn page) ────────────────────── */
@media (max-width: 768px) {
  .bp-layout, .learn-layout { grid-template-columns: 1fr !important; }
  .bp-sidebar, .learn-sidebar { display: none !important; }
  .lesson-player { padding: 16px !important; }
  .video-wrap { height: 220px !important; }
}

/* ── MEMBERS / FEED / PROFILE (app pages) ──────────────── */
@media (max-width: 768px) {
  .feed-layout { grid-template-columns: 1fr !important; }
  .feed-right { display: none !important; }
  .members-grid { grid-template-columns: repeat(2,1fr) !important; }
  .profile-layout { grid-template-columns: 1fr !important; }
  .profile-hero-top { flex-direction: column !important; align-items: flex-start !important; }
  .profile-stats { flex-wrap: wrap !important; gap: 16px !important; }
  .field-row { grid-template-columns: 1fr !important; }
  .profile-tabs, .members-tabs { overflow-x: auto !important; white-space: nowrap !important; }
  .res-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .members-grid { grid-template-columns: 1fr !important; }
}

/* ── FAQ PAGE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-list { max-width: 100% !important; }
  .faq-cats { flex-wrap: wrap !important; gap: 6px !important; }
  .faq-item { padding: 16px !important; }
}

/* ── SUPPORT PAGE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .support-grid { grid-template-columns: 1fr !important; }
  .support-options { grid-template-columns: 1fr !important; }
  .contact-form { padding: 24px 16px !important; }
}

/* ── PRIVACY / REFUND / LEGAL PAGES ────────────────────── */
@media (max-width: 768px) {
  .legal-layout { grid-template-columns: 1fr !important; }
  .legal-toc { display: none !important; }
  .legal-body { max-width: 100% !important; }
  .policy-body { padding: 0 !important; }
}

/* ── CHECKLIST OPTIN ───────────────────────────────────── */
@media (max-width: 768px) {
  .optin-grid { grid-template-columns: 1fr !important; }
  .optin-form-row { flex-direction: column !important; gap: 10px !important; }
  .optin-form-row input { width: 100% !important; }
  .checklist-preview { display: none !important; }
  .benefits-list { columns: 1 !important; }
}

/* ── RESOURCES PAGE ────────────────────────────────────── */
@media (max-width: 768px) {
  .res-grid { grid-template-columns: 1fr !important; }
  .res-tabs { overflow-x: auto; white-space: nowrap; }
}

/* ── NEWSLETTER PAGE ───────────────────────────────────── */
@media (max-width: 768px) {
  .nl-grid { grid-template-columns: 1fr !important; }
  .nl-preview { display: none !important; }
  .input-group { flex-direction: column !important; gap: 10px !important; }
  .stats-row { flex-wrap: wrap !important; gap: 16px !important; justify-content: center !important; }
}

/* ── COMMUNITY PAGE ────────────────────────────────────── */
@media (max-width: 768px) {
  .community-grid { grid-template-columns: 1fr !important; }
  .benefits-row { grid-template-columns: 1fr !important; }
  .community-form { padding: 24px 16px !important; }
}

/* ── FORMS (universal) ─────────────────────────────────── */
@media (max-width: 768px) {
  input[type="email"],
  input[type="text"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
  }
  .form-row { flex-direction: column !important; gap: 10px !important; }
  .form-grid { grid-template-columns: 1fr !important; }
}

/* ── FOOTER ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .f-grid,
  footer .top,
  footer.site .f-top { grid-template-columns: 1fr !important; gap: 28px !important; }
  footer .f-brand p { max-width: 100% !important; }
  .legal { text-align: center !important; }
  footer { padding: 48px 0 28px !important; }
}

/* ── PRE-CHECKOUT QUIZ MODALS ──────────────────────────── */
@media (max-width: 600px) {
  .pq-modal, .bpq-modal, .acq-modal, .lnq-modal {
    width: calc(100vw - 20px) !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
  }
  .pq-slide { padding: 24px 18px !important; }
  .pq-opts { gap: 8px !important; }
  .pq-opt { padding: 12px 14px !important; }
}

/* ── CHATBOT WIDGET ────────────────────────────────────── */
@media (max-width: 480px) {
  #gc-chat-wrap { bottom: 16px !important; right: 16px !important; }
  #gc-chat-window { width: calc(100vw - 24px) !important; right: -4px !important; height: 88vh !important; max-height: 540px !important; }
  #gc-greet-bubble { right: -4px !important; }
}

/* ── NEWSLETTER POPUP ──────────────────────────────────── */
@media (max-width: 520px) {
  #gc-nl-popup { width: calc(100vw - 24px) !important; right: 12px !important; bottom: 12px !important; border-radius: 16px !important; }
  .nl-popup-right { display: none !important; }
  .nl-popup-left { padding: 24px 20px !important; }
}

/* ── GOBLUEPRINT INTRO/PRODUCTION PACKAGE ──────────────── */
@media (max-width: 768px) {
  .intro-hero { padding: 48px 0 !important; text-align: center !important; }
  .intro-grid { grid-template-columns: 1fr !important; }
  .package-features { grid-template-columns: 1fr !important; }
  .bonus-grid { grid-template-columns: 1fr !important; }
}

/* ── SMOOTH SCROLL PADDING FOR STICKY NAV ──────────────── */
@media (max-width: 860px) {
  :target { scroll-margin-top: 72px; }
}
