/* ==========================================================================
   leftAd.css  —  rev 2
   Three-layer layout for ListRequests.razor

   Layer 1  .lr-top-layer      — full-width band: centred title + centred TopAd
   Layer 2  .lr-left-panel     — left column: LeftAd, sticky beside filters
   Layer 3  .lr-main-content   — flexible right column: filters + order list

   Layout modifier classes (applied from Blazor when panels are absent)
     .lr-top-layer--compact   → no TopAd rendered; reduce top-band padding
     .lr-body-row--centered   → no LeftAd rendered; centre + cap main content

   Breakpoints
     ≤ 768 px    mobile   → single-column stack
     769–1024 px tablet   → two-column body row (left ad + content)
     ≥ 1025 px   desktop  → same two-column layout
     (Left panel is hidden at ≤ 1024 px regardless of ad availability)
   ========================================================================== */


/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.lr-page-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════════════════════
   LAYER 1 — TOP BAND  (100 % width)
   Title first, then TopAd centred below it.
══════════════════════════════════════════════════════════════════════════ */
.lr-top-layer {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}

/* Page header — centred text */
.lr-top-layer .lr-page-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    /* Override pbssite.css which sets justify-content:space-between */
    justify-content: center !important;
}

.lr-top-layer .lr-page-title {
    text-align: center;
    margin-bottom: 0;        /* suppress the 20px bottom from pbssite.css */
}

/* TopAd wrapper — centres the ad unit */
.lr-top-ad-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-top: 10px;
    min-height: 90px;
}

.lr-top-ad-wrap .TopAd,
.lr-top-ad-wrap #topAd {
    display: block;
}


/* ──────────────────────────────────────────────────────────────────────────
   MODIFIER: No TopAd present
   Collapses the top band to just the title — no dead white space.
─────────────────────────────────────────────────────────────────────────── */
.lr-top-layer--compact {
    padding-bottom: 4px;
    margin-bottom: 10px;
    border-bottom: none;     /* divider only makes sense when there is an ad below */
}

.lr-top-layer--compact .lr-page-header {
    padding: 4px 0 0;
}

.lr-top-layer--compact .lr-page-title {
    /* Slightly tighter heading when no ad follows */
    margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   LAYERS 2 & 3 — BODY ROW
   Default (> 1024 px): left panel beside main content.
══════════════════════════════════════════════════════════════════════════ */
.lr-body-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}


/* ── LAYER 2 — Left panel ─────────────────────────────────────────────────── */
.lr-left-panel {
    flex: 0 0 300px;
    min-width: 200px;
    max-width: 320px;
    padding-top: 0px;

    /* Sticky so the ad stays in view while the user scrolls the list */
    position: sticky;
    top: 16px;
    align-self: flex-start;
}

/* LeftAd host element */
.lr-left-panel .LeftAd,
.lr-left-panel #leftAd {
    width: 100%;
    min-height: 250px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}


/* ── LAYER 3 — Main content ───────────────────────────────────────────────── */
.lr-main-content {
    flex: 1 1 0%;
    min-width: 0;
    /*
     * Cap the content column so it never stretches into an unreadably
     * wide rail on large monitors when a left ad IS present.
     * On very wide viewports this leaves a small right margin, which is
     * preferable to a filter card that spans 1500 px.
     */
    max-width: 960px;
}


/* ──────────────────────────────────────────────────────────────────────────
   MODIFIER: No LeftAd present  (.lr-body-row--centered)
   When no left panel is rendered, centre the content column and give it
   a tighter max-width so there is no awkward dead space to the right.
─────────────────────────────────────────────────────────────────────────── */
.lr-body-row--centered {
    justify-content: center;   /* horizontally centres the single column */
}

.lr-body-row--centered .lr-main-content {
    /*
     * Narrower cap than the two-column variant — with no left ad the page
     * would otherwise stretch too wide. 860 px is a comfortable reading
     * width for a list of order cards.
     */
    flex: 0 1 880px;
    max-width: 880px;
}

/*
 * Let child elements fill the full (already-constrained) column width.
 * pbssite.css hard-codes max-width: 860px on filter-card / order-list /
 * results-bar; override those here so the 880px parent is the single
 * source of truth for width.
 */
.lr-body-row--centered .lr-filter-card,
.lr-body-row--centered .lr-order-list,
.lr-body-row--centered .lr-results-bar {
    max-width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet & below (≤ 1024 px) — hide left panel, content fills row ─────── */
@media (max-width: 1024px) {
    .lr-left-panel {
        display: none;
    }

    .lr-body-row {
        gap: 0;
    }

    /*
     * Whether or not the --centered modifier is applied, at this width the
     * content should simply fill the available space (minus page padding).
     * Centring at tablet makes no visual difference, so we restore full flex.
     */
    .lr-body-row--centered .lr-main-content {
        flex: 1 1 0%;
        max-width: 100%;
    }

    /* Restore child max-widths so the existing 860px guards still work */
    .lr-body-row--centered .lr-filter-card,
    .lr-body-row--centered .lr-order-list,
    .lr-body-row--centered .lr-results-bar {
        max-width: 860px;
    }
}

/* ── Mobile (≤ 768 px) — single-column stack ───────────────────────────── */
@media (max-width: 768px) {

    .lr-body-row {
        flex-direction: column;
        gap: 16px;
    }

    /* Remove the 860px guards entirely on small screens — full width only */
    .lr-filter-card,
    .lr-order-list,
    .lr-results-bar {
        max-width: 100% !important;
    }

    .lr-top-ad-wrap {
        min-height: 60px;
    }

    .lr-top-layer--compact {
        padding-bottom: 2px;
        margin-bottom: 6px;
    }
}