/**
 * Colleges-style tile grid
 *
 * Ported from UCF's Main-Site-Theme (the #colleges-section grid on ucf.edu).
 * These two layout classes don't exist in the Athena/UCF parent theme, so they
 * live here. Every other class used in the markup (media-background,
 * object-fit-cover, filter-sepia, font-condensed, etc.) already ships with the
 * parent theme.
 *
 * The trick: each tile's width percentage is matched by a min-height in vw, so
 * tiles stay square at every breakpoint without an aspect-ratio hack. Padding
 * and type scale in vw too, so the whole grid grows proportionally.
 *
 * Breakpoints match Athena / Bootstrap 4: 576 / 768 / 992 / 1200.
 */

/*
 * The markup carries `row colleges-grid`, and Bootstrap's .row applies
 * -15px side margins. The .row.colleges-grid selector is listed explicitly so
 * this reset wins on specificity, not just on stylesheet order — otherwise the
 * grid ends up 30px wider than the viewport and the page scrolls sideways.
 */
.colleges-grid,
.row.colleges-grid {
	background-color: #000;
	display: flex;
	flex-wrap: wrap;
	margin-left: 0;
	margin-right: 0;
}

.colleges-block,
.colleges-grid-message {
	display: flex;
	flex-direction: column;
	padding: 3vw;
	position: relative;

	/*
	 * Flex items default to `min-width: auto`, so a long word can't shrink
	 * below its own width — it spills out of the tile and gives the whole
	 * page a horizontal scrollbar. These two keep long copy inside the box.
	 */
	min-width: 0;
	overflow-wrap: break-word;
}

/* Tiles: width % matches min-height vw to keep them square. */
.colleges-block {
	flex: 0 0 50%;
	max-width: 50%;
	min-height: 50vw;
}

/* The gold intro tile is just another flex item. */
.colleges-grid-message {
	flex: 0 0 100%;
	font-size: .75rem;
	max-width: 100%;
	padding: 1.5rem;
	padding-left: 1.75rem;
}

/*
 * Copy blocks — the gold intro tile and the gold CTA tile — center their
 * content vertically. Image tiles are excluded: they carry
 * `justify-content-end` in the markup to pin their label to the bottom.
 */
.colleges-grid-message,
.colleges-block:not(.media-background-container) {
	justify-content: center;
}

.colleges-block-text {
	display: block;
	font-size: 7.25vw;
	line-height: .9;
	text-shadow: 0 0 10px rgba(0, 0, 0, .7);
}

.colleges-grid-heading {
	font-family: "UCF Condensed Alt", sans-serif;
	font-size: 1.7rem;
	font-weight: 400;
	line-height: .95;
	text-transform: uppercase;
}

@media (min-width: 576px) {
	.colleges-block,
	.colleges-grid-message {
		padding: 2vw;
	}

	.colleges-block {
		flex: 0 0 25%;
		max-width: 25%;
		min-height: 25vw;
	}

	.colleges-grid-message {
		flex: 0 0 75%;
		font-size: 2vw;
		max-width: 75%;
		padding-left: 2.5vw;
	}

	.colleges-block-text {
		font-size: 3.75vw;
	}

	.colleges-grid-heading {
		font-size: 4vw;
	}
}

@media (min-width: 768px) {
	.colleges-block,
	.colleges-grid-message {
		padding: 1.5vw;
	}

	.colleges-block {
		flex: 0 0 33.3333333333%;
		max-width: 33.3333333333%;
		min-height: 33.333vw;
	}

	/*
	 * At 3-up the intro tile takes the whole row. Sharing a row with a single
	 * square left it cramped, and giving it its own row means the remaining
	 * tiles start on a clean row boundary.
	 */
	.colleges-grid-message {
		flex: 0 0 100%;
		font-size: 1.75vw;
		max-width: 100%;
		padding-left: 2.5vw;
	}

	.colleges-block-text {
		font-size: 4vw;
	}

	.colleges-grid-heading {
		font-size: 5vw;
	}
}

@media (min-width: 992px) {
	.colleges-block {
		flex: 0 0 25%;
		max-width: 25%;
		min-height: 25vw;
	}

	.colleges-grid-message {
		flex: 0 0 75%;
		font-size: 1.5vw;
		max-width: 75%;
		padding-left: 2.75vw;
	}

	.colleges-block-text {
		font-size: 3.25vw;
	}

	.colleges-grid-heading {
		font-size: 4vw;
	}
}

