/* Native Post/Story single view. Scoped to the editorial surface only. */

.breganja-story {
	--breganja-story-gutter: clamp(20px, 4vw, 64px);
	box-sizing: border-box;
	margin-block-start: 0;
	padding-block: clamp(72px, 9vw, 128px) clamp(96px, 11vw, 160px);
	background: var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.breganja-story__header {
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--breganja-story-gutter))), 830px);
	max-width: none;
	margin-inline: auto;
}

.breganja-story__date {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--breganja-red);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.breganja-story__title {
	max-width: 15ch;
	margin: 0;
	font-size: clamp(3.125rem, 4vw, 3.75rem);
	letter-spacing: -0.055em;
	line-height: 0.94;
}

.breganja-story > .breganja-story__content {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-block-start: clamp(40px, 5vw, 64px);
	padding: 0;
}

.breganja-story__content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull)) {
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--breganja-story-gutter))), 830px);
	max-width: none;
	margin-inline: auto;
}

.breganja-story__content.is-layout-constrained > .alignwide {
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--breganja-story-gutter))), var(--wp--style--global--wide-size, 1320px));
	max-width: none;
	margin-inline: auto;
}

.breganja-story__content.is-layout-constrained > .alignfull {
	width: 100%;
	max-width: none;
}

.breganja-story__content > :first-child {
	margin-block-start: 0;
}

.breganja-story__content :is(p, li) {
	line-height: 1.72;
}

.breganja-story__content blockquote {
	border-inline-start: 3px solid var(--wp--preset--color--breganja-red);
	margin-block: clamp(32px, 5vw, 56px);
	padding-inline-start: clamp(20px, 3vw, 32px);
}

.breganja-story__content .wp-block-gallery {
	margin-block: clamp(48px, 7vw, 88px);
}

.breganja-story__content > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) {
	margin-block: clamp(36px, 5vw, 60px);
}

.breganja-story__content > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) img,
.breganja-story__content .wp-block-column > .wp-block-image img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

.breganja-story__content .wp-block-image figcaption {
	margin-block-start: 10px;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	text-align: center;
}

.breganja-story__content .breganja-story-image-pair {
	gap: clamp(16px, 2vw, 24px);
	margin-block: clamp(36px, 5vw, 60px);
}

.breganja-story__content .breganja-story-image-pair > .wp-block-column {
	min-width: 0;
}

.breganja-story__content .breganja-story-image-pair .wp-block-image {
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--mist);
}

.breganja-story__content .breganja-story-image-pair .wp-block-image > img {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: auto;
	max-width: none;
	min-width: 0;
	height: 100%;
	min-height: 0;
	margin: 0;
	transform: translate(-50%, -50%);
}

.breganja-story__content .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

.breganja-story__content .wp-block-table table {
	width: 100%;
}

.breganja-story__content :is(img, video, iframe, object) {
	max-width: 100%;
}

@media (max-width: 781px) {
	.breganja-story {
		padding-block: 64px 104px;
	}

	.breganja-story__title {
		font-size: clamp(2.25rem, 10vw, 3.25rem);
		line-height: 0.98;
	}

	.breganja-story__content :is(.alignleft, .alignright) {
		float: none;
		width: min(calc(100% - (2 * var(--breganja-story-gutter))), var(--wp--style--global--content-size, 760px));
		margin-inline: auto;
	}
}

@media (min-width: 782px) {
	.breganja-story {
		padding-block-start: clamp(64px, 6vw, 96px);
	}
}