/*
 * Marlco Capital Insurance Agency - Responsive Styles
 * Mobile-first responsive design
 */

/* ========================================
   PARTNERS GRID - Base (Desktop)
   ======================================== */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    max-width: 900px;
    margin: 0 auto;
}

/* ========================================
   TABLET - 640px and up
   ======================================== */
@media (min-width: 640px) {
    html {
        font-size: 16px;
    }

    .hero-title {
        font-size: 3.5rem;
    }

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

/* ========================================
   DESKTOP - 1024px and up
   ======================================== */
@media (min-width: 1024px) {
    .hero-title {
        font-size: var(--font-size-5xl);
    }

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

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

    .section {
        padding: var(--spacing-10) 0;
    }
}

/* ========================================
   TABLET SPECIFIC - 640px to 767px
   ======================================== */
@media (min-width: 640px) and (max-width: 767px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   MOBILE SPECIFIC STYLES - below 640px
   ======================================== */
@media (max-width: 639px) {
    :root {
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
    }

    /* Hero adjustments */
    .hero {
        min-height: 400px;
        padding: var(--spacing-3) 0;
    }

    .hero-title {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: var(--font-size-sm);
        line-height: 1.5;
    }

    .hero-cta {
        flex-direction: column;
    }

    .hero-cta .btn {
        width: 100%;
        text-align: center;
    }

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

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Sections */
    .section {
        padding: var(--spacing-4) 0;
    }

    .container {
        padding: 0 var(--spacing-2);
    }

    /* Cards */
    .card {
        padding: var(--spacing-3);
    }

    .card-icon {
        width: 50px;
        height: 50px;
        font-size: var(--font-size-xl);
    }

    .card-title {
        font-size: var(--font-size-base);
    }

    /* Buttons - larger touch targets */
    .btn {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-base);
        min-height: 44px;
    }

    .btn-large {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--font-size-base);
    }

    .btn-small {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: var(--font-size-sm);
        min-height: 40px;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Partners grid - single column on mobile */
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
    }

    .partners-grid .card {
        padding: var(--spacing-3);
        min-height: 80px;
    }

    .partners-grid .card img {
        height: 40px;
        max-width: 90px;
    }

    .partners-grid .card h3 {
        font-size: var(--font-size-sm) !important;
        letter-spacing: 0.5px !important;
    }

    /* Footer */
    .footer {
        padding: var(--spacing-4) 0 var(--spacing-3);
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }

    .footer-section h3 {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-2);
    }

    .footer-section ul li {
        margin-bottom: var(--spacing-1);
    }

    /* Grid fallbacks for inline grids */
    .grid {
        gap: var(--spacing-3);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* WhatsApp button */
    .whatsapp-float {
        width: 52px;
        height: 52px;
        bottom: var(--spacing-2);
        right: var(--spacing-2);
    }

    /* Disable hover lift on touch devices to prevent scroll jank */
    .card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    /* GPU acceleration for fixed/animated elements */
    .navbar {
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .whatsapp-float {
        will-change: auto;
    }

    /* Reduce transition complexity */
    .card {
        transition: none;
    }

    /* Form controls */
    .form-control {
        font-size: 16px;
        /* Prevents iOS zoom on focus */
        padding: var(--spacing-2);
    }

    /* Contact page inline layouts */
    [style*="display: flex"][style*="gap"] {
        flex-wrap: wrap;
    }

    /* Tables / content overflow */
    .container {
        overflow-x: hidden;
    }

    /* Navbar logo text */
    .navbar-logo span {
        font-size: var(--font-size-base);
    }

    .navbar-logo-icon {
        width: 34px;
        height: 34px;
        font-size: var(--font-size-sm);
    }

    .navbar-container {
        padding: var(--spacing-1) var(--spacing-2);
    }
}

/* ========================================
   VERY SMALL SCREENS - below 380px
   ======================================== */
@media (max-width: 379px) {
    .partners-grid {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: var(--font-size-xs);
    }

    .navbar-logo span {
        font-size: var(--font-size-sm);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {

    .navbar,
    .whatsapp-float,
    .hero-cta,
    .btn {
        display: none;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    .hero {
        background: none;
        color: #000;
        margin-top: 0;
    }
}