/* Screwtech — global mobile & tablet responsive overrides */

/* ── Base ─────────────────────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: clip;
}

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

/* ── Typography ───────────────────────────────────────── */
@media (max-width: 767px) {
    h1.font-headline.text-\[2\.5rem\] {
        font-size: 1.875rem !important;
        line-height: 1.15 !important;
    }

    h2.font-headline.text-5xl,
    h2.font-headline.md\:text-5xl {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    h2.font-headline.text-4xl,
    h2.font-headline.text-3xl.md\:text-4xl {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    h3.font-headline.text-2xl {
        font-size: 1.25rem !important;
    }

    .text-6xl.font-headline {
        font-size: 2.5rem !important;
        line-height: 1 !important;
    }

    .text-5xl.font-headline {
        font-size: 2rem !important;
    }

    .text-4xl.font-headline {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 479px) {
    h1.font-headline.text-\[2\.5rem\] {
        font-size: 1.625rem !important;
    }
}

/* ── Section spacing ──────────────────────────────────── */
@media (max-width: 767px) {
    section.py-24 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    section.py-16 {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }

    .mb-16 {
        margin-bottom: 2.5rem;
    }

    .mb-20 {
        margin-bottom: 3rem;
    }

    .gap-20 {
        gap: 2.5rem;
    }

    .gap-12 {
        gap: 2rem;
    }
}

/* ── Hero banners (inner pages) ───────────────────────── */
@media (max-width: 767px) {
    section.relative.pt-20 .py-14,
    section.relative.pt-20.md\:pt-32 .py-14 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    section.min-h-\[320px\] {
        min-height: 260px;
    }

    /* Decorative blur blobs — clip overflow */
    section.relative.overflow-hidden > .absolute.w-\[500px\],
    section.relative.overflow-hidden > .absolute.w-\[600px\],
    section.relative.overflow-hidden > .absolute.w-\[400px\] {
        width: 16rem;
        height: 16rem;
    }
}

/* ── Homepage hero ────────────────────────────────────── */
@media (max-width: 1023px) {
    .home-hero {
        min-height: auto;
    }

    .home-hero > .relative.z-10 {
        padding-top: 6.5rem;
        padding-bottom: 2rem;
    }
}

@media (max-width: 639px) {
    .home-hero > .relative.z-10 {
        padding-top: 6rem;
        padding-bottom: 1.75rem;
    }

    .home-hero h1 {
        margin-bottom: 1.25rem !important;
    }

    .home-hero .hero-fade-in .px-8 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .home-hero .hero-fade-in .py-4 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 0.9375rem;
    }
}

/* Mobile trust badges (homepage) */
.hero-trust-mobile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}

.hero-trust-mobile__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.hero-trust-mobile__item .material-symbols-outlined {
    font-size: 1.125rem;
    flex-shrink: 0;
    opacity: 0.9;
}

@media (min-width: 1024px) {
    .hero-trust-mobile {
        display: none;
    }
}

/* ── Product matrix carousel ──────────────────────────── */
@media (max-width: 767px) {
    .product-matrix {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .product-expand-panel__inner {
        padding: 1.5rem !important;
    }

    .product-expand-panel__title {
        font-size: 1.375rem !important;
        margin-bottom: 0.75rem !important;
    }

    .product-expand-panel__desc {
        font-size: 0.9375rem !important;
        margin-bottom: 1rem !important;
    }

    .product-expand-panel__tag {
        margin-bottom: 1rem !important;
        padding: 0.375rem 0.75rem !important;
        font-size: 0.6875rem !important;
    }

    .product-expand-panel__media {
        height: 9rem !important;
    }

    .product-matrix__nav {
        width: 2.25rem;
        height: 2.25rem;
        margin-top: -1.125rem;
    }

    .product-matrix__nav .material-symbols-outlined {
        font-size: 1.25rem;
    }
}

/* ── Page CTA banner: see style.css ───────────────────── */

/* ── Product list page ────────────────────────────────── */
@media (max-width: 1023px) {
    #product-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.5rem;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    #product-tabs::-webkit-scrollbar {
        display: none;
    }

    #product-tabs .product-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .filter-aside-products {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .products-shell .grid.lg\:grid-cols-12 {
        gap: 1.5rem;
    }
}

@media (max-width: 639px) {
    .product-card__excerpt {
        min-height: auto;
    }

    .product-card img.h-56 {
        height: 12rem;
    }
}

