/* ==========================================================================
   El Jefe Testimonials — Built by Web Experts
   Brand: Orange #E8792A · Dark Brown #3D1F0A · Parchment #F9F0E6
   ========================================================================== */

:root {
	--ejt-orange:      #E8792A;
	--ejt-dark-brown:  #3D1F0A;
	--ejt-mid-brown:   #7A3B10;
	--ejt-parchment:   #F9F0E6;
	--ejt-border:      #E5C99E;
	--ejt-text:        #2C1A0A;
	--ejt-muted:       #7A5C3A;
	--ejt-radius:      14px;
	--ejt-shadow:      0 6px 28px rgba(61, 31, 10, 0.13);
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.ejt-card {
	background:    var(--ejt-parchment);
	border:        1px solid var(--ejt-border);
	border-radius: var(--ejt-radius);
	padding:       30px 30px 24px;
	box-shadow:    var(--ejt-shadow);
	position:      relative;
	max-width:     480px;
	width:         100%;
	box-sizing:    border-box;
	font-family:   Georgia, 'Times New Roman', serif;
}

.ejt-card::before {
	content:       '';
	position:      absolute;
	top:           0;
	left:          0;
	right:         0;
	height:        4px;
	background:    linear-gradient(90deg, var(--ejt-orange) 0%, #c45e1a 100%);
	border-radius: var(--ejt-radius) var(--ejt-radius) 0 0;
}

/* ── Logo Bar ─────────────────────────────────────────────────────────── */
.ejt-logo-bar {
	display:        flex;
	align-items:    center;
	gap:            10px;
	margin-bottom:  18px;
	padding-bottom: 14px;
	border-bottom:  2px solid var(--ejt-border);
}

.ejt-logo-svg {
	width:       34px;
	height:      34px;
	flex-shrink: 0;
	filter:      drop-shadow(0 1px 3px rgba(0,0,0,0.15));
}

.ejt-logo-label {
	font-family:    Arial, Helvetica, sans-serif;
	font-size:      12px;
	font-weight:    800;
	color:          var(--ejt-mid-brown);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	line-height:    1.2;
}

/* ── Open Quote ───────────────────────────────────────────────────────── */
.ejt-open-quote {
	font-family:   Georgia, serif;
	font-size:     64px;
	line-height:   0.7;
	color:         var(--ejt-orange);
	opacity:       0.55;
	display:       block;
	margin-bottom: 4px;
	user-select:   none;
}

/* ── Body Text ────────────────────────────────────────────────────────── */
.ejt-body {
	font-size:   16px;
	line-height: 1.75;
	color:       var(--ejt-text);
	font-style:  italic;
	margin:      0 0 16px;
	padding:     0;
	border:      none;
	quotes:      none;
}

/* ── Stars ────────────────────────────────────────────────────────────── */
.ejt-stars {
	font-size:      20px;
	line-height:    1;
	margin-bottom:  18px;
	letter-spacing: 2px;
}

.ejt-star-filled { color: var(--ejt-orange); }
.ejt-star-empty  { color: var(--ejt-border); }

/* ── Author Row ───────────────────────────────────────────────────────── */
.ejt-author-row {
	display:     flex;
	align-items: center;
	gap:         12px;
	border-top:  1px solid var(--ejt-border);
	padding-top: 16px;
}

.ejt-avatar {
	width:         48px;
	height:        48px;
	border-radius: 50%;
	flex-shrink:   0;
	border:        2px solid var(--ejt-orange);
}

.ejt-avatar-photo {
	object-fit: cover;
}

.ejt-avatar-initial {
	background:      var(--ejt-orange);
	color:           #fff;
	font-family:     Arial, Helvetica, sans-serif;
	font-size:       20px;
	font-weight:     bold;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.ejt-author-info {
	display:        flex;
	flex-direction: column;
	gap:            3px;
}

.ejt-author-name {
	font-family: Arial, Helvetica, sans-serif;
	font-size:   15px;
	font-weight: 700;
	font-style:  normal;
	color:       var(--ejt-dark-brown);
}

.ejt-author-company {
	font-family: Arial, Helvetica, sans-serif;
	font-size:   13px;
	font-style:  normal;
	color:       var(--ejt-muted);
}

/* ── Rotator ─────────────────────────────────────────────────────────── */
.ejt-rotator {
	position: relative;
}

.ejt-rotator > .ejt-rotator-item {
	display: none;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.ejt-rotator > .ejt-rotator-item.is-active {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

/* ── Grid Layout (multiple shortcode) ────────────────────────────────── */
.ejt-grid {
	display:               grid;
	gap:                   24px;
	grid-template-columns: 1fr;
}

.ejt-grid .ejt-card {
	max-width: 100%;
}

.ejt-grid .ejt-rotator-item .ejt-card {
	max-width: 100%;
}

@media (min-width: 640px) {
	.ejt-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.ejt-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.ejt-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Empty State ──────────────────────────────────────────────────────── */
.ejt-empty {
	background:    var(--ejt-parchment);
	border:        1px dashed var(--ejt-border);
	border-radius: var(--ejt-radius);
	padding:       24px;
	text-align:    center;
	color:         var(--ejt-muted);
	font-style:    italic;
}

.ejt-empty a {
	color:           var(--ejt-orange);
	text-decoration: none;
	font-weight:     bold;
}

.ejt-empty a:hover { text-decoration: underline; }

/* ── Attribution ──────────────────────────────────────────────────────── */
/* Built by Web Experts — https://eljefe-enterprises.com */
