/* ============================================================
   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 styles are defined in header.php */
}

/* ----- Mobile (≤ 680px) ----- */
@media (max-width: 680px) {
    .hp-hero { padding: 16px 0; }
    .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 .5rem; }

    .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: .5rem; flex-wrap: wrap; }
    .hp-pg-nums     { display: flex; gap: .4rem; width: 100%; order: 1; }
    .hp-pg-nums .hp-pg { flex: 1; text-align: center; }
    .hp-pg-indicator { display: none; }
    .hp-pg-wide     { flex: 1; order: 2; }

    .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; }
}

/* ----- Minimum (≤ 360px) ----- */
@media (max-width: 360px) {
    .hp-container { padding: 0 .5rem; }
}

/* ----- Flow tabs + vertical steps (how_it_works.php) ----- */
@media (max-width: 540px) {
    .hp-flow-tab   { padding: .55rem 1.2rem; font-size: .92rem; }
    .hp-vstep-icon { width: 72px; height: 72px; }
}

/* hp-hamburger base styles are defined in header.php */

/* 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; }
    .hp-pg-wide { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}