/* ============================================================
   MOBILE  (≤ 768px)
   Page-specific overrides. Sidebar/topbar handled in app.css.
   ============================================================ */
@media (max-width: 768px) {

    /* ── Global ── */
    body { overflow-x: hidden; }
    img, video, iframe { max-width: 100%; height: auto; }
    select, .fb-select, .fb-geo-select { font-size: 13px !important; font-family: inherit !important; }

    /* ── Quill editor: prevent toolbar from widening page ── */
    .ql-toolbar.ql-snow { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .ql-container.ql-snow, .ql-editor { max-width: 100%; overflow-x: hidden; }

    /* ── Feed cards (index.html) ── */
    .feed-card {
        flex-direction: column;
        height: auto;
    }
    .feed-card__images {
        order: -1;
        padding: 0;
        align-self: stretch;
    }
    .feed-card__img {
        width: 100%;
        border-radius: 16px 16px 0 0;
        aspect-ratio: 16 / 9;
    }
    .feed-card__body { padding: 12px 14px 14px; }
    .feed-card__title { font-size: 18px; }
    .feed-card__excerpt { max-height: calc(3em + 26px); overflow: hidden; }

    /* Cards without a photo: show more text instead of clipping at 3 lines */
    .feed-card:not(:has(.feed-card__images)) .feed-card__excerpt {
        max-height: 56.25vw;
    }
    #posts .feed-card__footer,
    #bd-posts-list .feed-card__footer,
    #pf-posts-list .feed-card__footer { flex-wrap: wrap; }

    /* ── Inputs: prevent iOS zoom on focus ── */
    input, select, textarea { font-size: 16px !important; }
    .ql-editor { font-size: 16px !important; }

    /* ── Filter bar ── */
    .filter-bar { gap: 6px; }
    .fb-cascade-pill { flex-shrink: 1; }
    .fb-select { max-width: none; }

    /* ── Dropdowns: fixed to viewport so they never overflow ── */
    .bt-filter__dropdown,
    .fb-panel {
        position: fixed;
        left: 16px;
        right: 16px;
        top: 70px;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* ── Companies catalog ── */
    .catalog-add-btn { display: none; }

    /* ── Boats My ── */
    #all_boats h2 { display: block; }
    #all_boats ul { grid-template-columns: 1fr; }

    /* ── Projects ── */
    .proj-page__title { display: block; }

    /* ── Boats All: title + grids ── */
    .all-boats-title { display: block; }
    .all-boats-header { flex-wrap: wrap; }
    .brands-tabs { gap: 4px; }
    .boats-grid { grid-template-columns: 1fr; }

    /* ── Brand / Model detail ── */
    /* models tabs use flex-wrap, no override needed */
    #brand-detail ul { grid-template-columns: 1fr; }

    /* ── Companies catalog ── */
    .companies-grid { grid-template-columns: 1fr; }

    /* ── Company landing ── */
    .cl-page { padding-left: 0; padding-right: 0; }
    .cl-layout {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    /* Flatten .cl-main into the flex container so description and
       tabs can be ordered independently from sidebar blocks */
    .cl-main        { display: contents; }
    .cl-cover       { order: 1; }
    .cl-description { order: 2; margin-bottom: 0; }
    .cl-sidebar-bottom { order: 3; width: 100%; }
    .cl-sidebar-bottom .cl-card { margin-bottom: 0; }
    /* Flatten .cl-sidebar-top so map and contacts can be ordered separately */
    .cl-sidebar-top    { display: contents; }
    .cl-sidebar-top > .cl-card--map            { order: 4; width: 100%; flex: none; }
    .cl-sidebar-top > .cl-card:not(.cl-card--map) { order: 5; width: 100%; }
    .cl-tabs           { order: 6; min-width: 0; width: 100%;
                         overflow-x: auto; overflow-y: hidden;
                         padding-bottom: 2px;
                         -webkit-overflow-scrolling: touch;
                         scrollbar-width: none; }
    .cl-tabs::-webkit-scrollbar { display: none; }
    .cl-tab            { flex-shrink: 0; }
    .cl-tab-panel      { order: 7; min-width: 0; width: 100%; }
    .cl-header { flex-wrap: wrap; }
    .cl-header__actions { width: 100%; flex-wrap: wrap; }

    /* Map: override flex:1 from desktop so the container has explicit height */
    .cl-sidebar-top .cl-map { flex: none; height: 220px; min-height: unset; }

    /* ── Subscriptions ── */
    .subs-manage-grid { grid-template-columns: 1fr; }

    /* ── Boat/post detail: unconstrain max-width ── */
    .boat-detail__title,
    .boat-detail__actions,
    .boat-info-card,
    .boat-description,
    .boat-gallery,
    .post-content-block,
    .post-main-image,
    .post-gallery,
    .post-price,
    .post-mention,
    .comments-section,
    .comment-form,
    #posts,
    .linked-projects-card,
    .link-requests,
    .post-draft-notice { max-width: 100%; }

    /* ── Company/boat forms ── */
    .company-form-page { max-width: 100%; }
    .edit-map { height: 240px; }

    /* ── Map on catalog ── */
    #catalog-map { height: 60vh !important; }

    /* ── bd-seg: allow wrap ── */
    .bd-seg__btn { padding: 5px 10px; font-size: 12px; }

    /* ── Boat detail: sort on new line, aligned left ── */
    .bd-filter-bar { flex-wrap: wrap; }

    /* ── Boat detail actions: wrap buttons, add right padding ── */
    .boat-detail__actions { flex-wrap: wrap; padding-right: 16px; }
    .post-content-header { flex-direction: column; align-items: flex-start; gap: 11px; }
    .post-content-header__actions { flex-shrink: unset; }

    /* ── Breadcrumbs: allow wrap ── */
    .breadcrumb { flex-wrap: wrap; }

    /* ── Posts inside boat detail: restore column layout ── */
    #posts .feed-card { height: auto; flex-direction: column; }
    #posts .feed-card__images { order: -1; padding: 0; align-self: stretch; }
    #posts .feed-card__img { width: 100%; border-radius: 16px 16px 0 0; aspect-ratio: 16 / 9; }

    /* ── Sidebar: reduce top padding ── */
    .sidebar { padding-top: 16px !important; }

    /* ── Messaging: two-screen (list / chat) ── */
    .page-messaging .all-boats-title { display: none; }
    .page-messaging .content { padding: 0 !important; }
    .msg-layout {
        display: block;
        height: calc(100vh - 54px);
        height: calc(100dvh - 54px);
        overflow: hidden;
        border-radius: 12px;
        box-shadow: none;
    }
    .msg-sidebar {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        border-right: none;
        border-bottom: none;
    }
    .msg-sidebar__header { display: flex; }
    .msg-conv-list { overflow-y: auto; }
    .msg-conv-item:last-child { border-bottom: none !important; }
    /* Chat panel hidden by default; shown when conversation is active */
    .msg-panel { display: none; height: 100%; margin-top: 0; border-radius: 0; box-shadow: none; }
    .msg-layout--mobile-chat .msg-sidebar { display: none !important; }
    .msg-layout--mobile-chat .msg-panel   { display: flex !important; }
    .msg-bubble { max-width: 80%; }
    .msg-bubble__img { max-width: 100%; }
    .msg-messages { flex: 1; height: auto; overflow-y: auto; overflow-x: hidden; }
    .msg-back-btn { display: flex; }
    .msg-panel__empty { min-height: 80px; padding: 24px 20px; text-align: center; justify-content: center; }
    /* iOS safe-area: stop content going under home indicator */
    .msg-conv-list { padding-bottom: env(safe-area-inset-bottom, 0px); }
    .msg-form { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Boat add form ── */
@media (max-width: 768px) {
    .boat-add-row {
        flex-direction: column;
        gap: 16px;
    }
    .boat-add-row--checkbox {
        margin-top: 0;
    }
    .boat-add-block {
        padding-left: 17px;
        padding-right: 17px;
    }

    .date-display { font-size: 16px; }
}

/* ── Post meta card: portrait only ── */
@media (max-width: 768px) and (orientation: portrait) {
    .post-meta-card,
    .boat-info-card.post-meta-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-right: 0;
    }
    .post-meta-card__divider { display: none; }
    .post-meta-card__boat-link { min-width: 0; max-width: 100%; }
}

/* ── Extra small (≤ 480px) ── */
@media (max-width: 480px) {
    .brands-tab { font-size: 13px; padding: 6px 10px; }
    /* models tabs use flex-wrap, no override needed */
    .content { padding: 12px; }

    /* ── Filter bar: force sort to its own left-aligned line ── */
    .bd-filter-bar::after { content: ''; flex: 0 0 100%; height: 0; order: 1; }
    .bd-sort-wrap { order: 2; margin-left: 0; }
}