/*
 * Breakpoint theme: responsive layout layer.
 *
 * Loaded after main.css (see functions.php). Layout only: container widths,
 * gutters, the article text measure and figure break-outs. Fonts, colours
 * and component styling stay in main.css.
 *
 * Breakpoints
 *   phone         <= 640px   single column, 20px gutters
 *   tablet        641-1024px 32px gutters
 *   desktop       1025-1439px containers to 1200px
 *   wide desktop  >= 1440px  containers to 1400px
 *
 * Tune the widths through the custom properties below.
 */

:root {
	/* Side gutter inside every container. */
	--bp-gutter: 1.25rem;
	/* Widest container: header, footer, blog grid, front-page sections and
	   the article shell (figures break out to this width). */
	--bp-site-max: 100%;
	/* Reading measure for article text (about 75-80 characters at 18px). */
	--bp-text-max: 48.75rem; /* 780px */
	/* Single post cover image: wider than the text, but capped so it does
	   not turn into a full-height banner on very wide screens. */
	--bp-cover-max: 1200px;
}

@media (min-width: 641px) {
	:root {
		--bp-gutter: 2rem;
	}
}

@media (min-width: 1025px) {
	:root {
		--bp-gutter: 2.5rem;
		--bp-site-max: 1200px;
	}
}

@media (min-width: 1440px) {
	:root {
		--bp-site-max: 1400px;
	}
}

/* Allow alignfull elements to reach the viewport edge without a horizontal
   scrollbar. */
body {
	overflow-x: clip;
}

/* ----- Containers ----- */

/* Site-width container. Replaces "mx-auto max-w-7xl px-6" and
   "mx-auto max-w-3xl px-6" in the templates. Note: the max-width includes
   the gutters, so the content box is --bp-site-max minus 2 gutters. */
.bp-container {
	width: 100%;
	max-width: var(--bp-site-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bp-gutter);
	padding-right: var(--bp-gutter);
}

/* Reading-width block centred inside a container (byline, back link,
   contact card). */
.bp-text {
	max-width: var(--bp-text-max);
	margin-left: auto;
	margin-right: auto;
}

/* ----- Article body ----- */

/* Every direct child of the article body sits in the reading measure;
   figures, images, tables and WordPress wide/full blocks break out. */
.bp-prose > * {
	max-width: var(--bp-text-max);
	margin-left: auto;
	margin-right: auto;
}

/* Base-size prose (privacy, terms, generic pages) reads best a touch
   narrower than the 18px blog body. */
.bp-prose-base {
	--bp-text-max: 46rem; /* 736px */
}

/* Break out to the container width (WordPress "alignwide"). */
.bp-prose > figure,
.bp-prose > img,
.bp-prose > picture,
.bp-prose > video,
.bp-prose > iframe,
.bp-prose > .wp-block-image,
.bp-prose > .wp-block-gallery,
.bp-prose > .wp-block-embed,
.bp-prose > .wp-block-video,
.bp-prose > .wp-block-table,
.bp-prose > .wp-block-columns,
.bp-prose > .wp-block-cover,
.bp-prose > .alignwide,
.bp-prose > blockquote:has(img) {
	max-width: none;
	width: 100%;
}

/* Tables: at least the reading measure, grow to fit their content, never
   wider than the container. Wrapped tables scroll on narrow screens. */
.bp-prose > table,
.bp-prose > .wp-block-table {
	max-width: 100%;
	width: auto;
	min-width: min(100%, var(--bp-text-max));
}

.bp-prose > .wp-block-table {
	overflow-x: auto;
}

.bp-prose > .wp-block-table > table {
	width: 100%;
}

/* Images inside a broken-out figure scale to the container but never past
   their natural size; centre them when they are smaller. */
.bp-prose figure > img,
.bp-prose figure > picture,
.bp-prose figure > a > img,
.bp-prose > img,
.bp-prose blockquote > img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.bp-prose figure > figcaption {
	text-align: center;
}

/* Full-bleed blocks (WordPress "alignfull"): span the viewport. */
.bp-prose > .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Left/right floated images from the classic editor stay inside the
   measure on phones. */
@media (max-width: 640px) {
	.bp-prose .alignleft,
	.bp-prose .alignright {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Responsive embeds (WordPress adds this wrapper when
   responsive-embeds is supported). */
.wp-has-aspect-ratio iframe {
	width: 100%;
	height: 100%;
}

/* ----- Single post cover ----- */
.bp-cover {
	width: 100%;
	max-width: var(--bp-cover-max);
	margin-left: auto;
	margin-right: auto;
}