/* Layout helpers for use inside Ghost posts and pages.
   Drop one of these wrappers into an HTML card in the Koenig editor.
   Children flow into equal columns; on narrow screens they stack. */

.lc-cols-2,
.lc-cols-3,
.lc-cols-4 {
    display: grid;
    gap: 2.4rem;
    margin: 2.4rem 0;
    text-align: left;  /* reset any inherited center-align (e.g. inside home-welcome strip) */
}

.lc-cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lc-cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lc-cols-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Each direct child is a column. min-width: 0 prevents long words from
   forcing the grid wider than the container. */
.lc-cols-2 > *,
.lc-cols-3 > *,
.lc-cols-4 > * {
    min-width: 0;
}

/* Trim the first/last child's vertical margin so column tops and bottoms
   line up cleanly regardless of which heading or paragraph they start with. */
.lc-cols-2 > * > :first-child,
.lc-cols-3 > * > :first-child,
.lc-cols-4 > * > :first-child { margin-top: 0; }

.lc-cols-2 > * > :last-child,
.lc-cols-3 > * > :last-child,
.lc-cols-4 > * > :last-child { margin-bottom: 0; }

/* Embedded maps (Google Maps / OpenStreetMap iframes).
   Wrap the iframe in <div class="lc-map">…</div> so it's responsive
   and matches the rest of the post styling. */
.lc-map {
    margin: 2rem 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dde1e3;
}
.lc-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}