/* ==========================================================================
   ELLLO Newsletter Signup — Per-List Color Variants
   Extends .subscribe-banner from styles-index-new.css with a color
   modifier class for each newsletter, so each list has its own identity:

     .nl-general      Dark Blue     (All Levels)
     .nl-beginner      Light Blue    (A1)
     .nl-intermediate  Light Purple  (B1)
     .nl-advanced      Light Orange  (C1)
     .nl-teacher       Dark Red      (Teachers)

   Usage: add the modifier class alongside "subscribe-banner", e.g.
     <div class="subscribe-banner nl-beginner"> ... </div>
   ========================================================================== */

/* ---- General — Dark Blue ---- */
.subscribe-banner.nl-general{
	background:#0D3C7A;
}
.subscribe-banner.nl-general p{
	color:#cfe0f7;
}
.subscribe-banner.nl-general .btn{
	color:#0D3C7A;
}
.subscribe-banner.nl-general .btn:hover{
	background:#e4edfb;
}

/* ---- Beginner (A1) — Light Blue ---- */
.subscribe-banner.nl-beginner{
	background:#81D4FA;
	color:#003049;
}
.subscribe-banner.nl-beginner p{
	color:#04425e;
}
.subscribe-banner.nl-beginner .btn{
	background:#003049;
	color:#fff;
}
.subscribe-banner.nl-beginner .btn:hover{
	background:#00243a;
}

/* ---- Intermediate (B1) — Light Purple ---- */
.subscribe-banner.nl-intermediate{
	background:#CE93D8;
	color:#3a0a48;
}
.subscribe-banner.nl-intermediate p{
	color:#4a1259;
}
.subscribe-banner.nl-intermediate .btn{
	background:#4a148c;
	color:#fff;
}
.subscribe-banner.nl-intermediate .btn:hover{
	background:#380f6b;
}

/* ---- Advanced (C1) — Light Orange ---- */
.subscribe-banner.nl-advanced{
	background:#FFCC80;
	color:#5c3200;
}
.subscribe-banner.nl-advanced p{
	color:#6b3d00;
}
.subscribe-banner.nl-advanced .btn{
	background:#e65100;
	color:#fff;
}
.subscribe-banner.nl-advanced .btn:hover{
	background:#b64000;
}

/* ==========================================================================
   Newsletter Entry — Thumbnail Layout
   Adds an image beside each newsletter's text. Image sits left on wider
   screens, stacks on top of the text on narrow screens.
   ========================================================================== */

.newsletter-entry{
	display:flex;
	gap:22px;
	align-items:flex-start;
}

.nl-thumb{
	flex:0 0 150px;
	width:150px;
}
.nl-thumb img{
	display:block;
	width:100%;
	height:110px;
	object-fit:cover;
	border-radius:8px;
}

.nl-body{
	flex:1 1 320px;
	min-width:0;
}

@media (max-width:640px){
	.newsletter-entry{
		flex-direction:column;
	}
	.nl-thumb{
		flex:0 0 auto;
		width:100%;
		max-width:280px;
	}
	.nl-thumb img{
		height:150px;
	}
}

/* ---- Teacher — Dark Red ---- */
.subscribe-banner.nl-teacher{
	background:#7A1620;
}
.subscribe-banner.nl-teacher p{
	color:#f2c9ce;
}
.subscribe-banner.nl-teacher .btn{
	color:#7A1620;
}
.subscribe-banner.nl-teacher .btn:hover{
	background:#fbe8ea;
}