/* ============================================================
   HAGWON HUB — responsive.css
   Breakpoint overrides. Loaded after style.css.
   ============================================================ */

/* ── 768px — TABLET / MOBILE ──────────────────────────────── */
@media (max-width: 768px) {

    /* Navigation: hide desktop links, show hamburger */
    .nav-links      { display: none; }
    .btn-join-now   { display: none; }
    .hamburger-button { display: flex !important; }

    /* Hide all desktop-only elements */
    .desktop-only { display: none !important; }

    /* Hero floating badges are desktop-only */
    .hero-floating-badge { display: none !important; }

    /* Hero content padding */
    .hero-content { padding: 60px 24px 72px; }

    /* Teachers section grids */
    .teacher-content-grid      { grid-template-columns: 1fr !important; }
    .teacher-value-cards-grid  { grid-template-columns: 1fr !important; }

    /* Academies section grid */
    .academy-content-grid  { grid-template-columns: 1fr !important; gap: 40px !important; }
    .academy-feature-grid  { grid-template-columns: 1fr 1fr !important; }

    /* Features grid */
    .feature-card-grid { grid-template-columns: 1fr !important; }

    /* How section grid */
    .how-card-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 14px !important; }

    /* Pricing grid */
    .pricing-card-grid { grid-template-columns: 1fr !important; }

    /* FAQ grid: stack left column above right */
    .faq-content-grid  { grid-template-columns: 1fr !important; gap: 40px !important; }
    .faq-left-column   { position: static; }

    /* Footer grid: two columns */
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

    /* Blog post grid: 2 columns on tablet */
    .blog-post-grid { grid-template-columns: 1fr 1fr !important; }

    /* Blog featured card stacks vertically */
    .blog-featured-card  { grid-template-columns: 1fr !important; }
    .blog-featured-image { min-height: 220px !important; }

    /* Article overlay: sidebar stacks above content */
    .article-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
    .article-toc    { order: -1; }

    /* Join page choose step */
    .choose-grid { grid-template-columns: 1fr !important; }

    /* Join two-column fields */
    .join-two-column-grid { grid-template-columns: 1fr !important; }
}

/* ── 480px — SMALL MOBILE ─────────────────────────────────── */
@media (max-width: 480px) {

    /* Hero content tighter padding */
    .hero-content { padding: 48px 20px 60px; }

    /* How and academy feature grids collapse to single column */
    .how-card-grid        { grid-template-columns: 1fr !important; }
    .academy-feature-grid { grid-template-columns: 1fr !important; }

    /* Footer collapses to single column */
    .footer-grid { grid-template-columns: 1fr !important; }

    /* Blog post grid: single column on small mobile */
    .blog-post-grid { grid-template-columns: 1fr !important; }

    /* Blog category bar: smaller text */
    .blog-category-btn { padding: 0 8px; font-size: 11px; }
}