/* ================================================================
   NADLANISTIM — MEET THE NADLANIST (ported from app/v6/v6.css →
   Stories / Meet the Nadlanist / shared card footer)
   ================================================================
   A single side-by-side glass card: image one side, rotating testimonial the other, with a
   CTA + arrows + dots footer. The card-footer primitives (.nad-cardfoot/.nad-cardarrow/
   .nad-carddot) are shared with the Job Rotator.
   ================================================================ */

@keyframes nad-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nad-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ===== Story card (side-by-side shell) ===== */
.nad-story { padding: 36px; border-radius: var(--nad-r-lg); display: flex; flex-direction: column; gap: 24px; transition: transform .5s var(--nad-t); }
.nad-story:hover { transform: translateY(-4px); }
.nad-story--lg { padding: 0; overflow: hidden; flex-direction: row; }
.nad-story__img { margin: 0; border-radius: var(--nad-r); overflow: hidden; border: 1px solid var(--nad-line); }
.nad-story--lg .nad-story__img { flex: 1; min-height: 360px; margin: 0; border-radius: 0; }
/* Ancestor prefix out-specifies Elementor's `.elementor img { height:auto }`. */
.nad-story--lg .nad-story__img img { width: 100%; height: 100%; object-fit: cover; }
.nad-story--lg .nad-story__body { flex: 1; padding: 48px; display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.nad-story blockquote { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; font-weight: 400; letter-spacing: -0.01em; color: var(--nad-ink); }
.nad-story__by { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.nad-story__name { font-weight: 600; font-size: 15px; color: var(--nad-ink); }
.nad-story__role { font-size: 13px; color: var(--nad-muted); }

/* ===== Meet the Nadlanist ===== */
.nad-meet { position: relative; height: 440px; }
.nad-meet__eyebrow {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	padding: 7px 14px; border-radius: 999px;
	background: rgba(139,92,246,.15); border: 1px solid rgba(139,92,246,.25);
	color: #C4B5FD; font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
/* Only the active slide/image is shown; the rotator script toggles .is-active. */
.nad-meet__slide { display: none; flex-direction: column; gap: 24px; }
.nad-meet__slide.is-active { display: flex; animation: nad-fade-up .6s var(--nad-t); }
.nad-meet__img { overflow: hidden; position: relative; }
.nad-meet .nad-meet__img img { display: none; object-position: center center; transform: scale(1.06); transform-origin: center center; }
.nad-meet .nad-meet__img img.is-active { display: block; animation: nad-fade .8s var(--nad-t); }

/* ===== Shared rotating-card footer (Meet + Job Rotator) ===== */
.nad-cardfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; }
:is([class*="elementor-widget-nadlanistim_"], .nad-drawer) .nad-cardcta { padding: 11px 22px; font-size: 14px; }
.nad-cardnav { display: flex; align-items: center; gap: 12px; }
/* Prefixed so Elementor's Global Kit button styling cannot repaint these as accent pills. */
/* BARE chevrons by default. The reference's `.v6-root button` reset (0,1,1) overrides
   `.v6-cardarrow`'s fill/border (0,1,0), so it renders as a plain glyph and only fills on
   hover — replicate that, don't ship the un-reset CSS values. */
[class*="elementor-widget-nadlanistim_"] .nad-cardarrow {
	width: 40px; height: 40px; min-width: 0; min-height: 0; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: none;
	-webkit-appearance: none; appearance: none; font: inherit;
	color: var(--nad-ink); background: none; border: 0;
	transition: all .35s var(--nad-t); flex-shrink: 0;
}
[class*="elementor-widget-nadlanistim_"] .nad-cardarrow:hover { background: var(--nad-glass-bg); transform: scale(1.06); }
[class*="elementor-widget-nadlanistim_"] .nad-cardarrow svg { width: 19px; height: 19px; }
.nad-carddots { display: flex; gap: 8px; }
/* Inactive dots are transparent in the reference (same button-reset effect) — only the
   active dot paints, widening into the cyan pill. */
[class*="elementor-widget-nadlanistim_"] .nad-carddot {
	width: 8px; height: 8px; min-width: 0; min-height: 0; border-radius: 999px;
	background: none; border: none; padding: 0; box-shadow: none;
	-webkit-appearance: none; appearance: none; cursor: pointer; transition: all .4s var(--nad-t);
}
[class*="elementor-widget-nadlanistim_"] .nad-carddot.is-active { width: 22px; background: var(--nad-cyan); }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
	.nad-meet { height: 380px; }
}
@media (max-width: 760px) {
	.nad-story { padding: 28px 22px; gap: 16px; border-radius: var(--nad-r-lg); }
	.nad-story blockquote { font-size: 16px; line-height: 1.5; }
	.nad-story--lg { flex-direction: column; padding: 0; border-radius: var(--nad-r-lg); }
	.nad-story--lg .nad-story__body { padding: 22px; gap: 14px; }
	.nad-story--lg .nad-story__img { min-height: 180px; aspect-ratio: 16/10; }
	.nad-meet { height: auto; }
	.nad-cardfoot { flex-direction: column; align-items: stretch; gap: 16px; }
	.nad-cardnav { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
	.nad-meet__slide.is-active, .nad-meet .nad-meet__img img.is-active { animation: none !important; }
}