/*
 * Responsive overrides. Loaded after layout.css so these rules win on
 * smaller viewports. The desktop ≥ 980px experience is byte-identical to
 * the legacy site; this file only kicks in below that.
 *
 * Targets:
 *   Tablet  (max-width: 980px) — wrapper goes fluid, sidebar drops below content
 *   Mobile  (max-width: 600px) — nav scales / wraps, listings become single column
 */

@media (max-width: 980px) {
    #wrapper { width: 100%; margin-top: 0; box-sizing: border-box; }

    /* The legacy layout used display:table-cell on #content and aside to
       float them side-by-side. Switch them to block + 100% width on
       mid-size viewports so the sidebar flows below the content. */
    div#container { display: block; padding: 10px; }
    div#content,
    aside { display: block; width: auto; padding-right: 0; }
    aside { margin-top: 30px; }

    /* The nav sprite has 8 fixed 119px buttons; they no longer fit. Let them
       wrap onto multiple rows. */
    #wrapper > header > nav > ul { display: flex; flex-wrap: wrap; gap: 3px; }
    #wrapper > header > nav > ul > li { margin-left: 0; }

    /* Hero slideshow shrinks proportionally; its 550×302 fixed size won't fit. */
    #slideshow { width: 100% !important; max-width: 550px; height: auto !important; aspect-ratio: 550 / 302; }
}

@media (max-width: 600px) {
    /* Nav buttons get crowded — drop to 2 per row visually, or wrap onto
       however many fit at the natural 119px width. The sprite is the
       limiting factor; keep button size, let them wrap. */
    #wrapper > header > nav > ul { justify-content: center; }

    /* Listings: tile widths reduce to fit ~2 per row on a 360px screen. */
    .recipes-list ul li { margin: 0 0 10px 8px; }
    .baras-list ul li,
    .baras-home ul li { display: inline-block; }
    .baras-home ul li:nth-child(3n+1) { margin-left: 4px; }

    /* Cocktail detail page: two-column ingredients/text layout becomes
       stacked. */
    #recipe .col1,
    #recipe .col2 { display: block; width: auto; }

    /* Sale / event tables get cramped — let them scroll horizontally. */
    .sales-list, .events-list { overflow-x: auto; }
}