/* ============================================================
   hktps.com - Mobile Stylesheet (App-like experience)
   移動端優先，覆蓋桌面端樣式
   ============================================================ */

/* === Mobile (max-width: 768px) === */
@media (max-width: 768px) {
    body {
        padding-top: var(--header-height);
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    /* Header adjustments */
    .desktop-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .header-inner {
        padding: 0 16px;
    }

    /* Hero mobile */
    .hero {
        padding: 48px 16px;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

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

    .hero-search input {
        padding: 12px 16px;
        padding-right: 50px;
        font-size: 0.9375rem;
    }

    .hero-search button {
        width: 38px;
        height: 38px;
    }

    /* Quick nav: 3x2 grid on mobile */
    .quick-nav {
        margin-top: -24px;
        padding: 0 16px;
    }

    .quick-nav-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 16px;
        border-radius: var(--radius-lg);
    }

    .quick-nav-item {
        padding: 16px 8px;
        border-radius: var(--radius-md);
    }

    .quick-nav-icon {
        width: 44px;
        height: 44px;
    }

    .quick-nav-icon svg {
        width: 22px;
        height: 22px;
    }

    .quick-nav-label {
        font-size: 0.8125rem;
    }

    /* Sections */
    .section {
        padding: 40px 16px;
    }

    .section-header {
        margin-bottom: 20px;
    }

    .section-title {
        font-size: 1.25rem;
    }

    /* Articles grid: single column */
    .articles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Estates grid: single column */
    .estates-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Stats bar: 2x2 grid */
    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 24px;
        border-radius: var(--radius-lg);
    }

    .stat-value {
        font-size: 1.75rem;
    }

    .stat-label {
        font-size: 0.8125rem;
    }

    /* Estate list: single column */
    .estate-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Estate detail */
    .estate-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .estate-hero {
        padding: 32px 16px;
    }

    .estate-hero h1 {
        font-size: 1.5rem;
    }

    /* News item: stack on mobile */
    .news-item {
        flex-direction: column;
        gap: 12px;
    }

    .news-item-cover {
        width: 100%;
        min-height: 80px;
    }

    /* Article detail */
    .article-detail {
        padding: 32px 16px;
    }

    .article-detail h1 {
        font-size: 1.5rem;
    }

    .article-content {
        font-size: 1rem;
    }

    /* Page header */
    .page-header {
        padding: 32px 16px;
    }

    .page-header h1 {
        font-size: 1.5rem;
    }

    /* Filter bar: horizontal scroll */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Forum placeholder */
    .forum-placeholder {
        padding: 60px 16px;
    }

    .forum-placeholder .forum-icon {
        width: 100px;
        height: 100px;
    }

    .forum-placeholder h1 {
        font-size: 1.5rem;
    }

    /* Login */
    .login-page {
        padding: 32px 16px;
    }

    .login-card {
        padding: 32px 24px;
    }

    /* Static pages */
    .static-page {
        padding: 32px 16px;
    }

    .static-page h1 {
        font-size: 1.5rem;
    }

    /* Mobile bottom nav: show */
    .mobile-bottom-nav {
        display: flex;
    }

    /* Footer: hide desktop footer bottom-nav overlap, add padding */
    .site-footer {
        padding: 32px 16px 24px;
        margin-bottom: 60px;
    }

    .footer-top {
        flex-direction: column;
        gap: 32px;
    }

    .footer-links {
        gap: 48px;
    }

    /* Transactions notice */
    .transactions-notice {
        padding: 48px 16px;
    }

    /* Cards: larger touch targets */
    .card-body {
        padding: 16px;
    }

    .card-title {
        font-size: 1rem;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 0.8125rem;
    }
}

/* === Small mobile (max-width: 375px) === */
@media (max-width: 375px) {
    .hero h1 {
        font-size: 1.5rem;
    }

    .quick-nav-grid {
        gap: 8px;
        padding: 12px;
    }

    .quick-nav-item {
        padding: 12px 6px;
    }

    .quick-nav-icon {
        width: 40px;
        height: 40px;
    }

    .quick-nav-label {
        font-size: 0.75rem;
    }

    .stats-bar {
        padding: 20px;
        gap: 16px;
    }

    .stat-value {
        font-size: 1.5rem;
    }
}

/* === Tablet (768px - 1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .quick-nav-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}