/* ============================================================
   OE GCI Hero Strip
   Full-bleed dark strip of two rolling rows of city photo tiles.
   Ported from the Global Cities Index 2026 microsite (index.html
   .hero-strip / .hero-collage.is-strip). Self-contained: all design
   tokens from the microsite are inlined so it renders identically
   regardless of the host theme. Every class is prefixed oe-block-gci-.
   ============================================================ */

.oe-block-gci-hero-strip {
	width: 100%;
	background: #091939; /* --oe-heritage-blue-dark */
	border-bottom: 1px solid rgba(0, 52, 102, 0.10); /* --line */
}

.oe-block-gci-collage {
	position: relative;
	height: clamp(210px, 23vw, 300px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 12px;                 /* --sp-3 */
	padding-block: 12px;       /* --sp-3 */
	background: #091939;
}

.oe-block-gci-collage-row {
	display: flex;
	flex: 1;
	overflow: hidden;
}

.oe-block-gci-collage-track {
	display: flex;
	gap: 12px;                 /* --sp-3 */
	flex-shrink: 0;
	padding-inline: 6px;
	animation: oe-block-gci-collage-left 85s linear infinite;
	will-change: transform;
}

.oe-block-gci-collage-row-b .oe-block-gci-collage-track {
	animation-name: oe-block-gci-collage-right;
}

/* Pause the drift when the visitor hovers or tabs into the strip. */
.oe-block-gci-collage:hover .oe-block-gci-collage-track,
.oe-block-gci-collage:focus-within .oe-block-gci-collage-track {
	animation-play-state: paused;
}

@keyframes oe-block-gci-collage-left {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}
@keyframes oe-block-gci-collage-right {
	from { transform: translate3d(-100%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

.oe-block-gci-collage-tile {
	position: relative;
	flex-shrink: 0;
	width: clamp(148px, 19vw, 214px);
	border-radius: 14px;       /* --r-md */
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(9, 25, 57, 0.28);
	margin: 0;
}

.oe-block-gci-collage-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.oe-block-gci-collage-tile-info {
	position: absolute;
	inset: auto 0 0 0;
	padding: 20px 12px 12px;   /* --sp-5 --sp-3 --sp-3 */
	background: linear-gradient(0deg, rgba(9, 25, 57, 0.88) 0%, rgba(9, 25, 57, 0) 100%);
	display: flex;
	align-items: baseline;
	gap: 8px;                  /* --sp-2 */
	margin: 0;
}

.oe-block-gci-collage-rank {
	font-size: 0.7rem;         /* --fs-2xs */
	font-weight: 700;
	color: #66BDE0;            /* --oe-sky-blue-60 */
	letter-spacing: 0.02em;
}

.oe-block-gci-collage-city {
	font-size: 0.775rem;       /* --fs-xs */
	font-weight: 600;
	color: #fff;
}

/* Edge fades read left/right on a wide strip. */
.oe-block-gci-collage-fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 90px;
	pointer-events: none;
	z-index: 2;
}
.oe-block-gci-collage-fade-start {
	left: 0;
	background: linear-gradient(90deg, #091939 0%, rgba(9, 25, 57, 0) 100%);
}
.oe-block-gci-collage-fade-end {
	right: 0;
	background: linear-gradient(270deg, #091939 0%, rgba(9, 25, 57, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.oe-block-gci-collage-track { animation: none; }
}

@media (max-width: 760px) {
	.oe-block-gci-collage { height: 190px; }
	.oe-block-gci-collage-fade { width: 48px; }
}