/* ==========================================================================
   VANE — Portfolio Companies
   Home page logo marquee + Portfolio page year grid
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Logo marquee  [vane_logo_marquee]
   -------------------------------------------------------------------------- */

.vane-marquee {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  width: 100%;
}

.vane-marquee__row {
  overflow: hidden;
  width: 100%;
}

.vane-marquee__track {
  display: flex;
  width: max-content;
  animation-name: vane-marquee-scroll;
  animation-duration: var(--vane-marquee-duration, 40s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.vane-marquee__row--reverse .vane-marquee__track {
  animation-direction: reverse;
}

@keyframes vane-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.vane-portfolio__year {
	scroll-margin-top: 120px;
}

/* Gap is margin, not flex-gap — keeps the translateX(-50%) loop point exact.
   Card width + margin must equal the $step value in the PHP shortcode (264). */
.vane-marquee__card {
  flex: 0 0 auto;
  width: 240px;
  height: 156px;     
  margin-right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;         
  overflow: hidden;  
  background: #ffffff;
  border: 1px solid #E6E8EB;
  border-radius: 10px;
  box-sizing: border-box;
  text-decoration: none;
}

a.vane-marquee__card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.vane-marquee__card:hover {
  box-shadow: 0 4px 14px rgba(0, 56, 94, 0.12);
  transform: translateY(-2px);
}

.vane-marquee:hover .vane-marquee__track {
  animation-play-state: paused;
}


/* --------------------------------------------------------------------------
   2. Portfolio page: year-grouped grid  [vane_portfolio_grid]
   -------------------------------------------------------------------------- */


/* ---------- Portfolio page: year-grouped grid ---------- */

.vane-portfolio {
	width: 100%;
}

.vane-portfolio__year {
	display: flex;
	width: 100%;
	padding: 60px 0;
	flex-direction: column;
	align-items: center;
	gap: 40px;
		border-top: 1px solid var(--Mint, #ABE2C7);

}



.vane-portfolio .vane-portfolio__year:first-of-type {
	border-top: none;
}

.vane-portfolio__heading {
	margin: 0;
	color: var(--Blue, #00385E);
	text-align: center;
	font-variant-numeric: lining-nums tabular-nums;
	font-family: Cormorant, "Cormorant Garamond", serif;
	font-size: 44px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
}

.vane-portfolio__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 20px 50px;
	width: 100%;
	max-width: 1270px; /* 4 × 280 + 3 × 50 */
	margin: 0 auto;
}

.vane-portfolio-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0px;
	width: 280px;
}

.vane-portfolio-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 280px;
	height: 210px;
}

.vane-portfolio-card__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.vane-portfolio-card__name {
	color: var(--Navy, #000F3B);
	text-align: center;
	text-decoration: none;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}

a.vane-portfolio-card__name:hover,
a.vane-portfolio-card__name:focus {
	color: var(--Blue, #00385E);
	text-decoration: underline;
}

@media (max-width: 1023px) {
	.vane-portfolio__grid {
		gap: 40px;
	}
}

@media (max-width: 767px) {
	.vane-portfolio__year {
		padding: 40px 0;
		gap: 28px;
	}
	.vane-portfolio__heading {
		font-size: 32px;
	}
	.vane-portfolio__grid {
		gap: 32px 24px;
	}
	.vane-portfolio-card {
		width: calc(50% - 12px);
	}
	.vane-portfolio-card__media {
		width: 100%;
		height: 140px;
	}
}

/* --- Marquee logo sizing (overrides section 1) --- */
.vane-marquee__card {
	height: 156px;
	padding: 0;
	overflow: hidden;
}
.vane-marquee__card img {
	max-width: var(--logo-w, 170px);
	max-height: var(--logo-h, 90px);
	width: auto;
	height: auto;
	object-fit: contain;
	transform: none;
}
/* --- Full-bleed year dividers --- */
html {
	overflow-x: clip; /* contains the 100vw bleed without creating a scroll container */
}

.vane-portfolio__year {
	position: relative;
	border-top: none;
}

.vane-portfolio__year::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	border-top: 1px solid var(--Mint, #ABE2C7);
	pointer-events: none;
}

.vane-portfolio .vane-portfolio__year:first-of-type::before {
	display: none;
}