/**
Theme Name: CVE Child
Author: Carrier Vibrating Equipment
Author URI: https://www.carriervibrating.com/
Description: CVE child theme for Carrier Vibrating Equipment
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cve-child
Template: astra
*/
/*--------------------------------------------------------------
# Resource hub tiles — cpeg/events-list matched to uagb/post-grid
#
# The Trade Shows & Events page uses cpeg/events-list, a block from the shared
# cpeg-events plugin with no styling attributes. White Papers and Case Studies
# use uagb/post-grid, styled through block attributes. These rules bring the
# events tiles onto the same visual spec, and live here rather than in the
# plugin because cpeg-events is shared across the CPEG sites and this look is
# CVE-specific.
#
# Selectors are deliberately two classes deep (.cpeg-events .cpeg-event-card)
# so they outrank the plugin's single-class rules regardless of which
# stylesheet the block loader prints first.
#
# Spec measured off /resources/whitepapers/ on 2026-08-18:
#   tile     1px solid #D32128, radius 0, padding 20px
#   hover    box-shadow 0 7px 47px -30px #5f5f5f, transition .2s
#   image    3:2 box, 15px below it
#   CTA      #D32128 bg / #fff text, Montserrat 800 16px/16px,
#            padding 15px 25px, radius 3px; hover #A60D12
--------------------------------------------------------------*/

/* UAGB's post grid uses a flat 20px gutter; the plugin's clamp() resolves to 32px
   at desktop, which made the events tiles 8px narrower than the other two hubs. */
.cpeg-events .cpeg-events__grid {
	gap: 20px;
}

.cpeg-events .cpeg-event-card {
	border-color: var( --cpeg-accent, #d32128 );
	border-radius: 0;
	padding: 20px;
	transition: box-shadow 0.2s ease;
}

.cpeg-events .cpeg-event-card:hover {
	box-shadow: 0 7px 47px -30px #5f5f5f;
}

/* Matches UAGB's image wrap exactly:
   - negative side/top margins pull the image out of the card's 20px padding so it
     runs full-bleed to the border, while the text below stays inset;
   - UAGB's imageRatio "2-3" is emitted as a 66% box, not a true 3:2 (66.67%), so
     100/66 is what actually lines up — 385px wide gives 254px, as measured;
   - content-box keeps the 15px gutter outside that box. */
.cpeg-events .cpeg-event-card__media {
	aspect-ratio: 100 / 66;
	box-sizing: content-box;
	padding: 0 0 15px;
}

/* UAGB only pulls the image full-bleed above its 976px tablet breakpoint; below
   that the image sits inside the card padding. Mirror that, or the events tiles
   go full-bleed on mobile while the other two hubs stay inset. */
@media ( min-width: 977px ) {

	.cpeg-events .cpeg-event-card__media {
		margin: -20px -20px 0;
	}
}

/* Event artwork is trade-show logos, not photography: contain, never cover,
   so nothing gets cropped. This is the one place the three hub pages differ,
   and it differs on purpose. */
.cpeg-events .cpeg-event-card__media img {
	object-fit: contain;
	object-position: center;
}

.cpeg-events .cpeg-event-card__body {
	padding: 0;
}

.cpeg-events .cpeg-event-card__cta {
	margin: auto 0 0;
	padding-top: 15px;
}

.cpeg-events .cpeg-event-card__link {
	display: inline-block;
	padding: 15px 25px;
	border: 0;
	border-radius: 3px;
	background: var( --cpeg-accent, #d32128 );
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 800;
	line-height: 19px; /* = UAGB button's rendered 49px box height */
	text-decoration: none;
}

/* The plugin appends " »" to the link; the UAGB button has no chevron. */
.cpeg-events .cpeg-event-card__link::after {
	content: none;
}

.cpeg-events .cpeg-event-card__link:hover,
.cpeg-events .cpeg-event-card__link:focus-visible {
	background: #a60d12;
	color: #fff;
	text-decoration: none;
}

/* The plugin drops to 2 columns at 1024px and 1 column at 600px; UAGB uses 976px
   and 767px. Without this the three hub pages reflow at different widths. Ordered
   widest-first because these all carry the same specificity. */
@media ( max-width: 1024px ) {

	.cpeg-events .cpeg-events__grid {
		grid-template-columns: repeat( var( --cpeg-events-columns, 3 ), minmax( 0, 1fr ) );
	}
}

@media ( max-width: 976px ) {

	.cpeg-events .cpeg-events__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {

	.cpeg-events .cpeg-events__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/*--------------------------------------------------------------
# Event detail page — cpeg-events' single-event template
#
# The plugin ships templates/single-event.php + assets/single-event.css and both
# load; the template is deliberately minimal so it inherits the theme. These rules
# fix the three measured problems without replacing it. A proper child-theme
# single-event.php (which the plugin already looks for via locate_template) is the
# fuller answer — see carrier-event-single-assessment-2026-08-18.md.
--------------------------------------------------------------*/

/* All 24 published events have a featured image under 1200px wide (168px to
   1170px) and their ratios span 1.00 to 4.19, but the plugin renders them at
   width:100% of the 1200px column — so every one is upscaled. The 582x582 NADCA
   logo became 1200x1200, taller than the viewport; a 168x80 asset was blown up
   ~7x. width:auto plus caps lets each logo render at its natural size and never
   larger. The 520x260 ceiling also lands the common 412x250 assets at the same
   size they appear on the listing cards (385x254). */
.cpeg-event-single .cpeg-event-single__media img {
	width: auto;
	max-width: 520px;
	max-height: 260px;
}

.cpeg-event-single .cpeg-event-single__media {
	margin: 0 0 2.5rem;
}

/* Body content ended flush against the footer — content bottom and footer top
   were both at y=1722. */
.cpeg-event-single .cpeg-event-single__content {
	margin-bottom: 3rem;
}

/* Dates, venue, booth and organizer are sibling <p> at similar weight, reading as
   four stray lines. A rule above the date groups them under the title. Kept as a
   single border rather than a wrapper rail because the meta has no container
   element to hang one on — that belongs with the template rewrite. */
.cpeg-event-single .cpeg-event-single__dates {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba( 0, 0, 0, 0.12 );
}

/* The theme's default heading colour is white, because every other template puts
   its H1 inside the dark hero band. This template renders the H1 in normal flow on
   a white page, so the title was white-on-white — invisible on all 24 event pages.
   In-content headings elsewhere on the site carry an explicit colour
   (`has-text-color`, computing to #000); match that. */
.cpeg-event-single .cpeg-event-single__title {
	color: var( --ast-global-color-3, #000 );
}

/* The plugin's --cpeg-muted maps to Astra's global colour-2, which on CVE is
   #000000 — so venue/booth/organizer rendered at full body black and the intended
   secondary hierarchy disappeared. The palette carries no mid grey (colour-5 is
   #dcdcdc, far too light for body copy), so set one here. */
.cpeg-event-single .cpeg-event-single__location,
.cpeg-event-single .cpeg-event-single__booth,
.cpeg-event-single .cpeg-event-single__organizer {
	color: #5a5a5a;
}