/**
 * ACF block: Телеграм — 1 — dark promo card with image, text and a pink pill
 * button. The image is absolutely positioned so it can bleed past the card's
 * top/bottom edges regardless of the surrounding padding.
 * Mobile: image pinned to the top, poking 50px above the card. Desktop
 * (≥768): image pinned left, vertically centered, bleeding top/bottom.
 *
 * The block manages its own top/bottom margin (instead of the shared
 * entry-content rhythm) because it must reserve exactly as much space as the
 * image bleeds, so the bleed never overlaps the block above/below.
 */

.telegram-block-1 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	overflow: visible;
	margin: 70px 0 40px;
	padding: 182px 25px 20px;
	border-radius: var(--radius-md);
	background-color: #232323;
	color: var(--color-white);
	text-align: center;
}

.telegram-block-1__media {
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
}

/* .editor-styles-wrapper prefix beats the editor canvas's own ".editor-styles-wrapper img"
   rule (higher specificity), which otherwise overrides plain single-class rules
   like ".telegram-block-1__image" and makes the image render at its real size. */
.telegram-block-1__image,
.editor-styles-wrapper .telegram-block-1__image {
	display: block;
	width: auto;
	max-width: none;
	height: 217px;
}

.telegram-block-1__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.telegram-block-1__text {
	font-family: var(--font-family-display);
	font-size: 15px;
	font-weight: var(--font-weight-regular);
	line-height: 1.2;
	letter-spacing: 0;
}

.telegram-block-1__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 45px;
	border-radius: 6px;
	background: var(--color-pink);
	color: var(--color-white);
	text-decoration: none;
	transition: opacity var(--transition-hover);
}

.telegram-block-1__btn:hover,
.telegram-block-1__btn:focus-visible {
	opacity: 0.9;
}

.telegram-block-1__btn-label {
	font-family: var(--font-family-display);
	font-size: 18px;
	font-weight: var(--font-weight-regular);
	line-height: 1.2;
	color: var(--color-white);
}

@media (min-width: 768px) {
	.telegram-block-1 {
		flex-direction: row;
		align-items: center;
		gap: 30px;
		/* Body stacks (button under text) in this tier, so the card is taller and
		   the image usually no longer bleeds — a smaller margin looks right.
		   The bleed returns at 1200px (body becomes a row), where the margin is
		   widened back to match. */
		margin: 40px 0;
		padding: 30px 25px;
		text-align: left;
	}

	.telegram-block-1__media {
		top: 50%;
		left: 25px;
		transform: translateY(-50%);
	}

	.telegram-block-1__body {
		flex: 1;
		align-items: flex-start;
		gap: 50px;
		margin-left: 260px;
		text-align: left;
	}

	.telegram-block-1__text {
		font-size: 18px;
	}

	.telegram-block-1__btn {
		padding: 12px 30px;
	}

	.telegram-block-1__btn-label {
		font-size: 16px;
	}
}

@media (min-width: 1200px) {
	.telegram-block-1 {
		margin: 70px 0;
	}

	.telegram-block-1__body {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.telegram-block-1__text {
		flex: 1;
	}

	.telegram-block-1__btn {
		flex-shrink: 0;
	}
}

/* Guard against entry-content's first/last-child margin reset (higher
   specificity than a plain .telegram-block-1 rule) zeroing out the bleed
   compensation if this block happens to be the first/last in the content. */
.entry-content > .telegram-block-1:first-child {
	margin-top: 70px;
}

.entry-content > .telegram-block-1:last-child {
	margin-bottom: 40px;
}

@media (min-width: 768px) {
	.entry-content > .telegram-block-1:first-child {
		margin-top: 40px;
	}

	.entry-content > .telegram-block-1:last-child {
		margin-bottom: 40px;
	}
}

@media (min-width: 1200px) {
	.entry-content > .telegram-block-1:first-child {
		margin-top: 70px;
	}

	.entry-content > .telegram-block-1:last-child {
		margin-bottom: 70px;
	}
}