/*
 * One consistent card style for the [pu_post_list] shortcode, used across
 * Circulars, Events, Ph.D Notifications, and Recent Appointments. Colors
 * match the site's existing palette (same indigo/gold used in the nav
 * menu fix) rather than the 4 original bespoke per-section designs — a
 * deliberate scope choice, see wp-content/PATCHES/2026-08-11-post-list-cards.md
 */

.pu-post-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
	margin: 0;
}

/* Card padding/gap tightened 2026-08-11 for density closer to production
 * (was 16px/16px/gap 4px/3-line clamp) — see
 * wp-content/PATCHES/2026-08-11-post-list-cards.md "compact spacing"
 * addendum. */
.pu-post-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 10px;
	background: #ffffff;
	border: 1px solid #e6e6ee;
	border-left: 3px solid #4C5594;
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, border-left-color 0.2s ease-in-out;
}

.pu-post-card:hover,
.pu-post-card:focus {
	box-shadow: 0 6px 18px -4px rgba(76, 85, 148, 0.25);
	transform: translateY(-2px);
	border-left-color: #FABC2A;
}

.pu-post-card-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: #4C5594;
	margin-top: 1px;
}

.pu-post-card:hover .pu-post-card-icon,
.pu-post-card:focus .pu-post-card-icon {
	color: #FABC2A;
}

.pu-post-card-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0; /* allow title to wrap/ellipsis inside the flex child */
}

.pu-post-card-date {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #656EAF;
}

/* Event/notice-type status badge (added 2026-08-11) — real per-post
 * taxonomy data (events_type, or the matched news_tag filter term), not
 * decoration. See wp-content/PATCHES/2026-08-11-post-list-cards.md. */
.pu-post-card-badge {
	display: inline-block;
	width: fit-content;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #4C5594;
	background: #EEF0FA;
	border: 1px solid #d6d9f2;
	border-radius: 3px;
	padding: 1px 6px;
}

.pu-post-card:hover .pu-post-card-badge,
.pu-post-card:focus .pu-post-card-badge {
	color: #8a6a00;
	background: #FEF6E0;
	border-color: #f5dfa0;
}

.pu-post-card-title {
	font-size: 14px;
	line-height: 1.35;
	color: #222222;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Real featured-image thumbnail + excerpt (added 2026-08-11, Happenings
 * in PU) — see wp-content/PATCHES/2026-08-11-post-list-cards.md "photo
 * cards" addendum. Opt-in per shortcode instance via show_thumbnail /
 * show_excerpt; the other 4 sections are unaffected. */
.pu-post-card-thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 4px;
	background: #EEF0FA; /* visible while loading */
}

.pu-post-card-with-thumb {
	align-items: center;
}

/*
 * Vertically-stacked photo card (added 2026-08-13, Happenings in PU —
 * see wp-content/PATCHES/2026-08-13-mega-menu-columns-and-more.md):
 * photo as its own full-width row on top, then Date, then the
 * descriptive Text below that, top-to-bottom. Scoped to
 * :not(.pu-post-card--person) so Recent Appointments' circular-avatar
 * layout (which also uses .pu-post-card-with-thumb) is unaffected — the
 * :not() also keeps this at higher specificity than the generic
 * .pu-post-card-with-thumb rule above regardless of source order.
 */
.pu-post-card-with-thumb:not(.pu-post-card--person) {
	flex-direction: column;
	align-items: stretch;
}

.pu-post-card-with-thumb:not(.pu-post-card--person) .pu-post-card-thumb {
	/* bleed to the card's outer edge, flush with the top — compensates
	   for the card's own 8px/10px padding rather than sitting inset */
	width: calc(100% + 20px);
	height: 140px;
	margin: -8px -10px 8px;
	border-radius: 4px 4px 0 0;
}

/* Fixed card width in the horizontally-scrolling row (Happenings uses
 * nav_arrows, a real scroll container) — overrides the row's generic
 * flex:1 1 0 (built for the earlier evenly-divided static row), which
 * would otherwise collapse these to an unpredictable width in an
 * overflowing/scrollable context. Selector matched for specificity
 * against `.pu-post-card-row > .pu-post-card:not(...)`. */
.pu-post-card-row > .pu-post-card-with-thumb:not(.pu-post-card--person) {
	flex: 0 0 220px;
	width: 220px;
}

