/**
 * Spotlight Middle School Lesson Plans — Complete Pack landing page.
 * Deliberately distinct from the Worksheets Pack's loud multi-colour
 * "Modern Vibrant Learning" identity: navy-dominant and editorial,
 * with each of the three levels carrying one clear accent colour
 * throughout, reinforcing "three books, one system" at a glance.
 * Loaded only on page-spotlight-lesson-plans-pack.php.
 *
 * @package MyTeacher_Child
 */

.mtsl-page{
	--sl-1:#0E9A6E; --sl-1-tint:#E4F3EC;   /* Spotlight 1 — green */
	--sl-2:#E0A93F; --sl-2-tint:#FBF1DA;   /* Spotlight 2 — gold  */
	--sl-3:#1B8A8A; --sl-3-tint:#E1F1F1;   /* Spotlight 3 — teal  */
	overflow-x:hidden;
}
.mtsl-wrap{ max-width:1120px; margin:0 auto; padding:0 20px; }
.mtsl-page section{ padding:64px 0; }
.mtsl-page h1,.mtsl-page h2,.mtsl-page h3,.mtsl-page h4{ font-family:var(--mt-display); font-weight:800; letter-spacing:-.02em; color:var(--mt-navy); }
.mtsl-page p{ line-height:1.65; }

