/*
	TACF Stylesheet 2026
	@since 1.3.0
		This stylesheet is part of the transition from using Compass SCSS to vanilla CSS
		The main stylesheet as of 1.3.0 is still application.css, which was compiled by Compass from the scss directory
*/

:root {
	--tacf-red:		#d01f3c;
	--tacf-black:	#000000;
	--tacf-white:	#ffffff;
	--tacf-green:	#66C841
;
}

/* ===== Featured fellow emphasis ============= */

.fellows-grid .dp-dfg-items{
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(7, minmax(0, 1fr)); /* match your current columns */
	grid-auto-flow: dense;
}

.fellows-grid .dp-dfg-items{
	width: auto !important;
}

.fellows-grid .dp-dfg-item.fellow_flag-featured{
	grid-column: span 2;
	/*grid-row: span 2; */ /* uncomment if you want the BIG hero tile */
	overflow: visible;
}

.fellows-grid .dp-dfg-item.fellow_flag-featured .dp-dfg-image{
	/*aspect-ratio: 4 / 5; *//* or 3/4 if you want more portrait drama */
	max-width: 100%;
	overflow: hidden;
	margin: 0;
}

/* badge */
.fellows-grid .subtitle-container.highlight-banner {
	position: absolute;
	top: 0;
	left: 50%;
	background: var(--tacf-red);
	font-size: 10px;
	line-height: 1;
	padding: 1em 2em;
	white-space: nowrap;
	@include transform-origin(left, top);
	@include transform(translate(-50%, -50%) );
}

.fellows-grid .subtitle-container.highlight-banner h4 {
	color: white;
	margin: 0;
	padding: 0;
	line-height: 1;
}

.fellows-grid .subtitle-container h4,
.fellows-grid .fellow-subhead {
	display: flex;
	column-gap: .27em; /* closer to “a space” than .5em */
	row-gap: 0;        /* or .15em if you want breathing room */
	justify-content: center;
	align-items: baseline; /* usually nicer for text than start */
	flex-wrap: wrap;
}

/* ===== Forms ============= */
.gform_heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

body .gform_legacy_markup_wrapper textarea.small,
body .gform_wrapper.gravity-theme .gfield textarea.small {
	height: auto;
	max-height: 96px;
}