/**
 * Post-transpile responsive fixes.
 *
 * Hand-written, NOT generated by the transpiler. Enqueued last so it wins the
 * cascade, and kept in its own file so regenerating the authority stylesheets
 * never clobbers it.
 */

/* ------------------------------------------------------------------
   Full-bleed hero and CTA media

   The design sets .hero-media img { width:100%; height:100%; object-fit:cover }
   so the photo fills the whole hero. A percentage height only resolves against
   a parent with a definite height. In the static build the img was a direct
   child of .hero-media (position:absolute; inset:0), so it had one.

   Elementor wraps every image in a widget div of automatic height. That breaks
   the chain: height:100% resolves to auto, the image collapses to its intrinsic
   aspect ratio (375x211 instead of 375x520), and the rest of the section shows
   as bare gradient. Giving the wrappers height:100% reconnects the chain.
   ------------------------------------------------------------------ */
.hero-media .elementor-widget-image,
.hero-media .elementor-widget-container {
	height: 100%;
}

.hero-media .elementor-widget-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------------
   Logo sizing

   The design's logo heights (30px / 34px / 40px footer) were set for the
   previous wordmark, whose aspect ratio was 3.54:1. The current artwork is
   2.60:1, so at those same heights it renders about 26% narrower and reads
   noticeably smaller in the bar.

   These heights restore the design's intended logo WIDTH:
     mobile  30px x 3.54 = 106px  ->  41px x 2.60 = 106px
     desktop 34px x 3.54 = 120px  ->  46px x 2.60 = 120px
     footer  40px x 3.54 = 142px  ->  55px x 2.60 = 143px
   ------------------------------------------------------------------ */
.wordmark img,
.wordmark .hfe-site-logo-img {
	height: 41px;
	width: auto;
}

@media (min-width: 768px) {
	.wordmark img,
	.wordmark .hfe-site-logo-img {
		height: 46px;
	}
}

.footer-wordmark img,
.footer-wordmark .hfe-site-logo-img {
	height: 55px;
}

/* ------------------------------------------------------------------
   Award caption pill

   dom-anchors.js moves this figcaption back inside .award-main so its offsets
   resolve against the image card again. These rules keep the pill inside the
   card at every width: the label is long (about 444px on one line) and the card
   is only ~323px wide on a phone, so it has to be allowed to wrap and must stay
   clear of the rounded corners.
   ------------------------------------------------------------------ */
.award-main .award-caption {
	/* Wide enough that the single-line label (about 444px) still fits inside the
	   card on desktop; it wraps gracefully to two centred lines when it cannot. */
	max-width: calc(100% - 1.2rem);
	text-align: center;
	text-wrap: balance;
	/* The design's .14em tracking pushes the label just past the available width,
	   forcing an ugly two-line pill. .11em keeps it on one line with room to spare
	   and is visually indistinguishable at this size. */
	letter-spacing: 0.11em;
}

@media (max-width: 700px) {
	/* Centre by pinning both edges and letting auto margins do the work.
	   left:50% would cap the shrink-to-fit width at half the card. */
	.award-main .award-caption {
		left: 0;
		right: 0;
		margin-inline: auto;
		width: -moz-fit-content;
		width: fit-content;
		max-width: calc(100% - 1.6rem);
		bottom: 0.7rem;
		letter-spacing: 0.1em;
		font-size: 0.62rem;
		padding: 0.55em 1em;
	}
}