/**
 * Tieu Hao Pro responsive strategy.
 *
 * Scope: global responsive behavior not owned by individual layout primitives.
 * Component-specific responsive rules belong to component modules.
 */

/*
 * Breakpoint contract
 * -------------------
 * Mobile:  0–767px
 * Tablet:  768–1023px
 * Desktop: 1024px+
 *
 * Layout primitives remain owned by layout.css.
 * This file handles global density and behavior contracts.
 */

:root {
    --thp-page-gutter: var(--thp-space-6);
    --thp-section-gap: var(--thp-space-10);
    --thp-component-gap: var(--thp-space-6);
}

@media (max-width: 1023px) {
    :root {
        --thp-page-gutter: var(--thp-space-5);
        --thp-section-gap: var(--thp-space-9);
        --thp-component-gap: var(--thp-space-5);
    }
}

@media (max-width: 767px) {
    :root {
        --thp-page-gutter: var(--thp-space-4);
        --thp-section-gap: var(--thp-space-8);
        --thp-component-gap: var(--thp-space-4);
    }

    html {
        overflow-x: clip;
    }

    body {
        overflow-x: clip;
    }

    :where(table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :where(pre) {
        max-width: calc(100vw - (var(--thp-page-gutter) * 2));
    }

    :where(input, select, textarea) {
        max-width: 100%;
    }

    :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
        min-height: 44px;
    }
}

@media (max-width: 374px) {
    :root {
        --thp-page-gutter: var(--thp-space-3);
        --thp-component-gap: var(--thp-space-3);
    }
}