/* ── Reset ──────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Zine container ─────────────────────────────────────── */
.zine {
    display: grid;
    padding: 1mm;
    gap: 2mm;
}

/* ── Pages: fixed A6 grid (75mm × 105mm) ───────────────── */
/*    15 cols × 5mm = 75mm  |  21 rows × 5mm = 105mm       */
.zine__page {
    display: grid;
    grid-template-columns: repeat(15, 5mm);
    grid-template-rows: repeat(21, 5mm);
    width: 75mm;   /* explicit size keeps the grid from collapsing */
    height: 105mm;
    background-color: white;
    overflow: hidden; /* contain any oversized plugin output */
    position: relative;
}

/* ── Content wrapper spans the entire page grid ────────── */
/*    django CMS injects wrapper divs; this ensures they    */
/*    fill the page rather than collapsing to 0×0.          */
.zine__content {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    padding: 4mm;
    overflow: hidden;

    /* Let CMS plugin content flow normally inside */
    display: flex;
    flex-direction: column;
    gap: 2mm;
}

/* django CMS adds .cms-plugin wrappers  */
.zine__content .cms-plugin {
    display: contents; /* transparent in layout, children flow naturally */
}

/* ── Dark mode ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    body { background-color: #424242; }
}

/* ── Screen view: pages stacked vertically, centred ─────── */
@media screen {
    .zine {
        grid-template-areas: "p1" "p2" "p3" "p4" "p5" "p6" "p7" "p8";
        justify-items: center;
        gap: 2rem;
        margin: 2rem auto;
    }

    .zine::before {
        content: "This is a micro-zine 🗞️. Read it online, or 🖨️ print, ✂️ cut and 📃 fold it!";
        font-family: system-ui, sans-serif;
        padding: 1rem 2rem;
        line-height: 2rem;
        color: #828282;
        text-align: center;
    }

    .zine__page {
        border-radius: 2px;
        box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
    }
}

/* ── Print view: landscape, two rows of four pages ──────── */
@media print {
    @page { size: landscape; margin: 0; bleed: 0; }

    .zine {
        width: 100vw;
        height: 100vh;
        /* folding order: back-of-sheet top row is rotated 180° */
        grid-template-areas:
        "p5 p4 p3 p2"
        "p6 p7 p8 p1";
    }

    /* Assign pages to their print positions */
    .zine__page:nth-child(1) { grid-area: p1; }
    .zine__page:nth-child(2) { grid-area: p2; }
    .zine__page:nth-child(3) { grid-area: p3; }
    .zine__page:nth-child(4) { grid-area: p4; }
    .zine__page:nth-child(5) { grid-area: p5; }
    .zine__page:nth-child(6) { grid-area: p6; }
    .zine__page:nth-child(7) { grid-area: p7; }
    .zine__page:nth-child(8) { grid-area: p8; }

    /* Top row of the print sheet is read upside-down after folding */
    .zine__page:nth-child(2),
    .zine__page:nth-child(3),
    .zine__page:nth-child(4),
    .zine__page:nth-child(5) {
        transform: rotate(180deg);
    }
}