@media (min-width: 1200px) {
	.colleges-block {
		flex: 0 0 16.6666666667%;
		max-width: 16.6666666667%;
		min-height: 16.667vw;
	}

	/* Tiles after the intro tile go 5-up so the row still divides evenly. */
	.colleges-grid-message ~ .colleges-block {
		flex: 0 0 20%;
		max-width: 20%;
		min-height: 20vw;
	}

	.colleges-grid-message {
		flex: 0 0 40%;
		font-size: 1vw;
		max-width: 40%;
		padding-left: 3vw;
	}

	.colleges-block-text {
		font-size: 2.5vw;
	}

	.colleges-grid-heading {
		font-size: 3vw;
	}
}

/*
 * Tiles-per-row changes at every breakpoint (2 / 4 / 3 / 4 / 5), so no single
 * tile count divides evenly at all of them — some widths always leave a gap on
 * the last row, showing the grid's black background.
 *
 * Rather than chase the tile count, let the LAST item absorb whatever space is
 * left on its row. With the CTA tile last, the gold block simply widens to
 * close the gap instead of leaving a black void. Image tiles are untouched and
 * stay square.
 */
.colleges-grid > :last-child {
	flex-grow: 1;
	max-width: none;
}

/*
 * Suppress the focus ring on mouse clicks while keeping it for keyboard users.
 * :focus-visible matches keyboard focus only, so the outline that flashes when
 * a tile is clicked goes away without removing the keyboard affordance.
 */
.colleges-block:focus:not(:focus-visible) {
	outline: none;
}

/* Small eyebrow line above the intro tile's heading. */
.colleges-grid-kicker {
	display: block;
	font-family: "UCF Sans Serif Alt", sans-serif;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: .6rem;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.colleges-grid-kicker { font-size: .85rem; }
}

/*
 * Optional supporting line under a tile's label.
 *
 * .colleges-block-text is display-size type set in vw, so it can afford to
 * scale freely. This is body copy, and vw alone would render it unreadably
 * small in the 576-992 range where tiles are 25% wide — hence clamp(), which
 * tracks the tile but never drops below 11px or grows past 14px.
 *
 * Tiles are square, so vertical space is fixed: a long description would push
 * the label up and out of the tile rather than making the tile taller. The
 * line clamp caps the damage, so an over-long description truncates instead of
 * breaking the grid. Keep descriptions to roughly 20 words to avoid it.
 *
 * Same text-shadow as the label — the grid has no scrim, it relies on
 * filter-sepia plus a shadow to stay legible over photography.
 */
.colleges-block-sub {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	display: -webkit-box;
	font-size: clamp(11px, 1.05vw, 14px);
	line-height: 1.35;
	margin-top: .5em;
	overflow: hidden;
	text-shadow: 0 0 10px rgba(0, 0, 0, .7);
}

/* At 5-up the tiles are their roomiest, so allow a fourth line. */
@media (min-width: 1200px) {
	.colleges-block-sub {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}
}

/* ---------------------------------------------------------------------------
 * Picture cards
 *
 * A responsive row of cards, each with a photo on top and a bordered white
 * body. Athena has no aspect-ratio utility, which is the one piece that has to
 * live here; everything else could be done with theme classes.
 *
 * Cards auto-fit — 3 across on desktop, 2, then 1 as space runs out — so the
 * count in the markup doesn't have to change per breakpoint.
 * ------------------------------------------------------------------------ */

.rc-cards {
	display: grid;
	gap: 1.625rem;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.rc-card {
	background: #fff;
	border: 1px solid #e5e5e5;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* 3:2 photo box — the image cover-crops to fill it, whatever its own ratio. */
.rc-card-photo {
	aspect-ratio: 3 / 2;
	background: #eee;
	overflow: hidden;
}

.rc-card-photo img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
	width: 100%;
}

.rc-card:hover .rc-card-photo img {
	transform: scale(1.045);
}

/* flex:1 keeps every card's body the same height across the row. */
.rc-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
}

.rc-card-body p:last-child {
	margin-bottom: 0;
}

/*
 * Dark variant — for cards sitting on a bg-inverse section.
 *
 * The background stays transparent so the card reads as the section's own
 * black, with only the border defining its edge.
 */
.rc-card-dark {
	background: transparent;
	border-color: #4a4a4a;
}

.rc-card-dark .rc-card-body h3 {
	color: #fff;
}

.rc-card-dark .rc-card-body p,
.rc-card-dark .rc-card-body li {
	color: #ababab;
}

.rc-card-dark .rc-card-photo {
	background: #1a1a1a;
}

/*
 * Gold rule across the top of a card, to set one apart from its neighbours.
 * Combine with .rc-card (and .rc-card-dark on a dark section).
 */
.rc-card-topline {
	border-top: 6px solid #fc0;
}

@media (prefers-reduced-motion: reduce) {
	.rc-card-photo img {
		transition: none;
	}

	.rc-card:hover .rc-card-photo img {
		transform: none;
	}
}

@media print {
	.colleges-block {
		justify-content: center !important;
		min-height: auto !important;
	}
}