/**
 * style-index.css — front-end styles for tftsg/recent-award.
 *
 * Colors and type are pulled directly from awards-landing.css /
 * single-award_winner.css — NOT invented for this block:
 *   --tftsg-accent    #4b824b  — standard green accent
 *   --tftsg-accent-hover #259dbb — blue hover
 *   --tftsg-gold      #d7991a  — Behler's premier gold
 *   --tftsg-gold-deep #9a6f13  — darker gold, text-on-cream / hover
 *   --tftsg-cream     #faf6ee  — Behler hero background band
 *   --tftsg-cream-border #e8dcc4
 *   New Kansas (site default heading font) / Nunito Sans body — NOT
 *   source-serif-4. The real awards pages are explicitly "celebratory/
 *   professional... not academic" (see single-award_winner.php's own
 *   header comment).
 *
 * Layout mirrors the real .tftsg-awl-hero (gold left border, portrait +
 * body grid) for the Behler side, and .tftsg-awl-card (portrait + name +
 * year/country subline) for the Pritchard cohort cards — reused class-
 * for-class in spirit, renamed into this block's own tftsg-ra-* namespace.
 *
 * Learned from the earlier blocks in this set: link/button underline
 * removal needs to be bulletproof against a competing theme rule from
 * the start (parent-selector specificity boost + !important), and
 * heading text-transform must be explicitly set to none.
 *
 * No block-level background — vertical spacing is left to whatever
 * container/section wraps this block in the editor. Horizontal padding
 * IS included so text doesn't run edge-to-edge on narrow/mobile widths.
 */

.tftsg-ra-award {
	--tftsg-accent: #4b824b;
	--tftsg-accent-hover: #259dbb;
	--tftsg-gold: #d7991a;
	--tftsg-gold-deep: #9a6f13;
	--tftsg-text: #3a3a3a;
	--tftsg-border: #e2e5e4;
	--tftsg-cream: #faf6ee;
	--tftsg-cream-border: #e8dcc4;
	--tftsg-radius: 10px;
	color: var( --tftsg-text );
	padding: 0 1.25rem;
	max-width: 1200px;
	margin: 0 auto;
}

@media ( max-width: 544px ) {
	.tftsg-ra-award {
		padding: 0 1rem;
	}
}

.tftsg-ra-award figure,
.tftsg-ra-award img {
	box-shadow: none;
}

/* ============ Masthead: short separator, then heading, centered ============ */

.tftsg-ra-award__masthead {
	text-align: center;
	margin-bottom: 2.5rem;
}

.tftsg-ra-award__separator {
	font-size: 0;
	display: inline-block;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	width: 128px;
	border-color: var( --tftsg-accent );
	margin-bottom: 14px;
}

.tftsg-ra-award__heading {
	font-family: "new-kansas", sans-serif;
	font-size: clamp( 2rem, 3.5vw, 2.8rem );
	line-height: 1.1;
	margin: 0;
}

/* ============ Two-column layout: Behler left, Pritchard cohort right ============ */
/* Behler gets more visual weight (2fr vs 1fr, was 1.4fr vs 1fr) so the
   Pritchard mention reads as a smaller aside, not a second hero of equal
   weight. Both columns share the SAME left inset (1.5rem padding + 4px
   border-equivalent gap) so their content starts line up horizontally —
   previously Behler's portrait sat behind a 1.5rem+4px offset while
   Pritchard's cream box used an unrelated 1.75rem padding, so the two
   never lined up. */

.tftsg-ra-award__inner {
	display: grid;
	grid-template-columns: minmax( 0, 2fr ) minmax( 240px, 1fr );
	gap: 3rem;
	align-items: start;
}

/* TABLET (921px down to 545px): keep Behler + Pritchard side by side,
   just tighter, rather than immediately stacking Pritchard below Behler
   and leaving the right half of the screen empty. */
@media ( max-width: 921px ) and ( min-width: 545px ) {
	.tftsg-ra-award__inner {
		grid-template-columns: minmax( 0, 1.6fr ) minmax( 200px, 1fr );
		gap: 1.75rem;
	}
}

