/* css/page-listings.css */
@layer pages {

    .lp-page {
        padding-top: 2.5rem;
        padding-bottom: 5rem;
    }

    /* ── Hero ── */
    .lp-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }
    .lp-hero-left { flex: 1; min-width: 260px; }
    .lp-hero-cta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.5rem;
        padding-top: 1rem;
        flex-shrink: 0;
    }
    .lp-cta-note {
        font-size: 0.62rem;
        color: #9ba3c0;
        text-align: right;
    }

    /* ── Filter bar ── */
    .lp-filter-bar {
        background: rgba(255,255,255,0.55);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1.5px solid rgba(255,255,255,0.9);
        border-radius: 16px;
        box-shadow: 0 4px 0 rgba(160,180,220,0.35), 0 8px 24px rgba(80,100,180,0.1);
        margin-bottom: 1.5rem;
        overflow: hidden;
    }
    .lp-filter-row {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0 1.2rem;
        min-height: 42px;
        border-bottom: 1px solid rgba(200,212,235,0.5);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .lp-filter-row::-webkit-scrollbar { display: none; }
    .lp-filter-row:last-child { border-bottom: none; }
    .lp-filter-lbl {
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        color: #9ba3c0;
        flex-shrink: 0;
        min-width: 7rem;
        text-transform: uppercase;
    }
    .lp-chips {
        display: flex;
        gap: 0.2rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0.35rem 0;
    }
    .lp-chips::-webkit-scrollbar { display: none; }
    .lp-chip {
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: #5e6690;
        text-decoration: none;
        padding: 0.28em 0.85em;
        border-radius: 100px;
        border: 1px solid transparent;
        white-space: nowrap;
        flex-shrink: 0;
        transition: background 0.12s, color 0.12s;
    }
    .lp-chip:hover {
        background: rgba(255,255,255,0.7);
        color: #1e2140;
    }
    .lp-chip--on {
        background: #fff;
        color: #1e2140;
        font-weight: 700;
        border-color: rgba(200,212,240,0.8);
        box-shadow: 0 2px 0 rgba(160,180,220,0.4);
    }

    /* ── Job list ── */
    .lp-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    /* ── Job card ── */
    .lp-card {
        background: rgba(255,255,255,0.72);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1.5px solid rgba(255,255,255,0.92);
        border-radius: 18px 14px 16px 20px / 14px 18px 20px 16px;
        box-shadow: 0 5px 0 rgba(140,165,215,0.45), 0 10px 28px rgba(70,90,180,0.1);
        overflow: hidden;
        transition: transform 0.12s, box-shadow 0.12s;
    }
    .lp-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 0 rgba(140,165,215,0.5), 0 14px 36px rgba(70,90,180,0.15);
    }
    .lp-card:active {
        transform: translateY(1px);
        box-shadow: 0 3px 0 rgba(140,165,215,0.45);
    }
    .lp-card-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 0.9rem 1.2rem;
        text-decoration: none;
        color: inherit;
        flex-wrap: wrap;
    }

    .lp-card-main {
        display: flex;
        flex-direction: column;
        gap: 0.22rem;
        flex: 1;
        min-width: 200px;
    }
    .lp-company {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: #9ba3c0;
        text-transform: uppercase;
    }
    .lp-title {
        font-size: 0.88rem;
        font-weight: 700;
        color: #1e2140;
        line-height: 1.25;
    }
    .lp-tech-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        margin-top: 0.2rem;
    }
    .lp-tech {
        font-size: 0.58rem;
        font-weight: 600;
        color: #2050b0;
        background: #eef3ff;
        border: 1px solid #c4d8fc;
        border-radius: 100px;
        padding: 0.1em 0.55em;
    }

    .lp-card-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
        flex-wrap: wrap;
    }
    .lp-meta-pay {
        font-size: 0.72rem;
        font-weight: 700;
        color: #1f8a45;
    }
    .lp-meta-sep {
        font-size: 0.65rem;
        color: #c8d0e8;
    }
    .lp-meta-item {
        font-size: 0.68rem;
        color: #5e6690;
        white-space: nowrap;
    }
    .lp-meta-date {
        font-size: 0.62rem;
        color: #9ba3c0;
        white-space: nowrap;
    }

    /* ── Pagination ── */
    .lp-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 2rem;
    }
    .lp-page-btn {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: #5e6690;
        text-decoration: none;
        padding: 0.5em 1.2em;
        border-radius: 100px;
        background: rgba(255,255,255,0.7);
        border: 1.5px solid rgba(200,212,240,0.9);
        box-shadow: 0 3px 0 rgba(160,180,220,0.4);
        transition: transform 0.1s, box-shadow 0.1s, color 0.1s;
    }
    .lp-page-btn:hover {
        color: #1e2140;
        transform: translateY(-1px);
        box-shadow: 0 5px 0 rgba(160,180,220,0.45);
    }
    .lp-page-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(160,180,220,0.4); }
    .lp-page-btn--off {
        opacity: 0.35;
        box-shadow: none;
    }
    .lp-page-info {
        font-size: 0.65rem;
        font-weight: 600;
        color: #9ba3c0;
    }

    /* ── Empty state ── */
    .lp-empty {
        background: rgba(255,255,255,0.55);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1.5px solid rgba(255,255,255,0.9);
        border-radius: 18px;
        box-shadow: 0 5px 0 rgba(160,180,220,0.3);
        padding: 3.5rem 2rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
    .lp-empty-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: #1e2140;
    }
    .lp-empty-body {
        font-size: 0.8rem;
        color: #5e6690;
        line-height: 1.6;
    }
    .lp-empty-body a {
        color: #2050b0;
        text-decoration: none;
    }
    .lp-empty-body a:hover { text-decoration: underline; }

}