.pu-post-card-excerpt {
	font-size: 12px;
	line-height: 1.4;
	color: #555555;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 1px;
}

.pu-post-list-empty {
	color: #666666;
	font-style: italic;
	padding: 12px 0;
}

@media (max-width: 480px) {
	.pu-post-card-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Continuous bottom-to-top ticker (added 2026-08-11), pure CSS — no JS.
 * See wp-content/PATCHES/2026-08-11-post-list-cards.md "ticker" addendum.
 * The shortcode renders the card grid twice back-to-back inside
 * .pu-post-ticker-track (2nd copy aria-hidden); animating the track
 * -50% on the Y axis and looping gives a seamless continuous scroll.
 */
.pu-post-ticker-viewport {
	max-height: 420px;
	overflow: hidden;
	position: relative;
	/* soft fade at top/bottom edges so items don't hard-clip mid-card */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.pu-post-ticker-track {
	display: flex;
	flex-direction: column;
	gap: 10px;
	animation: pu-post-ticker-scroll 22s linear infinite;
}

.pu-post-ticker-track > .pu-post-card-grid {
	margin: 0;
}

.pu-post-ticker-viewport:hover .pu-post-ticker-track,
.pu-post-ticker-viewport:focus-within .pu-post-ticker-track {
	animation-play-state: paused;
}

@keyframes pu-post-ticker-scroll {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.pu-post-ticker-track {
		animation: none;
	}
}

/*
 * Person cards + horizontal left-to-right ticker (added 2026-08-11, for
 * Recent Appointments) — see
 * wp-content/PATCHES/2026-08-11-post-list-cards.md "person cards"
 * addendum. Deliberately a different scroll axis/direction from the
 * vertical bottom-to-top ticker used elsewhere, not the same effect
 * reused.
 */

/* Horizontal row instead of the wrapping grid — fixed-width cards in a
 * single line so they read as a strip, not a wrapping grid. */
.pu-post-card-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 0;
}

/* Default-style (non-person) cards inside a row — e.g. Happenings in PU's
 * static 4-item row (added 2026-08-12, see
 * wp-content/PATCHES/2026-08-12-happenings-row-and-flash-scroll.md).
 * Person cards already have their own fixed 150px width
 * (.pu-post-card--person below); this gives the default thumb+text card
 * an even, flexible share of the row instead of sizing to content. */
.pu-post-card-row > .pu-post-card:not(.pu-post-card--person) {
	flex: 1 1 0;
	min-width: 0;
}

.pu-post-card-row > .pu-post-card:not(.pu-post-card--person) .pu-post-card-title {
	-webkit-line-clamp: 2;
}

.pu-post-card-row > .pu-post-card:not(.pu-post-card--person) .pu-post-card-excerpt {
	-webkit-line-clamp: 1;
}

/* Static row (no ticker) needs its own small-screen wrap fallback, since
 * it has no horizontal-scroll viewport to rely on. Scoped to the
 * --static modifier class only — a ticker-driven row (Recent
 * Appointments) must never wrap, or the scroll animation breaks. */
@media (max-width: 700px) {
	.pu-post-card-row--static {
		flex-wrap: wrap;
	}
	.pu-post-card-row--static > .pu-post-card {
		flex: 1 1 45%;
	}
}

.pu-post-ticker-viewport--horizontal {
	max-height: none;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.pu-post-ticker-track--horizontal {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;
	width: max-content;
	animation-name: pu-post-ticker-scroll-x;
	animation-duration: 26s;
}

@keyframes pu-post-ticker-scroll-x {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Centered avatar-style card: circular photo on top, text below,
 * fixed width so it behaves as a single strip item in the horizontal
 * ticker. Falls back gracefully to the generic icon (also centered) when
 * no photo resolves for a given person. */
.pu-post-card--person {
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 150px;
	flex: 0 0 150px;
	padding: 12px 10px;
	gap: 8px;
}

.pu-post-card--person .pu-post-card-thumb {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 2px solid #EEF0FA;
}

.pu-post-card--person .pu-post-card-icon {
	width: 40px;
	height: 40px;
	margin-top: 0;
}

.pu-post-card--person .pu-post-card-body {
	align-items: center;
	gap: 3px;
}

.pu-post-card--person .pu-post-card-title {
	font-size: 12px;
	-webkit-line-clamp: 3;
}

.pu-post-card--person .pu-post-card-date {
	font-size: 10px;
}