/* ============================================================
   I-2-I Solutions – Shared Mobile Responsive Stylesheet
   Linked on every page. These rules act as safe overrides
   for page-specific inline CSS.
   ============================================================ */

/* Prevent horizontal overflow site-wide */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ============================================================
   CTA SPLIT CARD — Button hover effects (shared across all pages)
   ============================================================ */
.cta-split-card .btn-primary {
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-block;
}

.cta-split-card .btn-primary:hover {
    filter: brightness(0.78);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

html, body {
    max-width: 100%;
    overflow-x: clip;
}

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

/* ============================================================
   TABLET  (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {

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

    .scenarios-grid,
    .quality-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .mission-section,
    .legionella-section,
    .intro-section,
    .features-section,
    .discover-wrapper,
    .experience-section,
    .team-section,
    .values-section,
    .compliance-section {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .cta-split {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   MOBILE  (max 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* ---- HEADER ---- */
    header {
        padding: 12px 18px !important;
    }

    .logo img {
        height: 40px !important;
    }

    .hamburger {
        display: flex !important;
    }

    nav {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 75% !important;
        height: 100vh !important;
        background: white !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-top: 80px !important;
        gap: 20px !important;
        transition: right 0.3s !important;
        box-shadow: -4px 0 20px rgba(0,0,0,0.12) !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
    }

    nav.active {
        right: 0 !important;
    }

    nav a {
        font-size: 16px !important;
        padding: 8px 0 !important;
    }

    .dropdown-content {
        position: static !important;
        box-shadow: none !important;
        display: none !important;
        padding-left: 16px !important;
        background: transparent !important;
    }

    .dropdown.active .dropdown-content {
        display: block !important;
    }

    .btn-consultation {
        margin: 8px 20px !important;
        text-align: center !important;
        display: block !important;
    }

    /* ---- HERO ---- */
    .hero,
    .page-hero {
        padding: 70px 20px 50px !important;
        text-align: center !important;
    }

    .hero h1,
    .page-hero h1,
    .hero-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .hero-subtitle,
    .hero-description,
    .hero p {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .cta-buttons,
    .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .cta-buttons a,
    .hero-buttons a {
        width: 100% !important;
        max-width: 320px !important;
        text-align: center !important;
    }

    /* ---- TYPOGRAPHY ---- */
    h1 { font-size: 28px !important; }
    h2 { font-size: 22px !important; }
    h3 { font-size: 18px !important; }

    /* ---- SECTIONS ---- */
    section,
    .mission-section,
    .legionella-section,
    .intro-section,
    .features-section,
    .discover-wrapper,
    .experience-section,
    .team-section,
    .values-section,
    .compliance-section,
    .lab-section,
    .knowledge-section,
    .article-section {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* ---- ALL GRIDS → SINGLE COLUMN ---- */
    .scenarios-grid,
    .steps-grid,
    .details-grid,
    .services-grid,
    .values-grid,
    .team-grid,
    .projects-grid,
    .quality-grid,
    .features-grid,
    .discover-grid,
    .articles-grid,
    .lab-grid,
    .certifications-grid,
    .process-grid,
    .contact-info-grid,
    .footer-content {
        grid-template-columns: 1fr !important;
    }

    /* ---- TRUST BADGES ---- */
    .trust-badges {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 30px 18px !important;
        align-items: center !important;
    }

    .badge {
        text-align: center !important;
    }

    /* ---- STATS ---- */
    .stats-section {
        flex-direction: column !important;
        padding: 30px 18px !important;
        gap: 0 !important;
    }

    .stat {
        border-right: none !important;
        border-bottom: 1px solid rgba(51,65,85,0.3) !important;
        padding: 20px 0 !important;
    }

    .stat:last-child {
        border-bottom: none !important;
    }

    .stat-number {
        font-size: 36px !important;
    }

    /* ---- INFO TEXT ---- */
    .info-text {
        font-size: 16px !important;
        padding: 0 18px !important;
    }

    /* ---- CARDS ---- */
    .service-card,
    .solution-card {
        padding: 30px 18px !important;
    }

    .service-card h2,
    .solution-card h2 {
        font-size: 24px !important;
    }

    .section-as-card {
        max-width: 95% !important;
        margin: 30px auto 60px auto !important;
        padding: 24px 18px !important;
    }

    .cta-split {
        grid-template-columns: 1fr !important;
        max-width: 95% !important;
        margin: 30px auto 60px auto !important;
    }

    .cta-split-card {
        padding: 20px !important;
    }

    /* ---- CTA SECTION ---- */
    .cta-section {
        padding: 40px 18px !important;
    }

    .cta-section h2 {
        font-size: 24px !important;
    }

    .cta-section p {
        font-size: 16px !important;
    }

    /* ---- CONTACT PAGE ---- */
    .contact-section {
        grid-template-columns: 1fr !important;
        padding: 30px 18px !important;
        gap: 30px !important;
    }

    .contact-right-column {
        width: 100% !important;
    }

    .contact-form {
        padding: 28px 18px !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    .contact-map {
        width: 100% !important;
    }

    .contact-map iframe {
        height: 250px !important;
        width: 100% !important;
    }

    /* ---- KNOWLEDGE HUB ---- */
    .article-large {
        height: auto !important;
        min-height: 340px !important;
    }

    /* ---- ARTICLE / BLOG PAGES ---- */
    .article-header {
        padding: 70px 18px 36px !important;
    }

    .article-content,
    .article-body {
        padding: 30px 18px !important;
        font-size: 16px !important;
    }

    .article-content h2,
    .article-body h2 {
        font-size: 22px !important;
    }

    /* ---- LABORATORY PAGE ---- */
    .lab-hero,
    .lab-intro {
        padding: 60px 18px 40px !important;
    }

    .lab-features-grid,
    .lab-feature-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- TABLES (compliance, regulations) ---- */
    .table-wrapper,
    .regulations-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }

    table,
    .regulations-table {
        font-size: 13px !important;
        min-width: 500px !important;
    }

    .regulations-table th,
    .regulations-table td,
    table th,
    table td {
        padding: 8px 10px !important;
    }

    /* ---- TIMELINE ---- */
    .timeline {
        padding-left: 16px !important;
    }

    /* ---- IMAGES ---- */
    .project-card img,
    .team-photo-wrapper img {
        width: 100% !important;
    }

    /* ---- BG DECORATION ---- */
    .bg {
        display: none !important;
    }

    /* ---- FOOTER ---- */
    footer {
        padding: 40px 18px 20px !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    .certifications {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .cert-logo {
        height: 56px !important;
    }
}

/* ============================================================
   SMALL MOBILE  (max 480px)
   ============================================================ */
@media (max-width: 480px) {

    .hero h1,
    .page-hero h1 {
        font-size: 24px !important;
    }

    h2 { font-size: 20px !important; }

    nav {
        width: 88% !important;
    }

    .cert-logo {
        height: 46px !important;
    }

    .article-large {
        min-height: 300px !important;
    }

    .contact-form {
        padding: 20px 14px !important;
    }
}