/*
 * Blocks 26
 * Stacked content blocks. Each block: fixed-width thumbnail on the left,
 * text column (title, subtitle, content, link button) filling the rest.
 * Stacks vertically on narrow screens.
 *
 * The thumbnail width is set once, here, so it is easy to change:
 */
.blocks26 {
	--blocks26-thumb-width: 220px;
	--blocks26-gap: 25px;
	position: relative;
}

.blocks26__items {
	display: block;
}

/* ----- Individual block ---------------------------------------------------- */
.blocks26__item {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: var(--blocks26-gap);
	margin-bottom: 35px;
	padding-bottom: 35px;
	border-bottom: 1px solid #eee;
}

.blocks26__item:last-child {
	border-bottom: 0 none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* ----- Thumbnail ----------------------------------------------------------- */
.blocks26__image {
	flex: 0 0 var(--blocks26-thumb-width);
	max-width: var(--blocks26-thumb-width);
}

.blocks26__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ----- Text column --------------------------------------------------------- */
.blocks26__content {
	flex: 1 1 auto;
	min-width: 0; /* lets long words wrap instead of forcing the column wide */
}

/* Title + subtitle on the left, link button on the right. */
.blocks26__heading {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 10px;
}

.blocks26__heading-text {
	flex: 1 1 auto;
	min-width: 0;
}

.blocks26__item-title {
	margin: 0 0 4px;
}

.blocks26__subtitle {
	margin: 0;
}

.blocks26__subtitle:empty {
	display: none;
}

/* ----- Link button --------------------------------------------------------- */
.blocks26__link {
	flex: 0 0 auto;
}

.blocks26__link:empty {
	display: none;
}

.blocks26__button {
	display: inline-block;
	padding: 10px 18px;
	background-color: #337ab7;
	border: 1px solid #2e6da4;
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 150ms ease;
}

.blocks26__button:hover,
.blocks26__button:focus {
	background-color: #286090;
	border-color: #204d74;
	color: #fff;
	text-decoration: none;
}

/* ----- Body content -------------------------------------------------------- */
.blocks26__body > *:first-child {
	margin-top: 0;
}

.blocks26__body > *:last-child {
	margin-bottom: 0;
}

/* ----- Admin links --------------------------------------------------------- */
.blocks26 .modulelinks {
	display: block;
	margin-bottom: 10px;
}

.blocks26 .flexi-item-edit {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
}

/* ----- Narrow screens ------------------------------------------------------
   Stack the thumbnail above the text, and drop the link button below the
   title rather than squeezing it alongside. */
@media (max-width: 767px) {
	.blocks26__item {
		flex-flow: column nowrap;
	}

	.blocks26__image {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.blocks26__heading {
		flex-flow: column nowrap;
		gap: 10px;
	}

	.blocks26__link {
		flex: 0 0 auto;
	}
}