/**
 * Post content, including posts written in the classic editor
 * (images in paragraphs, [caption], [gallery], [video], [info]).
 */

.wp-block-post-content :where(img, video) {
	max-width: 100%;
	height: auto;
}

/* Lone images, captions, galleries and videos break out to the wide width. */
.wp-block-post-content > p:has(> img:only-child),
.wp-block-post-content > p:has(> a:only-child > img:only-child),
.wp-block-post-content > figure.aboa-lightbox,
.wp-block-post-content > .wp-caption,
.wp-block-post-content > .gallery,
.wp-block-post-content > .nice-gallery,
.wp-block-post-content > .wp-video,
.wp-block-post-content > p:has(> .wp-video) {
	max-width: var(--wp--style--global--wide-size);
}

.wp-block-post-content > p:has(> img:only-child) img,
.wp-block-post-content > p:has(> a:only-child > img:only-child) img,
.wp-block-post-content > figure.aboa-lightbox img,
.wp-block-post-content .wp-caption img {
	display: block;
	width: 100%;
	border-radius: var(--wp--preset--border-radius--medium);
}

.wp-block-post-content > p:empty {
	display: none;
}

.wp-block-post-content .wp-caption {
	margin-inline: auto;
}

.wp-block-post-content :is(.wp-caption-text, .gallery-caption, .nice-gallery-caption) {
	margin: 12px 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/*
 * Classic left/right aligned images: the old theme put the caption beside
 * the image. They now render like normal images (wide, caption below).
 * Core floats .alignleft/.alignright children; undo that here.
 */
.wp-block-post-content > .wp-caption:is(.alignleft, .alignright),
.wp-block-post-content p > img:is(.alignleft, .alignright) {
	float: none;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.wp-block-post-content p > img:is(.alignleft, .alignright) {
	display: block;
}

/*
 * [gallery], laid out like the old theme: uncropped photos in the gallery's
 * column count, with a rhythm of full-width photos (4th and 8th in
 * 3-column galleries, 3rd and 6th in 2-column ones). Photos in an
 * incomplete last row grow to fill it (flex-grow). Phones: one column.
 */
.wp-block-post-content .gallery {
	--aboa-gallery-columns: 1;
	--aboa-gallery-gap: 12px;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--aboa-gallery-gap);
}

@media (min-width: 600px) {

	.wp-block-post-content .gallery-columns-2 {
		--aboa-gallery-columns: 2;
	}

	.wp-block-post-content .gallery-columns-3 {
		--aboa-gallery-columns: 3;
	}

	.wp-block-post-content .gallery-columns-4 {
		--aboa-gallery-columns: 4;
	}

	.wp-block-post-content .gallery-columns-5 {
		--aboa-gallery-columns: 5;
	}

	.wp-block-post-content .gallery-columns-6 {
		--aboa-gallery-columns: 6;
	}

	.wp-block-post-content .gallery-columns-7 {
		--aboa-gallery-columns: 7;
	}

	.wp-block-post-content .gallery-columns-8 {
		--aboa-gallery-columns: 8;
	}

	.wp-block-post-content .gallery-columns-2 .gallery-item:is(:nth-child(3), :nth-child(6)),
	.wp-block-post-content .gallery-columns-3 .gallery-item:is(:nth-child(4), :nth-child(8)) {
		flex-basis: 100%;
	}
}

.wp-block-post-content .gallery-item {
	flex: 1 1 calc((100% - (var(--aboa-gallery-columns) - 1) * var(--aboa-gallery-gap)) / var(--aboa-gallery-columns) - 0.5px);
	min-width: 0;
	margin: 0;
}

.wp-block-post-content .gallery-icon img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--preset--border-radius--medium);
}

/* Videos inside [video-gallery] grids. */
.wp-block-post-content .gallery-item .wp-video {
	width: 100% !important;
}

/* Slideshow galleries (Nice Gallery plugin) as a CSS scroll-snap carousel. */
.wp-block-post-content .nice-gallery {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-color: var(--wp--preset--color--line-strong) transparent;
	padding-bottom: 12px;
}

.wp-block-post-content .nice-gallery:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}

.wp-block-post-content .nice-gallery-slide {
	flex: 0 0 auto;
	width: min(85%, 760px);
	scroll-snap-align: start;
}

.wp-block-post-content .nice-gallery-slide img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--preset--border-radius--medium);
}

/* [video] */
.wp-block-post-content .wp-video {
	width: 100% !important;
}

.wp-block-post-content .wp-video video {
	display: block;
	width: 100%;
	border-radius: var(--wp--preset--border-radius--medium);
}

/* [info] boxes from the legacy plugin. */
.wp-block-post-content .info-box {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: 20px 24px;
	box-sizing: border-box;
	border-radius: var(--wp--preset--border-radius--large);
	background: var(--wp--preset--color--paper-2);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-2);
}

.wp-block-post-content .info-box::before {
	content: "Info";
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xx-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
}

.wp-block-post-content .info-box + :is(p, br) {
	margin-top: var(--wp--style--block-gap);
}

/* Responsive embeds in classic content. */
.wp-block-post-content iframe {
	max-width: 100%;
}

/* Footnote-sized legacy index lists. */
.wp-block-post-content .index {
	padding: 16px 20px;
	border-radius: var(--wp--preset--border-radius--large);
	background: var(--wp--preset--color--paper-2);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
}

/* Headings that are links (e.g. region names on overview pages). */
.wp-block-post-content :is(h2, h3, h4) a {
	text-decoration: none;
}