/* ---------------- HERO ---------------- */
.mtsl-hero{
	background:linear-gradient(150deg,#152A34 0%,var(--mt-navy) 55%,#2E4A5A 100%);
	color:#fff; padding:56px 0 60px; position:relative; overflow:hidden;
}
.mtsl-hero::before{
	content:""; position:absolute; inset:0;
	background-image:radial-gradient(circle, rgba(255,255,255,.06) 1.4px, transparent 1.4px);
	background-size:26px 26px; opacity:.6; pointer-events:none;
}
.mtsl-hero-grid{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.mtsl-eyebrow{
	display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1);
	border:1px solid rgba(255,255,255,.28); padding:8px 16px; border-radius:999px;
	font-family:var(--mt-display); font-weight:700; font-size:.76rem; letter-spacing:.03em;
	text-transform:uppercase; margin-bottom:20px;
}
.mtsl-hero h1{ color:#fff; font-size:clamp(1.9rem,4vw,3rem); line-height:1.12; margin:0 0 18px; }
.mtsl-hero h1 em{
	font-style:normal; background:linear-gradient(90deg,#FFE9B8,#FFFFFF 65%);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
.mtsl-lead{ font-size:1.05rem; color:rgba(255,255,255,.88); max-width:480px; margin-bottom:22px; }
.mtsl-trust-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.mtsl-trust-row span{
	background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:999px;
	padding:7px 14px; font-size:.8rem; font-weight:700; font-family:var(--mt-sans); color:#fff;
}
.mtsl-btn{
	font-family:var(--mt-display); font-weight:700; font-size:.95rem; padding:15px 30px; border-radius:999px;
	display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none; text-decoration:none;
	transition:transform .15s ease, box-shadow .15s ease;
}
.mtsl-btn:hover{ transform:translateY(-2px); }
.mtsl-btn-primary{ background:var(--mt-gold); color:var(--mt-navy); box-shadow:0 12px 28px rgba(224,169,63,.35); }
.mtsl-btn-primary:hover{ background:#F0BB58; color:var(--mt-navy); }

.mtsl-hero-books{ display:flex; flex-direction:row; gap:14px; justify-content:center; align-items:center; }
.mtsl-hero-cover{
	width:100%; max-width:150px; border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.35);
	border:3px solid rgba(255,255,255,.15);
}
.mtsl-hero-cover:nth-child(2){ transform:translateY(-14px); max-width:160px; }

@media (max-width:880px){
	.mtsl-hero-grid{ grid-template-columns:1fr; }
	.mtsl-hero-books{ order:-1; }
}

/* ---------------- SECTION HEADS ---------------- */
.mtsl-sec-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.mtsl-sec-eyebrow{
	display:inline-block; font-family:var(--mt-display); font-weight:700; font-size:.76rem;
	text-transform:uppercase; letter-spacing:.05em; color:var(--mt-green-deep); margin-bottom:10px;
}
.mtsl-sec-head h2{ font-size:clamp(1.5rem,2.8vw,2.1rem); margin:0 0 12px; }
.mtsl-sec-head p{ color:var(--mt-ink-soft); font-size:1rem; }

/* ---------------- THREE BOOKS ---------------- */
.mtsl-books-section{ background:var(--mt-cream); }
.mtsl-books-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mtsl-book-card{
	background:#fff; border-radius:20px; padding:30px 26px; box-shadow:var(--mt-shadow); border:1px solid var(--mt-line);
	border-top:6px solid; position:relative;
}
.mtsl-card-cover{
	width:100%; max-width:130px; margin:0 auto 16px; display:block; border-radius:8px; box-shadow:var(--mt-shadow);
}
.mtsl-accent-1{ border-top-color:var(--sl-1); }
.mtsl-accent-2{ border-top-color:var(--sl-2); }
.mtsl-accent-3{ border-top-color:var(--sl-3); }
.mtsl-book-tag{
	display:inline-block; font-family:var(--mt-display); font-weight:800; font-size:.78rem;
	padding:5px 13px; border-radius:999px; margin-bottom:12px;
}
.mtsl-accent-1 .mtsl-book-tag{ background:var(--sl-1-tint); color:var(--sl-1); }
.mtsl-accent-2 .mtsl-book-tag{ background:var(--sl-2-tint); color:#A9791F; }
.mtsl-accent-3 .mtsl-book-tag{ background:var(--sl-3-tint); color:var(--sl-3); }
.mtsl-book-card h3{ font-size:1.2rem; margin:0 0 10px; }
.mtsl-book-card p{ color:var(--mt-ink-soft); font-size:.92rem; margin-bottom:18px; }
.mtsl-complete-pill{
	display:inline-flex; align-items:center; font-family:var(--mt-display); font-weight:800; font-size:.76rem;
	color:var(--mt-navy); background:var(--mt-cream); border:1.5px solid var(--mt-line); padding:6px 14px; border-radius:999px;
}

@media (max-width:880px){ .mtsl-books-grid{ grid-template-columns:1fr; } }
.mtsl-total-stat{
	text-align:center; margin-top:34px; font-family:var(--mt-display); font-weight:800; font-size:1rem;
	color:var(--mt-navy);
}

/* ---------------- ZERO EXTRA MATERIAL PROMISE ---------------- */
.mtsl-promise{ background:var(--mt-navy); color:#fff; }
.mtsl-promise-grid{ display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center; }
.mtsl-promise-icon{
	font-size:2.6rem; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.2); border-radius:24px; padding:22px 26px; flex:none;
}
.mtsl-plus{ font-family:var(--mt-display); font-weight:800; font-size:1.6rem; color:var(--mt-gold); }
.mtsl-promise h2{ color:#fff; font-size:clamp(1.4rem,2.6vw,1.9rem); margin:0 0 12px; }
.mtsl-promise p{ color:rgba(255,255,255,.8); font-size:1rem; max-width:60ch; }

@media (max-width:700px){
	.mtsl-promise-grid{ grid-template-columns:1fr; text-align:center; }
	.mtsl-promise-icon{ margin:0 auto; }
}

/* ---------------- WHAT'S INSIDE ---------------- */
.mtsl-inside-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.mtsl-inside-card{
	background:#fff; border:1px solid var(--mt-line); border-radius:16px; padding:24px 20px; text-align:center;
	box-shadow:var(--mt-shadow);
}
.mtsl-inside-card span{ font-size:1.8rem; display:block; margin-bottom:12px; }
.mtsl-inside-card h4{ font-size:.98rem; margin:0 0 6px; }
.mtsl-inside-card p{ font-size:.84rem; color:var(--mt-ink-soft); margin:0; }

@media (max-width:880px){ .mtsl-inside-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .mtsl-inside-grid{ grid-template-columns:1fr; } }

/* ---------------- DELIVERY ---------------- */
.mtsl-delivery{ background:var(--mt-cream); }

/* ---------------- ORDER ---------------- */
.mtsl-order{
	position:relative; overflow:hidden; color:#fff; text-align:center;
	background:linear-gradient(135deg,#152A34 0%, var(--mt-navy) 45%, #1B8A8A 100%);
	border-radius:26px; padding:52px 26px; margin:0 20px;
}
.mtsl-order h2{ color:#fff; font-size:clamp(1.4rem,3vw,2rem); margin:0 0 12px; }
.mtsl-order > p{ color:rgba(255,255,255,.85); max-width:520px; margin:0 auto 24px; font-size:.98rem; }
.mtsl-order-form-wrap{ max-width:480px; margin:0 auto; text-align:left; }

.mtsl-order .mt-order-form{ background:#fff; border-radius:16px; padding:24px; box-shadow:var(--mt-shadow-lg); }
.mtsl-order .mt-order-form label{ font-family:var(--mt-display); font-weight:700; font-size:.82rem; color:var(--mt-navy); display:block; margin:12px 0 5px; }
.mtsl-order .mt-order-form input[type="text"],
.mtsl-order .mt-order-form input[type="email"],
.mtsl-order .mt-order-form input[type="tel"]{
	width:100%; padding:10px 12px; border:1.5px solid var(--mt-line); border-radius:10px; font-family:var(--mt-sans);
	font-size:.92rem; color:var(--mt-navy);
}
.mtsl-order .mt-field-note{ font-size:.8rem; color:var(--mt-ink-soft); margin:6px 0 0; }
.mtsl-order .mt-hp{ position:absolute; left:-9999px; }
.mtsl-order button[type="submit"]{
	width:100%; margin-top:18px; background:var(--mt-gold); color:var(--mt-navy); border:none; border-radius:999px;
	padding:14px; font-family:var(--mt-display); font-weight:800; font-size:.95rem; cursor:pointer;
}
.mtsl-order button[type="submit"]:hover{ background:#F0BB58; }
.mtsl-order .mt-form-error{ background:#FBE4E0; color:#8A2E1D; padding:10px 14px; border-radius:10px; font-size:.85rem; margin-bottom:12px; }

.mtsl-order .mt-payment-box{ background:#fff; border-radius:16px; padding:26px; box-shadow:var(--mt-shadow-lg); text-align:left; }
.mtsl-order .mt-payment-check{
	width:44px; height:44px; border-radius:50%; background:var(--mt-green); color:#fff; display:flex;
	align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:12px;
}
.mtsl-order .mt-payment-box h3{ color:var(--mt-navy); margin:0 0 12px; }
.mtsl-order .mt-rib-card{ background:var(--mt-cream); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.mtsl-order .mt-rib-card p{ margin:4px 0; font-size:.88rem; color:var(--mt-navy); }
.mtsl-order .mt-payment-instr{ font-size:.88rem; color:var(--mt-ink-soft); margin-bottom:16px; }
.mtsl-order .mt-btn.mt-btn-gold{
	display:inline-flex; background:var(--mt-gold); color:var(--mt-navy); font-family:var(--mt-display); font-weight:800;
	padding:12px 22px; border-radius:999px;
}

.mtsl-back-link{ text-align:center; color:var(--mt-ink-soft); font-size:.85rem; margin-top:18px; }
.mtsl-back-link a{ color:var(--mt-green-deep); font-weight:700; }