/* ===== Main lesson wrappers ===== */


.lesson-section-alt {
	background: #f8fbff;
	padding: 40px 24px;
	border-radius: 20px;
	margin: 40px 0;
}

.lesson-layout {
	max-width: 1100px;
	margin: 20px auto 0;
	padding: 0 20px;
	border-radius: 16px;
	background: #f8fbff;
	padding-bottom: 40px;
}

.lesson-content {
	background: #ffffff;
	padding: 0 30px 40px;
	border-radius: 12px;
}

.lesson-layout .sidebar,
.lesson-layout aside {
	display: none;
}

/* ===== Hero / top area ===== */

.lesson-content > .wp-block-image:first-child {
	margin-bottom: 24px;
}

.lesson-content > .wp-block-heading.has-text-align-center:first-of-type {
	margin-bottom: 18px;
}

.lesson-content p:last-of-type {
	padding-bottom: 30px;
}

/* ===== Summary / quickview boxes ===== */

.lesson-phase,
.lesson-quickview {
	border: 1px solid #d9e2ec;
	border-radius: 12px;
	padding: 18px;
	margin: 0 auto 24px;
	max-width: 900px;
}

.lesson-quickview {
	background: #f9fafb;
}

/* ===== Section headings ===== */

.lesson-section-title {
	margin-top: 34px;
	margin-bottom: 18px;
}

.lesson-subsection-title {
	margin-bottom: 14px;
}

/* ===== Spacing helpers ===== */

.lesson-spacing,
.indent {
	margin-top: 16px;
	padding-left: 24px;
}

/* ===== Instructional callouts ===== */

.lesson-note,
.lesson-action,
.lesson-watch {
	padding: 14px 16px;
	margin: 14px 0;
	border-radius: 8px;
}

.lesson-note {
	border-left: 5px solid #7db7ff;
	background: #f8fbff;
}

.lesson-action {
	border-left: 5px solid #4fb3bf;
	background: #f7fcfc;
}

.lesson-watch {
	border-left: 5px solid #f2c94c;
	background: #fffdf5;
}

/* ===== Generic callouts ===== */

.post-callout {
	padding: 20px 22px;
	border-radius: 14px;
	margin: 20px auto;
}

.post-callout-blue { background: #f4f9ff; border: 1px solid #dbeafe; }
.post-callout-teal { background: #f3fbfb; border: 1px solid #cdeeed; }
.post-callout-yellow { background: #fffbea; border: 1px solid #f6e7a8; }

/* ===== Buttons ===== */

.jump-cta-button .wp-block-button__link {
	border-radius: 999px;
	padding: 14px 24px;
	font-weight: 600;
}

.wp-block-buttons:has(.jump-cta-button) {
	margin-top: 24px;
	margin-bottom: 10px;
}

/* ===== Accordion ===== */

.accordion-yellow {
	margin: 18px 0;
	border: 1px solid #ecd98b;
	border-radius: 14px;
	background: #fffdf5;
	overflow: hidden;
}

.accordion-yellow summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 18px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}

.accordion-yellow summary::-webkit-details-marker {
	display: none;
}

.accordion-yellow[open] summary {
	border-bottom: 1px solid #f0e2aa;
}

.accordion-yellow > *:not(summary) {
	padding: 0 18px;
}

/* ===== Code blocks ===== */

.wp-block-preformatted {
	white-space: pre-wrap;
	background: #111827;
	color: #f9fafb;
	padding: 16px 18px;
	border-radius: 12px;
	overflow-x: auto;
	font-size: 0.95rem;
}

/* ===== Coding Shorts ===== */

.coding-shorts-section {
	background: #f8fbff;
	border: 1px solid #dbeafe;
	border-radius: 18px;
	padding: 24px;
	margin: 26px auto;
}

/* ===== Downloads ===== */

.download-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 18px;
	padding: 24px 20px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.05);
	height: 100%;
}

/* ===== Premium CTA ===== */

.premium-cta-card {
	max-width: 900px;
	margin: 24px auto;
	padding: 28px 24px;
	border-radius: 22px;
	background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
	border: 1px solid #dbeafe;
}

/* ===== Lists / paragraphs ===== */

.lesson-content ul.wp-block-list {
	padding-left: 22px;
}

.lesson-content ul.wp-block-list li {
	margin-bottom: 10px;
}

.lesson-content p {
	line-height: 1.75;
}

/* =========================================================
   REAL-WORLD CONNECTIONS GRID (FINAL CLEAN VERSION)
========================================================= */

.wp-block-columns.lesson-grid {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;

	--wp--style--block-gap: 16px !important;
	gap: 16px !important;

	margin: 20px 0 24px !important;
}

.wp-block-columns.lesson-grid > .wp-block-column {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Cards */

.lesson-card {
	background: #ffffff;
	padding: 28px 26px;
	border-radius: 20px;
	box-shadow: 0 10px 28px rgba(0,0,0,0.06);
	border: 1px solid #eef2f7;

	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.lesson-card h3 {
	margin-bottom: 14px;
}

.lesson-card ul {
	padding-left: 20px;
	margin-top: 12px;
}

.lesson-card li {
	margin-bottom: 10px;
}

/* ===== Images ===== */

.lesson-content .wp-block-image.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* ===== CTA alignment fix ===== */

.cta-left {
	text-align: left;
}

.cta-left ul {
	padding-left: 20px;
	max-width: 700px;
}

.cta-left p {
	max-width: 700px;
}

/* ===== Closing ===== */

.lesson-closing {
	padding-bottom: 40px;
}

/* ===== Responsive ===== */

@media (max-width: 900px) {
	.lesson-layout {
		padding: 0 14px;
	}

	.lesson-content {
		padding: 0 18px 28px;
	}
}

@media (max-width: 781px) {
	.wp-block-columns.lesson-grid {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.lesson-grid > .wp-block-column {
		flex: 1 1 100% !important;
	}
}