/* Single event pages — peacehillavila.org
   ---------------------------------------------------------------------------
   Everything here restores something The Events Calendar used to provide. TEC
   rendered its own page wrapper (#tribe-events-pg-template) and the site's
   Additional CSS hung several rules off it; when EventRail replaced TEC the
   wrapper went away and those rules stopped matching, with no error anywhere.
   WO21, August 2026. */


/* 1. Content width
   ---------------------------------------------------------------------------
   Ironwood caps .content at 42rem (~800px) from 960px up. TEC's template
   rendered outside that cap, at the full width of .site-inner, so event pages
   were ~1080px and became visibly narrower the day EventRail took over.

   This is also what was distorting the retreat-leader headshots. Those images
   carry `height:300px; width:auto` from the editor. In a column too narrow for
   the width that height implies, max-width:100% clamps the width while the
   fixed height stays put — so the image squashes horizontally. Give the column
   its width back and they have room to size themselves properly again.

   Mirrors the theme's own breakpoint: below 960px .content is already full
   width, so there is nothing to override there. */
@media only screen and (min-width: 960px) {
	.single-td_event .content {
		width: 100%;
	}
}


/* 2. Button colour
   ---------------------------------------------------------------------------
   Site-wide, core buttons are black with a blue hover (Additional CSS). Event
   pages were the deliberate exception — blue with a black hover — via:

       #tribe-events-pg-template .wp-block-button__link { ... }

   That is the rule the client noticed going missing ("the button is now black
   instead of blue"). Same intent, re-scoped to the template that exists now. */
.single-td_event .entry-content a.wp-block-button__link.wp-element-button {
	background: var(--ironwood-primary-color);
	color: var(--ironwood-white);
}

.single-td_event .entry-content a.wp-block-button__link.wp-element-button:hover {
	background: var(--ironwood-black);
}

/* EventRail's own Register button (on events that use the CTA field rather than
   a button block) takes its colour from --tder-accent. That token is set for the
   whole site in the plugin file, via EventRail's tder_theme_css_vars filter —
   not here, because the archive and the event blocks need it too. */


/* 3. Fixed-height images in narrow columns
   ---------------------------------------------------------------------------
   Belt and braces for the squashing described in (1). Widening the column fixes
   today's layout, but a four-across row of images with a hardcoded pixel height
   will distort again at any viewport where the columns get tighter than the
   image's aspect ratio needs — roughly 960–1200px here.

   object-fit does nothing at all to an image whose box already matches its
   natural proportions, which is every image sized the normal way. It only takes
   effect once the box has been forced out of ratio, and then it crops rather
   than stretching a face sideways. */
.single-td_event .entry-content img[style*="height:"] {
	object-fit: cover;
}


/* 4. Floated images on narrow screens
   ---------------------------------------------------------------------------
   The descriptions lean on alignleft/alignright images with a hand-set pixel
   width — 503px on "Ends of the Earth". A float keeps floating no matter how
   narrow the column gets, so on a phone that image is clamped to the full 315px
   column and anything beside it is left with the ~16px remainder.

   That is what was happening to the Register button: its .wp-block-buttons flex
   container measured 0px wide and the button rendered 57px across and 233px
   tall, one letter per line. Prose beside the same float was being squeezed the
   same way, just less visibly.

   Released below 960px — the same breakpoint Ironwood uses to switch .content to
   a desktop width, and the point above which rule (1) gives event pages the full
   1080px column. 782px (where core stacks wp-block-columns) looked like the
   tidier number and is wrong: at an 800px viewport the column is 740px, so a
   503px float still leaves only 170px beside it. That band is too narrow for a
   button or for readable prose, so the float has to go there too. */
@media only screen and (max-width: 959px) {
	.single-td_event .entry-content .alignleft,
	.single-td_event .entry-content .alignright {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}

	/* Hand-set pixel widths outlive the float, so an image sized for a desktop
	   column would still overhang. Let them fill the column instead. */
	.single-td_event .entry-content .alignleft img,
	.single-td_event .entry-content .alignright img {
		width: auto;
		max-width: 100%;
		height: auto;
	}

	/* Belt and braces: even with the floats released, a button row must never
	   end up sharing a line with one. */
	.single-td_event .entry-content .wp-block-buttons {
		clear: both;
	}
}

/* No white-space:nowrap on button labels here, deliberately. It was tried as
   "cheap insurance" against the one-letter-per-line collapse above, and it made
   things worse: "Retreat Application" in a float-squeezed 170px wrapper stopped
   wrapping to two contained lines and started overflowing its wrapper instead.
   Releasing the float is the fix; letting a long label wrap is correct. */