/* Site-wide phone and small-tablet safety. Loaded last so nothing clips off-screen. */
html { overflow-x: clip; }
body { overflow-x: clip; min-width: 0; }

@media (max-width: 720px) {
    img, video, canvas, iframe { max-width: 100%; }
    .wrap, .hp-wrap, .sh-wrap, .sf-wrap { width: min(1180px, calc(100% - 1.4rem)); }

    /* Forms stay usable and avoid iOS zoom */
    :where(input, select, textarea) { font-size: 16px !important; max-width: 100%; }
    :where(.abtn, .pg-btn, .hp-btn, .btn, .cp-btn) { max-width: 100%; }

    /* Tables scroll instead of stretching the page */
    .atable-wrap, .cl-ledger, .bk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { max-width: 100%; }
    .atable { min-width: 640px; }

    /* Shared grids */
    .agrid.c2, .agrid.c3, .agrid.c4, .agrid.side { grid-template-columns: 1fr !important; }
    .dash-quick, .dash-plans, .dash-form, .dash-pay { grid-template-columns: 1fr !important; }
    .dash-form .wide { grid-column: auto; }
    .cl-filter { flex-direction: column; align-items: stretch; }
    .cl-filter > * { width: 100%; }
    .cl-office-tabs, .cl-admin-switch, .dash-tabs, .pl-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .cl-office-tabs a, .cl-admin-switch a, .pl-tabs a { flex: none; }
    .cl-banner { padding: 16px; gap: 12px; }
    .cl-banner strong { font-size: 17px; }
    .cl-banner strong em { display: block; margin: 4px 0 0; }
    .cl-systems, .cl-acards, .cl-services, .cl-services.compact { grid-template-columns: 1fr !important; }
    .cl-kpis { grid-template-columns: 1fr 1fr !important; }
    .dash-head { align-items: flex-start; }
    .dash-actions { width: 100%; }
    .dash-actions .abtn { flex: 1 1 auto; justify-content: center; }
    .pg-actions { flex-wrap: wrap; }
    .pg-actions .pg-btn { width: 100%; justify-content: center; }

    /* Public pages */
    .hp-search-row, .hp-explore, .hp-grid, .hp-stats { grid-template-columns: 1fr !important; }
    .hp-search-go { width: 100%; }
    .hp-hero h1 { max-width: none; font-size: clamp(2rem, 9vw, 2.6rem); }
    .hp-feat { grid-auto-rows: 260px; }
    .pl-bar { grid-template-columns: 1fr !important; }
    .pl-loc, .pl-bar .pg-btn { grid-column: auto; }
    .pd-facts { grid-template-columns: 1fr 1fr; }
    .pg-field-row { flex-direction: column; align-items: flex-start; }
    .pg-roles { grid-template-columns: 1fr !important; }
    .banner-copy h1 span, .banner-copy p span { white-space: normal; }
    .finder, .finder-cluster, .clubbar, .home-grid, .search, .grid, .clubs { grid-template-columns: 1fr !important; }
    .finder-go, .club-join { width: 100%; margin: 0; }
    .cms-cards { grid-template-columns: 1fr; }

    /* Footer */
    .sf-grid, .sf-brand { grid-template-columns: 1fr !important; }
    .sf-contact, .sf-social { grid-column: auto !important; grid-row: auto !important; }
    .sf-cta { width: 100%; }

    :where(h1, h2, h3, p, li, td, th) { overflow-wrap: break-word; }

    /* Prop Club designed pages: collapse desktop-only widths */
    .cp, .cp * { min-width: 0; }
    .cp :is(h1, h2, h3, p, li, span, strong, b, em, small) { white-space: normal !important; }
    .cp [class*="-in"]:not([class*="-btn"]),
    .cp [class*="-card"],
    .cp [class*="-hero"],
    .cp [class*="-form"],
    .cp [class*="-grid"],
    .cp [class*="-row"],
    .cp [class*="-top"],
    .cp [class*="-main"],
    .cp [class*="-apply"],
    .cp [class*="-save"],
    .cp [class*="-partner"],
    .cp [class*="-info"] {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100%;
    }
    .cp [class*="-btn"],
    .cp [class*="-cta"] a,
    .cp [class*="-go"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 52px;
        padding: 12px 16px;
        font-size: 16px !important;
        white-space: normal !important;
        box-sizing: border-box;
    }
    .cp [class*="-art"],
    .cp [class*="-shapes"],
    .cp [class*="-m"] { position: relative !important; inset: auto !important; width: min(100%, 420px) !important; height: auto !important; max-width: 100%; margin-inline: auto; }
    .cp [class*="-col"],
    .cp [class*="-copy"] { margin-left: 0 !important; max-width: 100%; }
    .cp-h1 { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
    .cp-h2 { font-size: clamp(1.35rem, 6vw, 1.8rem) !important; }
}

@media (max-width: 480px) {
    .cl-kpis, .pd-facts, .hp-explore { grid-template-columns: 1fr !important; }
    .hp-tile { aspect-ratio: 16 / 10; }
    .dash-item { grid-template-columns: 48px minmax(0, 1fr); }
    .cl-banner-ico { width: 42px; height: 42px; }
    .cl-live-dot { display: none; }
    .adm-top h1 { font-size: 20px; }
    .adm-main { padding: 16px 12px 48px; }
    .arep-item-body { grid-template-columns: 1fr; }
    dl.ameta { grid-template-columns: 1fr; }
    .apages, .asections { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
    .sh-wrap, .sf-wrap, .wrap, .hp-wrap { width: calc(100% - 1rem); }
    .sh-icon, .sh-account, .sh-burger { width: 36px; height: 36px; }
}

@supports (padding: max(0px)) {
    .sh-wrap, .sf-wrap, .wrap, .hp-wrap, .adm-main { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
    .site-header { padding-top: env(safe-area-inset-top); }
}