/*-----------------------------------------------------------------------------------
	CogniFlow® — /funding/ page styles
	About: Layout + components for the "Ongoing projects" (funding) page only.
	       Kept in its own file (rather than style.css) so this page can be
	       redesigned freely without any risk of affecting other pages.
	Depends on: ../style.css (colour variables, fonts, .bloc/.container rhythm)
	Author: Tamas Pardy (with Claude)
-----------------------------------------------------------------------------------*/

/* = Spotlight card (the current, active project)
   One big two-column card: image tile on one side, story on the other.
-------------------------------------------------------------- */

.spotlight-card{
	display:grid;
	grid-template-columns: 1fr 1.15fr;
	align-items:stretch;
	background:#FFFFFF;
	border:1px solid rgba(0,0,0,.06);
	border-radius:28px;
	overflow:hidden;
	box-shadow:0 24px 48px rgba(45,50,80,.12), 0 2px 10px rgba(0,0,0,.04);
}

.spotlight-media{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:40px;
	min-height:260px;
	background:linear-gradient(150deg, rgba(45,50,80,.06) 0%, rgba(66,71,105,.12) 100%);
}
.spotlight-media img{
	max-width:100%;
	max-height:220px;
	width:auto;
	height:auto;
	object-fit:contain;
}

.spotlight-body{
	padding:48px;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

/* Small "this is happening right now" pill, used above the spotlight title */
.status-pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	align-self:flex-start;
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:var(--swatch-var-7096);
	background:rgba(45,50,80,.08);
	padding:7px 14px 7px 10px;
	border-radius:100px;
	margin-bottom:18px;
}
.status-dot{
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--swatch-var-7096);
	box-shadow:0 0 0 0 rgba(45,50,80,.5);
	animation:status-pulse 2.4s ease-out infinite;
}
@keyframes status-pulse{
	0%{box-shadow:0 0 0 0 rgba(45,50,80,.45);}
	70%{box-shadow:0 0 0 7px rgba(45,50,80,0);}
	100%{box-shadow:0 0 0 0 rgba(45,50,80,0);}
}

/* = Project grid (past / academic projects)
   A responsive card grid. To add a project, duplicate one
   ".project-card" block in the HTML and edit its contents —
   sizing, spacing and hover behaviour are all handled here.
-------------------------------------------------------------- */

.projects-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:32px;
	width:100%;
}

.project-card{
	background:#FFFFFF;
	border:1px solid rgba(0,0,0,.06);
	border-radius:24px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	height:100%;
	box-shadow:0 10px 30px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
	transition:transform .25s ease, box-shadow .25s ease;
}
.project-card:hover{
	transform:translateY(-6px);
	box-shadow:0 22px 40px rgba(45,50,80,.14), 0 4px 10px rgba(0,0,0,.06);
}

.project-thumb{
	aspect-ratio:4/3;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:28px;
	background:linear-gradient(150deg, rgba(45,50,80,.05) 0%, rgba(66,71,105,.09) 100%);
}
.project-thumb img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	object-fit:contain;
}

.project-body{
	padding:28px 28px 30px;
	display:flex;
	flex-direction:column;
	flex-grow:1;
}

/* Shared meta row: year badge + funder logo, used in both the
   spotlight card and every project card. */
.project-meta{
	display:flex;
	align-items:center;
	gap:14px;
	flex-wrap:wrap;
	margin-bottom:16px;
}
.project-year{
	display:inline-block;
	font-size:13px;
	font-weight:bold;
	letter-spacing:.02em;
	color:#FFFFFF;
	background:linear-gradient(274deg, var(--swatch-var-7096) 0%, var(--swatch-var-4580) 100%);
	padding:6px 14px;
	border-radius:100px;
	white-space:nowrap;
}
.project-funder-logo{
	height:26px;
	width:auto;
	max-width:120px;
	object-fit:contain;
	opacity:.85;
}

.project-card h3, .spotlight-body h2{
	line-height:1.25;
}

/* Financial-volume badge — shown under the title when a project's
   funding amount is publicly known/confirmed. Left off cards where
   we don't have a verified figure, rather than guessing. */
.project-amount{
	display:inline-block;
	font-size:13px;
	font-weight:bold;
	color:var(--swatch-var-7096);
	background:rgba(45,50,80,.07);
	padding:5px 12px;
	border-radius:100px;
	margin-bottom:14px;
	width:fit-content;
}

.project-card p, .spotlight-body p{
	color:rgba(0,0,0,.55);
}

/* "Read more" link — extends the site's .bloc-link with an arrow
   that nudges forward on hover, and always sits at the card's
   bottom edge regardless of how long the description is. */
.project-link{
	margin-top:auto;
	padding-top:18px;
	font-weight:bold;
	display:inline-flex;
	align-items:center;
	gap:6px;
}
.project-link .arrow{
	display:inline-block;
	transition:transform .2s ease;
}
.project-link:hover .arrow{
	transform:translateX(4px);
}

/* Keyboard-focus ring (style.css removes the default outline site-wide,
   so new interactive elements need their own visible focus state). */
.project-card:focus-within,
.project-link:focus-visible{
	box-shadow:0 0 0 3px rgba(45,50,80,.4);
	border-radius:8px;
}

@media (prefers-reduced-motion: reduce){
	.status-dot{animation:none;}
	.project-card, .project-card:hover, .project-link .arrow{transition:none;transform:none;}
}

/* = Responsive
-------------------------------------------------------------- */

@media (max-width:991px){
	.projects-grid{grid-template-columns:repeat(2, 1fr);}
	.spotlight-card{grid-template-columns:1fr;}
	.spotlight-media{min-height:220px;}
}

@media (max-width:767px){
	.spotlight-body{padding:32px;}
	.project-body{padding:24px;}
}

@media (max-width:575px){
	.projects-grid{grid-template-columns:1fr; gap:24px;}
}