/* ==========================================================================
   Custom styles for Advocacy Impact
   Kept separate from the html5up template (main.css) so template updates
   don't clobber site-specific tweaks. Loaded after main.css.
   ========================================================================== */

/* Reusable "featured figure" — the offset image block used on the home,
   Contact, and What We Do pages. Replaces a repeated inline style block. */
.featured-figure {
	position: relative;
	width: auto;
	left: 1.75em;
	top: 1.75em;
	margin: -4.5em 0 4.25em -3.5em;
}

.featured-figure .image.featured {
	display: block;
	position: static;
	left: auto;
	top: auto;
	margin: 0;
}

.featured-figure img {
	display: block;
	margin: 0;
}

/* Italic image captions used throughout the site. */
.image-caption {
	font-style: italic;
	font-size: 0.9em;
	margin-top: 0;
	margin-bottom: 0;
}

/* Full-width header/hero image (e.g. the Global Stories page banner).
   Displayed as a cropped banner strip via object-fit so the tall photo
   doesn't dominate the page. object-position keeps the UN emblem and
   voting screens (upper-middle of the photo) in view. */
.story-header {
	margin: 0 0 2.5em 0;
}

.story-header img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.story-header figcaption {
	margin-top: 0.6em;
}

/* Remove the dark gap between the header and the home-page banner.
   The template gives #banner a top margin, which let the dark body
   background show through as a black strip below the menu. */
#banner {
	margin-top: 0;
}

/* ==========================================================================
   Mobile image fixes
   Desktop is the priority and is left untouched. At phone widths (<=736px,
   the template's "small" breakpoint where columns already stack), content
   images are forced to: never overflow the viewport, drop their float, and
   fill the column instead of sitting cramped beside the text.
   !important is required to override the per-image inline styles in the HTML.
   ========================================================================== */
@media screen and (max-width: 736px) {

	/* No content image may be wider than the screen (fixes the 480px/530px
	   pixel-width images on the Engage page that overflowed on phones). */
	#main img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Stack figures full-width instead of floating them in a narrow column. */
	#main figure {
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 0 0 1.5em 0 !important;
	}

	#main figure img {
		width: 100% !important;
	}

	/* Neutralize the desktop "featured-figure" offset (left/top 1.75em) so
	   stacked images sit flush with the content instead of shifted right and
	   down. Fixes the top image on the What We Do / How We Work page. */
	.featured-figure {
		position: static;
		left: auto;
		top: auto;
	}
}