@media ( max-width: 544px ) {
	.tftsg-ra-award__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* ============ Behler (left) — mirrors .tftsg-awl-hero ============ */

.tftsg-ra-behler {
	display: grid;
	grid-template-columns: 230px minmax( 0, 1fr );
	gap: 2rem;
	align-items: start;
	padding-left: 1.5rem;
	border-left: 4px solid var( --tftsg-gold );
}

/* The INNER Behler portrait/text pairing collapses to stacked sooner
   than the outer Behler/Pritchard split (921px, not tied to a tablet-
   tightened tier) — this is the pairing that actually runs out of room
   first once it's squeezed inside an already-narrower outer column
   (a 230px fixed portrait + body text has less slack than the outer
   Behler/Pritchard split does). Mirrors how the Recent Species Accounts
   block prioritizes text over a fixed-width image column. */
@media ( max-width: 921px ) {
	.tftsg-ra-behler {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 1.25rem;
		padding-left: 0;
		border-left: 0;
		border-top: 4px solid var( --tftsg-gold );
		padding-top: 1.5rem;
	}

	/* CRITICAL FIX: without an explicit width, a centered (justify-items:
	   center) grid item shrink-wraps to its content's natural size rather
	   than filling the available track — unreliable for text-heavy
	   content and can collapse to a near-zero width, forcing text to wrap
	   one character per line. This was the actual root cause of the
	   tablet-width collapse reported across the Checklist / Trouble /
	   Award blocks (Species Accounts was unaffected because it never
	   uses justify-items: center in the first place). */
	.tftsg-ra-behler__body {
		width: 100%;
	}
}

.tftsg-ra-behler__portrait {
	margin: 0;
	width: 100%;
	min-width: 0;
}

@media ( max-width: 921px ) {
	.tftsg-ra-behler__portrait {
		max-width: 220px;
	}
}

.tftsg-ra-behler__portrait-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
	box-shadow: 0 14px 32px rgba( 0, 0, 0, 0.2 );
}

.tftsg-ra-behler__body {
	min-width: 0;
}

.tftsg-ra-behler__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --tftsg-gold-deep );
	margin: 0 0 0.5rem!important;
}

.tftsg-ra-behler__eyebrow svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
}

.tftsg-ra-behler__name {
	font-family: "new-kansas", sans-serif;
	font-size: clamp( 1.4rem, 2.6vw, 1.9rem );
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.6rem;
	text-transform: none;
}

.tftsg-ra-behler__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

@media ( max-width: 921px ) {
	.tftsg-ra-behler__meta {
		justify-content: center;
	}
}

.tftsg-ra-chip {
	display: inline-flex;
	align-items: center;
	font-size: 0.85rem;
	font-weight: 700;
	padding: 0.3rem 0.8rem;
	border-radius: 6px;
	background: var( --tftsg-cream-border );
	color: #5a4a24;
}

.tftsg-ra-behler__country {
	gap: 0.35rem;
}

.tftsg-ra-behler__country svg {
	flex: 0 0 auto;
	stroke: currentColor;
	fill: none;
}

.tftsg-ra-behler__excerpt {
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 1.25rem;
}

.tftsg-ra-behler__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media ( max-width: 921px ) {
	.tftsg-ra-behler__cta {
		justify-content: center;
	}
}

/* ============ Buttons (gold, matching .tftsg-btn--gold / --gold-ghost) ============ */

.tftsg-ra-award .tftsg-ra-btn,
.tftsg-ra-award .tftsg-ra-btn:hover,
.tftsg-ra-award .tftsg-ra-btn:focus,
.tftsg-ra-award .tftsg-ra-btn:focus-visible,
.tftsg-ra-award .tftsg-ra-btn:active,
.tftsg-ra-award .tftsg-ra-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.7rem 1.4rem;
	border-radius: 6px;
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.tftsg-ra-award .tftsg-ra-btn--gold {
	background: var( --tftsg-gold );
	color: #3a2a05;
}

.tftsg-ra-award .tftsg-ra-btn--gold:hover,
.tftsg-ra-award .tftsg-ra-btn--gold:focus,
.tftsg-ra-award .tftsg-ra-btn--gold:focus-visible,
.tftsg-ra-award .tftsg-ra-btn--gold:active {
	background: var( --tftsg-gold-deep );
	color: #ffffff;
	transform: translateY( -1px );
}

