/* El Paseo Promotions
   Retune the whole look from these tokens. */
.eppr {
	--eppr-bg:      #faf3f1; /* feed background        */
	--eppr-ink:     #2b2b2b; /* titles + body text     */
	--eppr-mauve:   #6a3b4e; /* category + CTA labels  */
	--eppr-accent:  #97a51f; /* olive bar + badge      */
	--eppr-accent-ink: #3f4610; /* badge text          */
	--eppr-line:    #e3d8d4; /* header rule            */
	--eppr-media-bg: #f0efed; /* image letterbox fill  */
	--eppr-display: 'Tenor Sans', Georgia, 'Times New Roman', serif;
	--eppr-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	background: var(--eppr-bg);
	color: var(--eppr-ink);
	font-family: var(--eppr-sans);
	box-sizing: border-box;
}
.eppr * { box-sizing: border-box; }

/* Header */
.eppr-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid var(--eppr-line);
	padding-bottom: 1.75rem;
	margin-bottom: 2.5rem;
}
.eppr-heading {
	font-size: 2.5em;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}
.eppr-count {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eppr-mauve);
	white-space: nowrap;
}

/* Rows */
.eppr-row {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding: clamp(2rem, 4vw, 3.5rem) 0;
}

/* Media: image + olive bottom bar. Both react on row hover. */
.eppr-media {
	position: relative;
	overflow: hidden;
	background: var(--eppr-media-bg);
}
.eppr-media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: var(--eppr-accent);
	transition: height 0.3s ease;
	z-index: 2;
}
.eppr-media .eppr-img,
.eppr-media img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.45s ease;
	transform-origin: center;
}
.eppr-media-empty {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
}
.eppr-row:hover .eppr-media::after {
	height: 16px;
}
.eppr-row:hover .eppr-media img {
	transform: scale(1.06);
}

/* Body column */
.eppr-cat {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--eppr-mauve);
	margin-bottom: 1rem;
}
.eppr-title {
	font-family: var(--eppr-display);
	font-weight: 400;
	font-size: clamp(1.7rem, 3.4vw, 2.9rem);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0 0 1.1rem;
}
.eppr-desc {
	line-height: 1.6;
	color: #4a4340;
	max-width: 40rem;
}
.eppr-desc p { margin: 0 0 0.6rem; }
.eppr-desc p:last-child { margin-bottom: 0; }

/* Validity badge */
.eppr-valid {
	display: inline-block;
	margin-top: 1.4rem;
	padding: 0.6rem 1.1rem;
	background: var(--eppr-accent);
	color: var(--eppr-accent-ink);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* CTA link */
.eppr-cta {
	display: inline-block;
	margin-top: 1.5rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--eppr-mauve);
	color: var(--eppr-mauve);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.15s;
}
.eppr-valid + .eppr-cta { display: block; width: max-content; }
.eppr-cta:hover { opacity: 0.65; }

.eppr-empty {
	padding: 2rem 0;
	color: #7a6f6b;
	font-style: italic;
}

/* Responsive: stack image over copy */
@media (max-width: 820px) {
	.eppr-row {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}