/**
 * Home sections: mission split, instructors, testimonials, newsletter band.
 *
 * @package PEN
 */

/* ==========================================================================
   Split / mission
   ========================================================================== */
.pen-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pen-split__media { position: relative; }
.pen-split__media img { width: 100%; border-radius: var(--pen-radius); display: block; }
.pen-split__media::after {
	content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1;
	border: 3px solid var(--pen-accent); border-radius: var(--pen-radius);
}
.pen-split__media { isolation: isolate; }
.pen-checklist { list-style: none; padding: 0; margin: 0 0 2rem; }
.pen-checklist li { position: relative; padding-left: 2rem; margin-bottom: .8rem; }
.pen-checklist li::before {
	content: ""; position: absolute; left: 0; top: .35em; width: 1.1rem; height: 1.1rem;
	background: var(--pen-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 860px) { .pen-split { grid-template-columns: 1fr; } .pen-split__media::after { inset: 12px -8px -12px 8px; } }

/* ==========================================================================
   Instructors
   ========================================================================== */
.pen-instructor { text-align: center; }
.pen-instructor .pen-card__media { aspect-ratio: 1 / 1; }
.pen-instructor .pen-card__media img { filter: grayscale(.35); transition: filter .2s; }
.pen-instructor:hover .pen-card__media img { filter: none; }
.pen-instructor__role { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pen-accent); font-weight: 700; }
.pen-instructor__creds { font-size: .88rem; color: var(--pen-ink-soft); margin-top: .5rem; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.pen-quote {
	position: relative; margin: 0; padding: 2rem; border-radius: var(--pen-radius);
	background: var(--pen-dark-2); color: #eceae3; border-top: 4px solid var(--pen-accent);
}
.pen-quote__stars { color: var(--pen-accent); letter-spacing: .15em; margin-bottom: .75rem; font-size: 1.1rem; }
.pen-quote blockquote { margin: 0 0 1.25rem; font-size: 1.05rem; }
.pen-quote figcaption { display: flex; align-items: center; gap: .8rem; }
.pen-quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.pen-quote__name { color: #fff; font-family: var(--pen-font-head); text-transform: uppercase; letter-spacing: .08em; }
.pen-quote__course { display: block; font-size: .8rem; color: var(--pen-sand); }

/* ==========================================================================
   Newsletter / CTA band
   ========================================================================== */
.pen-cta-band {
	position: relative; isolation: isolate; text-align: center; color: #fff;
	background: var(--pen-olive) center / cover no-repeat;
}
.pen-cta-band::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(34, 38, 18, .86);
	/* A darkened Secondary color from Theme Settings. */
	background: color-mix(in srgb, color-mix(in srgb, var(--pen-olive) 55%, #000) 88%, transparent);
}
.pen-cta-band h2 { max-width: 760px; margin-left: auto; margin-right: auto; }
.pen-cta-band p { max-width: 620px; margin: 0 auto 1.75rem; color: rgba(255,255,255,.85); }

.pen-newsletter { display: flex; gap: .5rem; max-width: 560px; margin: 0 auto; }
.pen-newsletter input[type="email"] {
	flex: 1; min-width: 0; padding: .9rem 1rem; border: 2px solid transparent; border-radius: var(--pen-radius);
	font: inherit; background: #fff; color: var(--pen-ink);
}
.pen-newsletter input[type="email"]:focus { border-color: var(--pen-accent); outline: none; }
.pen-newsletter__note { font-size: .8rem; opacity: .75; margin-top: .75rem; }
@media (max-width: 520px) { .pen-newsletter { flex-direction: column; } }

/* Newsletter form states and spam trap (used by the MailPoet integration). */
.pen-newsletter__status {
	max-width: 560px; margin: 0 auto 1rem; padding: .75rem 1rem;
	background: rgba(255, 255, 255, .12); border-left: 4px solid var(--pen-accent); text-align: left; font-weight: 600;
}
.pen-newsletter__status--invalid,
.pen-newsletter__status--error { border-left-color: #ffb4a8; }
.pen-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }