/* ==========================================================================
   responsive.css — Mobile-first (99% of visitors are on phones)
   Breakpoints: 480 / 768 / 1024 / 1440
   ========================================================================== */

/* Base styles target phones. Enhancements added upward. */

/* Very small phones */
@media (max-width: 400px) {
  .abar { grid-template-columns: 46% 1fr auto; }
  .followers-box .fb-sub { gap: var(--space-2) var(--space-3); }
  .fact { font-size: var(--fs-caption); }
}

/* Phones: stack multi-column grids */
@media (max-width: 640px) {
  .collab-grid { grid-template-columns: 1fr; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  /* channel cards carry format chips now — one per row reads best on phones */
  .channels { grid-template-columns: 1fr; }
  /* flags in wizard: 3 across on phones */
  .flag-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Small tablet and up: channels 3-up, collab 2-up */
@media (min-width: 641px) {
  .channels { grid-template-columns: repeat(3, 1fr); }
  .collab-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet: nicer "why" / audience grids */
@media (min-width: 641px) and (max-width: 1023px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1440px) { :root { --container: 1120px; } }

/* Hide primary desktop nav on small screens — the hero CTAs cover it,
   plus a sticky WhatsApp button is always available. */
@media (max-width: 767px) {
  .nav { display: none; }
}
@media (min-width: 768px) {
  .nav { display: flex; align-items: center; gap: var(--space-6); }
  .nav a { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text-muted); position: relative; transition: color var(--speed) var(--ease); }
  .nav a:hover, .nav a.is-active { color: var(--ig-magenta); }
}

/* Sticky mobile action bar (WhatsApp + Collaborate) */
.mobile-cta-bar {
  display: none;
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(255,253,251,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -1px 0 var(--line);
}
.mobile-cta-bar .btn { flex: 1; }
@media (max-width: 767px) {
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 86px; }
}