/* ==========================================================================
   UNIFIED RESPONSIVE SYSTEM (responsive.css)
   Only contains media queries and responsive-specific overrides.
   ========================================================================== */

/* --- 3. Tablet & Large Mobile (1024px and below) --- */
@media (max-width: 1024px) {
    :root {
        --section-padding-y: 6rem;
        --section-padding-x: 1.5rem;
        /* Standardized for tablet (~24px) */
        --frame-margin: 2rem;
        --space-3xl: 4rem;
        --space-2xl: 5rem;
        --space-xl: 4rem;
        --space-lg: 1.5rem;
        --margin-with-screen: 0.6rem;
        /* Matches section padding for consistency */
        --section-gap: 0.5rem;
        /* Extra small gap between side-by-side columns */
        --mobile-grid-gap: 0.5rem;
        --text-hero: clamp(3rem, 6vw, 4.5rem);
        --text-4xl: clamp(2.5rem, 5vw, 3rem);
        --text-3xl: clamp(2rem, 4vw, 2.5rem);
        --text-2xl: clamp(1.8rem, 3.5vw, 2.2rem);
        --text-xl: clamp(1.5rem, 3vw, 1.8rem);
        --text-base: clamp(1rem, 1.1vw, 1.05rem);
    }

    /* Header: Mobile Toggle Logic (Parity Fix) */
    .main-header {
        display: block !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        height: auto !important;
    }

    .header-bar {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        height: var(--header-height) !important;
        background: var(--white) !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 var(--space-md) !important;
        box-shadow: var(--shadow-sm) !important;
        z-index: 110 !important;
    }

    /* Banner Overlay: Tablet Optimization */
    .banner_overlay {
        height: 60% !important;
        padding: var(--space-xl) !important;
    }

    .banner_title {
        font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
        margin-bottom: 2rem !important;
    }

    .banner_subtitle {
        font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
        max-width: 800px !important;
        text-align: center !important;
    }

    .menu-toggle {
        display: flex !important;
        order: -1 !important;
        opacity: 0;
        animation: dropFromAbove var(--anim-md) var(--ease-smooth) 200ms forwards;
    }

    .logo-area {
        order: 0;
        flex: 1;
        justify-content: flex-start;
        padding-left: var(--space-xs);
    }

    .menu_list {
        display: flex !important;
        /* Always in layout for transition, hidden via visibility */
        visibility: hidden;
        pointer-events: none;
        order: initial;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: auto;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        background: var(--white);
        flex-direction: column;
        padding: 0;
        box-shadow: var(--shadow-sm);
        z-index: 100;
        opacity: 0;
        transform: translateY(-100%);
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0s linear 0.6s;
        animation: none !important;
        /* Disable conflicting load animations */
    }

    .menu_list.is_active {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
        transform: translateY(0);
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0s;
    }

    .menu_list li {
        width: 100%;
    }

    .menu_list li a {
        width: 100%;
        padding: var(--space-lg) 0;
        justify-content: center;
    }

    .menu-spacer {
        display: none;
    }

    /* Banner Overlay sizing fix */
    .banner_overlay {
        height: auto !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Standard Card/Block layout */
    .section-text {
        padding: var(--space-md) 2.5rem var(--space-lg);
    }

    /* Standardized Grids */
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gallery-images-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-xl) !important;
    }

    section#contact-main-grid {
        grid-template-columns: 1fr 1fr;
        /* 50/50 split on tablet for better form legibility */
        column-gap: 1.5rem;
        /* Preserve side-by-side spacing */
        row-gap: 2.5rem !important;
        /* Restore standard vertical gap */
        padding: 1.5rem 0 !important;
        /* Standardized and compressed vertical spacing */
    }

    .contact-form-column .contact-form {
        padding: 1.5rem !important;
        /* Compressed vertical padding while maintaining 1.5rem side gap */
    }

    .contact-info-text-column {
        padding: 0 1.5rem !important;
        /* Match form padding */
        gap: 0.75rem !important;
        /* Compressed vertical gap */
    }

    .contact_footer_content h2 {
        margin-bottom: 0.5rem !important;
    }

    .form-group {
        margin-bottom: 0.75rem !important;
        gap: 0.25rem !important;
    }

    .form-group input,
    .form-group textarea {
        padding: 0.75rem !important;
    }

    .contact-map-card iframe {
        min-height: 0 !important;
    }

    /* Balanced with shorter form */

    /* Correctly collapse the CSS grid gap between image and text on tablet side-by-side */
    .tool-detail-row,
    .section-wrapper {
        gap: 2rem !important;
        /* Slightly increased gap (~32px) per user request */
    }

    .section-info-image .section-text,
    .tool-info {
        padding-left: 1.5rem !important;
        /* Reduce excessive left padding to draw text closer */
        padding-right: 1.5rem !important;
    }

    .reverse .section-text,
    .reverse .tool-info {
        padding-right: 1.5rem !important;
        /* Mirror for reverse layouts */
        padding-left: 1.5rem !important;
    }

    /* Gallery Specific Overrides (10px) */
    .gallery-images-grid .section-image-wrapper img {
        box-shadow: 10px 10px 0 0 var(--yellow) !important;
        padding: 0 !important;
    }
}

