/**
 * Relay — Remote Posts for Elementor
 * Front-end layouts, hover effects and entrance animations.
 */

.relay {
	--relay-cols: 3;
	--relay-gap: 24px;
	--relay-accent: #4F46E5;
	--relay-radius: 18px;
	--relay-shadow: 0 6px 24px rgba(17, 20, 45, .08);
	--relay-shadow-lg: 0 22px 48px rgba(17, 20, 45, .16);
	--relay-line: rgba(17, 20, 45, .08);
	position: relative;
}
.relay *,
.relay *::before,
.relay *::after { box-sizing: border-box; }

/* ---------- Card base ---------- */
.relay-card {
	position: relative;
	background: #fff;
	border-radius: var(--relay-radius);
	overflow: hidden;
	box-shadow: var(--relay-shadow);
	transition: transform .38s cubic-bezier(.2, .7, .2, 1), box-shadow .38s cubic-bezier(.2, .7, .2, 1);
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.relay-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(79, 70, 229, .12), rgba(79, 70, 229, .04));
}
.relay-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.relay-card__media--empty { aspect-ratio: 16 / 10; }
.relay-card__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
}

/* ---------- Meta ---------- */
.relay-card__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.relay-card__cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--relay-accent);
	background: color-mix(in srgb, var(--relay-accent) 12%, transparent);
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1.4;
}
.relay-card__submeta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(17, 20, 45, .55);
}
.relay-dot { opacity: .5; }

/* ---------- Title & text ---------- */
.relay-card__title {
	margin: 2px 0 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: #14152d;
}
.relay-card__title-link,
.relay-card__title-text { color: inherit; text-decoration: none; }
.relay-card__title-link { transition: color .25s ease; background-image: linear-gradient(var(--relay-accent), var(--relay-accent)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; }
.relay-card__title-link:hover { color: var(--relay-accent); }
.relay-card__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(17, 20, 45, .68);
}

/* Whole-card link: stretch a single anchor over the card. */
.relay-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}
.relay-card--clickable { cursor: pointer; }

/* ---------- Button ---------- */
.relay-btn {
	--btn-bg: var(--relay-accent);
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--btn-bg);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	position: relative;
	z-index: 3;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.relay-btn__arrow { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.relay-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--relay-accent) 35%, transparent); }
.relay-btn:hover .relay-btn__arrow { transform: translateX(4px); }
.relay-btnstyle-soft .relay-btn { background: color-mix(in srgb, var(--relay-accent) 14%, transparent); color: var(--relay-accent); }
.relay-btnstyle-outline .relay-btn { background: transparent; color: var(--relay-accent); box-shadow: inset 0 0 0 2px var(--relay-accent); }
.relay-btnstyle-link .relay-btn { background: transparent; color: var(--relay-accent); padding-inline: 0; }
.relay-btnstyle-link .relay-btn:hover { box-shadow: none; }

/* ================= GRID ================= */
.relay-grid {
	display: grid;
	grid-template-columns: repeat(var(--relay-cols), minmax(0, 1fr));
	gap: var(--relay-gap);
}

/* ================= LIST ================= */
.relay-list { display: flex; flex-direction: column; gap: var(--relay-gap); }
.relay-card--row { flex-direction: row; align-items: stretch; }
.relay-card--row .relay-card__media { flex: 0 0 40%; aspect-ratio: auto; min-height: 100%; }
.relay-card--row .relay-card__body { justify-content: center; }

/* ================= MASONRY ================= */
.relay-masonry { column-count: var(--relay-cols); column-gap: var(--relay-gap); }
.relay-card--brick { display: block; break-inside: avoid; margin-bottom: var(--relay-gap); }
.relay-card--brick .relay-card__media { aspect-ratio: auto; }
.relay-card--brick .relay-card__media img { height: auto; }

