/* ═══════════════════════════════════════════════════════════════
   Posters feed — fixed grid columns + ad slots
   Load AFTER posters.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Grid: exactly 2 columns below 900px, exactly 5 from 900px.
      10 posters always fill whole rows, so ads never sit under a half row. ── */
.ps-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ps-grid + .ps-grid { margin-top: 10px; }  /* when an ad renders nothing */
@media (min-width: 900px) {
    .ps-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
    .ps-grid + .ps-grid { margin-top: 14px; }
}

/* ── Ad box: full row, clearly separated from cards ── */
.ps-ad {
    display: block;
    margin: 22px 0;
    padding: 6px 0 12px;
    background: #fafafa;
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
    /* neutralise the old placeholder .ps-ad rule in posters.css */
    border: 0;
    min-height: 0;
    color: inherit;
    font-size: inherit;
}
.ps-ad__label {
    display: block;
    text-align: left;
    padding: 0 12px 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #9ca3af;
}
.ps-ad--collapsed { display: none !important; }
.ps-ad:has(ins[data-ad-status="unfilled"]) { display: none; }

/* ── In-feed: exact sizes per width → height is reserved, zero layout jump ── */
.ps-ad--infeed .ps-ad__ins { display: inline-block; width: 300px; height: 250px; }
@media (min-width: 360px)  { .ps-ad--infeed .ps-ad__ins { width: 336px; height: 280px; } }
@media (min-width: 900px)  { .ps-ad--infeed .ps-ad__ins { width: 728px; height: 90px;  } }
@media (min-width: 1040px) { .ps-ad--infeed .ps-ad__ins { width: 970px; height: 250px; } }

/* ── Multiplex: end of list, extra space before pagination (no mis-taps) ── */
.ps-ad--multiplex { margin: 28px 0 36px; padding-left: 8px; padding-right: 8px; }
.ps-ad--multiplex .ps-ad__ins { display: block; min-height: 280px; }

/* ── Desktop sticky rail: ≥1280px (covers 1280/1366/1440/1536 laptops), grid stays at 5 per row ── */
.ps-rail { display: none; }
@media (min-width: 1280px) {
    .ps-shell--rail {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 16px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 28px;
    }
    .ps-shell--rail > main {
        max-width: none;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        min-width: 0;
    }
    .ps-rail { display: block; padding-top: 14px; }
    .ps-rail .ps-ad { position: sticky; top: 80px; margin: 0; }
    .ps-ad--rail .ps-ad__ins { display: inline-block; width: 300px; height: 250px; }
}

/* With the rail at 1280–1439px the content column is ~920px, too narrow for 970×250 → use 728×90 */
@media (min-width: 1280px) and (max-width: 1439px) {
    .ps-shell--rail .ps-ad--infeed .ps-ad__ins { width: 728px; height: 90px; }
}