.tftsg-ra-award .tftsg-ra-btn--gold-ghost {
	background: transparent;
	color: var( --tftsg-gold-deep );
	border: 1px solid var( --tftsg-gold-deep );
}

.tftsg-ra-award .tftsg-ra-btn--gold-ghost:hover,
.tftsg-ra-award .tftsg-ra-btn--gold-ghost:focus,
.tftsg-ra-award .tftsg-ra-btn--gold-ghost:focus-visible,
.tftsg-ra-award .tftsg-ra-btn--gold-ghost:active {
	background: var( --tftsg-gold-deep );
	color: #ffffff;
	transform: translateY( -1px );
}

/* ============ Pritchard cohort (right) — mirrors .tftsg-awl-cohort / .tftsg-awl-card ============ */

.tftsg-ra-pritchard {
	border-top: 1px solid var( --tftsg-cream-border );
	padding: 1.25rem 0 0 1.5rem;
}

@media ( max-width: 921px ) and ( min-width: 545px ) {
	.tftsg-ra-pritchard {
		padding-top: 1rem;
	}
}

@media ( max-width: 544px ) {
	.tftsg-ra-pritchard {
		padding-left: 0;
	}
}

.tftsg-ra-pritchard__heading {
	font-family: "new-kansas", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	margin: 0 0 1rem;
	text-transform: uppercase;
	color: var( --tftsg-gold-deep );
	opacity: 0.85;
}

@media ( max-width: 921px ) and ( min-width: 545px ) {
	.tftsg-ra-pritchard__heading {
		margin-bottom: 0.75rem;
	}
}

.tftsg-ra-pritchard__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	gap: 1.25rem;
}

/* TABLET (921px down to 545px): Pritchard's column is narrower here than
   at desktop (see .tftsg-ra-award__inner's tablet tier above), which
   left auto-fill degrading to a single card per row — stacking many
   cards vertically and making the Pritchard side roughly twice as tall
   as Behler, lopsided against it. Force a fixed 2-column grid with
   smaller cards/gaps instead, so Pritchard's height stays proportionate. */
@media ( max-width: 921px ) and ( min-width: 545px ) {
	.tftsg-ra-pritchard__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 0.85rem;
	}

	.tftsg-ra-card__name {
		font-size: 0.85rem;
	}

	.tftsg-ra-card__subline {
		font-size: 0.76rem;
	}
}

.tftsg-ra-card {
	margin: 0;
}

.tftsg-ra-award .tftsg-ra-card__link,
.tftsg-ra-award .tftsg-ra-card__link:hover,
.tftsg-ra-award .tftsg-ra-card__link:focus,
.tftsg-ra-award .tftsg-ra-card__link:focus-visible,
.tftsg-ra-award .tftsg-ra-card__link:active,
.tftsg-ra-award .tftsg-ra-card__link:visited {
	display: flex;
	flex-direction: column;
	text-align: center;
	text-decoration: none !important;
	color: inherit;
}

.tftsg-ra-card__portrait {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 10;
	border-radius: 8px;
	overflow: hidden;
	background: var( --tftsg-cream-border );
	margin-bottom: 0.6rem;
}

.tftsg-ra-card__portrait-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
	object-position: 50% 15%;
}

.tftsg-ra-award .tftsg-ra-card__link:hover .tftsg-ra-card__portrait-img,
.tftsg-ra-award .tftsg-ra-card__link:focus .tftsg-ra-card__portrait-img {
	transform: scale( 1.04 );
}

.tftsg-ra-card__portrait--empty {
	aspect-ratio: 1 / 1;
}

.tftsg-ra-card__body {
	display: block;
}

.tftsg-ra-card__name {
	display: block;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.3;
}

.tftsg-ra-card__subline {
	display: block;
	font-size: 0.82rem;
	margin-top: 0.2rem;
	line-height: 1.4;
}

.tftsg-ra-card__year {
	color: var( --tftsg-gold );
	font-weight: 700;
}

.tftsg-ra-card__country {
	color: var( --tftsg-text );
	opacity: 0.7;
}

.tftsg-ra-card__year + .tftsg-ra-card__country::before {
	content: "\00b7";
	margin: 0 0.35rem;
	opacity: 0.5;
}