/**
 * Single News — frontend styles
 *
 * Loaded only on single `news` posts. Handles the featured-image meta block
 * (#news-featimg) sizing and its float relationship with the article content.
 *
 * @package TMW\News
 */

/* The main-content wrapper is a flex column by default, and the post-content
   block is a `flow-root` (its own block formatting context). Both prevent a
   float from wrapping. Switch this section to normal block flow so the floated
   image and the article text share one formatting context. */
#main-content .flexible-content-wrapper {
	display: block;
}

#main-content .wp-block-post-content {
	display: block;
}

/* Featured image meta block — cap width and float left so the post content
   that follows in the same flow wraps around it. */
#news-featimg {
	float: left;
	max-width: 300px;
	margin-right: var(--space-xl);
	border: 1px solid var(--color-border-light);
}

#news-featimg .post-meta__featured-image {
	margin: 0;
}

#news-featimg .post-meta-custom {
	margin-top: var(--space-md);
	margin-bottom: var(--space-md);
	padding-left: var(--space-sm);
	padding-right: var(--space-sm);
}

#news-meta-header .post-meta-custom .news-acf-fields {
	display: none;
}

/* Drop the calendar icon next to the publish date in the hero — the label
   ("Published …") reads clearly on its own, and the parent-theme meta renderer
   (tmw_core_render_meta_date) is shared across every site/CPT, so we suppress
   the icon here rather than remove it upstream. */
#news-meta-header .archive-meta__date .icon-date {
	display: none;
}

#news-featimg .post-meta__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
	margin-top: 0;
}

/* Block-level content with its own background/border — pull quotes, images,
   tables — overlaps the floated image because its box spans full width beneath
   the float while only its line boxes shorten. Giving each its own block
   formatting context (`flow-root`) makes the whole box sit beside the float
   instead of under it, so it wraps cleanly next to the photo (no collision, and
   no large gap from clearing past a tall image).

   The `figure` selector excludes core Gutenberg layout blocks — the Gallery
   block (`.wp-block-gallery`) is itself a `<figure>` that lays its images out
   with `display: flex`/`grid` via the `.is-layout-flex` / `.is-layout-grid`
   classes. `flow-root` would override that layout and collapse the block, and a
   flex/grid container already establishes its own formatting context, so these
   never need `flow-root`. Excluding the layout classes (rather than one block
   name) also protects any other core layout `figure` from the same collision. */
#main-content .wp-block-post-content blockquote,
#main-content .wp-block-post-content figure:not(.is-layout-flex):not(.is-layout-grid),
#main-content .wp-block-post-content .wp-block-image,
#main-content .wp-block-post-content .wp-block-table {
	display: flow-root;
	margin-top: var(--space-md);
}

/* Clear the float so following sections (e.g. related faculty) don't ride up
   alongside a tall image. */
#main-content .flexible-content-wrapper::after {
	content: "";
	display: block;
	clear: both;
}

/* Stack the image above the content on narrow screens. */
@media (max-width: 782px) {
	#news-featimg {
		float: none;
		max-width: 100%;
		margin-right: 0;
		margin-bottom: var(--space-lg) !important;
	}
}