/* Phase 4 — the two long marketing pages on a phone.
   Measured first (iPhone 13, 390x844): homepage 24,482px across 13 sections
   that each carry 52px of padding top and bottom; courses archive 19,701px
   with 6,003px — seven screens — of hero, band, finder, features and learning
   paths before the first course card appears. */

/* ══ Courses archive ═════════════════════════════════════════════════════
   The page led with five promotional bands before a single course. On a
   phone the order is inverted: hero, then the filters, then the courses;
   everything that was selling the catalogue now sits below the catalogue
   itself. Desktop keeps the original order — this is a flex reorder inside
   the mobile query only, and the DOM is untouched, so nothing changes for
   screen readers on desktop or for search engines. */
@media (max-width:991px){
	.post-type-archive-courses .site-content,
	.tax-course-category .site-content{
		display:flex; flex-direction:column;
	}
	/* Unlisted children keep a middle order so nothing jumps unexpectedly. */
	.post-type-archive-courses .site-content > *,
	.tax-course-category .site-content > *{ order:50; }

	.post-type-archive-courses .ca-hero,      .tax-course-category .ca-hero{ order:1; }
	.post-type-archive-courses .ca-finder,    .tax-course-category .ca-finder{ order:2; }
	.post-type-archive-courses .ca-grid-wrap, .tax-course-category .ca-grid-wrap{ order:3; }
	.post-type-archive-courses .ca-band,      .tax-course-category .ca-band{ order:4; }
	.post-type-archive-courses .ca-feat,      .tax-course-category .ca-feat{ order:5; }
	.post-type-archive-courses .ca-paths,     .tax-course-category .ca-paths{ order:6; }
	.post-type-archive-courses .ca-trust,     .tax-course-category .ca-trust{ order:7; }
	.post-type-archive-courses .ca-proof,     .tax-course-category .ca-proof{ order:8; }
	.post-type-archive-courses .ca-faq,       .tax-course-category .ca-faq{ order:9; }

	/* The hero filled the whole first screen on its own. */
	.ca-hero{ padding-top:20px !important; padding-bottom:22px !important; }
	.ca-hero h1{ font-size:30px !important; line-height:1.15 !important; margin-bottom:10px !important; }
	.ca-hero h1 *{ font-size:inherit !important; line-height:inherit !important; }
	.ca-hero p{ font-size:15px !important; line-height:1.6 !important; }

	.ca-finder{ padding-top:14px !important; padding-bottom:18px !important; }
	.ca-band, .ca-feat, .ca-paths, .ca-trust, .ca-proof, .ca-faq{
		padding-top:30px !important; padding-bottom:30px !important;
	}
}

/* ══ Homepage ════════════════════════════════════════════════════════════ */
@media (max-width:991px){
	/* 13 sections x 104px of vertical padding was 1,352px of pure gap. */
	.home .hp-section{ padding-top:32px !important; padding-bottom:32px !important; }
	.home .hp-section h2{ font-size:26px !important; line-height:1.2 !important; margin-bottom:10px !important; }
	.home .hp-section h2 *{ font-size:inherit !important; line-height:inherit !important; }
	.home .hp-section > p,
	.home .hp-section .hp-lead{ font-size:15px !important; line-height:1.6 !important; }

	/* The "Most Popular Courses" band showed six full course cards at 502px
	   each — over three screens of a homepage. Three is enough to make the
	   point; the section already ends with "View All 56+ Courses →", so
	   nothing becomes unreachable. */
	.home .tutor-course-list > *:nth-child(n+4){ display:none !important; }

	/* Cards themselves are built for a three-up desktop grid. */
	.home .hp-feat-card, .home .hp-benefit-item, .home .hp-expert-card,
	.home .hp-fc-card, .home .hp-svc-card, .home .hp-workshop-card{
		padding:16px !important;
	}
	.home .hp-feat-card p, .home .hp-benefit-item p, .home .hp-expert-card p,
	.home .hp-fc-card p, .home .hp-svc-card p{
		font-size:14px !important; line-height:1.55 !important; margin-bottom:0 !important;
	}
	.home .hp-feat-grid, .home .hp-services-grid, .home .hp-featured-grid,
	.home .hp-benefits-grid, .home .hp-experts-grid{ gap:12px !important; }
}

@media (max-width:400px){
	.ca-hero h1{ font-size:27px !important; }
	.home .hp-section h2{ font-size:23px !important; }
}