/* ================= OVERLAY ================= */
.relay-card--overlay {
	min-height: 340px;
	justify-content: flex-end;
	color: #fff;
	isolation: isolate;
}
.relay-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(180deg, rgba(10, 12, 30, 0) 30%, rgba(10, 12, 30, .82) 100%), var(--relay-bg, none);
	background-size: cover;
	background-position: center;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.relay-card--overlay .relay-card__over-body {
	position: relative;
	z-index: 1;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.relay-card--overlay .relay-card__title { color: #fff; }
.relay-card--overlay .relay-card__title-link { color: #fff; }
.relay-card--overlay .relay-card__excerpt { color: rgba(255, 255, 255, .82); }
.relay-card--overlay .relay-card__submeta { color: rgba(255, 255, 255, .7); }
.relay-card--overlay .relay-card__cat { color: #fff; background: color-mix(in srgb, var(--relay-accent) 60%, transparent); }

/* ================= CAROUSEL ================= */
.relay--carousel { position: relative; }
.relay-carousel { overflow: hidden; }
.relay-carousel__track {
	display: flex;
	gap: var(--relay-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 6px;
	scrollbar-width: none;
}
.relay-carousel__track::-webkit-scrollbar { display: none; }
.relay-card--slide {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--relay-cols) - 1) * var(--relay-gap)) / var(--relay-cols));
}
.relay-carousel__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.relay-carousel__btn {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--relay-line);
	background: #fff;
	color: #14152d;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.relay-carousel__btn:hover { background: var(--relay-accent); color: #fff; border-color: var(--relay-accent); transform: translateY(-2px); box-shadow: var(--relay-shadow); }
.relay-carousel__btn:disabled { opacity: .35; cursor: default; transform: none; box-shadow: none; background: #fff; color: #14152d; }

/* ================= MAGAZINE ================= */
.relay-mag {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--relay-gap);
	align-items: start;
}
.relay-card--feature { grid-row: span 3; min-height: 460px; }
.relay-card--mini.relay-card--row .relay-card__media { flex-basis: 42%; }
.relay-card--mini .relay-card__title { font-size: 17px; }

/* ================= HOVER EFFECTS ================= */
.relay-hover--lift .relay-card:hover { transform: translateY(-8px); box-shadow: var(--relay-shadow-lg); }
.relay-hover--zoom .relay-card:hover .relay-card__media img { transform: scale(1.08); }
.relay-hover--zoom .relay-card:hover .relay-card__overlay { transform: scale(1.06); }
.relay-hover--glow .relay-card { transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease; }
.relay-hover--glow .relay-card:hover { box-shadow: 0 0 0 2px var(--relay-accent), var(--relay-shadow-lg); transform: translateY(-4px); }
.relay-hover--tilt .relay-card { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; transform-style: preserve-3d; }
.relay-hover--tilt .relay-card:hover { transform: perspective(900px) rotateX(2.5deg) translateY(-6px); box-shadow: var(--relay-shadow-lg); }

/* ================= ENTRANCE ANIMATIONS ================= */
.relay-item { will-change: transform, opacity; }
.relay-reveal--fade-up .relay-item,
.relay-reveal--fade .relay-item,
.relay-reveal--zoom-in .relay-item,
.relay-reveal--slide-left .relay-item {
	opacity: 0;
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--relay-i, 0) * 70ms);
}
.relay-reveal--fade-up .relay-item { transform: translateY(28px); }
.relay-reveal--zoom-in .relay-item { transform: scale(.94); }
.relay-reveal--slide-left .relay-item { transform: translateX(40px); }
.relay-reveal--fade-up .relay-item.is-in,
.relay-reveal--fade .relay-item.is-in,
.relay-reveal--zoom-in .relay-item.is-in,
.relay-reveal--slide-left .relay-item.is-in {
	opacity: 1;
	transform: none;
}

/* Editor / empty notice */
.relay-notice {
	padding: 18px 20px;
	border: 1px dashed rgba(17, 20, 45, .2);
	border-radius: 12px;
	background: rgba(79, 70, 229, .04);
	color: rgba(17, 20, 45, .7);
	font-size: 14px;
}

/* Focus visibility */
.relay a:focus-visible,
.relay button:focus-visible { outline: 2px solid var(--relay-accent); outline-offset: 3px; border-radius: 6px; }

/* ================= RESPONSIVE ================= *
 * Column counts follow Elementor's responsive --relay-cols (set per device via
 * the widget's Columns control). Only structural changes live here. */
@media (max-width: 1024px) {
	.relay-mag { grid-template-columns: 1fr; }
	.relay-card--feature { grid-row: auto; min-height: 380px; }
}
@media (max-width: 767px) {
	.relay-card--row { flex-direction: column; }
	.relay-card--row .relay-card__media { flex: 0 0 auto; aspect-ratio: 16 / 10; min-height: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.relay-item,
	.relay-card,
	.relay-card__media img,
	.relay-card__overlay,
	.relay-btn { transition: none !important; }
	.relay-reveal--fade-up .relay-item,
	.relay-reveal--fade .relay-item,
	.relay-reveal--zoom-in .relay-item,
	.relay-reveal--slide-left .relay-item { opacity: 1; transform: none; }
}