.wp-block-post-content :is(h2, h3, h4) a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* [display-posts] listings as card grids (see inc/display-posts.php). */
.wp-block-post-content .aboa-tour-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: 36px 24px;
	max-width: var(--wp--style--global--wide-size);
	margin-block: 8px 40px;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--sans);
}

/*
 * Overview pages with card grids: headings and text align with the wide
 * grids; paragraphs keep a readable line length.
 */
.wp-block-post-content:has(> .aboa-tour-cards) > :not(.alignfull) {
	max-width: var(--wp--style--global--wide-size);
}

.wp-block-post-content:has(> .aboa-tour-cards) > p {
	box-sizing: border-box;
	padding-inline-end: max(0px, min(100%, var(--wp--style--global--wide-size)) - var(--wp--style--global--content-size));
}

.wp-block-post-content:has(> .aboa-tour-cards) > h2 {
	padding-top: 40px;
	border-top: 2px solid var(--wp--preset--color--ink);
	margin-top: 48px;
}

.aboa-tour-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.aboa-tour-card__media {
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--preset--color--paper-2);
}

.aboa-tour-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.aboa-tour-card:hover .aboa-tour-card__image {
	transform: scale(1.02);
}

.wp-block-post-content .aboa-tour-card__label {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wp-block-post-content .aboa-tour-card__title {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

.wp-block-post-content .aboa-tour-card__title a {
	text-decoration: none;
}

/* One link per card, stretched over the whole card. */
.aboa-tour-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.aboa-tour-card:hover .aboa-tour-card__title a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.aboa-tour-card:has(.aboa-tour-card__title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
	border-radius: var(--wp--preset--border-radius--medium);
}

.aboa-tour-card__title a:focus-visible {
	outline: none;
}

.wp-block-post-content .aboa-tour-card__facts {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xx-small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* Phones: compact rows with the image on the left. */
@media (max-width: 599px) {

	.wp-block-post-content .aboa-tour-cards {
		gap: 20px;
	}

	.aboa-tour-card {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		gap: 4px 14px;
	}

	.aboa-tour-card__media {
		grid-row: 1 / span 3;
		grid-column: 1;
		align-self: start;
	}

	.aboa-tour-card > :not(.aboa-tour-card__media) {
		grid-column: 2;
	}

	.wp-block-post-content .aboa-tour-card__label {
		margin-top: 0;
	}

	.wp-block-post-content .aboa-tour-card__title {
		font-size: var(--wp--preset--font-size--large);
	}
}

/* Embeds of own posts (inc/embeds.php): a horizontal link card. */
.wp-block-post-content .aboa-link-card {
	position: relative;
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	box-sizing: border-box;
	margin-block: 32px;
	padding: 12px 24px 12px 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--large);
	background: var(--wp--preset--color--paper-2);
	font-family: var(--wp--preset--font-family--sans);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wp-block-post-content .aboa-link-card:hover {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
}

.aboa-link-card:not(:has(.aboa-link-card__media)) {
	grid-template-columns: minmax(0, 1fr) auto;
	padding-left: 24px;
}

.aboa-link-card__media {
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--preset--color--line);
}

.aboa-link-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.aboa-link-card:hover .aboa-link-card__image {
	transform: scale(1.03);
}

.aboa-link-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-block: 8px;
}

.aboa-link-card__label {
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
}

.wp-block-post-content .aboa-link-card__title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: pretty;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

/* One link per card, stretched over the whole card. */
.aboa-link-card__title::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.aboa-link-card__title:focus-visible {
	outline: none;
}

.aboa-link-card:has(.aboa-link-card__title:focus-visible) {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}

.aboa-link-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-2);
}

.aboa-link-card__facts {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xx-small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.aboa-link-card__arrow {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.aboa-link-card:hover .aboa-link-card__arrow {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

/* Phones: compact row with a small thumbnail; no excerpt or arrow. */
@media (max-width: 599px) {

	.wp-block-post-content .aboa-link-card {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 14px;
		margin-block: 24px;
		padding: 10px 14px 10px 10px;
	}

	.aboa-link-card__body {
		gap: 4px;
		padding-block: 2px;
	}

	.aboa-link-card__excerpt,
	.aboa-link-card__arrow {
		display: none;
	}

	.aboa-link-card:not(:has(.aboa-link-card__media)) {
		grid-template-columns: minmax(0, 1fr);
		padding-left: 16px;
	}

	.wp-block-post-content .aboa-link-card__title {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.2;
	}
}

/*
 * Lightbox wrappers around classic images (inc/lightbox.php). Inside
 * captions, galleries and slideshows they must not add spacing.
 */
.wp-block-post-content figure.aboa-lightbox {
	margin-block: 0;
}

.wp-block-post-content :is(.wp-caption, .gallery-icon, .nice-gallery-slide) figure.aboa-lightbox {
	margin: 0;
	max-width: none;
}

/*
 * The enlarged image copies the wrapper's classes. Core only sizes it for
 * .wp-block-image, so mirror those rules; otherwise it shows at full size.
 */
.wp-lightbox-overlay figure.aboa-lightbox {
	position: relative;
	transform-origin: 0 0;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	z-index: 3000000;
	margin: 0;
}

.wp-lightbox-overlay figure.aboa-lightbox img {
	min-width: var(--wp--lightbox-image-width);
	min-height: var(--wp--lightbox-image-height);
	width: var(--wp--lightbox-image-width);
	height: var(--wp--lightbox-image-height);
}