/**
 * Mobile polish — screens ≤768px
 * Load after style.css / page CSS so these rules win on small viewports.
 */

@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    /* ── Typography (readable, not oversized) ───────────────────────── */
    body {
        font-size: 15px;
        line-height: 1.55;
    }

    h1 {
        font-size: 1.75rem;
        line-height: 1.22;
    }

    h2 {
        font-size: 1.32rem;
        line-height: 1.28;
    }

    h3 {
        font-size: 1.12rem;
        line-height: 1.32;
    }

    h4 {
        font-size: 1rem;
        line-height: 1.35;
    }

    /* ── Touch targets (≥44px where appropriate) ─────────────────────── */
    .btn,
    button.btn-primary,
    button.btn-outline,
    button.btn-accent {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 18px;
        padding-right: 18px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    select:not([size]),
    textarea {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    textarea {
        min-height: 120px;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* ── Header ─────────────────────────────────────────────────────── */
    .nav-links {
        display: none;
    }

    .nav-container {
        padding: 12px 15px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
        margin-left: auto;
    }

    .nav-actions .btn {
        min-height: 44px;
    }

    .location-badge {
        font-size: 0.82rem;
        padding: 8px 12px;
    }

    /* ── Index: hero & sections ─────────────────────────────────────── */
    .hero {
        padding: 120px 15px 44px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .hero-title {
        font-size: 2.05rem;
        line-height: 1.12;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .hero-desc {
        font-size: 0.98rem;
        margin-bottom: 26px;
    }

    .hero-image img {
        max-height: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .search-box {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--radius-md);
        padding: 12px;
        gap: 10px;
    }

    .search-box input {
        width: 100%;
        min-height: 44px;
        border-radius: var(--radius-md);
        font-size: 16px;
    }

    .search-box .btn-search {
        width: 100%;
        min-height: 44px;
        border-radius: var(--radius-md);
    }

    .section-title {
        font-size: 1.62rem;
        margin-bottom: 2rem;
        padding: 0 4px;
    }

    .features-section {
        padding: 40px 15px;
        margin-top: -36px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .feature-card {
        padding: 28px 18px;
    }

    .feature-card h3 {
        font-size: 1.08rem;
    }

    .institutes-section {
        padding: 48px 15px;
    }

    .community-section {
        padding: 48px 15px;
    }

    .community-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .steps-section {
        padding: 48px 15px;
    }

    .steps-container {
        flex-direction: column;
        align-items: center;
        gap: 26px;
    }

    .step-item {
        width: 100%;
        max-width: 220px;
    }

    /* ── Footer & newsletter ─────────────────────────────────────────── */
    .footer {
        padding: 48px 15px 20px;
    }

    .newsletter-box {
        flex-direction: column;
        margin: -72px 0 36px;
        padding: 26px 18px;
        max-width: none;
        width: 100%;
    }

    .newsletter-content {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-form {
        width: 100%;
        max-width: 100%;
    }

    .newsletter-form input {
        min-height: 44px;
        font-size: 16px;
    }

    .newsletter-form button {
        min-height: 44px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .newsletter-text h3 {
        font-size: 1.2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px;
        padding-bottom: 28px;
    }

    .footer-widget h4 {
        font-size: 1.05rem;
    }

    /* ── Explore Jobs ─────────────────────────────────────────────────── */
    .explore-header {
        padding: 108px 15px 32px;
    }

    .explore-header h1 {
        font-size: 1.62rem;
        line-height: 1.25;
        margin-bottom: 18px;
    }

    .explore-search-bar {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--radius-md);
        padding: 12px;
        gap: 0;
        width: 100%;
        max-width: 100%;
    }

    .explore-search-bar .filter-group {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 12px 6px;
        min-height: 48px;
        width: 100%;
    }

    .explore-search-bar .filter-group:last-of-type {
        border-bottom: none;
    }

    .explore-search-bar input,
    .explore-search-bar select {
        font-size: 16px;
        min-height: 44px;
    }

    .explore-search-bar .btn-search {
        width: 100%;
        margin-top: 12px;
        min-height: 44px;
        border-radius: var(--radius-md);
    }

    .explore-layout {
        margin: 28px auto;
        padding: 0 15px;
        grid-template-columns: 1fr !important;
        gap: 22px;
    }

    .filters-sidebar {
        position: static;
        width: 100%;
        padding: 18px 16px;
    }

    .filter-section h4 {
        font-size: 1rem;
    }

    .checkbox-list label {
        min-height: 44px;
        align-items: center;
    }

    .checkbox-list input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
    }

    .jobs-list-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .sort-by {
        width: 100%;
    }

    .sort-by select {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
    }

    .job-card {
        flex-direction: column;
        padding: 18px 16px;
    }

    .job-card-header {
        flex-direction: column;
        gap: 10px;
    }

    .job-card-details {
        flex-direction: column;
        gap: 8px;
    }

    .job-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .job-card-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .no-jobs-found {
        padding: 36px 16px;
    }

    /* ── Job detail ──────────────────────────────────────────────────── */
    .breadcrumb {
        padding: 96px 15px 14px;
        flex-wrap: wrap;
        row-gap: 6px;
        font-size: 0.88rem;
    }

    .job-header-section {
        padding: 0 15px 22px;
    }

    .job-title-wrapper h1 {
        font-size: 1.62rem;
        line-height: 1.2;
    }

    .job-header-container {
        flex-direction: column;
        gap: 16px;
    }

    .job-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
    }

    .job-header-actions form {
        display: block;
        width: 100%;
    }

    .job-header-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .job-layout {
        margin: 22px auto;
        padding: 0 15px;
        grid-template-columns: 1fr !important;
        gap: 22px;
    }

    .job-specs,
    .school-summary-card {
        padding: 22px 16px;
    }

    .job-specs h3,
    .content-section h3 {
        font-size: 1.12rem;
    }

    .specs-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .btn-apply-large {
        min-height: 48px;
        font-size: 1rem;
    }

    /* ── Find Teachers (ft-* + school shell) ─────────────────────────── */
    .ft-hero {
        padding: 40px 15px 32px;
    }

    .ft-hero h1 {
        font-size: 1.52rem;
        line-height: 1.2;
    }

    .ft-hero p {
        font-size: 0.92rem;
        margin-bottom: 18px;
    }

    .ft-hero-stats {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        padding: 14px 16px;
        gap: 0;
    }

    .ft-hero-stat {
        padding: 12px 0;
    }

    .ft-hero-stat + .ft-hero-stat {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .ft-hero-stat .stat-num {
        font-size: 1.45rem;
    }

    .ft-search-bar {
        flex-direction: column;
        max-width: 100%;
        border-radius: 12px;
        overflow: visible;
    }

    .ft-search-bar i {
        padding: 12px 16px 0;
    }

    .ft-search-bar input {
        width: 100%;
        padding: 14px 16px;
        min-height: 44px;
        font-size: 16px;
    }

    .ft-search-bar button {
        width: 100%;
        min-height: 44px;
        padding: 14px 16px;
    }

    .ft-layout {
        grid-template-columns: 1fr !important;
        padding: 0 15px !important;
        margin: 18px auto !important;
        gap: 16px !important;
    }

    .ft-sidebar {
        position: static;
        top: auto;
    }

    .ft-filter-section select,
    .ft-filter-section input {
        min-height: 44px;
        font-size: 16px;
    }

    .ft-clear-btn {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
    }

    .chip {
        min-height: 40px;
        padding: 8px 14px;
        display: inline-flex;
        align-items: center;
    }

    .ft-results-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ft-sort-select {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
    }

    .ft-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .teacher-card {
        padding: 18px 16px 16px;
    }

    .tc-btn {
        min-height: 44px;
        font-size: 0.9rem;
    }

    .ft-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .ft-page-controls {
        justify-content: center;
    }

    .pg-btn {
        min-height: 40px;
        min-width: 40px;
    }

    .school-nav {
        padding: 10px 15px;
        height: auto;
        min-height: 54px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .school-tabs {
        padding: 0 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        scrollbar-width: thin;
    }

    .school-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 12px 14px;
        font-size: 0.8rem;
    }

    .school-content-ft {
        padding: 0 15px !important;
    }

    .prof-grid {
        grid-template-columns: 1fr !important;
    }

    .enquiry-form-grid {
        grid-template-columns: 1fr !important;
    }

    .enquiry-form-group input,
    .enquiry-form-group textarea {
        min-height: 44px;
        font-size: 16px;
    }

    .enquiry-submit {
        min-height: 48px;
    }

    .modal-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .modal-box {
        width: 100%;
        max-width: 100%;
        border-radius: 14px;
        max-height: 90vh;
    }

    /* ── Shared content pages (legal / about) ───────────────────────── */
    .legal-page-main,
    .top-institute-main {
        padding: 28px 15px 48px;
    }

    .legal-page-main h1,
    .top-institute-main h1 {
        font-size: 1.55rem;
    }
}