/* ==========================================================
   A&I Luxury Hair — clean responsive layer
   Без JS-перерисовки контента.
   Один контент для desktop/mobile.
   ========================================================== */

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

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

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

img,
picture,
video,
canvas,
svg {
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

input,
textarea,
select,
button {
    max-width: 100%;
}

main,
.container,
.wrapper,
.wrap,
.content,
.page,
.section-inner,
.admin-container,
.admin-page {
    max-width: 100%;
}

section,
.card,
.panel,
.block,
.admin-card,
[class*="card"],
[class*="panel"] {
    max-width: 100%;
}

/* Таблицы сохраняют всю информацию и не ломают экран */
.table-wrap,
.table-container,
.admin-table,
.appointments-table,
[class*="table-wrap"],
[class*="table-container"] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- tablets ---------- */

@media (max-width: 1024px) {
    main,
    .container,
    .wrapper,
    .wrap,
    .content,
    .page,
    .section-inner,
    .admin-container,
    .admin-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .grid,
    .cards-grid,
    .services-grid,
    .service-grid,
    .gallery-grid,
    .price-grid,
    .contacts-grid,
    .stats-grid,
    .dashboard-grid,
    .summary-grid,
    .metrics-grid,
    .settings-grid,
    .admin-grid {
        max-width: 100% !important;
    }
}

/* ---------- phones portrait ---------- */

@media (max-width: 760px) {
    main,
    .container,
    .wrapper,
    .wrap,
    .content,
    .page,
    .section-inner,
    .admin-container,
    .admin-page {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    h1 {
        font-size: clamp(30px, 9vw, 44px) !important;
        line-height: 1.06 !important;
        overflow-wrap: break-word;
    }

    h2 {
        font-size: clamp(24px, 7vw, 34px) !important;
        line-height: 1.12 !important;
        overflow-wrap: break-word;
    }

    h3 {
        font-size: clamp(19px, 5.6vw, 26px) !important;
        line-height: 1.16 !important;
    }

    p,
    li,
    label,
    input,
    textarea,
    select {
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    small,
    .muted {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    header,
    .header,
    .site-header,
    .admin-header,
    .topbar,
    .admin-topbar {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .brand,
    .logo,
    .site-logo {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    nav,
    .nav,
    .menu,
    .site-nav,
    .admin-nav,
    .admin-menu,
    .header-actions,
    .top-actions {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    nav::-webkit-scrollbar,
    .nav::-webkit-scrollbar,
    .menu::-webkit-scrollbar,
    .site-nav::-webkit-scrollbar,
    .admin-nav::-webkit-scrollbar,
    .admin-menu::-webkit-scrollbar,
    .header-actions::-webkit-scrollbar,
    .top-actions::-webkit-scrollbar {
        display: none;
    }

    .grid,
    .cards-grid,
    .services-grid,
    .service-grid,
    .gallery-grid,
    .price-grid,
    .contacts-grid,
    .stats-grid,
    .dashboard-grid,
    .summary-grid,
    .metrics-grid,
    .settings-grid,
    .admin-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .grid > *,
    .cards-grid > *,
    .services-grid > *,
    .service-grid > *,
    .gallery-grid > *,
    .price-grid > *,
    .contacts-grid > *,
    .stats-grid > *,
    .dashboard-grid > *,
    .summary-grid > *,
    .metrics-grid > *,
    .settings-grid > *,
    .admin-grid > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    section,
    .section,
    .card,
    .panel,
    .block,
    .admin-card,
    [class*="card"],
    [class*="panel"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 22px !important;
    }

    .card,
    .panel,
    .block,
    .admin-card {
        padding: 14px !important;
    }

    .hero,
    .main-hero,
    .intro,
    .promo,
    [class*="hero"] {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-content,
    .hero-inner,
    [class*="hero"] > * {
        max-width: 100% !important;
    }

    form,
    .form,
    .form-grid,
    .fields,
    .field-grid,
    .controls,
    .filter-panel,
    .admin-filter,
    [class*="form"],
    [class*="filter"] {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    input,
    textarea,
    select,
    .ai-select,
    .ai-select-button {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px !important;
    }

    textarea {
        min-height: 112px !important;
    }

    button,
    .btn,
    a.btn,
    .secondary {
        max-width: 100%;
        min-height: 44px;
        white-space: normal;
    }

    .button-row,
    .actions,
    .admin-action-buttons,
    [class*="actions"],
    [class*="buttons"] {
        max-width: 100%;
    }

    table {
        min-width: 680px;
        max-width: none;
        font-size: 13px !important;
    }

    th,
    td {
        font-size: 13px !important;
        line-height: 1.35 !important;
        white-space: normal;
        vertical-align: top;
    }

    .table-wrap,
    .table-container,
    .admin-table,
    .appointments-table,
    [class*="table-wrap"],
    [class*="table-container"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal,
    .dialog,
    .popup,
    [class*="modal"],
    [class*="dialog"],
    [class*="popup"] {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100svh - 24px) !important;
        overflow-y: auto !important;
        border-radius: 22px !important;
    }

    iframe,
    .map,
    [class*="map"] {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 260px;
        border-radius: 20px !important;
    }
}

/* ---------- very small phones ---------- */

@media (max-width: 390px) {
    main,
    .container,
    .wrapper,
    .wrap,
    .content,
    .page,
    .section-inner,
    .admin-container,
    .admin-page {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    h1 {
        font-size: clamp(27px, 8.5vw, 36px) !important;
    }

    h2 {
        font-size: clamp(22px, 7vw, 30px) !important;
    }

    button,
    .btn,
    a.btn,
    .secondary {
        font-size: 14px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    table {
        min-width: 640px;
    }
}

/* ---------- phones landscape ---------- */

@media (max-width: 940px) and (orientation: landscape) {
    main,
    .container,
    .wrapper,
    .wrap,
    .content,
    .page,
    .section-inner,
    .admin-container,
    .admin-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    h1 {
        font-size: clamp(30px, 5vw, 42px) !important;
    }

    h2 {
        font-size: clamp(24px, 4vw, 34px) !important;
    }

    .cards-grid,
    .services-grid,
    .service-grid,
    .gallery-grid,
    .price-grid,
    .contacts-grid,
    .stats-grid,
    .dashboard-grid,
    .summary-grid,
    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .form-grid,
    .field-grid,
    .settings-grid,
    .admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .filter-panel,
    .admin-filter {
        grid-template-columns: minmax(220px, 1fr) minmax(180px, .6fr) !important;
        align-items: center;
    }

    .modal,
    .dialog,
    .popup,
    [class*="modal"],
    [class*="dialog"],
    [class*="popup"] {
        max-height: calc(100svh - 18px) !important;
    }
}

/* ---------- small tablets ---------- */

@media (min-width: 761px) and (max-width: 1180px) {
    main,
    .container,
    .wrapper,
    .wrap,
    .content,
    .page,
    .section-inner,
    .admin-container,
    .admin-page {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .services-grid,
    .gallery-grid,
    .price-grid,
    .contacts-grid,
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}