/* Critical Mobile Fixes (< 768px) */

@media (max-width: 768px) {

    /* --- GLOBAL --- */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body {
        overflow-x: hidden;
        /* Prevent horizontal scrolling */
        -webkit-text-size-adjust: 100%;
    }

    section,
    .section,
    .region-map,
    .values-section,
    .history-section,
    .emotional-section {
        padding: 50px 20px !important;
    }

    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100%;
        max-width: 100%;
    }

    p,
    li,
    span,
    a,
    input,
    textarea,
    button,
    .evolution-text,
    .history-text {
        font-size: 15px !important;
        line-height: 1.6 !important;
        word-wrap: break-word;
    }

    h1,
    .hero-title,
    .about-hero-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
    }

    h2,
    .section-header h2,
    .about-hero-title,
    .evolution-box h2,
    .values-title,
    .cta-section h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3,
    .card h3,
    .impact-content h3 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    img,
    video,
    canvas,
    svg {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- HEADER --- */
    .header {
        padding: 10px 0 !important;
        height: 60px !important;
        /* Force smaller header on mobile */
    }

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

    .footer-logo-img {
        max-width: 180px !important;
        height: auto !important;
    }

    .mobile-menu-btn {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        background: transparent !important;
    }

    .mobile-menu {
        width: 100% !important;
        /* Full width menu */
        max-width: 100% !important;
    }

    /* --- HERO --- */
    .hero {
        height: 100vh !important;
        min-height: 700px !important;
        padding: 110px 20px 60px !important;
        margin-top: 0;
    }

    .about-hero {
        height: 55vh !important;
        min-height: 400px !important;
        padding: 100px 20px 50px !important;
        margin-top: 0;
    }

    .hero-content {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .hero-subtitle,
    .about-hero-subtitle {
        font-size: 15px !important;
        margin-top: 16px !important;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        margin-top: 24px;
        align-items: center;
    }

    /* --- CARDS & GRIDS --- */
    .grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .history-grid,
    .values-grid,
    .emotional-grid,
    .stats-grid-premium {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    .card,
    .value-card,
    .feature-card,
    .stat-card-premium {
        padding: 32px 24px !important;
    }

    .icon-box i,
    .value-icon i,
    .stat-icon-premium i {
        width: 48px !important;
        height: 48px !important;
        font-size: 48px !important;
        /* If font icons */
    }

    /* --- STATS --- */
    .stats-section-premium {
        padding: 50px 20px !important;
    }

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

    .stat-label-premium {
        font-size: 14px !important;
    }

    /* --- ABOUT PAGE SPECIFICS --- */
    .history-grid {
        display: block !important;
        /* Stack vertically */
        width: 100% !important;
        margin: 0 !important;
    }

    .history-left,
    .history-right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 40px 0 !important;
        padding: 0 !important;
    }

    .history-highlight {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px !important;
        margin: 32px 0 !important;
        box-sizing: border-box !important;
        font-size: 18px !important;
    }

    .evolution-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 40px auto !important;
        padding: 40px 20px !important;
        border-radius: 12px !important;
    }

    .evolution-highlight {
        font-size: 20px !important;
        padding: 20px !important;
    }

    .values-grid {
        display: block !important;
        gap: 24px !important;
    }

    .value-card {
        margin-bottom: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .history-timeline {
        padding-left: 0 !important;
        border-left: 2px solid #d4af37 !important;
        /* Keep thinner line */
        margin-left: 10px;
        display: block !important;
        /* Force block, not flex */
        overflow-x: visible !important;
        /* No horizontal scroll for timeline if possible */
    }

    .timeline-milestone {
        padding-left: 24px !important;
    }

    .timeline-milestone::before {
        left: -9px !important;
        /* Re-align dot on line */
        width: 14px !important;
        height: 14px !important;
    }

    .impact-box {
        flex-direction: column !important;
        text-align: center;
        padding: 30px 20px !important;
        gap: 24px !important;
    }

    .impact-icon i {
        width: 60px !important;
        height: 60px !important;
    }

    /* --- TIMELINE (PROCESS) --- */
    .timeline::before {
        left: 20px !important;
    }

    .timeline-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 40px !important;
        padding-left: 40px !important;
        /* Space for the line/number */
    }

    .timeline-item:nth-child(even) {
        flex-direction: column !important;
        /* Override row-reverse */
    }

    .timeline-number {
        left: 20px !important;
        transform: translateX(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    .timeline-content {
        width: 100% !important;
        padding: 24px !important;
    }

    .timeline-spacer {
        display: none !important;
    }

    /* --- FORMS --- */
    form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    input,
    textarea,
    select {
        width: 100% !important;
        font-size: 15px !important;
        padding: 14px !important;
    }

    /* --- BUTTONS --- */
    .btn,
    button,
    .cta-section .btn {
        width: 100% !important;
        max-width: 320px !important;
        /* Max width constraint */
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .cta-buttons {
        gap: 16px !important;
    }

    /* --- MAP --- */
    .region-map {
        min-height: 300px !important;
    }

    .region-map-img {
        padding: 20px !important;
    }

    /* --- WHATSAPP FLOAT --- */
    .whatsapp-float {
        width: 50px !important;
        height: 50px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
}

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

    /* Force page to fit viewport */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Force all elements within viewport */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Force all sections to have safe padding */
    section,
    .section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Kill all multi-column layouts */
    .row,
    .grid,
    .columns {
        display: block !important;
    }

    .row>*,
    .grid>*,
    .columns>* {
        width: 100% !important;
    }

    /* Fix text */
    h1,
    h2,
    h3,
    p,
    span {
        word-wrap: break-word !important;
        max-width: 100% !important;
    }

    /* Fix images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Allow portfolio items to cover their containers to avoid black bars */
    .portfolio-item-clean img,
    .clean-masonry img {
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Force portfolio masonry to stack vertically to avoid off-screen items */
    .clean-masonry {
        display: flex !important;
        flex-direction: column !important;
    }
    .portfolio-item-clean {
        width: 100% !important;
        height: 350px !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
}


/* TIMELINE SPECIFIC OVERFLOW FIX */
@media (max-width: 768px) {

    /* About Us Page Timeline Specifics */
    .history-timeline {
        display: block !important;
        width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
        margin-left: 0 !important;
    }

    .timeline-milestone {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-bottom: 28px !important;
        padding-left: 0 !important;
        border: none !important;
    }

    .timeline-milestone::before {
        display: none !important;
    }

    .milestone-year {
        display: inline-block !important;
        width: auto !important;
        align-self: flex-start !important;
        margin-bottom: 12px !important;
        position: relative !important;
    }

    .milestone-title {
        width: 100% !important;
    }

    /* Generic User Provided Classes */
    .timeline,
    .milestones {
        display: block !important;
        width: 100% !important;
    }

    .timeline-item,
    .milestone {
        flex-direction: column !important;
        width: 100% !important;
    }

    .year-badge {
        position: relative !important;
        width: auto !important;
    }
}


/* NUCLEAR TIMELINE & TEXT FIX (ADAPTED) */
@media (max-width: 768px) {

    /* Timeline container */
    .timeline,
    .milestones,
    .history-timeline {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 40px 20px !important;
        grid-template-columns: none !important;
        overflow: visible !important;
    }

    /* Timeline items */
    .timeline-item,
    .milestone,
    .timeline-milestone {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 28px !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        border: none !important;
        padding-left: 0 !important;
    }

    .timeline-milestone::before {
        display: none !important;
    }

    /* Year badges */
    .year-badge,
    .timeline-year,
    .milestone-year {
        position: relative !important;
        display: inline-block !important;
        width: auto !important;
        max-width: 100px !important;
        margin-bottom: 12px !important;
        left: 0 !important;
        transform: none !important;
        background-color: #d4af37 !important;
        color: white !important;
        padding: 8px 16px !important;
        border-radius: 20px !important;
    }

    /* Timeline text */
    .timeline-text,
    .milestone-text,
    .milestone-title {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        left: 0 !important;
        margin: 0 !important;
    }

    /* Remove any connecting lines */
    .timeline-line,
    .connector-line {
        display: none !important;
    }

    /* TEXT SECTION FIXES */
    .historia-section,
    .about-text-section,
    .history-section,
    .history-text {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        /* Padding handled by container or parent section */
    }

    .historia-section>*,
    .history-section>*,
    .history-text>* {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Highlighted quote box */
    .highlight-box,
    .quote-box,
    .history-highlight,
    .evolution-highlight {
        width: 100% !important;
        max-width: 100% !important;
        /* using 100% instead of calc to be safe with padding */
        padding: 24px !important;
        margin: 24px 0 !important;
        box-sizing: border-box !important;
        border-left: 4px solid #d4af37 !important;
    }
}