/* mobile-cookbook.css — mobile layout for the Cookbook (saved Balanced
   Plates). Mirrors the design prototype cookbook-mobile.html:
     - sort controls as a horizontal-scroll pill row
     - a single-column list of HORIZONTAL plate cards (visual left, body right)

   Loaded after recipe-styles.css + mobile-recipe-grid.css so it overrides the
   default 2-col grid / horizontal-scroll cluster rows. Scoped to .bfp-plate-card
   (and its containers via :has) so it only reshapes plate cards — regular image
   recipe cards keep their existing treatment. Not gated by cohort, so it applies
   to any cookbook that contains saved Balanced Plates. */

@media (max-width: 576px) {

    /* ---- Sort controls → horizontal-scroll pill chips ---------------- */
    /* Let the cookbook pane grow to its full content height so the sticky
       pill row below has a tall containing block and stays pinned for the
       whole list. The actual scroller is .tab-container (mobile-chat.css);
       capping the pane at height:100% would unstick the pills after one
       screen. Scoped to #myrecipes-content so other tabs are unaffected. */
    #myrecipes-content {
        height: auto;
        min-height: 100%;
    }

    .cookbook-view-toolbar.btn-group {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        width: auto;
        /* 16px top so the pills aren't glued to the header divider — matches
           the 16px horizontal rhythm of the recipe list below. */
        margin: 16px 0 18px;
        padding: 0 16px 2px;
        scrollbar-width: none;
        /* Pin the pills so recipes scroll beneath them. */
        position: sticky;
        top: 0;
        z-index: 20;
        background: #fff;
        box-shadow: 0 6px 14px -10px rgba(20, 40, 69, 0.35);
    }
    .cookbook-view-toolbar.btn-group::-webkit-scrollbar { display: none; }

    .cookbook-view-toolbar .cookbook-view-btn {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border: 1px solid #dee2e6;
        background: #fff;
        color: #495057;
        font-size: 12.5px;
        font-weight: 600;
        padding: 8px 14px;
        /* override btn-group's squared inner corners + negative margins */
        border-radius: 999px !important;
        margin: 0 !important;
        white-space: nowrap;
    }
    .cookbook-view-toolbar .cookbook-view-btn i { font-size: 11px; opacity: 0.8; }
    .cookbook-view-toolbar .cookbook-view-btn.btn-primary {
        background: #fe6211;
        border-color: #fe6211;
        color: #fff;
    }
    .cookbook-view-toolbar .cookbook-view-btn.btn-primary i { opacity: 1; }

    /* ---- Group heading (cluster title) ------------------------------- */
    .cluster:has(.bfp-plate-card) .cluster-title {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #212529;
        padding: 0 16px;
        margin: 0 0 12px;
        position: static;
        background: transparent;
    }

    /* ---- Container → single vertical column -------------------------- */
    /* Flat (date_saved / date_modified) list and clustered meal/cuisine
       rows both collapse to a stacked column when they hold plate cards. */
    #recipe-list:has(.bfp-plate-card),
    .recipe-row:has(.bfp-plate-card) {
        display: flex;
        flex-direction: column;
        gap: 14px;
        overflow-x: visible;
        padding: 0 16px 8px;
        margin-bottom: 0;
    }
    .cluster:has(.bfp-plate-card) { margin-bottom: 22px; }

    /* Full-width Bootstrap column wrappers in either container. */
    #recipe-list:has(.bfp-plate-card) > [class*="col-"],
    .recipe-row:has(.bfp-plate-card) > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding: 0;
        margin: 0;
    }

    /* ---- Plate card → horizontal layout (visual left, body right) ---- */
    .recipe-card.bfp-plate-card {
        flex-direction: row;
        align-items: stretch;
        width: 100% !important;
        min-height: 0 !important;
        border-radius: 16px;
        box-shadow: none;
    }

    .bfp-plate-card .bfp-card-visual {
        flex: none;
        width: 116px;
        padding: 12px;
        border-bottom: 0;
        border-right: 1px solid #f0f1f3;
    }
    .bfp-plate-card .bfp-plate-mini { width: 92px; height: 92px; }

    /* Bookmark moves to the top-left of the visual (design). mobile-recipe-grid.css
       re-applies the dark photo-overlay box to .recipe-card .bookmark-container at
       equal specificity, so reset it back to the plate card's transparent circle
       here (this file loads after mobile-recipe-grid.css). */
    .bfp-plate-card .bookmark-container {
        top: 8px;
        left: 8px;
        right: auto;
        width: auto;
        height: auto;
        padding: 0;
        background: none;
        border-radius: 999px;
    }
    .bfp-plate-card .bfp-card-bookmark { width: 28px; height: 28px; }
    .bfp-plate-card .bfp-card-bookmark svg { width: 13px; height: 13px; filter: none; }
    /* mobile-recipe-grid.css recolors the icon for the photo overlay (white
       outline, orange when saved). On the plate card that's white-on-white
       (unsaved) and orange-on-orange (saved) — both invisible. Restore the
       design's gray-on-white / white-on-orange, mirroring the desktop rules. */
    .bfp-plate-card .bfp-card-bookmark svg path { fill: none; stroke: #6c757d; }
    .bfp-plate-card .bfp-card-bookmark.bookmarked svg path { fill: #fff; stroke: #fff; }

    .bfp-plate-card .bfp-card-body {
        flex: 1;
        min-width: 0;
        padding: 13px 14px 12px;
    }
    .bfp-plate-card .bfp-card-title { font-size: 14px; margin-top: 0; }
    /* The vertical-layout spacer isn't needed when laid out as a row. */
    .bfp-plate-card .bfp-card-spacer { display: none; }
    .bfp-plate-card .bfp-card-compo { margin-top: 9px; }
    .bfp-plate-card .bfp-card-meta {
        margin-top: 11px;
        gap: 10px;
        font-size: 11.5px;
        flex-wrap: wrap;
    }
}