/* =================================================================
   Echoe — Mobile polish layer (v1)
   Targeted fixes for phone UI based on user feedback.
   ================================================================= */

/* ============= Public site mobile ============= */
@media (max-width: 600px) {

    /* Header — tighten spacing, ensure menu toggle is tappable */
    .site-header { --header-h: 64px; }
    .header-inner { padding: .3rem 0; gap: .5rem; min-height: 64px; }
    .brand-logo  { max-height: 38px; }
    .menu-toggle {
        width: 48px; height: 48px;          /* iOS minimum tap target */
        border-radius: 8px;
    }
    .menu-toggle svg { width: 28px; height: 28px; }

    /* Header right-side actions tighten */
    .header-actions { gap: .25rem; }
    .header-phone, .header-cta { display: none; }   /* shown only at 880px+ */

    /* Mobile nav links — bigger tap target */
    .mobile-menu a {
        padding: 1.1rem .5rem;
        font-size: 1.08rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .mobile-cta { margin-top: 2rem; }

    /* Hero — tighter on phones */
    .hero {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }
    .hero-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .hero-sub   { font-size: 1rem; }
    .hero-ctas .btn { flex: 1; padding: .85rem .8rem; font-size: .92rem; }
    .hero-bullets { flex-direction: column; gap: .5rem; font-size: .88rem; }

    /* Service hero on phone */
    .service-hero { padding: 1.5rem 0 2rem; }
    .service-hero-grid { gap: 1.5rem; }
    .service-hero-visual { aspect-ratio: 16/9; }
    .service-kpis { gap: 1rem; padding: .75rem 0; }
    .service-kpis strong { font-size: 1.1rem; }
    .service-kpis span   { font-size: .75rem; }

    /* Cards & grids — bigger touch areas */
    .service-card, .feature-card, .pillar-card, .benefit-row, .process-step, .info-card, .post-card, .team-card {
        padding: 1rem;
    }
    .card-grid { gap: 1rem; }

    /* Sections — tighter padding so mobile feels denser */
    .section { padding: 2rem 0; }

    /* Process timeline stacks on mobile */
    .process-timeline { grid-template-columns: 1fr; }

    /* Stats strip — readable on phone */
    .stats-row { padding: 1rem; gap: .5rem; }
    .stat-value { font-size: 1.5rem; }
    .stat-label { font-size: .8rem; }

    /* Inquiry form full-width on phone */
    .inquiry-form { padding: 1.25rem; }

    /* CTA banner */
    .cta-banner-wrap { padding-left: 0; padding-right: 0; }
    .cta-banner { border-radius: 0; margin: 0; }
    .cta-inner { padding: 1.75rem 1.25rem; }
    .cta-actions { gap: .5rem; }
    .cta-actions .btn { width: 100%; }

    /* WhatsApp FAB doesn't overlap forms */
    .wa-fab { bottom: 14px; right: 14px; width: 50px; height: 50px; }

    /* Footer — single column with breathing room */
    .footer-grid { gap: 1.75rem; }
    .footer-bottom-inner { flex-direction: column; gap: .5rem; text-align: center; }

    /* Contact form — comfortable inputs */
    .contact-form-card input,
    .contact-form-card textarea,
    .contact-form-card select { font-size: 16px; }   /* prevent iOS auto-zoom */
    .inquiry-form input,
    .inquiry-form textarea { font-size: 16px; }

    /* Breadcrumb wraps cleanly */
    .breadcrumb { font-size: .82rem; }
}

/* ============= Tablets ============= */
@media (min-width: 601px) and (max-width: 879px) {
    .header-phone, .header-cta { display: none; }
    .hero-grid-cols   { grid-template-columns: 1fr; gap: 2rem; }
    .service-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-grid       { grid-template-columns: 1fr 1fr; }
    .footer-bottom-inner { flex-direction: column; gap: .5rem; }
}

/* ============= Admin panel mobile ============= */
@media (max-width: 900px) {

    .admin-topbar { padding: 0 .75rem; height: 56px; gap: .5rem; }
    .admin-brand { font-size: 1rem; }
    .admin-topbar-actions { gap: .4rem; }
    .admin-link span { display: none; }       /* show icon only on mobile */
    .admin-topbar-actions .admin-link svg { width: 20px; height: 20px; }

    /* Sidebar slide-out (already in admin.css), force overlay on top */
    .admin-sidebar { width: 260px; z-index: 35; }

    /* Page-head wraps cleanly */
    .admin-page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }
    .admin-page-head .row-actions { width: 100%; }
    .admin-page-head .btn { width: 100%; justify-content: center; }

    /* Stat cards stack 2-wide */
    .stat-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .stat-card { padding: .9rem 1rem; }
    .stat-card strong { font-size: 1.4rem; }

    /* Admin cards padding */
    .admin-card { padding: 1rem; }
    .admin-card h2 { font-size: 1rem; }

    /* Admin forms — bigger touch + no iOS zoom */
    .admin-form input,
    .admin-form select,
    .admin-form textarea { font-size: 16px; }
    .admin-form .field-row { grid-template-columns: 1fr; }
    .admin-form-grid       { grid-template-columns: 1fr; }

    /* Admin tables: horizontal scroll, sticky first col */
    .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
    .admin-table thead, .admin-table tbody, .admin-table tr, .admin-table td, .admin-table th { white-space: normal; }
    .admin-table th, .admin-table td { padding: .6rem .65rem; font-size: .85rem; }
    .row-actions { gap: .25rem; }
    .row-actions .btn-sm { padding: .3rem .55rem; font-size: .78rem; }

    /* Tab bar wraps */
    .tab-bar { padding: .25rem; gap: .15rem; }
    .tab-bar a { padding: .5rem .8rem; font-size: .85rem; flex: 1 1 calc(50% - .15rem); text-align: center; }

    /* Image picker stacks */
    .image-picker { flex-direction: column; align-items: flex-start; }
    .image-preview { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; }

    /* Messages filter form stacks */
    .messages-filter { flex-direction: column; align-items: stretch; }
    .messages-filter input[type="text"],
    .messages-filter select,
    .messages-filter button { width: 100%; }

    /* Pagination buttons larger tap target */
    .admin-pagination .btn-sm { padding: .45rem .7rem; font-size: .85rem; }

    /* Login page — full-width form on mobile */
    .login-wrap { padding: 1.5rem; }
}

/* ============= Very small screens (<400px) ============= */
@media (max-width: 400px) {
    .container { padding-inline: 1rem; }
    .hero-ctas .btn { font-size: .85rem; padding: .75rem .6rem; }
    .service-kpis { gap: .75rem; }
    .stat-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
}