/**
 * News & Events (posts index). See home.php.
 *
 * Brand tokens are redeclared here rather than imported: home.css defines them
 * but is only enqueued on the homepage, and this page never loads it.
 */

/* Astra's own .ast-container still boxes this view with its default ~20px
   mobile side padding, stacking underneath .fc-news-wrap's own 16px and
   pushing the cards in by ~36px total instead of the intended 16px. This
   is the posts index (home.php), not a page with a stable page-id/template
   body class to hook, so target the container that actually holds our
   wrapper instead. Same fix as contact.css / leasing-details.css /
   sitemap-map.css. */
.site-content > .ast-container:has(.fc-news-template) {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.fc-news-template {
	--font-display: 'proxima-sera', Georgia, 'Times New Roman', serif;
	--font-accent: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* No page-coloured box: the mist the site body already paints runs behind
	   everything, and the cards are what sit on top of it. */
	background: transparent;
	font-family: var(--font-body);
	color: var(--ink);
}

.fc-news-template h1,
.fc-news-template h2,
.fc-news-template h3 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1em;
	letter-spacing: -0.01em;
}

.fc-news-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

.fc-news-eyebrow {
	display: block;
	font-family: var(--font-accent);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.fc-news-eyebrow--dark {
	color: var(--green);
}

/* Astra puts a 64px top margin on #primary; the page head carries its own top
   padding instead. The id qualifier is what gets this in front of Astra's own
   container-scoped rule. */
#primary.fc-news-template {
	margin-top: 0;
}

/* ============ PAGE HEAD ============
   Same shape as the All Apartments header: a centred 760px block on the plain
   mist background, green tracked eyebrow, display serif title with its last
   word in green, supporting line underneath. No banner image, so nothing here
   breaks out of the container the way the old green hero did. */
/* The header is the shared page header now — see inc/page-header.php and
   assets/page-header.css. The .fc-news-head rules that used to live here kept
   the accent word in the serif, which the style guide sets in the accent face;
   that is fixed centrally rather than in this file. */

.fc-news-body {
	padding-top: 8px;
	padding-bottom: 20px;
}

/* ============ CHIPS / RESULT LINE ============ */
.fc-news-chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding-bottom: 30px;
}

.fc-news-chips a {
	font-family: var(--font-accent);
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--warm-gray);
	text-decoration: none;
}

.fc-news-chips a.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.fc-news-resultline {
	font-family: var(--font-accent);
	font-size: 14px;
	color: var(--warm-gray);
	padding-bottom: 22px;
}

.fc-news-resultline a {
	color: var(--green);
	margin-left: 10px;
}

/* ============ GRID ============ */
.fc-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 26px;
	row-gap: 46px;
}

/* Astra's blog-grid classes are stripped in functions.php; this is the backstop
   in case a plugin or a settings change puts a column width back on the article.

   min-width: 0 is the load-bearing part. A grid track sized in fr still floors
   at the item's min-content width, so one wide image (or an image that fails to
   load and falls back to its width attribute) pushes its column past its share
   and the whole grid collapses to a single overflowing column. */
.fc-news-template .fc-news-grid > .fc-news-card {
	width: 100%;
	max-width: none;
	min-width: 0;
	float: none;
	margin: 0;
	padding: 0;
}

.fc-news-card__media,
.fc-news-card__body {
	min-width: 0;
}

/* Each post sits in its own card: white, hairline border, slightly rounded.
   The card clips its cover image, so the media needs no radius of its own. */
.fc-news-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(31, 36, 25, 0.04);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.fc-news-card:hover {
	box-shadow: 0 8px 24px rgba(31, 36, 25, 0.09);
	transform: translateY(-2px);
}

.fc-news-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--mist);
}

.fc-news-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The only hover the card has: the cover eases up a touch. Enough to read as
   live, quiet enough to stay out of the way across a dozen cards. */
.fc-news-card:hover .fc-news-card__img {
	transform: scale(1.03);
}

/* Older posts with no featured image get a brand tile instead of a gap. */
.fc-news-card__img--empty {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--green-pale), var(--mist));
}

.fc-news-card__img--empty span {
	font-family: var(--font-display);
	font-size: 17px;
	color: var(--green-dark);
	opacity: 0.7;
}

.fc-news-card__body {
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
}

/* Category pill + read time, the line that sits above every title. */
.fc-news-card__tags {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-accent);
	font-size: 12px;
}

