/* ==========================================================================
   Lespagina (single lesonderdelen) op mobiel
   Minder verticale witruimte en de volle schermbreedte voor de tekst.
   Wordt alleen op lespagina's geladen (zie lib/lesonderdelen.php).

   De lespagina bestaat uit twee Kadence Elements: de kop (kruimelpad, titel,
   auteur) en de inhoud, die .single-content vervangt. Een sectie is een
   rij met twee kolommen: de kop (h2) en de inhoud, op mobiel onder elkaar.
   De selectors zijn bewust specifieker dan de rij-CSS van Kadence
   (.kb-row-layout-idXXX > .kt-row-column-wrap), want die staat later in de pagina.
   ========================================================================== */

@media (max-width: 767px) {

	/* ---- Kop: kruimelpad, titel en auteur (Kadence Element) ------------ */

	/* Het kruimelpad staat in een paragraafblok; de browser maakt daar twee lege <p>'s van. */
	#inner-wrap > .kb-row-layout-wrap:has(.kadence-breadcrumbs) p:empty {
		display: none;
	}

	#inner-wrap > .kb-row-layout-wrap:has(.kadence-breadcrumbs) > .kt-row-column-wrap {
		padding-top: 12px;
		padding-bottom: 0;
	}

	#inner-wrap > .kb-row-layout-wrap:has(.kadence-breadcrumbs) .kadence-breadcrumbs {
		margin: 0 0 12px;
		font-size: 15px;
	}

	#inner-wrap > .kb-row-layout-wrap:has(.kadence-breadcrumbs) h1 {
		margin-top: 0;
	}

	#inner-wrap > .content-area {
		margin-top: 20px;
		margin-bottom: 24px;
	}

	/* ---- Inhoud ---------------------------------------------------------- */

	/* Lestekst 20px i.p.v. 22px (Customizer, body op mobiel). Koppen, knoppen en tags hebben een eigen maat. */
	.single-content {
		font-size: 20px;
	}

	/* De buitenste rij had 24px zijpadding bovenop die van de container: 279px tekstbreedte op 375px. */
	.single-content > .kb-row-layout-wrap > .kt-row-column-wrap {
		padding-left: 0;
		padding-right: 0;
	}

	/* Eerste rij: plattegrond + Materiaal. De ruimte boven komt al van .content-area. */
	.single-content .kt-inside-inner-col > .kb-row-layout-wrap:first-child > .kt-row-column-wrap {
		padding-top: 0;
		padding-bottom: 12px;
	}

	.single-content .kt-inside-inner-col > .kb-row-layout-wrap:first-child p.wp-block-kadence-advancedheading {
		margin-bottom: 8px;
		font-size: 24px;
	}

	.single-content .lesson-material-list {
		padding-left: 1.2em;
	}

	/* Secties (Doel, Situatieschets, ...): 48px tussen secties en 16px onder de kop was 24px en 8px. */
	.single-content .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap:has(h2) {
		padding-top: 12px;
		padding-bottom: 12px;
		row-gap: 8px;
	}

	.single-content .kt-inside-inner-col > .kb-row-layout-wrap h2.wp-block-kadence-advancedheading {
		font-size: 24px;
	}

	/* Makkelijker / Moeilijker binnen Differentiatie: kleiner dan de h2, anders klopt de hiërarchie niet meer. */
	.single-content .kt-inside-inner-col > .kb-row-layout-wrap h3.wp-block-kadence-advancedheading {
		margin-top: 16px;
		font-size: 22px;
	}

	.single-content .kt-inside-inner-col > .kb-row-layout-wrap h3.wp-block-kadence-advancedheading:first-child {
		margin-top: 0;
	}

	.single-content .video-item + .video-item {
		margin-top: 24px;
	}

	/* ---- Lid-worden-blokken (alleen voor niet-leden) --------------------- */

	.single-content .wp-block-woocommerce-memberships-non-member-content > .kb-row-layout-wrap {
		margin-top: 16px;
		margin-bottom: 16px;
	}

	/* Kadence zet de binnenkant op 75% breedte: 196px tekst in een kader van 327px. */
	.single-content .wp-block-woocommerce-memberships-non-member-content > .kb-row-layout-wrap > .kt-row-column-wrap {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding: 20px 16px;
	}

	.single-content .wp-block-woocommerce-memberships-non-member-content p {
		margin-bottom: 16px;
	}

	/* ---- Eigen secties: favoriet, offline, notities, WhatsApp ------------- */

	#inner-wrap .gym-section {
		margin: 20px 0;
	}

	#inner-wrap .gym-section + .gym-section {
		margin-top: 24px;
	}

	#inner-wrap .gym-whatsapp-share-intro {
		margin-bottom: 12px;
	}

	/* ---- Gerelateerde gymlessen (SearchWP) ------------------------------- */

	.searchwp-related h4 {
		margin-bottom: 12px;
	}

	/* SearchWP houdt ook op mobiel 4 kolommen aan: 29px breed, titels braken per letter. */
	.searchwp-related .searchwp-related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
		row-gap: 16px;
		margin-bottom: 0;
	}
}