/* ==========================================================================
   KEJ Quote Card — Kozlowski Estudio Jurídico
   Autor: Matías Castro
   ========================================================================== */

.kej-quote {
	--kej-navy: #022345;
	--kej-cream: #FFF9ED;
	--kej-gold: #9E762B;

	--kq-pad: var(--kq-pad-d, 36px 32px);
	--kq-radius: 18px;
	--kq-min-h: 0px;
	--kq-gap: 40px;
	--kq-q-font: "DM Serif Display", "DM Serif Text", Georgia, serif;
	--kq-q-fs: var(--kq-q-fs-d, 26px);
	--kq-q-lh: 1.15;
	--kq-t-font: "DM Sans", sans-serif;
	--kq-t-fs: var(--kq-t-fs-d, 15px);
	--kq-mark: var(--kej-gold);

	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: var(--kq-min-h);
	padding: var(--kq-pad);
	border-radius: var(--kq-radius);
	background: var(--kq-bg);
	border: 1px solid var(--kq-border);
	text-decoration: none;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), border-color .3s;
}

.kej-quote *,
.kej-quote *::before,
.kej-quote *::after {
	box-sizing: border-box;
}

/* Clara */
.kej-quote--light {
	--kq-bg: var(--kej-cream);
	--kq-border: var(--kej-cream);
	--kq-quote: var(--kej-navy);
	--kq-text: var(--kej-navy);
}

/* Oscura */
.kej-quote--dark {
	--kq-bg: var(--kej-navy);
	--kq-border: rgba(255, 249, 237, .22);
	--kq-quote: var(--kej-cream);
	--kq-text: #FFFFFF;
}

/* Comillas decorativas */
.kej-quote__mark {
	position: absolute;
	top: calc(var(--kq-mark-fs, 64px) * .1);
	right: calc(var(--kq-mark-fs, 64px) * .3);
	font-family: var(--kq-q-font);
	font-size: var(--kq-mark-fs, 64px);
	font-style: normal;
	line-height: 1;
	color: var(--kq-mark);
	pointer-events: none;
	user-select: none;
}

/* Frase */
.kej-quote__quote {
	margin: 0;
	font-family: var(--kq-q-font);
	font-size: var(--kq-q-fs);
	font-weight: 400;
	font-style: normal;
	line-height: var(--kq-q-lh);
	letter-spacing: 0;
	color: var(--kq-quote);
}

.kej-quote--italic .kej-quote__quote {
	font-style: italic;
}

/* deja lugar a las comillas decorativas */
.kej-quote--has-mark .kej-quote__quote {
	padding-right: var(--kq-mark-space, 20px);
}

/* Texto */
.kej-quote__text {
	margin: var(--kq-gap) 0 0;
	font-family: var(--kq-t-font);
	font-size: var(--kq-t-fs);
	font-weight: 400;
	line-height: 1.55;
	color: var(--kq-text);
}

/* Texto abajo de todo: alinea el texto entre cards de distinta frase */
.kej-quote--text-bottom .kej-quote__text {
	margin-top: auto;
	padding-top: var(--kq-gap);
}

/* Altura igualada por JS (grupo / bloque) */
.kej-quote[data-kq-h] {
	min-height: max(var(--kq-min-h), var(--kq-eq-h, 0px));
}

/* Misma altura en la fila */
.kej-quote--full {
	height: 100%;
}

.vc_column-inner:has(> .wpb_wrapper > .kej-quote--full),
.wpb_wrapper:has(> .kej-quote--full) {
	height: 100%;
}

.wpb_wrapper:has(> .kej-quote--full) {
	display: flex;
	flex-direction: column;
}

.wpb_wrapper > .kej-quote--full {
	flex: 1 1 auto;
}

/* Link */
.kej-quote--link {
	cursor: pointer;
}

.kej-quote--link:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -18px rgba(2, 35, 69, .45);
	text-decoration: none;
}

.kej-quote--dark.kej-quote--link:hover {
	border-color: rgba(255, 249, 237, .45);
}

.kej-quote--link:focus-visible {
	outline: 2px solid var(--kq-mark);
	outline-offset: 3px;
}

@media (max-width: 1024px) {
	.kej-quote {
		--kq-q-fs: var(--kq-q-fs-t, var(--kq-q-fs-d, 24px));
	}
}

@media (max-width: 767px) {
	.kej-quote {
		--kq-pad: var(--kq-pad-m, 28px 24px);
		--kq-q-fs: var(--kq-q-fs-m, 22px);
		--kq-t-fs: var(--kq-t-fs-m, var(--kq-t-fs-d, 15px));
		--kq-gap: 28px;
	}

	.kej-quote__mark {
		font-size: var(--kq-mark-fs, 52px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kej-quote {
		transition: none;
	}
}
