/* ═══════════════════════════════════════════════════════════════════════════
   COLINA LIVE · responsive.css  —  Mobile-first breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TABLET (max 1024px) ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --section-gap: 100px; }

  .hero-layout      { grid-template-columns: 1fr 240px; gap: 32px; }
  .phone-svg        { width: 200px; }
  .hero-visual      { display: flex; }
  .hero-stats       { gap: 20px; flex-wrap: wrap; }

  .about-grid       { grid-template-columns: 1fr; }
  .about-visual-card{ display: none; }

  .how-steps        { grid-template-columns: repeat(2, 1fr); }
  .how-steps::before{ display: none; }

  .platform-grid    { grid-template-columns: 1fr; }
  .platform-card    { max-width: 560px; margin: 0 auto; width: 100%; }

  .studio-feats     { grid-template-columns: repeat(2, 1fr); }
  .studios-mosaic   {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px 200px;
  }
  .studios-mosaic .mosaic-cell:first-child {
    grid-column: span 2; grid-row: auto;
  }

  .setup-grid       { grid-template-columns: 1fr; }
  .setup-card       { max-width: 560px; width: 100%; margin: 0 auto; }

  .journey-line     { display: none; }
  .journey-item     { grid-template-columns: 1fr; }
  .journey-item .j-node   { order: -1; padding-top: 0; padding-bottom: 12px; justify-content: flex-start; padding-left: 20px; }
  .journey-item .j-content{ grid-column: 1; }
  .journey-item:nth-child(even) .j-content { grid-column: 1; }
  .journey-item:nth-child(even) .j-spacer  { display: none; }
  .journey-item:nth-child(even) .j-node    { order: -1; }

  .req-grid         { grid-template-columns: 1fr; }

  .mentors-grid     { grid-template-columns: 1fr; }
  .mentor-card      { max-width: 460px; margin: 0 auto; width: 100%; }

  .earnings-grid    { grid-template-columns: 1fr; }
  .earnings-visual  { display: none; }

  .testi-grid       { grid-template-columns: repeat(2, 1fr); }

  .learn-grid       { grid-template-columns: repeat(2, 1fr); }

  .cert-block       { grid-template-columns: 1fr; padding: 40px; }
  .cert-visual      { display: none; }

  .contact-layout   { grid-template-columns: 1fr; }

  .footer-top       { grid-template-columns: 1fr 1fr; gap: 36px; }

  .stats-inner      { grid-template-columns: repeat(2, 1fr); }
  .stat-box         { border-bottom: 1px solid var(--border); }
}

/* ── MOBILE (max 768px) ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-gap: 80px; --nav-h: 68px; }

  /* Typewriter: on mobile abandon ghost trick, use fixed height instead */
  .typewriter-wrap {
    display: block;
    position: static;
    min-height: 1.25em;
    overflow: hidden;
  }
  .typewriter-ghost { display: none; }
  .hero-h1 em {
    position: static;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Nav */
  .nav-links        { display: none !important; }
  .nav-whatsapp     { display: none; }
  .hamburger        { display: flex; }
  .nav-inner        { padding: 0 16px; }
  .nav-actions      { gap: 8px; }
  .lang-switch      { padding: 5px 10px; font-size: 0.68rem; }

  /* Hero */
  .hero-layout      { grid-template-columns: 1fr; }
  .hero-visual      { display: none; }
  .hero-actions     { flex-direction: column; align-items: flex-start; }
  .hero-stats       { flex-wrap: wrap; gap: 20px; }
  .h-stat-num       { font-size: 1.7rem; }

  /* How */
  .how-steps        { grid-template-columns: 1fr; gap: 32px; }

  /* Academy */
  .learn-grid       { grid-template-columns: 1fr; }
  .course-badges    { flex-wrap: wrap; gap: 24px; }

  /* Testi */
  .testi-grid       { grid-template-columns: 1fr; }

  /* Footer */
  .footer-top       { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom    { flex-direction: column; text-align: center; }

  /* Stats bar */
  .stats-inner      { grid-template-columns: 1fr 1fr; }

  /* Modules */
  .module-item      { grid-template-columns: 1fr; }
  .module-n         { font-size: 1.5rem; }

  /* Studio */
  .studio-feats     { grid-template-columns: 1fr; }
  .studios-mosaic   {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 200px);
  }
  .studios-mosaic .mosaic-cell:first-child { grid-column: 1; }

  /* Journey */
  .j-content        { padding: 22px; }

  /* Cert */
  .cert-block       { padding: 28px 20px; }

  /* Feat chips */
  .feat-chips       { grid-template-columns: 1fr; }

  /* Form */
  .form-row         { flex-direction: column; }
  .callback-card    { padding: 36px 24px; }

  /* Contact */
  .c-link           { font-size: 0.9rem; }
}

/* ── SMALL MOBILE (max 480px) ─────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --section-gap: 64px; }
  .container        { padding: 0 18px; }
  h1                { font-size: 1.5rem; }
  h2                { font-size: 1.8rem; }
  .hero-pills       { gap: 8px; }
  .pill             { font-size: 0.74rem; padding: 5px 12px; }
  .btn-lg           { padding: 14px 28px; font-size: 0.95rem; }
  .nav-logo         { font-size: 1.2rem; }
  .nav-logo .cl-badge { width: 32px; height: 32px; }
  .urgency-banner   { font-size: 0.74rem; }
  .stats-inner      { grid-template-columns: 1fr 1fr; }
  .stat-big         { font-size: 1.9rem; }
  .platform-card    { padding: 28px 22px; }
  .setup-card       { grid-template-columns: 1fr; }
  .setup-icon-box   { display: none; }
}

/* ── PRINT ─────────────────────────────────────────────────────────────── */
@media print {
  nav, #stats-bar, .urgency-banner,
  .hero-visual, .orb-purple, .orb-pink,
  .bg-grid, footer { display: none !important; }
  body              { background: #fff; color: #000; }
  .gradient-text    { -webkit-text-fill-color: #8E00D5; }
}

/* ── LARGE DESKTOP NAV COMPRESSION (max 1100px) ───────────────────────── */
@media (max-width: 1100px) {
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 0.70rem; letter-spacing: 0.02em; }
  .nav-whatsapp { display: none; }
  .nav-actions { gap: 8px; }
  .nav-inner { padding: 0 16px; }
}