/* ==========================================================================
   KEJ Photo Frame — Kozlowski Estudio Jurídico
   Autor: Matías Castro
   ========================================================================== */

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

	--kp-ease: cubic-bezier(.4, 0, .2, 1);
	--kp-b-size: var(--kp-b-size-d, 190px);
	--kp-b-shift: calc(var(--kp-b-size) * var(--kp-b-out, .22));

	display: flex;
	width: 100%;
	box-sizing: border-box;
	/* deja lugar al badge que sobresale y a la rotación */
	padding: calc(var(--kp-b-shift) * .6) var(--kp-b-shift);
}

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

.kej-photo--align-center { justify-content: center; }
.kej-photo--align-left   { justify-content: flex-start; }
.kej-photo--align-right  { justify-content: flex-end; }

.kej-photo__stage {
	position: relative;
	width: 100%;
	max-width: var(--kp-max-w, 100%);
}

/* Marco */
.kej-photo__frame {
	display: block;
	padding: var(--kp-frame-w, 10px);
	background: var(--kp-frame, var(--kej-cream));
	border-radius: var(--kp-radius, 14px);
	transform: rotate(var(--kp-rot, -3deg));
	transition: transform .5s var(--kp-ease), box-shadow .5s var(--kp-ease);
	text-decoration: none;
}

.kej-photo--shadow .kej-photo__frame {
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55), 0 6px 14px -8px rgba(0, 0, 0, .3);
}

.kej-photo--hover .kej-photo__frame:hover,
.kej-photo--hover .kej-photo__stage:hover .kej-photo__frame {
	transform: rotate(0deg);
}

.kej-photo__media {
	display: block;
	overflow: hidden;
	aspect-ratio: var(--kp-ratio, auto);
	/* radio interno = radio del marco - grosor, para que las curvas sean paralelas */
	border-radius: max(2px, calc(var(--kp-radius, 14px) - var(--kp-frame-w, 10px) * .6));
	background: rgba(2, 35, 69, .08);
}

.kej-photo__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--kp-focus, center);
	border-radius: 0;
}

.kej-photo--natural .kej-photo__img {
	height: auto;
}

.kej-photo__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	height: 100%;
	font: 500 14px/1.3 "DM Sans", sans-serif;
	color: var(--kej-navy);
	opacity: .6;
}

/* Badge */
.kej-photo__badge {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--kp-b-size);
	height: var(--kp-b-size);
	border-radius: 50%;
	background: var(--kp-badge, var(--kej-gold));
	color: var(--kp-badge-text, var(--kej-cream));
	text-align: center;
	box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5);
	pointer-events: none;
}

.kej-photo--b-bl .kej-photo__badge { left: calc(-1 * var(--kp-b-shift)); bottom: calc(-.6 * var(--kp-b-shift)); }
.kej-photo--b-br .kej-photo__badge { right: calc(-1 * var(--kp-b-shift)); bottom: calc(-.6 * var(--kp-b-shift)); }
.kej-photo--b-tl .kej-photo__badge { left: calc(-1 * var(--kp-b-shift)); top: calc(-.6 * var(--kp-b-shift)); }
.kej-photo--b-tr .kej-photo__badge { right: calc(-1 * var(--kp-b-shift)); top: calc(-.6 * var(--kp-b-shift)); }

/* Badge con imagen */
.kej-photo__badge--img {
	overflow: hidden;
}

.kej-photo__badge--full {
	background: transparent;
}

.kej-photo__badge-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 50%;
}

.kej-photo__badge--inside .kej-photo__badge-img {
	width: 68%;
	height: 68%;
	object-fit: contain;
	border-radius: 0;
}

.kej-photo__badge-in {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 calc(var(--kp-b-size) * .1);
}

/* Anillo interior estilo sello */
.kej-photo--ring .kej-photo__badge::after {
	content: "";
	position: absolute;
	inset: calc(var(--kp-b-size) * .055);
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: .45;
}

.kej-photo__num {
	display: flex;
	align-items: baseline;
	justify-content: center;
	font-family: var(--kp-b-font, "DM Serif Display", "DM Serif Text", Georgia, serif);
	font-size: calc(var(--kp-b-size) * var(--kp-num-k, .34));
	font-weight: 400;
	line-height: .9;
	letter-spacing: -.02em;
	font-variant-numeric: lining-nums tabular-nums;
}

/* "+" fino, como en el manual */
.kej-photo__plus {
	font-family: "DM Sans", sans-serif;
	font-weight: 200;
	font-size: .82em;
	margin-right: .04em;
	transform: translateY(-.04em);
}

.kej-photo__suffix {
	font-size: .6em;
	margin-left: .04em;
}

.kej-photo__label {
	display: block;
	margin-top: calc(var(--kp-b-size) * .04);
	font-family: var(--kp-b-font-l, "DM Sans", sans-serif);
	font-size: calc(var(--kp-b-size) * var(--kp-label-k, .1));
	font-weight: 700;
	line-height: 1.05;
}

.kej-photo--label-serif .kej-photo__label {
	font-family: var(--kp-b-font-l, "DM Serif Display", "DM Serif Text", Georgia, serif);
	font-size: calc(var(--kp-b-size) * var(--kp-label-k, .12));
	font-weight: 400;
	letter-spacing: -.005em;
}

@media (max-width: 767px) {
	.kej-photo {
		--kp-b-size: var(--kp-b-size-m, 130px);
	}

	.kej-photo--flat-m .kej-photo__frame {
		transform: none;
	}
}

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