/**
 * Site-wide responsive fixes (all pages, browsers, mobile → desktop).
 * Loaded after theme.css on public, admin, and guest layouts.
 */

/* --- Missing Tailwind custom utility (used on every page) --- */
.max-w-content {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
}

/* --- Global: prevent horizontal scroll / layout blowout --- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html {
        overflow-x: hidden;
    }
}

body {
    overflow-x: clip;
    min-width: 0;
}

@supports not (overflow: clip) {
    body {
        overflow-x: hidden;
    }
}

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

/* Flex/grid children should shrink inside narrow viewports */
main,
header,
footer,
.max-w-content,
.min-h-screen {
    min-width: 0;
}

/* Long emails, URLs, phone numbers */
.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --- Typography: fluid headings on small screens --- */
.lp-hero-title {
    font-size: clamp(1.75rem, 5vw + 0.5rem, 3.75rem);
    line-height: 1.08;
}

.page-title-fluid {
    font-size: clamp(1.75rem, 4vw + 0.75rem, 3rem);
    line-height: 1.15;
}

/* --- Navbar: desktop = full links, mobile = hamburger only --- */
/* Tailwind build omits lg:hidden; enforce desktop nav with plain CSS */
@media (min-width: 768px) {
    .site-nav-desktop {
        display: flex !important;
    }

    .site-nav-toggle {
        display: none !important;
    }

    .site-nav-mobile-panel {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .site-nav-desktop {
        display: none !important;
    }

    .site-nav-toggle {
        display: inline-flex !important;
    }
}

/* --- Navbar: long company names on narrow phones --- */
.site-header-brand {
    min-width: 0;
    max-width: min(58vw, 14rem);
}

.site-header-brand .truncate {
    max-width: 100%;
}

/* --- Featured carousel: keep arrows inside viewport --- */
.featured-carousel-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.featured-carousel-view {
    overflow: hidden;
    width: 100%;
    min-width: 0;
}

.featured-carousel-nav {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.featured-carousel-nav[data-featured-carousel="prev"] {
    left: 0.5rem !important;
}

.featured-carousel-nav[data-featured-carousel="next"] {
    right: 0.5rem !important;
}

@media (min-width: 640px) {
    .featured-carousel-wrap {
        padding-inline: 2.75rem;
    }

    .featured-carousel-nav[data-featured-carousel="prev"] {
        left: 0.25rem !important;
    }

    .featured-carousel-nav[data-featured-carousel="next"] {
        right: 0.25rem !important;
    }
}

@media (min-width: 1024px) {
    .featured-carousel-wrap {
        padding-inline: 3.25rem;
    }
}

/* Smaller slide on very narrow phones */
@container (max-width: 360px) {
    .featured-carousel-slide {
        flex: 0 0 min(18rem, 100cqw - 1.5rem) !important;
        width: min(18rem, 100cqw - 1.5rem) !important;
    }
}

/* --- Shop filters: keep "In stock only" on one line --- */
.shop-filters__stock {
    min-width: 9.5rem;
}

@media (max-width: 639px) {
    .shop-filters__stock {
        width: 100%;
        justify-content: flex-start;
    }
}

/* --- Property catalog filters --- */
@media (max-width: 479px) {
    .property-filters-grid {
        grid-template-columns: 1fr !important;
    }

    .property-filters-grid > * {
        grid-column: 1 / -1 !important;
    }

    .property-filters-actions {
        flex-direction: column;
    }

    .property-filters-actions > * {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* --- Property detail: room for mobile sticky contact bar --- */
@media (max-width: 767px) {
    .property-show-article {
        padding-bottom: 6.5rem;
    }

    .property-show-gallery .prop-gallery-thumbs button {
        height: 4.5rem;
        width: 4.5rem;
    }
}

/* --- Shop / prose content --- */
.prose-safe {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.prose-safe img,
.prose-safe table {
    max-width: 100%;
}

.prose-safe table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Contact page: stack action tiles on very small screens --- */
@media (max-width: 380px) {
    .contact-page__tiles {
        grid-template-columns: 1fr !important;
    }
}

/* --- Category bento: comfortable height on phones --- */
@media (max-width: 639px) {
    .lp-category-bento-card {
        min-height: 14rem;
    }
}

/* --- CTA block: stack image below copy on tablets --- */
@media (max-width: 767px) {
    .lp-cta-editorial {
        display: flex;
        flex-direction: column;
    }

    .lp-cta-editorial__visual {
        min-height: 12rem;
        order: -1;
    }
}

/* --- Admin: tables and forms on small screens --- */
.admin-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
}

@media (max-width: 639px) {
    .admin-app main {
        padding-inline: 1rem;
    }

    .admin-card {
        border-radius: 0.75rem;
    }
}

/* --- Safe areas (notched phones) --- */
@supports (padding: max(0px)) {
    .safe-bottom {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    header.fixed {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* --- Password show/hide toggle (login + admin account) --- */
.password-field-wrap .admin-input,
.password-field-wrap input[type="password"],
.password-field-wrap input[type="text"] {
    width: 100%;
    padding-right: 2.75rem;
}

.password-toggle-btn {
    z-index: 1;
}

/* --- Reduce motion --- */
@media (prefers-reduced-motion: reduce) {
    .featured-carousel-track {
        scroll-behavior: auto;
    }

    .featured-carousel-nav,
    .contact-page__tile,
    .card-pro a img {
        transition: none !important;
    }
}