/* Layout: the container and the page skeleton.
   Breakpoints (the only ones allowed): 576 · 768 · 992 · 1200. */

/* The container grows with the window up to the wide width (theme.json wideSize, 1140px) plus a side
   margin on each side; the margin is smaller on phones. */
@media (max-width: 575.98px) { :root { --lbs-gutter: var(--lbs-gutter-compact); } }
.lbs-container {
	width: 100%;
	max-width: calc(var(--lbs-wide) + 2 * var(--lbs-gutter));
	margin-inline: auto;
	padding-inline: var(--lbs-gutter);
}

/* The container's content width, for layouts that are not inside a .lbs-container but must line up
   with the header (the full-width template, the signature picture). "100%" is the width of whatever
   uses it, so it works anywhere that spans the screen. */
:root { --lbs-container-inner: min(var(--lbs-wide), 100% - 2 * var(--lbs-gutter)); }

/* Sticky footer: short pages still push the red bar to the bottom of the window. */
body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
.lbs-main { flex: 1 0 auto; padding-block: var(--lbs-space-7) 0; }
.lbs-footer { flex-shrink: 0; }
@media (max-width: 767.98px) { .lbs-main { padding-top: var(--lbs-space-5); } }

/* Full-width mains (Elementor's page templates, the theme's own full-width template): no padding,
   the page body decides everything. */
.lbs-main--full { padding-block: 0; }

.lbs-page-header { margin-bottom: var(--lbs-space-6); }
.lbs-page-title { margin-bottom: var(--lbs-space-5); }

/* The reading column. Width is set per child rather than on a wrapper, so that wide and full
   blocks (and Elementor's single root element) can use the whole container. lbs-core's feature band
   (a shortcode in a block page, as on hallgrimurpetursson.is) reaches the screen edges by itself. */
.entry-content > :where(:not(.alignwide, .alignfull, .alignleft, .alignright, .elementor, .lbs-feature-band)),
.lbs-entry__header,
.lbs-entry__thumbnail,
.lbs-entry__footer {
	max-width: var(--lbs-content);
	margin-inline: auto;
}
/* "Wide title" in the LBS layout box: the title spans the wide width, like a wide block. */
.lbs-entry--wide-title > .lbs-entry__header { max-width: var(--lbs-wide); }
/* Floated items start at the edge of the reading column, not of the wide container, so the text
   beside them wraps. That margin is measured from the container's edge only when nothing stands
   beside the item: a second narrow picture on the same side that fits next to the first would get
   it from the first and land outside the column (often on the far side). So each starts below the
   one before it on its side (the clear); a left and a right picture still stand level. Also covers
   the full-width template (.entry-content.lbs-full) below. */
.entry-content > .alignleft { margin-left: max(0px, calc((100% - var(--lbs-content)) / 2)); clear: left; }
.entry-content > .alignright { margin-right: max(0px, calc((100% - var(--lbs-content)) / 2)); clear: right; }
/* Rows of tiles, book tiles, banners, cards and posts are laid out across the whole container, like wide blocks. */
.entry-content > :is(.lbs-tiles, .lbs-tile-wide, .lbs-books, .lbs-banners, .lbs-card-list, .lbs-post-list) { max-width: var(--lbs-wide); }
.entry-content > .alignwide { max-width: var(--lbs-wide); margin-inline: auto; }
/* The full-width template has no container around the page body, so its blocks are held to the
   header's content width themselves and line up with the logo at every breakpoint, as in the normal
   template (full-width blocks and Elementor's root still reach the edges). */
.lbs-full > :where(:not(.alignwide, .alignfull, .alignleft, .alignright, .elementor, .lbs-feature-band)) { max-width: min(var(--lbs-content), var(--lbs-container-inner)); }
.lbs-full > :is(.alignwide, .lbs-tiles, .lbs-tile-wide, .lbs-books, .lbs-banners, .lbs-card-list, .lbs-post-list) { max-width: min(var(--lbs-wide), var(--lbs-container-inner)); }
.lbs-full > .alignleft { margin-left: max(0px, calc((100% - min(var(--lbs-content), var(--lbs-container-inner))) / 2)); }
.lbs-full > .alignright { margin-right: max(0px, calc((100% - min(var(--lbs-content), var(--lbs-container-inner))) / 2)); }
/* The feature band in a page body (Elementor places it with its own spacing): clear of the blocks above
   and below (blocks space themselves with bottom margins; the footer has its own space above it). */
.entry-content > .lbs-feature-band { margin-top: var(--lbs-space-8); }
.entry-content > .lbs-feature-band:not(:last-child) { margin-bottom: var(--lbs-space-8); }
.entry-content > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}
/* 100vw includes a classic scrollbar (Windows, most Linux desktops), so an element breaking out to the
   screen edges is a few pixels wider than the page and would make it scroll sideways. Clip that on
   pages that have one; "clip" (not "hidden") leaves sticky elements working. */
html:has(.alignfull, .lbs-signature, .lbs-feature-band) { overflow-x: clip; }

/* Section menu beside the content: a sticky column at 992px and up, the tree above the content
   (as a closed disclosure) below it. The reading-column rules above keep working inside the main
   column unchanged. */
.lbs-with-section-menu__main { min-width: 0; }
/* Beside the section menu (992px and up) the main column is not centred on the screen, so the band's
   breakout (100vw from the column's middle) would sit off-centre: there it spans the main column (Fable). */
@media (min-width: 992px) {
	.lbs-with-section-menu__main .entry-content > .lbs-feature-band { width: auto; margin-inline: 0; }
}
@media (min-width: 992px) {
	.lbs-with-section-menu {
		display: grid;
		grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
		gap: var(--lbs-space-6);
		align-items: start;
	}
}