/* Media Model — site CSS
   Component classes are added to Elementor containers by hand.
   Prefix: mediamodel-
   ------------------------------------------------------------------ */

/* Ticker ------------------------------------------------------------ */
/* One row that scrolls sideways forever. It never pauses, not on hover
   and not on any other interaction. Put the items inside a container
   with the class mediamodel-ticker-track. */

.mediamodel-ticker {
	overflow: hidden;
	width: 100%;
	position: relative;
}

.mediamodel-ticker .mediamodel-ticker-track,
.mediamodel-ticker > .e-con-inner > .mediamodel-ticker-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	animation: mediamodel-ticker-move var(--mediamodel-ticker-speed, 60s) linear infinite;
	animation-play-state: running !important; /* must never pause — client rule */
}

.mediamodel-ticker:hover .mediamodel-ticker-track {
	animation-play-state: running !important;
}

.mediamodel-ticker--reverse .mediamodel-ticker-track {
	animation-direction: reverse;
}

@keyframes mediamodel-ticker-move {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* The ticker items keep their own width, they must not shrink. */
.mediamodel-ticker-track > * {
	flex: 0 0 auto;
}

/* Header search ------------------------------------------------------ */
/* The icon stays in place. The field opens to its left. */

.mediamodel-search {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.mediamodel-search-field {
	width: 0;
	opacity: 0;
	overflow: hidden;
	transition: width .35s ease, opacity .25s ease;
}

.mediamodel-search.is-open .mediamodel-search-field {
	width: 260px;
	opacity: 1;
}

.mediamodel-search-toggle {
	cursor: pointer;
	line-height: 0;
}

@media (max-width: 767px) {
	.mediamodel-search.is-open .mediamodel-search-field {
		width: 180px;
	}
}

/* Project card ------------------------------------------------------- */
/* A card with the Insights switcher off is not clickable. */

.mediamodel-card--no-link,
.mediamodel-card--no-link a {
	pointer-events: none;
	cursor: default;
}

/* Reduced motion ----------------------------------------------------- */
/* The ticker is decoration, so it stops for people who ask for less
   motion. This is an accessibility rule, not a hover pause. */

@media (prefers-reduced-motion: reduce) {
	.mediamodel-ticker .mediamodel-ticker-track {
		animation: none !important;
		transform: none !important;
	}
}

/* Ticker items ------------------------------------------------------- */

.mediamodel-ticker-item {
	display: inline-flex;
	align-items: center;
	background: #FFFFFF;
	border-left: 3px solid #FAD75F;
	color: #0F2873;
	font-family: "Sora", sans-serif;
	font-size: 13px;
	line-height: 1.4;
	padding: 14px 18px;
	margin-right: 10px;
	max-width: 260px;
}

/* Category bands ----------------------------------------------------- */

.mediamodel-band {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 340px;
	height: 190px;
	margin-right: 10px;
	background-color: #0F2873;
	background-size: cover;
	background-position: center;
	text-decoration: none;
	overflow: hidden;
}

.mediamodel-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,20,45,0) 35%, rgba(10,20,45,.65) 100%);
}

.mediamodel-band-name {
	position: relative;
	z-index: 1;
	padding: 18px;
	color: #FAD75F;
	font-family: "Arvo", serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
}

/* Read more ---------------------------------------------------------- */

.mediamodel-readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #0F2873;
	font-family: "Sora", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.mediamodel-readmore:hover {
	color: #0E2052;
}

.mediamodel-eyebrow {
	display: inline-block;
	font-family: "Sora", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}