/**
 * AlmeidaImob - Mobile Core CSS
 * Base de variáveis, utilitários e padrões mobile-first
 * Versão: 1.0.0
 */

/* ===== VARIÁVEIS MOBILE ===== */
:root {
    /* Touch Targets - Mínimo recomendado por Apple/Google */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;

    /* Espaçamento Mobile */
    --mobile-padding-xs: 0.5rem;
    /* 8px */
    --mobile-padding-sm: 0.75rem;
    /* 12px */
    --mobile-padding-md: 1rem;
    /* 16px */
    --mobile-padding-lg: 1.25rem;
    /* 20px */
    --mobile-padding-xl: 1.5rem;
    /* 24px */

    /* Gaps Mobile */
    --mobile-gap-xs: 0.25rem;
    /* 4px */
    --mobile-gap-sm: 0.5rem;
    /* 8px */
    --mobile-gap-md: 0.75rem;
    /* 12px */
    --mobile-gap-lg: 1rem;
    /* 16px */

    /* Safe Areas para Notch Devices (iOS) */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);

    /* Tipografia Mobile */
    --mobile-font-xs: 0.75rem;
    /* 12px */
    --mobile-font-sm: 0.8125rem;
    /* 13px */
    --mobile-font-base: 0.875rem;
    /* 14px */
    --mobile-font-md: 1rem;
    /* 16px - mínimo para inputs iOS */
    --mobile-font-lg: 1.125rem;
    /* 18px */
    --mobile-font-xl: 1.25rem;
    /* 20px */

    /* Transições otimizadas para mobile */
    --mobile-transition-fast: 150ms ease-out;
    --mobile-transition-base: 250ms ease-out;
}

/* ===== BREAKPOINTS DE REFERÊNCIA ===== */
/*
 * Mobile Small:    320px - 374px  (iPhone SE, Galaxy S8)
 * Mobile:          375px - 479px  (iPhone X/12/13/14, Pixel)
 * Mobile Large:    480px - 575px  (iPhone Pro Max, grandes)
 * Tablet Portrait: 576px - 767px  (tablets menores)
 * Tablet:          768px - 991px  (iPad, tablets)
 * Desktop Small:   992px - 1199px (laptops)
 * Desktop:         1200px+        (monitores)
 */

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== TOUCH-FRIENDLY UTILITIES ===== */

/* Garantir touch targets mínimos */
.touch-target {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

.touch-target-comfortable {
    min-height: var(--touch-target-comfortable);
    min-width: var(--touch-target-comfortable);
}

/* Área de toque expandida sem alterar visual */
.touch-area-expand {
    position: relative;
}

.touch-area-expand::before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
}

/* Remove hover effects em dispositivos touch */
@media (hover: none) and (pointer: coarse) {
    .hover-only:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
}

/* ===== SAFE AREA UTILITIES ===== */

.safe-area-top {
    padding-top: var(--safe-area-top);
}

.safe-area-bottom {
    padding-bottom: var(--safe-area-bottom);
}

.safe-area-left {
    padding-left: var(--safe-area-left);
}

.safe-area-right {
    padding-right: var(--safe-area-right);
}

.safe-area-all {
    padding-top: var(--safe-area-top);
    padding-right: var(--safe-area-right);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
}

/* ===== MOBILE SCROLL ===== */

/* Scroll suave com momentum (iOS) */
.scroll-touch {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* Scroll horizontal para listas */
.scroll-x {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-x::-webkit-scrollbar {
    display: none;
}

.scroll-x>* {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* ===== MOBILE VISIBILITY ===== */

/* Mostrar apenas em mobile */
.mobile-only {
    display: none !important;
}

/* Esconder em mobile */
.mobile-hide {
    display: block;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block !important;
    }

    .mobile-hide {
        display: none !important;
    }
}

/* ===== MOBILE TEXT ===== */

/* Truncar texto com ellipsis */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Limitar linhas de texto */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== MOBILE SPACING ===== */

@media (max-width: 767px) {
    .mobile-p-sm {
        padding: var(--mobile-padding-sm) !important;
    }

    .mobile-p-md {
        padding: var(--mobile-padding-md) !important;
    }

    .mobile-px-sm {
        padding-left: var(--mobile-padding-sm) !important;
        padding-right: var(--mobile-padding-sm) !important;
    }

    .mobile-py-sm {
        padding-top: var(--mobile-padding-sm) !important;
        padding-bottom: var(--mobile-padding-sm) !important;
    }

    .mobile-gap-sm {
        gap: var(--mobile-gap-sm) !important;
    }

    .mobile-gap-md {
        gap: var(--mobile-gap-md) !important;
    }
}

/* ===== MOBILE STACK (Flexbox em coluna) ===== */

@media (max-width: 575px) {
    .mobile-stack {
        flex-direction: column !important;
    }

    .mobile-stack>* {
        width: 100% !important;
    }
}

/* ===== MOBILE GRID ===== */

@media (max-width: 575px) {
    .mobile-grid-1 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {
    .mobile-grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== MOBILE BUTTONS ===== */

@media (max-width: 575px) {
    .mobile-btn-full {
        width: 100% !important;
        max-width: 100% !important;
    }

    .mobile-btn-block {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--mobile-gap-sm) !important;
    }

    .mobile-btn-block>.btn,
    .mobile-btn-block>button,
    .mobile-btn-block>a {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ===== INPUT MOBILE OPTIMIZATION ===== */

/* Prevenir zoom em inputs no iOS (font-size mínimo 16px) */
@media (max-width: 767px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: var(--mobile-font-md) !important;
    }
}

/* ===== PERFORMANCE HINTS ===== */

/* Hint para GPU acceleration */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Contain para melhor performance */
.contain-paint {
    contain: paint;
}

.contain-layout {
    contain: layout;
}

/* ===== ACTIVE STATES PARA TOUCH ===== */

@media (hover: none) and (pointer: coarse) {

    /* Feedback visual no toque */
    .btn:active,
    button:active,
    a:active {
        opacity: 0.8;
        transform: scale(0.98);
    }

    .card:active {
        transform: scale(0.99);
    }
}

/* ===== BREAKPOINT: 480px (Mobile Large) ===== */
@media (max-width: 480px) {

    /* Container com padding menor */
    .container {
        padding-left: var(--mobile-padding-sm);
        padding-right: var(--mobile-padding-sm);
    }

    /* Tipografia ajustada */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.125rem;
    }
}

/* ===== BREAKPOINT: 375px (Mobile Small) ===== */
@media (max-width: 375px) {
    :root {
        /* Reduzir espaçamentos em telas muito pequenas */
        --mobile-padding-xs: 0.375rem;
        --mobile-padding-sm: 0.5rem;
        --mobile-padding-md: 0.75rem;
    }

    /* Tipografia menor */
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.35rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    /* Botões mais compactos */
    .btn {
        padding: 0.625rem 1rem;
        font-size: var(--mobile-font-base);
    }
}

/* ===== BREAKPOINT: 320px (Muito Pequeno) ===== */
@media (max-width: 320px) {

    /* Ajustes críticos para telas muito pequenas */
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    h1 {
        font-size: 1.35rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    /* Ocultar elementos não essenciais */
    .hide-xs {
        display: none !important;
    }
}