/* =============================================================================
   ECR — X / Twitter block (foot of the News page)

   Deliberately small, and deliberately WITHOUT a container of its own.

   The block is a WPBakery row inside /news/, so the row's `in_container` box
   already supplies the page's content width and gutters — measured at
   x=98 w=1245 (1440), x=90 w=844 (1024), x=46 w=676 (768), x=23 w=343 (390),
   which is exactly where the article grid and the pagination sit. Re-applying
   a max-width here would inset the block ~47px from the articles above it and
   make it read as a foreign object. So this file sets no width, no max-width
   and no horizontal padding at all: the block inherits the News page's own
   measurements and stays aligned with them at every breakpoint, including any
   breakpoint this file does not mention.

   There is likewise no `font-size` on the heading. /news/ renders its own H2s
   at 44/36/33px (Salient native, proxima-nova 900) and a plain `h2` picks that
   up automatically — see inc/social/x-feed.php.
   ========================================================================== */

/* --- separation from the article grid ------------------------------------- */

/*
 * The one thing the block DOES need: to read as a distinct section rather than
 * as more news. A hairline in the site's existing border token plus real space
 * above it does that without introducing a panel, a tint or a new colour.
 */
.ecr-x {
	margin-top: 72px;
	padding-top: 48px;
	border-top: 1px solid var(--ecr-border, #E2E8F0);
}

.ecr-x__header {
	margin: 0 0 24px;
}

/* Margin only. The size, weight and family are Salient's own h2. */
.ecr-x__title {
	margin: 0;
}

/* --- the embed ------------------------------------------------------------ */

.ecr-x__frame {
	/* The height the iframe occupies. A custom property so every breakpoint
	   below changes ONE value instead of restating the rule. The widget has no
	   postMessage height handshake (see inc/social/x-feed.php), so this is
	   reserved up front — which is what keeps the block from shifting the page
	   as it loads. */
	--x-height: 1000px;

	position: relative;
	width: 100%;
	height: var(--x-height);

	/* The isolation boundary, given the site's own card geometry so the embed
	   reads as an ECR component rather than a pasted-in rectangle. */
	border: 1px solid var(--ecr-border, #E2E8F0);
	border-radius: var(--ecr-radius, 24px);
	background: var(--ecr-white, #FFFFFF);

	/* Clips the iframe's square corners to the radius above, and is the
	   backstop against any horizontal overflow escaping the block. */
	overflow: hidden;
}

.ecr-x__iframe {
	display: block;      /* kills the inline-element baseline gap under it */
	width: 100%;
	height: 100%;
	border: 0;           /* the visible frame is the wrapper's, not the iframe's */
	background: transparent;
}

/* --- responsive ----------------------------------------------------------- */

/* Shorter viewports get a shorter widget: 1000px of feed on a 1024x768 tablet
   would push the footer entirely out of reach. The widget scrolls internally,
   so a shorter box loses no content. The breakpoints are the ones the rest of
   this theme already steps at (1300 / 1000 / 690). */

@media only screen and (max-width: 1300px) {
	.ecr-x__frame { --x-height: 900px; }
}

@media only screen and (max-width: 1000px) {
	.ecr-x {
		margin-top: 56px;
		padding-top: 36px;
	}
	.ecr-x__header { margin-bottom: 20px; }
	.ecr-x__frame {
		--x-height: 820px;
		border-radius: 18px;   /* the card radius the site drops to here */
	}
}

@media only screen and (max-width: 690px) {
	.ecr-x {
		margin-top: 44px;
		padding-top: 28px;
	}
	.ecr-x__header { margin-bottom: 16px; }
	.ecr-x__frame { --x-height: 760px; }
}