/* ===========================================================================
   DKB Langs v14 — HARDENED mobile fixes + Telugu-parity styling
   Loaded AFTER dkb-telugu.css so it wins the cascade.
   Scoped to prevent affecting Telugu.
   ========================================================================== */

/* ---------- 1. NUKE horizontal scroll ONCE AND FOR ALL ---------- */
html { max-width: 100vw; overflow-x: hidden !important; }
body { max-width: 100vw; overflow-x: hidden !important; }
.dkb-te-hub, .dkb-te-lessontop, .dkb-te-lessonfoot,
.dkb2-sec, .dkb2-grid, .dkb2-grid-phrase, .dkb2-phrase,
.dkb2-native, .dkb2-meaning, .dkb2-pron, .dkb2-phrase-top,
.dkb-te-fold, .dkb-te-foldbody,
.dkb-share-bar, .dkb2-share-slot {
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

/* ---------- 2. FORCE word wrapping on ALL text nodes inside cards ---------- */
.dkb2-phrase *,
.dkb2-native, .dkb2-meaning, .dkb2-pron,
.dkb-te-foldbody, .dkb-te-foldbody * {
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
	white-space: normal !important;
	hyphens: auto;
}

/* Flex header of each card wraps neatly on mobile */
.dkb2-phrase-top {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	row-gap: 6px !important;
	column-gap: 8px !important;
}

/* ---------- 3. Card / grid layouts stay inside viewport ---------- */
.dkb2-grid,
.dkb2-grid-phrase {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
	gap: 12px !important;
	max-width: 100% !important;
}

/* ---------- 4. Wide tables scroll internally, not the whole page ---------- */
.dkb-te-fold table,
.dkb2-sec table,
.dkb-te-foldbody table {
	display: block !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
}

/* ---------- 5. Share bar wraps on mobile ---------- */
.dkb-share-bar {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;
	max-width: 100% !important;
}
.dkb-share-bar .dkb-sb { white-space: nowrap; }

/* ---------- 6. Mobile-first tightening ---------- */
@media (max-width: 640px) {
	html, body { overflow-x: hidden !important; }
	.dkb-te-hub, .dkb2-sec {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.dkb2-native { font-size: 1.15rem !important; line-height: 1.4 !important; }
	.dkb2-meaning { font-size: 0.95rem !important; line-height: 1.45 !important; }
	.dkb-te-daymap .dkb-te-day-t,
	.dkb-te-days .dkb-te-day-t { font-size: 0.95rem !important; line-height: 1.3 !important; }
	/* Level cards row → 2 columns on phone instead of 6 */
	.dkb2-levels { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* ---------- 7. Level 0–5 pills row layout (like Telugu) ---------- */
.dkb2-levels {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	gap: 12px;
	max-width: 100%;
	margin: 16px 0;
}
.dkb2-level-card {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ---------- 8. Old theme starter block: hidden on hi/ta/kn/ml hubs (belt & braces) ---------- */
body.page.dkb-lang-hub .dkb2-section > h2:where(:has(+ * [class*="dkb2-starter"])) { display: none; }

/* ---------- 9. Long Malayalam / Tamil words truncate gracefully in day cards ---------- */
.dkb-te-days .dkb-te-day-t {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ---------- 10. Related lesson cards stay inside container ---------- */
.dkb-te-relgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-width: 100%; }
.dkb-te-relcard { min-width: 0; }