/* Global mobile hardening for all Centle pages */
* {
    box-sizing: border-box;
}

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

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

@media (max-width: 1024px) {
    .fixed {
        max-width: 100vw;
    }

    [class*="w-[800px]"],
    [class*="h-[800px]"],
    [class*="w-[700px]"],
    [class*="h-[700px]"],
    [class*="w-[600px]"],
    [class*="h-[600px]"],
    [class*="w-[500px]"],
    [class*="h-[500px]"],
    [class*="w-[400px]"],
    [class*="h-[400px]"],
    [class*="w-[300px]"],
    [class*="h-[300px]"] {
        width: min(90vw, 100%) !important;
        max-width: 90vw !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    section,
    header,
    footer,
    nav,
    main {
        max-width: 100vw;
    }

    [class*="px-12"],
    [class*="px-10"],
    [class*="px-8"],
    [class*="px-6"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    [class*="py-32"],
    [class*="py-40"],
    [class*="py-24"],
    [class*="py-20"] {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    h1,
    [class*="text-8xl"],
    [class*="text-7xl"],
    [class*="text-6xl"],
    [class*="text-5xl"] {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
        line-height: 1.1 !important;
        word-break: break-word;
    }

    h2,
    [class*="text-4xl"] {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        line-height: 1.2 !important;
    }

    [class*="text-3xl"] {
        font-size: clamp(1.25rem, 5vw, 1.6rem) !important;
    }

    [class*="grid-cols-4"],
    [class*="grid-cols-3"],
    [class*="grid-cols-2"],
    [class*="md:grid-cols-4"],
    [class*="md:grid-cols-3"],
    [class*="md:grid-cols-2"],
    [class*="lg:grid-cols-4"],
    [class*="lg:grid-cols-3"],
    [class*="lg:grid-cols-2"] {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    [class*="gap-12"],
    [class*="gap-10"],
    [class*="gap-8"] {
        gap: 1rem !important;
    }

    [class*="rounded-2xl"],
    [class*="rounded-xl"] {
        border-radius: 0.75rem !important;
    }

    [class*="min-h-[90vh]"],
    [class*="min-h-[80vh]"] {
        min-height: auto !important;
    }

    [class*="sticky"] {
        position: static !important;
        top: auto !important;
    }

    input,
    textarea,
    select,
    button,
    a {
        font-size: 16px;
    }
}