/* ============================================================
   Smilecrafts3d — Global Responsive Stylesheet
   Covers: overflow control, mobile typography, mobile nav,
           hero/CTA padding, card sliders, buy page images,
           filter pills, and custom-request badge overflow.
   ============================================================ */

/* --- Prevent horizontal overflow site-wide --- */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

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

/* --- Mobile nav smooth reveal --- */
#mobile-nav {
    overflow: hidden;
}

/* --- Hero section: reduce padding and font size on phones --- */
@media (max-width: 640px) {
    #hero {
        padding: 2.5rem 1.25rem !important;
        min-height: 360px !important;
        border-radius: 1.5rem !important;
    }

    /* Make hero CTA buttons stack on very small screens */
    #hero .flex.flex-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    #hero .flex.flex-wrap a {
        text-align: center;
        justify-content: center;
    }
}

/* --- CTA / bespoke section: reduce padding on mobile --- */
@media (max-width: 768px) {
    /* Target index.html CTA section which uses p-16 */
    main section.relative.bg-white.rounded-\[3rem\] {
        padding: 2rem 1.5rem !important;
        border-radius: 1.5rem !important;
    }

    main section.relative.bg-white.rounded-\[3rem\] .flex.flex-wrap.justify-center.gap-6 {
        flex-direction: column;
        align-items: stretch;
    }

    main section.relative.bg-white.rounded-\[3rem\] a,
    main section.relative.bg-white.rounded-\[3rem\] button {
        text-align: center;
        width: 100%;
    }
}

/* --- Card slider: card min-width on small screens --- */
@media (max-width: 480px) {
    .card-wrapper {
        width: 260px !important;
        min-width: 260px !important;
    }
}

/* Hide scroll chevrons on small screens (touch scroll handles it) */
@media (max-width: 1023px) {
    .scroll-chevron {
        display: none !important;
    }
}

/* --- Buy page: hide overlapping decorative images on mobile --- */
@media (max-width: 767px) {
    .preview-image-2,
    .preview-image-3 {
        display: none;
    }

    .preview-image-1 {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* --- Custom-request: floating badge overflow fix --- */
@media (max-width: 640px) {
    .absolute.-bottom-6.-left-6 {
        bottom: -0.25rem !important;
        left: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
        position: relative !important;
        margin-top: 1rem;
    }
}

/* --- Library filter bar: horizontal scroll on tiny screens --- */
@media (max-width: 480px) {
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* The filter bar container can scroll horizontally */
    .flex.flex-wrap.items-center.gap-4.mb-12.bg-white {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .flex.flex-wrap.items-center.gap-4.mb-12.bg-white::-webkit-scrollbar {
        display: none;
    }
}

/* --- Gallery filter pills: horizontal scroll on phones --- */
@media (max-width: 640px) {
    #filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start !important;
        padding-bottom: 0.5rem;
    }

    #filter-bar::-webkit-scrollbar {
        display: none;
    }
}

/* --- About page: reduce large px-40 on small tablets --- */
@media (max-width: 1024px) {
    .px-6.md\:px-20.lg\:px-40 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* --- Typography: clamp oversized headings on phones --- */
@media (max-width: 640px) {
    h1 {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* --- Main content padding on mobile --- */
@media (max-width: 640px) {
    main.flex.flex-col.gap-12.py-12.px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
        gap: 2rem;
    }
}

/* --- Section inner heading ("Latest Additions" etc) row--- */
@media (max-width: 640px) {
    .flex.flex-col.md\:flex-row.md\:items-end.justify-between {
        gap: 0.5rem;
    }
}

/* --- Socials card grid: single column on small screens --- */
@media (max-width: 640px) {
    .grid.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* --- Buy page section headings: prevent overflow --- */
@media (max-width: 640px) {
    .text-4xl.font-bold.text-slate-900.mb-6 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
}

/* --- Custom request: hero image aspect ratio fix on mobile --- */
@media (max-width: 1023px) {
    section.max-w-\[1200px\].mx-auto.px-4.md\:px-10.py-16.md\:py-24.grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* --- Ensure images never overflow containers --- */
img {
    max-width: 100%;
    height: auto;
}

/* --- Footer text centering on mobile (already flex-col on sm) --- */
@media (max-width: 640px) {
    footer div.flex.flex-col {
        text-align: center;
    }
}