/* Printable view of the gazette. Pages are exact A5 sheets (148 x 210 mm) and the blocks
   are already sized in millimetres, so screen and paper share the same geometry: what the
   preview shows is what the printer puts out. */

@page {
    size: A5 portrait;
    margin: 0;
}

.gazette-print-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
}

.gazette-print-sheets {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8mm;
    padding: 8mm 0;
    background: #f4f6fa;
}

.gazette-print-page {
    position: relative;
    width: var(--gazette-sheet-width);
    height: var(--gazette-sheet-height);
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 6px rgba(0, 0, 0, .15);
    break-inside: avoid;
    break-before: page;
    page-break-before: always;
}

/* The break opens a sheet instead of closing it: sheets are not the last thing in the
   container — the screen-only actions follow each of them — and a trailing break-after
   would print an empty page at the end of the batch. */
.gazette-print-sheets > .gazette-print-page:first-child {
    break-before: auto;
    page-break-before: auto;
}

/* Single entry: the sheet hugs the block, whose size comes from the allocated format. */
.gazette-print-page-fit {
    width: auto;
    height: auto;
}

/* The grid is inset in the sheet, as in the printed template: the blocks never touch the
   page edge, and the gutters between them are part of the design.

   Taken out of the flow so it opens at the same height on every sheet. The section heading
   hangs in the top margin above it and must not push it down, and a sheet carrying no
   heading — a continuation page, a page of inserts — must not pull it up to the edge. What
   is left between the two margins is 177mm: one full page, or two halves and their gutter. */
.gazette-print-blocks {
    position: absolute;
    top: var(--gazette-margin-top);
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--gazette-gutter-y) var(--gazette-gutter-x);
    padding: 0 var(--gazette-margin-x) var(--gazette-margin-bottom);
}

/* Two sector sections on one sheet: the second heading has to be paid for out of a grid that
   is exactly two rows and their gutter, so the grid opens 6mm higher and the foot keeps 8mm
   instead of 12. The band is a full width flex item, which wraps the second row under it.

   The margins have to give back exactly what the band takes, or the grid box ends past the
   sheet: invisible on screen, where the overflow is padding and the sheet clips it, and cut
   by the pagination on paper. */
.gazette-print-page-paired .gazette-print-blocks {
    top: var(--gazette-paired-margin-top, 15mm);
    padding-bottom: var(--gazette-paired-margin-bottom, 8mm);
}

.gazette-print-subheading {
    /* Wide enough to reach both edges of the sheet, negative side margins included, so the
       band bleeds off the paper exactly like the one hanging in the top margin. */
    flex: 0 0 calc(100% + 2 * var(--gazette-margin-x, 12.5mm));
    display: flex;
    /* Held down against the encart it announces, with the slack left above it: what the band
       is read as belonging to is what sits under it. Whatever the type metrics do to the band
       itself is absorbed by the gap above, so the small gap below stays exactly what it says. */
    align-items: flex-end;
    /* Border box on purpose: the height quoted here is the whole slot the sheet arithmetic
       counts on, gap included, not the room left above the gap. */
    box-sizing: border-box;
    padding-bottom: var(--gazette-paired-heading-gap, 1.2mm);
    height: var(--gazette-paired-heading, 13.4mm);
    /* The row gaps of the grid would be counted above and below the band as well, and the
       three millimetres it was given back would be spent twice over. */
    margin: calc(-1 * var(--gazette-gutter-y, 3.4mm)) calc(-1 * var(--gazette-margin-x, 12.5mm));
}