.fc-news-template a.fc-news-pill,
.fc-news-pill {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--green-pale);
	color: var(--green-dark);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
}

.fc-news-template a.fc-news-pill:hover,
.fc-news-template a.fc-news-pill:focus {
	background: var(--green);
	color: #fff;
}

.fc-news-readtime {
	color: var(--warm-gray);
}

/* Qualified with .fc-news-template for the same reason the link colours below
   are: Astra's generated CSS sizes every h2 on the site (2.625rem here) from a
   selector that outranks or ties a bare class, and it loads after this file.
   The card titles came out at 42px without this. */
.fc-news-template .fc-news-card__title {
	font-size: 19px;
	line-height: 1em;
	margin: 0;
}

.fc-news-card__title a {
	color: inherit;
	text-decoration: none;
}

.fc-news-card__title a:hover {
	color: var(--green-dark);
}

.fc-news-card__excerpt {
	color: var(--warm-gray);
	font-size: 14.5px;
	margin: 0;
	flex: 1;
}

.fc-news-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
	font-family: var(--font-accent);
	font-size: 12px;
	color: var(--warm-gray);
	letter-spacing: 0.04em;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.fc-news-card__more {
	color: var(--green);
	text-decoration: none;
}

.fc-news-card__more:hover,
.fc-news-card__more:focus {
	text-decoration: underline;
}

/* ============ FEATURE ============
   The newest post, above the chips: cover image on the left, copy on the
   right, so it reads as the lead item without a second column of cards
   competing next to it. The card's own border/radius/shadow (.fc-news-card)
   still applies; this just swaps the stacked layout for a two-up one. */
.fc-news-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	margin-bottom: 40px;
}

.fc-news-feature .fc-news-card__media {
	aspect-ratio: auto;
	max-width: none;
	margin: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.fc-news-feature .fc-news-card__body {
	padding: 40px 44px;
	gap: 14px;
	flex: 0;
	justify-content: center;
}

.fc-news-feature .fc-news-card__excerpt,
.fc-news-feature .fc-news-card__title {
	max-width: 42ch;
}

.fc-news-template .fc-news-feature .fc-news-card__title {
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1em;
}

.fc-news-feature .fc-news-card__excerpt {
	font-size: 16px;
	flex: 0;
}

.fc-news-feature .fc-news-card__meta {
	margin-top: 4px;
}

/* ============ PAGINATION ============ */
.fc-news-template .fc-news-pagination,
.fc-news-template .navigation.pagination {
	padding: 46px 0 0;
}

.fc-news-template .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.fc-news-template .page-numbers {
	font-family: var(--font-accent);
	font-size: 14px;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--warm-gray);
	text-decoration: none;
}

.fc-news-template .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.fc-news-template .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* ============ EMPTY STATE + CLOSING BENTO ============ */
.fc-news-empty {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 54px 34px;
	text-align: center;
}

.fc-news-template .fc-news-empty h2 {
	font-size: 24px;
}

.fc-news-empty p {
	color: var(--warm-gray);
	margin: 10px auto 22px;
	max-width: 46ch;
}

.fc-news-bento {
	position: relative;
	margin: 60px 0 90px;
}

.fc-news-bento::before {
	content: '';
	position: absolute;
	inset: -28px -20px;
	background-image: radial-gradient(rgba(31, 36, 25, 0.11) 1px, transparent 1px);
	background-size: 15px 15px;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
	pointer-events: none;
}

.fc-news-bento__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.fc-news-bento__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 44px 40px;
	border-radius: 10px;
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(31, 36, 25, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fc-news-bento__card--green {
	background: var(--green);
}

.fc-news-bento__card--purple {
	background: var(--fc-slate-900);
}

.fc-news-bento__card:hover,
.fc-news-bento__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 20px 44px rgba(31, 36, 25, 0.18);
}

.fc-news-bento__card:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.fc-news-bento__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.fc-news-template .fc-news-bento__card h2,
.fc-single-template .fc-news-bento__card h2,
.fc-team-template .fc-news-bento__card h2,
.fc-sitemap-template .fc-news-bento__card h2 {
	margin: 0;
	font-size: 30px;
	color: #fff;
}

.fc-news-bento__card--green h2 b,
.fc-news-bento__card--green h2 em {
	font-family: var(--font-accent);
	font-weight: 300;
	color: var(--mist);
}

