/* =============================================
   MANNA INSTITUTE — Responsive Breakpoints
   Mobile-first approach
   ============================================= */

/* ── sm: 640px ── */
@media (min-width: 640px) {
  .main-content { padding-inline: var(--space-6); padding-top: var(--space-8); }
  .site-header-inner { padding-inline: var(--space-6); }

  .grid-home-split { grid-template-columns: 1.25fr 0.75fr; }
  .grid-quests     { grid-template-columns: 1fr 1fr; }
  .form-grid-2     { grid-template-columns: 1fr 1fr; }
  .grid-2          { grid-template-columns: 1fr 1fr; }

  .hero-pine { padding: var(--space-10) var(--space-10); }
  .card-body-lg { padding: var(--space-10); }

  .sticky-bar {
    flex-direction: row;
    align-items: center;
    bottom: 96px;
  }

  .public-nav-links { display: flex; }
}

/* ── md: 768px ── */
@media (min-width: 768px) {
  .hero-pine-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: var(--space-8);
  }

  .claim-btn { margin-left: auto; }

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

/* ── lg: 1024px ── */
@media (min-width: 1024px) {
  .bottom-nav   { display: none; }
  .desktop-sidebar { display: flex; }

  .main-content { padding-bottom: var(--space-12); padding-left: calc(var(--sidebar-w) + 48px); }
  .site-header-inner { padding-left: calc(var(--sidebar-w) + 48px); }

  .grid-quests     { grid-template-columns: repeat(4, 1fr); }
  .sticky-bar      { bottom: 20px; }

  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .programme-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-4          { grid-template-columns: repeat(4, 1fr); }
}

/* ── xl: 1280px ── */
@media (min-width: 1280px) {
  .hero-public { padding-block: 100px; }
}

/* ── Utility: hide/show ── */
.hide-mobile  { display: none; }
.show-mobile  { display: block; }

@media (min-width: 640px) {
  .hide-mobile  { display: block; }
  .show-mobile  { display: none; }
}

/* ── Programme grid ── */
.programme-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .programme-grid { grid-template-columns: 1fr 1fr; }
}