/* Phase 3 — the single course page on a phone.
   Measured first (iPhone 13, 390x844): 6,143px / 9.3 screens, breadcrumb
   running edge-to-edge with zero padding, and the category list 223px tall
   because each pill took its own line with the separating commas orphaned
   at the start of the next one. Price and CTA are handled by the persistent
   buy bar (inc/mobile-nav.php), so this file is about the reading experience
   above it. */

@media (max-width:991px){

	/* ── Breadcrumb ──────────────────────────────────────────────────────── */
	/* It spanned the full 390px with no padding at all, so the text touched
	   both bezels and wrapped to two lines. One line that scrolls sideways
	   keeps the whole trail reachable without costing vertical space. */
	.ca-sc-breadcrumb{
		padding:0 16px !important;
		display:flex; flex-wrap:nowrap; align-items:center; gap:6px;
		overflow-x:auto; -webkit-overflow-scrolling:touch;
		scrollbar-width:none; white-space:nowrap;
		font-size:12px !important;
	}
	.ca-sc-breadcrumb::-webkit-scrollbar{ display:none; }
	.ca-sc-breadcrumb > *{ flex:0 0 auto; }

	/* ── Title ───────────────────────────────────────────────────────────── */
	.ca-sc-hero h1, .tutor-course-details-title, .single-courses h1.entry-title{
		font-size:25px !important; line-height:1.2 !important;
		margin:0 0 8px !important;
	}

	/* ── Categories ──────────────────────────────────────────────────────── */
	/* Tutor builds this list with implode(', ') around plain <a> tags, and the
	   theme renders those anchors as bordered pills. On a narrow screen each
	   pill claims its own line and every separator comma is left stranded on
	   the line below it. Zeroing the container's font size collapses those
	   bare text nodes — the commas and the "Categories:" label, which the
	   pills make redundant — while <a> and <span> children (including the
	   "By <author>" line) keep their own size. */
	.tutor-course-details-info > div{
		font-size:0 !important;
		display:flex; flex-wrap:wrap; align-items:center; gap:6px;
	}
	.tutor-course-details-info > div > a,
	.tutor-course-details-info > div > span{ font-size:12px !important; }
	.tutor-course-details-info > div > a{
		margin:0 !important; padding:5px 10px !important;
		line-height:1.3 !important; border-radius:999px;
	}

	/* ── Hero spacing ────────────────────────────────────────────────────── */
	.ca-sc-hero, .tutor-course-details-header{ padding-top:12px !important; padding-bottom:12px !important; }
	.tutor-course-details-actions{ margin-top:8px !important; }
	.tutor-course-details-tab.tutor-mt-32{ margin-top:16px !important; }
	.tutor-tab.tutor-pt-24{ padding-top:14px !important; }

	/* Course stat strip: three tall cards where a compact row will do. */
	.ca-sc-stat{ padding:12px 14px !important; }
	.ca-sc-stat-num{ font-size:20px !important; }

	/* ── Section tabs ────────────────────────────────────────────────────── */
	/* The tab rail is sticky and was overlapping content; it also has to clear
	   the site header rather than sit under it. */
	.tutor-course-details-tab .tutor-nav{ padding:2px 0 !important; }
	.tutor-nav-link{ padding:11px 16px !important; font-size:14px !important; }

	/* ── Long-form body copy ─────────────────────────────────────────────── */
	.tutor-course-details-content p,
	.tutor-course-details-content li{ font-size:15px !important; line-height:1.65 !important; }
	.tutor-course-details-content h2,
	.tutor-course-details-content h3{ font-size:18px !important; margin:16px 0 8px !important; }
}

@media (max-width:400px){
	.ca-sc-hero h1, .tutor-course-details-title, .single-courses h1.entry-title{ font-size:23px !important; }
}

/* ── Stacked container padding ───────────────────────────────────────────
 * Four nested wrappers each contributed their own desktop padding before a
 * single word of the course appeared: .site-content 40px, .tutor-wrap 50px,
 * .tutor-course-details-page 24px, then a 44px margin under the header —
 * 158px of pure gap on a 390px screen. */
@media (max-width:991px){
	.single-courses .site-content{ padding-top:12px !important; }
	.tutor-wrap.tutor-full-width-course-top{ padding-top:14px !important; padding-bottom:20px !important; }
	.tutor-course-details-page{ padding-top:8px !important; }
	.tutor-course-details-header.tutor-mb-44{ margin-bottom:16px !important; }

	/* Tutor's own utility class carries the weight here, so the override has
	   to name it rather than the semantic class alone. */
	h1.tutor-course-details-title,
	h1.tutor-course-details-title.tutor-fs-4{
		font-size:24px !important; line-height:1.22 !important; margin:0 0 8px !important;
	}

	/* Tighter pills so two category chips can share a row. */
	.tutor-course-details-info > div > a{
		font-size:11.5px !important; padding:5px 9px !important; letter-spacing:.01em;
	}
}

@media (max-width:991px){
	/* The title's text is wrapped in an unclassed <span> carrying its own
	   font-size, so sizing the h1 alone changed nothing visible. */
	.single-courses h1.tutor-course-details-title,
	.single-courses h1.tutor-course-details-title *{
		font-size:24px !important; line-height:1.22 !important;
	}
}