.fc-news-bento__card--purple h2 b,
.fc-news-bento__card--purple h2 em {
	font-family: var(--font-accent);
	font-weight: 300;
	color: var(--green-light);
}

.fc-news-bento__card p {
	margin: 0;
	max-width: 34ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

.fc-news-bento__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
}

.fc-news-bento__link span {
	transition: transform 0.2s ease;
}

.fc-news-bento__card:hover .fc-news-bento__link span,
.fc-news-bento__card:focus-visible .fc-news-bento__link span {
	transform: translateX(4px);
}

/* Same shape as the homepage buttons (see .btn / .btn-primary in home.css):
   small uppercase label, 600 weight, 1px tracking, 3px radius, arrow after the
   text. The element qualifier is here because Elementor's kit stylesheet
   colours every `a` with a two-class selector, which outranks a bare
   .fc-news-btn and left the label green on a green button. */
.fc-news-template a.fc-news-btn {
	background: var(--green);
	color: #fff;
	border: 1.5px solid var(--green);
	padding: 12px 22px;
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.fc-news-template a.fc-news-btn:hover,
.fc-news-template a.fc-news-btn:focus {
	background: var(--green-dark);
	border-color: var(--green-dark);
	color: #fff;
	transform: translateY(-2px);
}

/* Press feedback: cancel the hover lift and compress slightly. Faster in
   (0.1s) than out, so the press reads as instant. */
.fc-news-template a.fc-news-btn:active {
	transform: translateY(0) scale(0.97);
	transition-duration: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
	.fc-news-template a.fc-news-btn,
	.fc-news-template a.fc-news-btn:hover,
	.fc-news-bento__card,
	.fc-news-bento__card:hover,
	.fc-news-bento__card:hover .fc-news-bento__link span {
		transition: none;
		transform: none;
	}
}

/* Same reason as the button: keep card titles on the ink colour rather than
   Elementor's global link green. */
.fc-news-template .fc-news-card__title a {
	color: var(--ink);
}

.fc-news-template .fc-news-card__title a:hover {
	color: var(--green-dark);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
	.fc-news-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Side-padding standard (matches the leasing/apply page) starts at 768px,
   not just the narrower 720px query below: the desktop 40px horizontal
   padding otherwise carried down almost to phone width. */
@media (max-width: 768px) {
	.fc-news-wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Below this, two columns each get too narrow for a cover image plus a
   readable title/excerpt column; stack the feature card the same way the
   grid cards already lay out (image on top, full width). */
@media (max-width: 860px) {
	.fc-news-feature {
		grid-template-columns: 1fr;
	}

	.fc-news-feature .fc-news-card__media {
		aspect-ratio: 16 / 10;
		height: auto;
	}
}

@media (max-width: 720px) {
	.fc-news-wrap {
		padding: 0 16px;
	}

	.fc-news-grid {
		grid-template-columns: 1fr;
	}

	.fc-news-feature {
		margin-bottom: 30px;
	}

	.fc-news-feature .fc-news-card__body {
		padding: 20px 20px 22px;
	}

	.fc-news-bento__grid {
		grid-template-columns: 1fr;
	}

	/* The dot field bleeds 20px past each side of the grid, which on a phone
	   is past the screen edge and scrolled the page sideways. */
	.fc-news-bento::before {
		left: 0;
		right: 0;
	}

	.fc-news-bento__card {
		padding: 32px 28px;
	}

	.fc-news-template .fc-news-bento__card h2,
	.fc-single-template .fc-news-bento__card h2,
	.fc-sitemap-template .fc-news-bento__card h2 {
		font-size: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fc-news-card,
	.fc-news-card__img,
	.fc-news-card:hover,
	.fc-news-card:hover .fc-news-card__img {
		transition: none;
		transform: none;
	}
}

/* Scroll entrance, the same treatment the identical card gets on the homepage
   (see .news .news-item in assets/home.css), shortened for an index grid. */
@media (prefers-reduced-motion: no-preference) {
	.fc-news-template .fc-news-card {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
		            transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
		            box-shadow 0.18s ease;
		will-change: transform, opacity;
	}

	.fc-news-template .fc-news-card.is-in {
		opacity: 1;
		transform: none;
	}

	/* Restated at the .is-in specificity. `transform: none` above would
	   otherwise outrank the plain :hover rule at news.css:189 and kill the card
	   lift once it has finished arriving. Same fix as home.css:2048. */
	.fc-news-template .fc-news-card.is-in:hover {
		transform: translateY(-2px);
	}
}