.gazette-print-subheading > .gazette-print-heading-title {
    min-width: 40%;
    padding: 1.4mm 8mm 1.4mm 6.3mm;
    background: var(--gazette-section-color, #6c757d);
    color: #fff;
    font-family: 'Poppins', 'Montserrat', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Same side as the section tab above it: the two bands of a shared sheet follow the page
   parity together, which is what the organiser reads as one part continuing. */
.gazette-print-page-odd .gazette-print-subheading {
    justify-content: flex-end;
}

.gazette-print-page-odd .gazette-print-subheading > .gazette-print-heading-title {
    padding: 1.4mm 6.3mm 1.4mm 8mm;
    text-align: right;
}

/* A single entry is printed on a sheet cut to the block: no page grid, so no margins and
   nothing to align with. */
.gazette-print-page-fit .gazette-print-blocks {
    position: static;
    padding: 0;
}

.gazette-print-insert {
    box-sizing: border-box;
    border: .7mm solid #d5d5d5;
    box-shadow: 0 .4mm 1mm rgba(0, 0, 0, .18);
}

/* An insert is dropped in as-is: the visual is the artwork, sized by its format exactly
   like an entry, so a page mixing the two keeps its grid. */
.gazette-print-insert-slot {
    position: relative;
    flex: 0 0 auto;
    width: var(--gazette-slot-width);
    height: var(--gazette-slot-height);
}

.gazette-print-insert {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gazette-print-insert-remove {
    position: absolute;
    top: 1.5mm;
    right: 1.5mm;
    width: 6mm;
    height: 6mm;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 3mm;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease-in-out;
}

.gazette-print-insert-slot:hover .gazette-print-insert-remove {
    opacity: 1;
}

/* A free quarter is a box of the montage, not a decoration, and keeps its room in every
   medium. The blocks are laid out by a wrapping flex row rather than a grid of fixed cells,
   so a slot that disappears at print pulls every block after it back by a quarter and rewraps
   the whole sheet — which is why what came out did not match what the organiser assembled. */
.gazette-print-free-slot {
    width: var(--gazette-slot-width);
    height: var(--gazette-slot-height);
}

/* A quarter alone on its row is centred by half a slot and its gutter. Paid for by a negative
   margin on the other side, so the row still measures what it did: the empty quarter keeps its
   place in the flow and nothing after it re-wraps. The block is drawn over the left half of
   that empty quarter, which shows nothing anyway. */
.gazette-print-centered {
    position: relative;
    z-index: 1;
    margin-left: calc((var(--gazette-slot-width) + var(--gazette-gutter-x)) / 2);
    margin-right: calc(-1 * (var(--gazette-slot-width) + var(--gazette-gutter-x)) / 2);
}

/* What is left of that quarter once the block sits over it: the affordance moves to the strip
   still in view, so adding a second quarter stays one click away. */
.gazette-print-free-slot-shifted .gazette-print-free {
    margin-left: calc((var(--gazette-slot-width) + var(--gazette-gutter-x)) / 2);
    width: calc(100% - (var(--gazette-slot-width) + var(--gazette-gutter-x)) / 2);
}

/* Screen-only affordance over what the section leaves empty. */
.gazette-print-free {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2mm;
    border: 1px dashed #adb5bd;
    background: #fbfcfe;
    color: #868e96;
    font-size: 3.2mm;
    cursor: pointer;
}

.gazette-print-free:hover {
    border-color: #206bc4;
    background: #eef4fb;
    color: #206bc4;
}

/* Sits between two sheets rather than inside one: the sheet is a fixed box that clips
   whatever the blocks leave no room for. */
.gazette-print-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 2mm;
    width: var(--gazette-sheet-width);
    margin-top: -4mm;
}

.gazette-print-page-action {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2mm;
    padding: 2.4mm;
    border: 1px dashed #adb5bd;
    border-radius: 2px;
    background: #fbfcfe;
    color: #868e96;
    font-size: 3.2mm;
    cursor: pointer;
}

.gazette-print-page-action:hover {
    border-color: #206bc4;
    background: #eef4fb;
    color: #206bc4;
}

.gazette-print-clear-page:hover {
    border-color: #d63939;
    background: #fbeeee;
    color: #d63939;
}

/* The section tab: a band hanging off the outer edge of the sheet, so it alternates side
   with the page parity the way it does in the printed template. */
.gazette-print-heading {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 40%;
    margin: 6mm 0 4mm;
    padding: 1.6mm 8mm 1.6mm 6.3mm;
    background: var(--gazette-section-color, #6c757d);
    color: #fff;
    font-family: 'Poppins', 'Montserrat', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.gazette-print-page-odd .gazette-print-heading {
    align-self: flex-end;
    padding: 1.6mm 6.3mm 1.6mm 8mm;
    text-align: right;
}

.gazette-print-heading-title {
    font-size: 4.2mm;
    font-weight: 700;
    font-style: italic;
    line-height: 1.1;
    letter-spacing: .2mm;
    text-transform: uppercase;
}

/* Squares bleeding off the edge, in the section colour: they mark the part a reader is in
   while flicking through the gazette. */
.gazette-print-corner {
    position: absolute;
    width: 5mm;
    height: 5mm;
    background: var(--gazette-section-color, #6c757d);
}

.gazette-print-corner-top {
    top: 0;
    right: 0;
}

.gazette-print-corner-middle {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
}

.gazette-print-corner-bottom {
    bottom: 0;
    right: 0;
}

.gazette-print-page-odd .gazette-print-corner-top,
.gazette-print-page-odd .gazette-print-corner-bottom {
    right: auto;
    left: 0;
}

.gazette-print-page-odd .gazette-print-corner-middle {
    left: auto;
    right: 0;
    transform: translate(50%, -50%);
}

.gazette-print-number {
    position: absolute;
    bottom: 3mm;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Poppins', 'Montserrat', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 3.6mm;
    font-weight: 700;
    color: var(--gazette-section-color, #6c757d);
}

.gazette-print-number::before {
    content: "|";
    margin-right: .6mm;
}

/* A section made only of full pages has no room for its heading: the heading then takes
   the page for itself, as a part divider. */
.gazette-print-page-divider .gazette-print-heading {
    flex: 1 1 auto;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.gazette-print-page-divider .gazette-print-heading-title {
    font-size: 9mm;
}

.gazette-print-page,
.gazette-print-page * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

@media print {
    html, body {
        background: #fff;
    }

    .gazette-print-sheets {
        display: block;
        gap: 0;
        padding: 0;
        background: #fff;
    }

    /* The sheet takes its size from the page box instead of restating the same millimetres.
       Chrome does not round the two the same way — on a quarter page the page box comes out
       half a pixel narrower than 60.5mm — and the sheet then overflows by that fraction,
       which the printer shaves off the right of the coloured frame.

       Whichever way it rounds, the sheet is painted on whole pixels and the last fraction of a
       millimetre of the page is left to the ground underneath: the single entry view paints
       that ground in the colour of the frame, so it does not read as a white edge. */
    .gazette-print-page {
        box-shadow: none;
        margin: 0;
        width: 100vw;
        height: 100vh;
    }

    /* The grid keeps the millimetres it was drawn in instead of deriving them from the page
       box the sheet above now follows. Two quarters and their gutter measure 60.5 + 2 + 60.5,
       which is exactly the 123mm between the margins: there is no slack at all, so the page
       box coming out a fraction narrower than the sheet — the same rounding the comment above
       describes — is enough for the second quarter of a row to no longer fit. It wraps, every
       row after it re-lays, and the sheet clips what no longer has room. Hence a montage that
       is right on screen and shifted on paper.

       Kept away from the single entry view, whose grid is static and hugs its own block. */
    .gazette-print-page:not(.gazette-print-page-fit) .gazette-print-blocks {
        left: var(--gazette-margin-x);
        right: auto;
        width: calc(var(--gazette-sheet-width) - 2 * var(--gazette-margin-x));
        padding-left: 0;
        padding-right: 0;
    }

    /* Three classes deep on purpose: the size the slot gets from its component stylesheet is
       written .gazette-slot[b-xxxxx], which scores the same as a two-class selector and is
       linked after this file — a shorter selector here would lose the tie and never apply. */
    .gazette-print-page-fit .gazette-print-blocks .gazette-slot {
        width: 100vw;
        height: 100vh;
    }
}