/* ============================================================
   Magni · Brand widgets — frontend styles
   Loaded by the plugin on every page that uses Elementor. The
   theme provides --magni-* custom props, so these rules just
   reference them.
   ============================================================ */

/* ---- Logo ---- */
.magni-logo {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: inherit;
}
.magni-logo:hover { opacity: 0.92; }
.magni-logo__mark {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.magni-logo__wordmark {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
}

/* ---- Eyebrow ---- */
/* Class is in base.css already; nothing to add. */

/* ---- Display heading already in base.css ---- */

/* ============================================================
   Welcome band
   ============================================================ */
.magni-welcome { padding: var(--magni-gap-6) var(--magni-page-pad); }
.magni-welcome__inner { max-width: var(--magni-content-max); margin: 0 auto; }
.magni-welcome__heading {
	font-family: var(--magni-font-display);
	font-weight: 500;
	font-size: 34px;
	line-height: 1.1;
	color: oklch(0.18 0.02 60);
	margin: 0;
}
.magni-welcome__subhead {
	font-family: var(--magni-font-display);
	font-weight: 400;
	font-style: italic;
	font-size: 22px;
	color: oklch(0.22 0.02 60);
	margin: 10px 0 26px;
	line-height: 1.3;
}
.magni-welcome__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
}
.magni-welcome__cols p {
	font-family: var(--magni-font-body);
	font-size: 15.5px;
	line-height: 1.75;
	color: oklch(0.25 0.02 60);
	margin: 0;
}
.magni-welcome__cols em { font-style: italic; color: inherit; }

@media (max-width: 768px) {
	.magni-welcome__cols { grid-template-columns: 1fr; gap: 24px; }
	.magni-welcome__heading { font-size: 28px; }
	.magni-welcome__subhead { font-size: 18px; }
}

/* ============================================================
   Tour card
   ============================================================ */
.magni-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--magni-paper);
	border-right: 1px solid var(--magni-rule);
	transition: transform 0.25s ease;
}
.magni-card:hover { transform: translateY(-2px); }
.magni-card:last-child { border-right: none; }

.magni-card__media {
	position: relative;
	overflow: hidden;
	height: 140px;
	background: oklch(0.35 0.04 60);
}
.magni-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.6s ease;
}
.magni-card:hover .magni-card__media img { transform: scale(1.04); }

.magni-card__body { padding: 20px 18px 26px; }
.magni-card__num {
	font-family: var(--magni-font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--magni-accent);
	letter-spacing: 1.4px;
}
.magni-card__title {
	font-family: var(--magni-font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	color: var(--magni-ink);
	margin: 14px 0 0;
	min-height: 52px;
}
.magni-card__meta {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px dashed var(--magni-rule);
}
.magni-card__theme {
	font-family: var(--magni-font-body);
	font-size: 10.5px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--magni-accent-deep);
}
.magni-card__theme--jewish { color: var(--magni-ink-soft); }
.magni-card__theme--christian { color: var(--magni-accent-deep); }
.magni-card__theme--custom { color: var(--magni-ink-soft); }
.magni-card__dur {
	font-family: var(--magni-font-body);
	font-size: 12.5px;
	color: var(--magni-ink-soft);
	margin: 4px 0 0;
}

@media (max-width: 768px) {
	.magni-card { border-right: none; border-bottom: 1px solid var(--magni-rule); }
	.magni-card__title { min-height: 0; }
}

/* ============================================================
   Video card
   ============================================================ */
.magni-video-card { display: flex; flex-direction: column; cursor: pointer; }
.magni-video-card__media {
	position: relative;
	display: block;
	width: 100%;
	height: 220px;
	border: 0;
	padding: 0;
	background: oklch(0.35 0.04 60);
	overflow: hidden;
	cursor: pointer;
}
.magni-video-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.6s ease;
}
.magni-video-card:hover .magni-video-card__media img { transform: scale(1.04); }
.magni-video-card__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
	pointer-events: none;
}
.magni-video-card__play {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 68px; height: 68px; border-radius: 34px;
	background: rgba(255,255,255,0.94);
	display: flex; align-items: center; justify-content: center;
	color: var(--magni-ink);
	transition: transform 0.2s ease;
	z-index: 1;
}
.magni-video-card:hover .magni-video-card__play { transform: translate(-50%, -50%) scale(1.05); }
.magni-video-card__dur {
	position: absolute; right: 12px; bottom: 12px;
	background: rgba(0,0,0,0.7); color: var(--magni-paper);
	font-family: var(--magni-font-body);
	padding: 3px 10px; font-size: 12px; letter-spacing: 0.6px;
	z-index: 1;
}
.magni-video-card__title {
	font-family: var(--magni-font-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
	margin: 18px 0 0;
}
.magni-video-card__meta {
	font-family: var(--magni-font-body);
	font-size: 13px;
	margin: 6px 0 0;
	color: oklch(0.72 0.01 60);
}
.magni-video-card--paper .magni-video-card__title { color: var(--magni-ink); }
.magni-video-card--paper .magni-video-card__meta  { color: var(--magni-ink-soft); }
.magni-video-card--dark  .magni-video-card__title { color: var(--magni-paper); }
.magni-video-card--dark  .magni-video-card__meta  { color: oklch(0.72 0.01 60); }

/* ============================================================
   YouTube lightbox (mounted by widgets.js)
   ============================================================ */
.magni-lightbox {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(0,0,0,0.92);
	display: flex; align-items: center; justify-content: center;
	padding: 40px;
	animation: magni-lightbox-in 0.18s ease;
}
@keyframes magni-lightbox-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.magni-lightbox__frame {
	position: relative;
	width: 100%; max-width: 1200px;
	aspect-ratio: 16 / 9;
	box-shadow: var(--magni-shadow-strong);
}
.magni-lightbox__frame iframe {
	width: 100%; height: 100%;
	border: 0;
	background: black;
}
.magni-lightbox__close {
	position: absolute; right: -40px; top: -40px;
	width: 40px; height: 40px;
	background: transparent; color: white;
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 20px;
	cursor: pointer;
	font-size: 18px;
	line-height: 38px;
	text-align: center;
	padding: 0;
}
.magni-lightbox__close:hover { background: rgba(255,255,255,0.1); }