/* ── Debug mode (?adsdebug=1): show every slot and its AdSense status, never collapse ── */
.ps-ads-debug .ps-ad,
.ps-ads-debug .ps-ad--collapsed,
.ps-ads-debug .ps-ad:has(ins[data-ad-status="unfilled"]) {
    display: block !important;
    outline: 2px dashed #ef4444;
    outline-offset: -2px;
}
.ps-ads-debug .ps-ad__label { color: #b91c1c; }

/* ── Poster page: download-success panel (opens only after a real download) ── */
.ps-dl-done {
    margin-top: 14px;
    padding: 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    animation: ps-dl-in .2s ease both;
}
@keyframes ps-dl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ps-dl-done__msg {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #15803d;
}
.ps-dl-done__btns { display: grid; gap: 8px; }
@media (min-width: 560px) { .ps-dl-done__btns { grid-template-columns: 1fr 1fr; } }
.ps-dl-done__btns .ps-btn { width: 100%; text-align: center; }

/* The panel sits in a narrow column, so its ad stays at mobile sizes everywhere,
   and is separated from the buttons by a rule — never beside them. */
.ps-dl-done .ps-ad {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #bbf7d0;
    background: transparent;
    border-radius: 0;
}
.ps-dl-done .ps-ad__label { padding-left: 0; }
.ps-dl-done .ps-ad--infeed .ps-ad__ins { width: 300px; height: 250px; }
@media (min-width: 360px) { .ps-dl-done .ps-ad--infeed .ps-ad__ins { width: 336px; height: 280px; } }

/* ── Brand editor: the rail lives in the existing .ps-brand__ad-rail column
      (posters.css shows it from 1180px up), so size it outside the 1280px block ── */
.ps-brand__ad-rail .ps-ad { margin: 0; position: sticky; top: 80px; }
.ps-brand__ad-rail .ps-ad--rail .ps-ad__ins { display: inline-block; width: 300px; height: 250px; }

/* ── Brand editor success view (replaces the editor in-flow; never an overlay) ── */
.ps-done { max-width: 720px; margin: 0 auto; padding: 8px 0 8px; }
.ps-done__main { min-width: 0; }

/* Sticky rail beside the poster from 1100px up: an ad is visible immediately,
   and the poster and buttons keep their place. */
.ps-done__rail { display: none; }
@media (min-width: 1100px) {
    .ps-done {
        max-width: 1080px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 28px;
        align-items: start;
    }
    .ps-done__rail { display: block; }
    .ps-done__rail .ps-ad { position: sticky; top: 80px; margin: 0; }
    .ps-done__rail .ps-ad--rail .ps-ad__ins { display: inline-block; width: 300px; height: 250px; }
}
.ps-done__msg { font-size: 22px; margin: 0 0 4px; color: #15803d; }
.ps-done__sub { font-size: 14px; color: #6b7280; margin: 0 0 16px; }
.ps-done__preview {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px;
    text-align: center;
}
.ps-done__preview img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
/* the live canvas moved in from the editor */
.ps-done__preview .ps-brand-canvas-wrap {
    width: auto;
    max-width: 100%;
    height: min(52vh, 420px);
    margin: 0 auto;
    box-shadow: none;
}
.ps-done__preview:empty { display: none; }
.ps-done__btns { display: grid; gap: 8px; margin: 14px 0 4px; grid-template-columns: 1fr 1fr; }
.ps-done__btns > :first-child { grid-column: 1 / -1; }
@media (min-width: 560px) {
    .ps-done__btns { grid-template-columns: 1.2fr 1fr 1fr; }
    .ps-done__btns > :first-child { grid-column: auto; }
}
.ps-done__btns .btn, .ps-done__btns .ps-btn { width: 100%; justify-content: center; text-align: center; }

.ps-done__tips {
    background: #f9fafb;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 14px 18px;
    margin: 18px 0;
}
.ps-done__tips h2 { font-size: 15px; margin: 0 0 8px; color: #111827; }
.ps-done__tips ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.9; color: #4b5563; }
.ps-done__more h2 { font-size: 16px; margin: 22px 0 12px; color: #111827; }
.ps-done__more-link { text-align: center; margin-top: 16px; }

/* Ads inside the success view keep clear of the copy/download buttons */
.ps-done .ps-ad { margin-top: 24px; }
.ps-done .ps-ad--infeed .ps-ad__ins { width: 300px; height: 250px; }
@media (min-width: 360px) { .ps-done .ps-ad--infeed .ps-ad__ins { width: 336px; height: 280px; } }
@media (min-width: 760px) { .ps-done .ps-ad--infeed .ps-ad__ins { width: 728px; height: 90px; } }

/* A rail that came back empty at 300×600 retries at 300×250 (much higher fill) */
.ps-ad--rail.ps-ad--retry-sm .ps-ad__ins { width: 300px !important; height: 250px !important; }

/* End multiplex sitting below the pagination buttons — extra clearance above it
   so the buttons can never be mis-tapped into the ad. */
.ps-after-pagination { margin-top: 14px; }
.ps-after-pagination .ps-ad--multiplex { margin-top: 0; }