/**
 * Global responsive layout — screen size and browser zoom.
 * Loaded after base styles; uses fluid units and breakpoints so layouts
 * reflow when the viewport shrinks (including high zoom levels).
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: clip;
    min-width: 0;
}

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

main,
section,
article,
aside,
header,
footer,
nav,
form,
fieldset {
    min-width: 0;
}

/* Fluid page padding scales with viewport and zoom */
.dashboard-container,
.customer-dashboard-wrap,
.profile-page-shell,
.find-providers-page,
.listing-details-page,
.messages-wrap,
.container:not(.navbar-container) {
    padding-left: clamp(12px, 3vw, 24px);
    padding-right: clamp(12px, 3vw, 24px);
}

/* Typography scales down on narrow viewports / high zoom */
h1 {
    font-size: clamp(1.35rem, 2.5vw + 1rem, 2.25rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.15rem, 2vw + 0.85rem, 1.75rem);
    line-height: 1.25;
}

h3 {
    font-size: clamp(1rem, 1.5vw + 0.75rem, 1.35rem);
    line-height: 1.3;
}

/* Form controls fill available width */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.form-input,
.form-control {
    max-width: 100%;
}

/* Tables and wide blocks scroll horizontally instead of breaking layout */
.customer-quotes-table-wrap,
.table-scroll,
.provider-listings,
.mapboxgl-map {
    max-width: 100%;
}

.customer-quotes-table-wrap {
    -webkit-overflow-scrolling: touch;
}

/* Button groups wrap on narrow screens */
.actions,
.review-actions,
.provider-dashboard-actions,
.customer-dashboard-actions,
.profile-footer-actions,
.bid-actions,
.modal-actions {
    flex-wrap: wrap;
    gap: 8px;
}

.btn,
.mini-btn,
.ghost-btn {
    max-width: 100%;
}

/* Modals fit small / zoomed viewports */
.modal-content,
.login-modal-content {
    width: min(100%, 32rem);
    max-height: min(90vh, 100%);
    overflow-y: auto;
    margin: clamp(12px, 3vw, 24px);
}

/* —— Dashboard & admin —— */
@media (max-width: 1024px) {
    .admin-review-layout {
        grid-template-columns: 1fr;
    }

    .admin-side-nav {
        position: static;
    }

    .provider-kpis {
        min-width: 0;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bid-panel,
    .provider-form-preview {
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .provider-kpis {
        grid-template-columns: 1fr;
    }

    .listing-row.body {
        grid-template-columns: 1fr !important;
        gap: 10px;
        align-items: stretch;
    }

    .listing-row.head {
        display: none;
    }

    .listing-cell.actions,
    .listing-cell.review-actions-cell {
        grid-column: 1 / -1;
    }

    .review-actions-cell {
        min-width: 0;
        width: 100%;
    }

    .provider-listing .listing-row.body[style] {
        grid-template-columns: 1fr !important;
    }

    .details-layout {
        grid-template-columns: 1fr !important;
    }

    .provider-profile {
        grid-template-columns: 1fr !important;
    }

    .profile-workspace-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        margin-top: 72px;
        padding: clamp(24px, 5vw, 48px) clamp(12px, 3vw, 20px);
    }

    .hero-content-box {
        padding: clamp(20px, 4vw, 40px);
    }

    .navbar-menu {
        display: none;
    }

    .provider-mode-switch,
    .profile-page-switch {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-inline-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-inline-nav .nav-item {
        min-width: 0;
        width: 100%;
    }

    .customer-dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-dashboard-actions {
        width: 100%;
    }

    .customer-dashboard-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .provider-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .find-providers-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .provider-kpis {
        grid-template-columns: 1fr;
    }

    .customer-tabs {
        flex-direction: column;
    }

    .customer-tab-btn {
        width: 100%;
        text-align: center;
    }

    .notification-dropdown {
        width: min(calc(100vw - 24px), 360px);
        right: 0;
        left: auto;
    }
}

/* Listing details & quote form */
@media (max-width: 900px) {
    .listing-details-layout,
    .listing-main-grid,
    .bid-layout {
        grid-template-columns: 1fr !important;
    }

    .listing-sidebar,
    .bid-panel-sticky {
        position: static;
        width: 100%;
        max-width: none;
    }
}

/* Create job multi-step form */
@media (max-width: 768px) {
    .create-job-container,
    .form-step-container,
    .step-content {
        padding-left: clamp(8px, 2vw, 16px);
        padding-right: clamp(8px, 2vw, 16px);
    }

    .form-row,
    .field-row,
    .dimension-row,
    .location-inputs {
        grid-template-columns: 1fr !important;
    }

    .sticky-next-wrap {
        padding-left: clamp(12px, 3vw, 20px);
        padding-right: clamp(12px, 3vw, 20px);
    }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}