/* ============================================================
   HKTUTOR.HK — Responsive Stylesheet
   ============================================================ */

/* ----- Tablet (≤ 992px) ----- */
@media (max-width: 992px) {
    .hp-hero h1 { font-size: 2rem; }
    .hp-section  { padding: 48px 0; }

    .hp-features-grid { grid-template-columns: repeat(2, 1fr); }
    .hp-cases-grid    { grid-template-columns: repeat(2, 1fr); }
    .hp-tutors-grid   { grid-template-columns: repeat(2, 1fr); }
    .hp-pricing-grid  { grid-template-columns: repeat(2, 1fr); }
    .hp-blog-grid     { grid-template-columns: repeat(2, 1fr); }
    .hp-steps-grid    { grid-template-columns: repeat(3, 1fr); }

    .hp-hero-stats    { gap: 1.5rem; }
    .hp-section-header-flex { flex-direction: column; align-items: flex-start; }

    /* header nav */
    .hp-nav-list {
        display: none;
        flex-direction: column;
        background: var(--hp-blue);
        padding: .5rem 0;
        width: 100%;
    }
    .hp-nav-list.nav-open { display: flex; }
    .hp-nav-item { width: 100%; }
    .hp-nav-link { padding: .75rem 1.5rem; display: block; font-size: .95rem; }
    .hp-hamburger { display: flex; }
}

/* ----- Mobile (≤ 680px) ----- */
@media (max-width: 680px) {
    .hp-hero { padding: 48px 0 40px; }
    .hp-hero h1 { font-size: 1.6rem; }
    .hp-hero-subtitle { font-size: .95rem; }
    .hp-hero-stats { gap: 1rem; }
    .hp-stat-num { font-size: 1.4rem; }

    .hp-section { padding: 36px 0; }
    .hp-container { padding: 0 1rem; }

    .hp-features-grid { grid-template-columns: 1fr; }
    .hp-cases-grid    { grid-template-columns: 1fr; }
    .hp-tutors-grid   { grid-template-columns: repeat(2, 1fr); }
    .hp-pricing-grid  { grid-template-columns: repeat(2, 1fr); }
    .hp-blog-grid     { grid-template-columns: 1fr; }
    .hp-steps-grid    { grid-template-columns: 1fr; gap: 1.5rem; }

    .hp-section-title { font-size: 1.5rem; }
    .hp-cta-banner h2 { font-size: 1.5rem; }

    .hp-form-wrap   { padding: 1.5rem 1rem; }
    .hp-reg-card    { padding: 1.5rem 1rem; }
    .hp-popup-box   { padding: 1.2rem 1rem; width: 96vw; }

    .hp-hero-buttons { flex-direction: column; align-items: center; }
    .hp-btn-lg { padding: .75rem 1.6rem; font-size: .95rem; }

    .hp-pagination  { gap: .25rem; }
    .hp-pg          { padding: .35rem .65rem; font-size: .82rem; }

    .hp-step-indicator { gap: 0; }
    .hp-step-connector { min-width: 16px; max-width: 30px; }

    .hp-reg-nav { flex-direction: column-reverse; }

    .hp-detail-table th { width: 40%; font-size: .82rem; }
    .hp-detail-table td { font-size: .82rem; }
}

/* ----- Very small (≤ 400px) ----- */
@media (max-width: 400px) {
    .hp-tutors-grid  { grid-template-columns: 1fr; }
    .hp-pricing-grid { grid-template-columns: 1fr 1fr; }
}

/* ----- Header Nav specifics ----- */
.hp-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: .4rem;
    background: none;
    border: none;
    margin-left: auto;
}
.hp-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--hp-white);
    border-radius: 2px;
    transition: all .3s;
}

/* Input font-size 16px on mobile to prevent iOS auto-zoom */
@media (max-width: 680px) {
    .hp-input, .hp-textarea, .hp-select, input, textarea, select { font-size: 16px !important; }
}

/* Touch target minimum */
@media (max-width: 680px) {
    .hp-btn, .hp-pg, .hp-apply-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .hp-apply-btn { min-height: 40px; }
}