/* ── Stats / feature cards ────────────────────────────── */
@media (max-width: 639px) {
    .grid.grid-cols-2.gap-6 > .rounded-2xl.p-8,
    .grid.grid-cols-2.gap-6 > .bg-white.rounded-2xl.p-8 {
        padding: 1.25rem;
    }

    .grid.grid-cols-2.gap-6 > .rounded-2xl.p-8 .text-5xl,
    .grid.grid-cols-2.gap-6 > .bg-white.rounded-2xl.p-8 .text-5xl {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    .grid.grid-cols-3.gap-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid.grid-cols-3.gap-6 > .rounded-2xl.p-8:last-child {
        grid-column: 1 / -1;
    }
}

/* ── About — service network stats pill ───────────────── */
@media (max-width: 639px) {
    .inline-flex.items-center.gap-8.rounded-full.px-10 {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 20rem;
        margin-left: auto;
        margin-right: auto;
        border-radius: 1rem !important;
        padding: 1.25rem 1.5rem !important;
    }

    .inline-flex.items-center.gap-8.rounded-full.px-10 > .w-px {
        display: none;
    }

    .inline-flex.items-center.gap-8.rounded-full.px-10 > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0.75rem;
        text-align: left;
    }

    .inline-flex.items-center.gap-8.rounded-full.px-10 > div .text-2xl {
        font-size: 1.25rem !important;
        min-width: 2.5rem;
    }
}

/* ── Quality / highlight cards ──────────────────────── */
@media (max-width: 767px) {
    .rounded-2xl.p-10.lg\:p-12 {
        padding: 1.5rem !important;
    }

    .md\:col-span-2.lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }
}

/* ── Challenge / solution cards ───────────────────────── */
@media (max-width: 639px) {
    article.scroll-mt-28 .p-7 {
        padding: 1.25rem;
    }

    article.scroll-mt-28 .h-48 {
        height: 10rem;
    }

    nav.flex.flex-wrap.gap-2.mb-12 {
        gap: 0.375rem;
    }

    nav.flex.flex-wrap.gap-2.mb-12 a {
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
    }
}

/* ── Contact form grids ───────────────────────────────── */
@media (max-width: 639px) {
    .grid.grid-cols-2.gap-6:has(input),
    .grid.grid-cols-2.gap-6:has(select),
    .grid.grid-cols-2.gap-6:has(textarea) {
        grid-template-columns: 1fr;
    }
}

/* ── Tables ───────────────────────────────────────────── */
.product-content table,
.news-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .product-content table th,
    .product-content table td,
    .news-content table th,
    .news-content table td {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }
}

/* ── Footer ───────────────────────────────────────────── */
@media (max-width: 767px) {
    footer .pt-12 {
        padding-top: 2.5rem;
    }

    footer .whitespace-nowrap {
        white-space: normal;
        overflow-x: visible;
        word-break: break-word;
    }

    footer .flex.flex-col.md\:flex-row .min-w-0 {
        text-align: left !important;
    }
}

/* ── Pagination ───────────────────────────────────────── */
@media (max-width: 479px) {
    .pagination-modern li a,
    .pagination-modern li span {
        min-width: 2.25rem;
        height: 2.25rem;
        padding: 0 0.625rem;
        font-size: 0.8125rem;
    }
}

/* ── Career process tabs ──────────────────────────────── */
@media (max-width: 639px) {
    .career-process__tab {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }
}

/* ── Load calc ────────────────────────────────────────── */
@media (max-width: 639px) {
    .inline-flex.min-w-\[160px\].px-10 {
        min-width: 0;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ── Selection page ───────────────────────────────────── */
@media (max-width: 767px) {
    .selection-page {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .selection-page-inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ── Header mobile menu ───────────────────────────────── */
@media (max-width: 1023px) {
    .site-header__mainnav .h-20 {
        height: 4.5rem;
    }

    #mobile-menu {
        max-height: calc(100dvh - 4.5rem);
    }
}

/* ── Utility: full-width buttons on small screens ─────── */
@media (max-width: 479px) {
    .home-hero .hero-fade-in > .flex.flex-wrap.gap-4 {
        width: 100%;
    }

    .home-hero .hero-fade-in > .flex.flex-wrap.gap-4 > a {
        flex: 1 1 100%;
        justify-content: center;
    }
}