/**
 * Blog, detail — one section of the design.
 *
 * The article down the left and the card that hands it on down the right.
 */

.custom-blog-detail {
	display: flex;
	align-items: flex-start;
	/* The file draws the article 880 and the card 48 from it across the 1248
	   inside the band; each is held as its share, so a band narrower than
	   1440 still holds both. */
	gap: 3.846%;
	width: 100%;
	/* The band runs the full width; what stands in it stops at the 1248 the
	   file draws inside 1440, and centres there. */
	padding: 96px calc( 96px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
}

.custom-blog-detail__article {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 0 70.513%;
	max-width: none;
	min-width: 0;
}

/* Every block carries its own space, so what is between two of them is what
   the two of them came to rather than a gap set once for all of them. */
.custom-blog-detail__block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: 24px 0;
	box-sizing: border-box;
}

.custom-blog-detail__said {
	margin: 0;
	width: 100%;
	overflow-wrap: anywhere;
}

.custom-blog-detail__shown {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 880 / 320;
	overflow: hidden;
}

.custom-blog-detail__shown img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The card that hands the article on. */
.custom-blog-detail__share {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	flex: 1 1 0;
	min-width: 0;
	padding: 24px;
	border-radius: 24px;
	box-sizing: border-box;
}

.custom-blog-detail__share-title {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 10px 0;
	box-sizing: border-box;
}

.custom-blog-detail__share-heading {
	text-transform: uppercase;
}

.custom-blog-detail__marks {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
}

.custom-blog-detail__mark,
.custom-blog-detail__mark:hover,
.custom-blog-detail__mark:focus,
.custom-blog-detail__mark:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 36px;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 300ms ease-in-out;
}

.custom-blog-detail__mark:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.custom-blog-detail__mark:hover {
	opacity: 0.7;
}

.custom-blog-detail__mark svg {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* The file draws X's mark a little smaller than the others (11314:7209). */
.custom-blog-detail__mark--twitter svg {
	width: 14px;
	height: 14px;
}

/* Copied, the mark says so for a moment without saying anything. */
.custom-blog-detail__mark.is-copied {
	opacity: 0.5;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-blog-detail__mark {
		transition: none;
	}
}

/* Tablet and mobile — the file draws one of them (11205:2920): the article
   269 across and the card that hands it on 55 across at the right edge, 32
   apart, in a band padded 38 and 16. Held as shares of the 356 the two take.
   The tablet, which the file does not draw, keeps the card at the wide
   tier's marks. */
@media ( max-width: 1024px ) {
	.custom-blog-detail {
		gap: 9%;
		padding: 38px 16px;
	}

	.custom-blog-detail__article {
		flex: 0 0 75.56%;
		max-width: none;
	}

	.custom-blog-detail__block {
		padding: 4px 0;
	}

	.custom-blog-detail__shown {
		aspect-ratio: 269 / 142;
		margin: 7px 0;
	}

	.custom-blog-detail__share {
		flex: 0 0 15.35%;
		gap: 4px;
		padding: 10px 5px;
		border-radius: 5px;
	}

	.custom-blog-detail__share-title {
		justify-content: center;
		padding: 2px 0;
		text-align: center;
	}

	.custom-blog-detail__marks {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
	}

	.custom-blog-detail__mark,
	.custom-blog-detail__mark:hover,
	.custom-blog-detail__mark:focus,
	.custom-blog-detail__mark:active {
		width: 16px;
		height: 16px;
	}

	.custom-blog-detail__mark svg {
		width: 8px;
		height: 8px;
	}

	.custom-blog-detail__mark--twitter svg {
		width: 7px;
		height: 7px;
	}
}

/* Tablet — not drawn. Each block of the article is given more of the room
   around it than the phone keeps, short of the wide tier's 24 above and
   below. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-blog-detail__block {
		padding: 12px 0;
	}

	.custom-blog-detail__shown {
		margin: 12px 0;
	}

	.custom-blog-detail__share {
		flex: 0 0 96px;
		gap: 12px;
		padding: 16px 8px;
		border-radius: 12px;
	}

	.custom-blog-detail__marks {
		gap: 16px;
	}

	.custom-blog-detail__mark,
	.custom-blog-detail__mark:hover,
	.custom-blog-detail__mark:focus,
	.custom-blog-detail__mark:active {
		width: 32px;
		height: 32px;
	}

	.custom-blog-detail__mark svg {
		width: 16px;
		height: 16px;
	}

	.custom-blog-detail__mark--twitter svg {
		width: 14px;
		height: 14px;
	}
}