/* ─────────────────────────────────────────────────────────────
   SNAPSMACK — Multi-Column Layout
   Shortcode: [columns=N] ... [col] ... [/columns]
   ───────────────────────────────────────────────────────────── */

/*
 * SNAPSMACK_EOF_HEADER
 * Last non-empty line of this file MUST be the canonical CSS EOF
 * marker: slash-star, space, five equals, space, the literal string
 * 'SNAPSMACK EOF', space, five equals, space, star-slash.
 * (Authoritative byte sequence: tools/check-eof.py EOF_MARKERS['.css'].)
 * Missing or different = truncated/corrupted. Restore before saving.
 */




.snapsmack-columns {
    display: grid;
    gap: 28px;
    margin: 24px 0;
    align-items: start;
}

.snapsmack-columns.cols-2 { grid-template-columns: 1fr 1fr; }
.snapsmack-columns.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.snapsmack-columns.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.snapsmack-col {
    min-width: 0;          /* prevent grid blowout from wide images */
}

.snapsmack-col img {
    max-width: 100%;
    height: auto;
}

.snapsmack-col p:first-child { margin-top: 0; }
.snapsmack-col p:last-child  { margin-bottom: 0; }

/* Image frames carry their own 1.5em top+bottom margin. Inside a grid cell
   that doubles up into dead space above/below the image, opening a gap under
   side-by-side images. Collapse the outer edges so the frame sits flush to
   the cell (matches the p:first/last-child rule above). */
.snapsmack-col .snap-inline-frame:first-child { margin-top: 0; }
.snapsmack-col .snap-inline-frame:last-child  { margin-bottom: 0; }

/* The [columns] parser can leave a stray <br> — one promoted to a direct grid
   cell (a phantom second row) and one trailing inside a column after the image
   frame. Either inflates a cell and forces a tall grid row, opening a big empty
   band under side-by-side images (the margin rules above can't catch it because
   the stray <br> stops the frame from being :last-child). Drop the strays so the
   row is sized by the images alone. Root cause is in parseColumns; this is the
   layout-side guard. */
.snapsmack-columns > br,
.snapsmack-col > br { display: none; }
.snapsmack-columns > p:empty,
.snapsmack-col > p:empty { display: none; }

/* ─── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .snapsmack-columns.cols-3,
    .snapsmack-columns.cols-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {
    .snapsmack-columns {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}
/* ===== SNAPSMACK EOF ===== */