/**
 * HD Value Cards module - responsive typography for the dictionary cards.
 *
 * These are the hand-built "Core Values" cards (CURIOSITY, INNOVATION,
 * INTEGRITY, ENJOYMENT) with the dictionary-definition hover overlay.
 * They appear on the home page and on Who We Are > Our Why, with two
 * independent copies of the base CSS (Avada global Custom CSS for home,
 * who-we-are.css for Our Why).
 *
 * THE BUG
 * The card title is a hard `font-size: 50px !important` with a flat 50px
 * inner padding, and nothing responsive behind it. Measured against real
 * Montserrat 700 metrics the titles at 50px are:
 *
 *   INTEGRITY  286px      CURIOSITY  291px
 *   ENJOYMENT  337px      INNOVATION 347px
 *
 * WHY VIEWPORT UNITS ARE THE WRONG TOOL HERE
 * Card width does not track viewport width - it moves in the opposite
 * direction when the column count changes. Measured card widths:
 *
 *              390px   834px   1024px   1200px   1440px
 *   home        342     774      964      483      556
 *   our-why     330     372      463      251      257
 *
 * Our Why goes to four-across at 1200px, so cards get NARROWER as the
 * window gets WIDER. A viewport-based clamp fixed the phone case and left
 * desktop badly broken: at 1440px each card had 157px of text room for a
 * 347px word, so every title was sliced on both sides ("INOVATIO",
 * "NTEGRITY", "NJOYMEN").
 *
 * THE FIX
 * Size the type off the CARD, not the window, using container query
 * units. 1cqw = 1% of the card's width, so the title always fits
 * whatever box it lands in, and all four cards - being equal width -
 * always render at an identical size.
 *
 * 11cqw verified against the widest title (INNOVATION, 6.898em):
 *
 *   card 251px -> 27.6px -> 195px in a 219px box
 *   card 330px -> 36.3px -> 255px in a 298px box
 *   card 372px -> 40.9px -> 287px in a 340px box
 *   card 463px -> 50.0px -> 351px in a 431px box  (capped)
 *   card 556px -> 50.0px -> 351px in a 456px box  (capped, unchanged)
 *
 * The 50px cap means any card at or above ~455px keeps the original
 * design size, so the home page's desktop cards render exactly as
 * approved - this only ever shrinks type that would otherwise be cut.
 *
 * SPECIFICITY
 * The base rules live in Avada's global Custom CSS, compiled into the
 * fusion-styles stylesheet and enqueued AFTER plugin styles, and they are
 * already `!important`. These selectors add `.dictionary-card` to outrank
 * them (2 classes + 1 element vs 1 + 1).
 */

/* ---------------------------------------------------------------
   Fallback for browsers without container query support.
   Viewport-based, phone only - matches the previous behaviour.
   --------------------------------------------------------------- */
@media only screen and (max-width: 640px) {

	.dictionary-card .card-front-content {
		padding: 0 16px !important;
	}

	.dictionary-card .card-front-content h2 {
		font-size: clamp(22px, 9.5vw, 44px) !important;
		letter-spacing: 0.5px !important;
		line-height: 1.05 !important;
		margin-bottom: 16px !important;
	}
}

/* ---------------------------------------------------------------
   Container-query sizing. Supported by Safari 16+, Chrome 105+,
   Firefox 110+ - i.e. every browser this site targets.
   --------------------------------------------------------------- */
@supports (container-type: inline-size) {

	.dictionary-card {
		container-type: inline-size;
		container-name: hdvaluecard;
	}

	.dictionary-card .card-front-content h2 {
		font-size: clamp(20px, 11cqw, 50px) !important;
		letter-spacing: 0.5px !important;
		line-height: 1.05 !important;
		margin-bottom: 0.32em !important;
		/* If a longer value is ever added, break it rather than let
		   the card's overflow:hidden silently slice it. */
		overflow-wrap: break-word !important;
		hyphens: auto !important;
		max-width: 100% !important;
	}

	/* Reclaim the 50px desktop inset once the card itself is narrow.
	   Keyed on card width, so a 257px card gets breathing room while a
	   556px card keeps the original generous padding. */
	@container hdvaluecard (max-width: 500px) {

		.dictionary-card .card-front-content {
			padding: 0 16px !important;
		}

		.dictionary-card .card-front-content p {
			font-size: 15px !important;
			line-height: 1.5 !important;
		}
	}
}

/* ---------------------------------------------------------------
   Our Why: hover overlay containment.

   Scoped to .hd-wwa-page throughout - the home page copy of these
   cards fits comfortably at every width (content 181-289px against
   340px available) and must not change. Our Why's overlay type is
   larger, and at >=1200px its four cards sit one per column across a
   1217px row, so each card is only ~257px wide. The dictionary entry
   wrapped to as many as 17 lines and ran 44-92px past the bottom of
   the card.

   Three levers, needed together - measured, not guessed:

     card 257px, pad 30px  ->  over 92px
     card 290px, pad 30px  ->  over 68px
     card 305px, pad 20px  ->  over 24px
     card ~284px, pad 20px, min-height 460px  ->  fits

   Column gutters were tightened from ~47px to 20px in the Avada
   builder (see the page's column spacing), which is the largest single
   lever available: the 1217px row caps four columns at 304px each no
   matter what, so width alone could never close a 92px gap.

   Content height is quantised to the 24px line box, so trimming the
   definition font size changed nothing - only line count and available
   height move the needle.
   --------------------------------------------------------------- */

.hd-wwa-page .dictionary-card .card-hover-overlay {
	padding: 20px !important;
}

/* Four-across: the narrowest the cards ever get. */
@media only screen and (min-width: 1200px) {
	.hd-wwa-page .dictionary-card {
		min-height: 460px !important;
	}
}

/* Single column on phones: card ~330px, longest entry ran 14px over. */
@media only screen and (max-width: 640px) {
	.hd-wwa-page .dictionary-card {
		min-height: 440px !important;
	}
}

/* ---------------------------------------------------------------
   Pronunciation buttons.

   Previously both buttons sat inline inside <h3 class="bold-title">,
   after the word. At the card widths in use the line wrapped mid-pair,
   leaving EN on the title line and ES alone on the next. They now live
   in a .hd-say-row directly beneath the title, so the pair always stays
   together on one line.

   The button styling is duplicated from who-we-are.css (which is
   .hd-wwa-page scoped and enqueued only on the Who We Are pages) so the
   same buttons render identically on the home page. The values are
   identical, so on Our Why the more specific WWA rules win and nothing
   changes there.
   --------------------------------------------------------------- */

.hd-say-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 8px 0 10px;
}

/* The WWA rule sets margin-left:8px for the old inline placement, which
   would offset the first button inside the flex row. */
.hd-say-row .hd-say {
	margin-left: 0 !important;
}

.hd-say {
	display: inline-block;
	padding: 2px 10px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.5px;
	color: #2f3437;
	background: rgba(184, 92, 56, 0.12);
	border: 1px solid rgba(184, 92, 56, 0.45);
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	vertical-align: middle;
}

.hd-say:hover,
.hd-say:focus {
	background: #b85c38;
	border-color: #b85c38;
	color: #ffffff;
	outline: none;
}

.hd-say.speaking {
	background: #2f3437;
	border-color: #2f3437;
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.hd-say { transition: none !important; }
}