/* ===========================
   CUBE CSS - Responsive Utilities & Overrides
   =========================== */

/* Responsive viewport meta tag already set in HTML */
/* Additional responsive utility styles and overrides */

/* Contact grid responsive */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 1024px) {
    .contact-grid {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

@media (max-width: 480px) {
    .contact-grid {
        gap: 20px;
    }
}

/* Hero section inline style fixes for mobile */
@media (max-width: 768px) {
    .hero-content {
        padding: var(--space-lg) var(--space-md) !important;
    }

    .hero-content h1 {
        font-size: 2rem !important;
        margin-bottom: 12px !important;
    }

    .hero-content p {
        font-size: 1rem !important;
        max-width: 100% !important;
    }

    .hero-content a {
        font-size: 15px !important;
        padding: 11px 28px !important;
    }
}

@media (max-width: 480px) {
    .hero-content {
        padding: var(--space-md) var(--space-sm) !important;
    }

    .hero-content h1 {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }

    .hero-content p {
        font-size: 0.85rem !important;
    }

    .hero-content a {
        font-size: 13px !important;
        padding: 10px 24px !important;
    }
}

/* General utility classes for responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure all sections have proper padding on mobile */
section {
    overflow-x: hidden;
}

/* Container responsive padding */
@media (max-width: 768px) {
    .container {
        padding-inline: 16px;
    }
}

@media (max-width: 480px) {
    .container {
        padding-inline: 12px;
    }
}

/* Ensure proper text wrapping */
h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure links don't overflow */
a {
    word-break: break-word;
}

/* Ensure buttons don't overflow */
button, .btn, .btn-primary, .btn-secondary {
    word-wrap: break-word;
}