/* ================================================
   RESPONSIVE CSS - global + shared components
   Homepage sections are handled in homepage.css
   Header/footer responsive live in their own files
   Elementor breakpoints: tablet 1024px, mobile 767px
   ================================================ */

/* ------------------------------------------------
   Global overflow guards
   Nothing should ever scroll sideways.
   ------------------------------------------------ */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe,
table {
    max-width: 100%;
}

iframe {
    border: 0;
}

/* Long unbroken strings (emails, URLs) must not push layout */
p, li, a, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* ------------------------------------------------
   Container - keep a breathing gutter at every size
   ------------------------------------------------ */
@media (min-width: 1600px) {
    .container { max-width: 1280px; }
}

@media (max-width: 1024px) {
    .container { padding: 0 20px; }
}

@media (max-width: 767px) {
    .container { padding: 0 16px; }
}

@media (max-width: 390px) {
    .container { padding: 0 14px; }
}

/* ------------------------------------------------
   Touch targets - 44px minimum on touch devices
   ------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .footer-social a,
    .footer-links a,
    .footer-contact a,
    .nav-link,
    .dropdown-menu li a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .btn-block {
        display: flex;
    }
}

/* ------------------------------------------------
   Section rhythm - scales down evenly
   ------------------------------------------------ */
@media (max-width: 1024px) {
    section { padding: 56px 0; }
}

@media (max-width: 767px) {
    section { padding: 40px 0; }
}

@media (max-width: 480px) {
    section { padding: 32px 0; }
}

/* Page banner responsive behaviour now lives with the shared
   .page-banner rules in layout.css (min-height based, no padding). */

/* ------------------------------------------------
   Services grid (services page)
   ------------------------------------------------ */
@media (max-width: 767px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------
   Service / product detail two-column layout
   ------------------------------------------------ */
@media (max-width: 767px) {
    .features-list {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------
   Gallery
   ------------------------------------------------ */
@media (max-width: 1024px) {
    .gallery-video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .gallery-video-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ------------------------------------------------
   Forms (shared)
   ------------------------------------------------ */
@media (max-width: 767px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .file-upload-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ------------------------------------------------
   Careers
   ------------------------------------------------ */
@media (max-width: 767px) {
    .careers-section { padding: 40px 0; }
}

/* ------------------------------------------------
   Hide logo slider pagination dots on mobile
   ------------------------------------------------ */
@media (max-width: 767px) {
    .clients-pagination,
    .about-clients-pagination,
    .railway-pagination {
        display: none !important;
    }
}