/* --- 2. Mobile Optimized (768px and below) --- */
@media (max-width: 768px) {
    :root {
        --section-padding-y: 2.5rem;
        /* Reduced from 4rem */
        --section-padding-x: 1.5rem;
        /* This is the SINGLE truth for standard margin */
        --frame-margin: 0.2rem;
        --space-3xl: 3rem;
        --space-2xl: 2.5rem;
        --space-xl: 2rem;
        --space-lg: 1.5rem;
        --space-md: 1rem;
        --space-sm: 0.5rem;
        --margin-with-screen: 0px;
        /* Neutralize nested padding from main.css on mobile */
        --mobile-grid-gap: 3.5rem;
        --mobile-card-max-width: 100%;
        --shadow-offset: 15px;
        --space-between-sections: 2.5rem;
        /* Ensure divider margins shrink */
    }

    /* Universal Standard Margin applied to ALL section types */
    section,
    .section-info-image,
    .grid-section,
    .contact-section,
    section#contact-main-grid,
    .logo-grid-simple,
    .clients-grid,
    .certifications-grid,
    .section-gallery-inner,
    .legal-section {
        padding: var(--section-padding-y) var(--section-padding-x) !important;
        width: 100% !important;
        height: auto !important;
        /* Allow section to grow with stacked mobile content */
        overflow-x: hidden;
        box-sizing: border-box !important;
    }

    .banner,
    .footer,
    #footer {}

    .section-info-image {
        height: auto !important;
    }

    .section-divider {
        padding: 0 var(--section-padding-x) !important;
        /* Make divider same length as elements */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .page-intro {
        padding: 0 var(--section-padding-x) !important;
        /* Restore lost margin */
        box-sizing: border-box !important;
    }

    /* Prevent double padding when page-intro is used as a gallery header */
    .section-gallery-inner .page-intro {
        padding: 0 !important;
    }

    * {
        -webkit-tap-highlight-color: transparent !important;
    }

    .page-frame,
    .page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .page {
        padding-top: var(--header-height) !important;
    }

    .banner_overlay {
        height: 40% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 2.5rem 2rem !important;
    }

    .banner_dots {
        top: calc(var(--header-height) + 10px) !important;
        bottom: auto !important;
    }

    .banner_nav {
        width: 45px !important;
        height: 45px !important;
        opacity: 0.6 !important;
    }

    .banner_nav.prev {
        left: 15px !important;
    }

    .banner_nav.next {
        right: 15px !important;
    }

    /* Unified Typography System (Matched to 'Nuestra Experiencia' size) */
    .card-content h2,
    .card-content h3,
    .section-text h2,
    .intro h2,
    h1,
    h2 {
        font-size: clamp(1.3rem, 4vw, 1.6rem) !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.2 !important;

    }

    .page-intro h2,
    .section-title {
        font-size: clamp(1.8rem, 6vw, 2.1rem) !important;
        margin-bottom: 1rem !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    /* Main Page Titles (Banner) - Bigger but not too much */
    h1,
    .banner_title {
        font-size: clamp(2.5rem, 6vw, 3rem) !important;
        margin-bottom: 1rem !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    p,
    .section-text p,
    .contact-info-text-column p,
    .tool-info p,
    .section-link {
        font-size: calc(var(--text-nav) * 1.15) !important;
        text-align: justify !important;
        text-justify: auto !important;
        hyphens: none !important;
        line-height: 1.4 !important;
        text-transform: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* General headings inherit from main.css or tablet query on phone */

    /* Card headings inherit from tablet query */

    .card-content p,
    .intro p {
        font-size: calc(var(--text-nav) * 1.05) !important;
    }

    /* Subtitle matches the new larger banner style */
    .banner_subtitle {
        font-size: clamp(1.1rem, 4vw, 1.3rem) !important;
        line-height: 1.4 !important;
        hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* -- 1. Section Layout Pattern (About, Services Alternating, Tools) -- */
    .section-wrapper,
    .project-detail-content .project-detail-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--mobile-grid-gap) !important;
        text-align: center;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    /* -- 2. Grid & Card Layout Pattern (Unified Grid) -- */
    .grid,
    .gallery-images-grid,
    section#contact-main-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--mobile-grid-gap) !important;
        width: 100% !important;
        overflow: visible !important;
    }

    section#contact-main-grid {
        grid-template-rows: auto auto auto !important;
        /* Stack: Info, Form, Results/Map */
    }

    /* Section Image Wrapper (With Premium Yellow Offset) */
    .section-image-wrapper,
    .gallery-images-grid .section-image-wrapper {
        order: 1 !important;
        width: calc(100% - var(--shadow-offset)) !important;
        max-width: calc(var(--mobile-card-max-width) - var(--shadow-offset)) !important;
        aspect-ratio: 4 / 3 !important;
        margin: 0 var(--shadow-offset) 0 0 !important;
        /* Make room for right shadow */
        position: relative !important;
        z-index: 5;
        overflow: visible !important;
    }

    /* Reverse the margins when shadow is on the left */
    .reverse .section-image-wrapper,
    .reverse .about-image-column,
    .reverse .tool-image-container {
        margin: 0 0 0 var(--shadow-offset) !important;
        /* Make room for left shadow */
    }

    .section-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        position: relative !important;
        z-index: 2;
        display: block !important;
        padding: 0 !important;
        /* Prevent main.css from adding 15px right padding */
        margin: 0 !important;
        border-radius: var(--radius-sm, 4px);
        box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--yellow) !important;
    }

    .reverse .section-image-wrapper img {
        box-shadow: calc(-1 * var(--shadow-offset)) var(--shadow-offset) 0 0 var(--yellow) !important;
    }

    /* Section Text Containers (Info container styling) */
    .section-text,
    .intro {
        order: 2 !important;
        width: 100% !important;
        max-width: var(--mobile-card-max-width) !important;
        margin: 0 auto !important;
        /* Expands to cleanly encompass the full visual width of the image plus its shadow below */
        padding: 1.5rem 1.25rem !important;
        background-color: var(--white) !important;
        box-shadow: var(--shadow-base) !important;
        border-radius: var(--radius-md, 8px) !important;
        z-index: 10;
        position: relative;
        text-align: left !important;
        box-sizing: border-box;
        overflow: visible !important;
    }

    /* Removed obsolete reverse margins for text to maintain 100% width symmetry */




    /* Full-Width Overrides */
    .project-detail-content .project-text {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0;
    }

    .services-intro,
    .projects-intro,
    .intro {
        text-align: center !important;
        order: -1 !important;
        /* Ensure intro is always at the top of the grid */
        width: 100% !important;
        margin: 0 auto !important;
        /* Grid gap handles the spacing evenly across items */
    }

    /* --- Contact Page Fidelity --- */
    .contact-form-column,
    .contact-info-text-column,
    .contact-map-column {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: var(--mobile-card-max-width) !important;
        margin: 0 auto !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }


    .contact-info-text-column {
        order: 1 !important;
        padding: 0 1rem !important;
        text-align: center !important;
        /* Matches internal padding of form below for perfect text alignment */
    }

    .calc-info-col {
        justify-content: flex-start !important;
        gap: 1rem !important;
        padding: 0 0 1.5rem 0 !important;
    }

    .calc-info-col p {
        text-align: left !important;
        text-align-last: left !important;
        text-justify: none !important;
        line-height: 1.5 !important;
    }

    .calc-input,
    .form-group input,
    .form-group select {
        font-size: 16px !important;
        /* Prevent iOS Zoom */
    }

    .contact-form-column {
        order: 2 !important;
    }

    .contact-map-column {
        order: 3 !important;
    }

    .contact-form-column .contact-form {
        width: 100% !important;
        max-width: var(--mobile-card-max-width) !important;
        margin: 0 auto !important;
        box-sizing: border-box;
    }

    .contact-map-card {
        width: 100% !important;
        max-width: var(--mobile-card-max-width) !important;
        margin: 0 auto !important;
        box-sizing: border-box;
        aspect-ratio: 1 / 1 !important;
    }

    .contact-map-card iframe {
        height: 100% !important;
    }

    /* Restore spacious layout for the contact form inputs on mobile */
    .contact-form-column .contact-form {
        padding: 1.25rem !important;
    }

    .form-group {
        margin-bottom: 1rem !important;
        gap: 0.5rem !important;
    }

    .form-group input,
    .form-group textarea {
        padding: 0.6rem 0.75rem !important;
    }

    .contact-form button {
        margin-top: 1rem !important;
    }

    /* Footer Fidelity */
    .contact_footer_content,
    .footer_content {
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--space-lg) !important;
    }

    .footer_left,
    .footer_center,
    .footer_right,
    .footer_text {
        display: contents !important;
    }

    .footer_logo {
        order: 1;
        margin: 0 auto;
    }

    .footer_logo img {
        height: 45px;
        margin-bottom: 1rem !important;
    }

    /* Target the contact info paragraph specifically */
    .footer_center p:not(.footer_copyright) {
        order: 2;
        text-align: center !important;
        margin-bottom: 1rem !important;
        width: 100%;
    }

    .footer_social {
        order: 3;
        justify-content: center;
        gap: var(--space-md);
        margin: 0.5rem 0 1.5rem 0 !important;
        width: 100%;
    }

    .footer_social img {
        height: 35px;
    }

    .footer_copyright {
        order: 4;
        text-align: center !important;
        width: 100%;
        margin-bottom: 1rem !important;
    }

    .contact_footer,
    .footer_links,
    .footer_bottom {
        padding: var(--space-md) var(--section-padding-x) !important;
    }


    /* --- 14. CALCULATORS (MOBILE) --- */
    .calc-form-container {
        height: auto !important;
        padding: 1.25rem 1rem !important;
        gap: 1.25rem !important;
        justify-content: flex-start !important;
    }

    .calc-results-box {
        height: auto !important;
        padding: 1.25rem 1rem !important;
        min-height: auto !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1.1rem !important;
    }

    .result-item {
        padding: 0 !important;
        /* Flatten extra inline padding on mobile */
    }

    .result-value {
        font-size: 1.6rem !important;
        word-break: break-all;
    }

    .result-label {
        font-size: 0.85rem !important;
        margin-bottom: 0.2rem !important;
    }

    /* Fix range indicator and select cropping on mobile */
    .range-val {
        font-size: 0.85rem !important;
        padding: 0.15rem 0.4rem !important;
        min-width: 45px;
        text-align: center;
    }

    .range-header label {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        max-width: 70%;
        /* Give room to the value box */
    }

    select.calc-input {
        font-size: 0.8rem !important;
        /* Slightly smaller for mobile fidelity */
        padding: 0.6rem 2rem 0.6rem 0.6rem !important;
        text-overflow: clip;
        white-space: normal;
    }



    /* --- 15. LIGHTBOX RESPONSIVE --- */
    .lightbox-content {
        padding: 40px 20px;
    }

    .lightbox-nav {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
    }

    .lightbox-nav svg {
        width: 20px;
        height: 20px;
    }

    .lightbox-nav.prev {
        left: 15px;
    }

    .lightbox-nav.next {
        right: 15px;
    }

    .lightbox-close {
        top: 20px;
        right: 20px;
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
    }

    .lightbox-caption {
        bottom: 20px;
        font-size: 0.7rem;
        white-space: nowrap !important;
        width: max-content !important;
        max-width: 85vw !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}