/**
 * The right-hand blog / advertising column (DESIGN-CHANGES BS,
 * design-changes-27-10-2026: .promo-col / .promo-item). Rendered by
 * ts_render_promo_column() in inc/sponsored-sidebar.php.
 *
 * Wide screens: a 240px column (48px gap) that pins below the sticky header.
 * Below 1180px it drops under the listings as a row that swipes sideways
 * (240px per post). On the archives it sits inside the existing 260px
 * sidebar and scrolls with it; below 960px it becomes the same swipe row.
 *
 * The three-column grids only switch on above 1180px, so each page keeps
 * its own small-screen layout untouched.
 */

/* ── The column ── */
.promo-col { display: flex; flex-direction: column; gap: 40px; padding-top: 8px; padding-bottom: 24px; position: sticky; top: 104px; min-width: 0; align-self: start; }
.promo-item { min-width: 0; }
.promo-item-img { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; margin-bottom: 14px; background: #E8DDD2; transition: transform 0.3s ease; }
.promo-item:hover .promo-item-img { transform: scale(1.02); }
.promo-item-eyebrow { font-size: 10px; font-weight: 400; color: var(--stone, #8C8278); margin-bottom: 6px; }
.promo-item-title { font-family: 'Inter', sans-serif; /* the design's display face; the theme's --ff-display is a serif */ font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: #000; line-height: 1.15; margin-bottom: 8px; }
.promo-item-title a { color: inherit !important; text-decoration: none !important; }
.promo-item-link { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink, #1C1A18) !important; text-decoration: underline !important; text-underline-offset: 3px; transition: color 0.15s; }
.promo-item-link:hover { color: var(--mascot, #B48970) !important; }

@media (max-width: 1180px) {
	.promo-col { grid-column: 1 / -1; position: static; flex-direction: row; overflow-x: auto; gap: 24px; padding-top: 16px; -webkit-overflow-scrolling: touch; }
	.promo-item { flex: 0 0 240px; min-width: 240px; }
}

/* ── Archives (blog, podcast, TV): inside the existing right-hand sidebar ── */
.blog-sidebar .promo-col { position: static; top: auto !important; flex-direction: column; overflow: visible; gap: 32px; padding: 8px 0 0; grid-column: auto; margin-top: 8px; }
.blog-sidebar .promo-item { flex: none; min-width: 0; }
@media (max-width: 960px) {
	/* A grid item won't shrink below its content: without min-width 0 the swipe
	   row would stretch the stacked sidebar (and the page) sideways. */
	.blog-sidebar:has(> .promo-col) { min-width: 0; max-width: 100%; }
	.blog-sidebar .promo-col { flex-direction: row; overflow-x: auto; gap: 24px; max-width: 100%; }
	.blog-sidebar .promo-item { flex: 0 0 240px; min-width: 240px; }
}

/* ── Teacher + Homeschool Community Directories: a third column ── */
@media (min-width: 1181px) {
	.bc-dir-page-shell.has-promos { max-width: 1500px; grid-template-columns: 260px minmax(0, 1fr) 240px; gap: 48px; }
}
.bc-dir-page-shell.has-promos > .promo-col { min-width: 0; }

/* ── Merch, Self-Care, Meetups & Events: a third column ── */
@media (min-width: 901px) {
	/* The 10% side margins give their width to the new column. */
	section.merch-grid-section.has-promos { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1181px) {
	.merch-grid-section .merch-grid-inner.has-promos { max-width: 1700px; margin: 0 auto; grid-template-columns: 260px minmax(0, 1fr) 240px; gap: 48px; }
}
.merch-grid-section .merch-grid-inner.has-promos > .promo-col { min-width: 0; }
/* Meetups: price and "Reserve My Spot" may wrap so the button stays inside the card. */
.merch-grid-inner.has-promos .merch-product-footer,
.merch-grid-inner.has-promos .event-card-footer { flex-wrap: wrap; row-gap: 8px; }
.merch-grid-inner.has-promos .merch-add-btn { white-space: nowrap; }