/* ---------------------------------------------------------------------------
 * Turski.bg — lesson content template
 *
 * Loaded on single lesson / course / quiz pages only (see turski_lesson_assets),
 * AFTER Oxygen's variables.css and selectors.css, which the same function now
 * enqueues on these pages. Those two files carry the real design system —
 * .turski-table, .turski-formula, .turski-formula-box and the brand variables —
 * so nothing here re-skins them. This file only adds what the design system does
 * not cover: the heading hierarchy, table alignment, and the public locked page.
 *
 * Plain enqueued CSS rather than Oxygen global CSS on purpose: it needs tag and
 * descendant selectors against Tutor's markup, which Oxygen's importer rewrites.
 * ------------------------------------------------------------------------ */

.turski-lesson-template {
	--t-plum: var(--plum, #b45a82);
	--t-plum-deep: var(--plum-deep, #8a3f62);
	--t-plum-soft: var(--plum-soft, #c8a0b4);
	--t-plum-tint: var(--plum-tint, #f7f1f3);
	--t-ink: var(--ink, #3c2a4d);
	--t-ink-muted: var(--ink-muted, #6e6076);
	--t-border: var(--border, #e7dbe1);
	--t-surface: var(--surface, #ffffff);
	--t-radius: 12px;
	--t-measure: 46rem;
}

/* ---------------------------------------------------------------------------
 * 1. Headings — one hierarchy whether the visitor is paying or not.
 *    Lesson title is the H1, section headings inside the body are H2, and
 *    sub-points H3.
 * ------------------------------------------------------------------------ */

.turski-lesson-title,
.turski-gated__title {
	margin: 0 0 0.5rem;
	color: var(--t-ink);
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
}

.turski-lesson-subtitle,
.turski-gated__subtitle {
	margin: 0 0 1.5rem;
	color: var(--t-plum-deep);
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.35rem);
	font-weight: 600;
	line-height: 1.35;
}

.turski-lesson-template .tutor-lesson-wrapper h2,
.turski-lesson-template .tutor-course-topic-single-body h2 {
	margin: 2.5rem 0 0.75rem;
	color: var(--t-plum-deep);
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
	font-weight: 700;
	line-height: 1.3;
}

.turski-lesson-template .tutor-lesson-wrapper h3,
.turski-lesson-template .tutor-course-topic-single-body h3 {
	margin: 1.75rem 0 0.5rem;
	color: var(--t-ink);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.35;
}

/* ---------------------------------------------------------------------------
 * 2. Tables — centre the block and its cells.
 *    Note #1: "Да се центрират таблиците". The skin (border, radius, plum
 *    header, padding) stays in Oxygen's .turski-table; only alignment and the
 *    centred block are set here.
 * ------------------------------------------------------------------------ */

.turski-lesson-template .turski-table,
.turski-lesson-template .tutor-lesson-wrapper table,
.turski-lesson-template .tutor-course-topic-single-body table {
	width: auto;
	min-width: min(100%, 34rem);
	max-width: 100%;
	margin-inline: auto;
}

.turski-lesson-template .turski-table th,
.turski-lesson-template .turski-table td,
.turski-lesson-template .tutor-lesson-wrapper table th,
.turski-lesson-template .tutor-course-topic-single-body table th,
.turski-lesson-template .tutor-lesson-wrapper table td,
.turski-lesson-template .tutor-course-topic-single-body table td {
	text-align: center;
	vertical-align: middle;
}

/* The first column carries the Turkish letter or form — keep it the anchor. */
.turski-lesson-template .turski-table td:first-child {
	color: var(--t-plum-deep);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 3. The public (locked) lesson page.
 * ------------------------------------------------------------------------ */

.turski-gated__inner {
	max-width: var(--t-measure);
	margin: 0 auto;
	padding: 3rem 1.25rem 4rem;
}

.turski-gated__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.turski-gated__eyebrow a {
	color: var(--t-ink-muted);
	text-decoration: none;
}

.turski-gated__eyebrow a:hover {
	color: var(--t-plum);
	text-decoration: underline;
}

.turski-gated__intro {
	color: var(--t-ink);
	font-size: 1.05rem;
	line-height: 1.75;
}

.turski-gated__intro p {
	margin: 0 0 1rem;
}

.turski-gated__back {
	margin: 2rem 0 0;
}

.turski-gated__back a {
	color: var(--t-plum-deep);
	text-decoration: none;
}

.turski-gated__back a:hover {
	text-decoration: underline;
}

.turski-locked {
	margin: 2.5rem 0 0;
	padding: 2rem 1.5rem;
	background: var(--t-plum-tint);
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	text-align: center;
}

.turski-locked__badge {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.3em 0.8em;
	background: var(--t-surface);
	border: 1px solid var(--t-plum-soft);
	border-radius: 999px;
	color: var(--t-plum-deep);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.turski-locked__title {
	margin: 0 0 0.75rem;
	color: var(--t-ink);
	font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
}

.turski-locked__note {
	max-width: 34rem;
	margin: 0 auto 1.5rem;
	color: var(--t-ink-muted);
	line-height: 1.7;
}

.turski-locked__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.25rem;
}

.turski-locked__btn {
	display: inline-block;
	padding: 0.85em 1.75em;
	background: var(--t-plum);
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.18s ease;
}

.turski-locked__btn:hover,
.turski-locked__btn:focus-visible {
	background: var(--t-plum-deep);
	color: #fff;
}

.turski-locked__btn--secondary {
	background: var(--t-surface);
	border: 2px solid var(--t-plum);
	color: var(--t-plum-deep);
	padding: calc(0.85em - 2px) calc(1.75em - 2px);
}

.turski-locked__btn--secondary:hover,
.turski-locked__btn--secondary:focus-visible {
	background: var(--t-plum);
	color: #fff;
}

.turski-locked__link {
	color: var(--t-plum-deep);
	font-weight: 600;
	text-decoration: underline;
}

.turski-locked__signin {
	margin: 1.5rem 0 0;
	color: var(--t-ink-muted);
	font-size: 0.9rem;
}

.turski-locked__signin a {
	color: var(--t-plum-deep);
}

/* ---------------------------------------------------------------------------
 * 4. Small screens — tables scroll rather than squash the layout.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.turski-lesson-template .turski-table,
	.turski-lesson-template .tutor-lesson-wrapper table,
	.turski-lesson-template .tutor-course-topic-single-body table {
		display: block;
		min-width: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.turski-gated__inner {
		padding-top: 2rem;
	}
}

/* ---------------------------------------------------------------------------
 * 5. Course landing page (standalone design).
 *    Brief: „ДА ИЗПРАТЯ Курсове по турски език Ниво А2".
 *    Two equal columns on desktop, one column on phones — the brief is explicit
 *    that two lesson cards must never sit side by side on a phone.
 * ------------------------------------------------------------------------ */

.turski-clanding__inner {
	max-width: 60rem;
	margin: 0 auto;
	padding: 3rem 1.25rem 4rem;
}

.turski-clanding__head {
	margin-bottom: 3rem;
}

.turski-clanding__title {
	margin: 0 0 0.75rem;
	color: var(--t-ink);
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
}

.turski-clanding__subtitle {
	margin: 0 0 1.25rem;
	color: var(--t-plum-deep);
	font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
	font-weight: 600;
	line-height: 1.5;
}

.turski-clanding__lead {
	color: var(--t-ink);
	line-height: 1.75;
}

.turski-clanding__lead p {
	margin: 0 0 0.9rem;
}

.turski-clanding__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: 1.75rem;
}

.turski-btn {
	display: inline-block;
	border-radius: 999px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

/* The brief asks for a clearly larger primary and a slightly smaller secondary. */
.turski-btn--primary {
	padding: 1em 2.25em;
	background: var(--t-plum);
	color: #fff;
	font-size: 1.05rem;
}

.turski-btn--primary:hover,
.turski-btn--primary:focus-visible {
	background: var(--t-plum-deep);
	color: #fff;
}

.turski-btn--secondary {
	padding: 0.7em 1.5em;
	background: var(--t-surface);
	border: 2px solid var(--t-plum);
	color: var(--t-plum-deep);
	font-size: 0.95rem;
}

.turski-btn--secondary:hover,
.turski-btn--secondary:focus-visible {
	background: var(--t-plum);
	color: #fff;
}

.turski-clanding__h2 {
	margin: 0 0 1.25rem;
	color: var(--t-ink);
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
	font-weight: 700;
}

.turski-lgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.turski-lgrid__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The whole card is the click target, not just the title. */
.turski-lcard {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	height: 100%;
	padding: 0.75rem 0.9rem;
	background: var(--t-surface);
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	color: var(--t-ink);
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.turski-lcard:hover,
.turski-lcard:focus-visible {
	border-color: var(--t-plum);
	box-shadow: 0 6px 18px rgb(60 42 77 / 10%);
	transform: translateY(-1px);
}

.turski-lcard__thumb {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	overflow: hidden;
	background: var(--t-plum-tint);
	border-radius: 10px;
}

.turski-lcard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No per-lesson artwork exists yet, so the number stands in for the square image. */
.turski-lcard__num {
	color: var(--t-plum-deep);
	font-size: 1.35rem;
	font-weight: 800;
}

/* Long titles wrap onto the next line and are never truncated. */
.turski-lcard__title {
	flex: 1 1 auto;
	margin: 0;
	color: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.turski-lcard__status {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.turski-lcard__icon {
	font-size: 1.1rem;
	line-height: 1;
	opacity: 0.65;
}

.turski-lcard__icon--done {
	color: var(--sage, #8fa37a);
	font-weight: 800;
	opacity: 1;
}

.turski-badge--free {
	display: inline-block;
	padding: 0.25em 0.7em;
	background: var(--sage-tint, #e9eee2);
	border-radius: 999px;
	color: #4c5c3c;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.turski-clanding__empty {
	color: var(--t-ink-muted);
}

@media (max-width: 767px) {
	/* One column — lesson 1 and lesson 2 must never sit side by side on a phone. */
	.turski-lgrid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.6rem;
	}

	.turski-clanding__inner {
		padding: 2rem 1rem 3rem;
	}

	.turski-clanding__actions .turski-btn {
		width: 100%;
	}
}
/* ---------------------------------------------------------------------------
 * 6. Exercises page — two language cards acting as tabs, then a per-lesson
 *    accordion. Brief: „ДА ИЗПРАТЯ Упражнения по турски и български език ниво A1".
 * ------------------------------------------------------------------------ */

.turski-ex__inner {
	max-width: 60rem;
	margin: 0 auto;
	padding: 3rem 1.25rem 4rem;
}

.turski-ex__title {
	margin: 0 0 0.75rem;
	color: var(--t-ink);
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
}

.turski-ex__subtitle {
	margin: 0 0 1.25rem;
	color: var(--t-plum-deep);
	font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.2rem);
	font-weight: 600;
	line-height: 1.55;
}

.turski-ex__lead {
	color: var(--t-ink);
	line-height: 1.75;
}

.turski-ex__lead p {
	margin: 0 0 0.9rem;
}

.turski-ex__tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 2.25rem 0 2.5rem;
}

/* The whole card is the control, so it is a real <button role="tab">. */
.turski-excard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 1.25rem 1rem 1.5rem;
	background: var(--t-surface);
	border: 2px solid var(--t-border);
	border-radius: var(--t-radius);
	color: var(--t-ink);
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.turski-excard:hover {
	border-color: var(--t-plum-soft);
}

.turski-excard:focus-visible {
	outline: 3px solid var(--t-plum);
	outline-offset: 2px;
}

.turski-excard.is-active {
	background: var(--t-plum-tint);
	border-color: var(--t-plum);
	box-shadow: 0 6px 20px rgb(60 42 77 / 10%);
}

.turski-excard__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--t-plum-tint);
	border-radius: 10px;
}

.turski-excard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.turski-excard__ph {
	color: var(--t-plum-deep);
	font-size: 2.5rem;
	font-weight: 800;
	letter-spacing: 0.05em;
}

.turski-excard__title {
	color: var(--t-ink);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

.turski-excard__note {
	color: var(--t-ink-muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

.turski-excard__cta {
	display: inline-block;
	margin-top: 0.35rem;
	padding: 0.6em 1.35em;
	background: var(--t-plum);
	border-radius: 999px;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
}

.turski-expanel[hidden] {
	display: none;
}

.turski-expanel__h2 {
	margin: 0 0 1.25rem;
	color: var(--t-ink);
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem);
	font-weight: 700;
}

.turski-acc,
.turski-exlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.turski-acc__item + .turski-acc__item {
	margin-top: 0.5rem;
}

.turski-acc__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 1rem;
	background: var(--t-surface);
	border: 1px solid var(--t-border);
	border-radius: 10px;
	color: var(--t-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.turski-acc__head:focus-visible {
	outline: 3px solid var(--t-plum);
	outline-offset: 2px;
}

.turski-acc__head--empty {
	background: transparent;
	color: var(--t-ink-muted);
	cursor: default;
}

.turski-acc__label {
	flex: 1 1 auto;
	font-weight: 600;
	line-height: 1.4;
}

.turski-acc__count {
	flex: 0 0 auto;
	min-width: 1.6em;
	padding: 0.1em 0.5em;
	background: var(--t-plum-tint);
	border-radius: 999px;
	color: var(--t-plum-deep);
	font-size: 0.8rem;
	font-weight: 700;
	text-align: center;
}

.turski-acc__none {
	flex: 0 0 auto;
	font-size: 0.85rem;
	font-style: italic;
}

.turski-acc__chev {
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--t-plum-deep);
	border-bottom: 2px solid var(--t-plum-deep);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.turski-acc__head[aria-expanded="true"] {
	background: var(--t-plum-tint);
	border-color: var(--t-plum-soft);
}

.turski-acc__head[aria-expanded="true"] .turski-acc__chev {
	transform: rotate(-135deg);
}

.turski-acc__body[hidden] {
	display: none;
}

.turski-acc__body {
	padding: 0.5rem 0 0.25rem;
}

.turski-exlist__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.4rem 1rem;
}

.turski-exlist__link {
	flex: 1 1 auto;
	color: var(--t-plum-deep);
	font-weight: 600;
	text-decoration: none;
}

.turski-exlist__link:hover,
.turski-exlist__link:focus-visible {
	text-decoration: underline;
}

.turski-badge--done {
	display: inline-block;
	padding: 0.25em 0.7em;
	background: var(--sage-tint, #e9eee2);
	border-radius: 999px;
	color: #4c5c3c;
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
}

.turski-badge--locked {
	display: inline-block;
	padding: 0.25em 0.7em;
	background: var(--t-plum-tint);
	border-radius: 999px;
	color: var(--t-plum-deep);
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
}

.turski-ex__foot {
	margin: 2.5rem 0 0;
}

.turski-ex__empty {
	color: var(--t-ink-muted);
}

@media (max-width: 767px) {
	/* One column, centred — as the mobile mock-up in the brief shows. */
	.turski-ex__tabs {
		grid-template-columns: minmax(0, 1fr);
	}

	.turski-ex__inner {
		padding: 2rem 1rem 3rem;
	}

	.turski-exlist__item {
		flex-wrap: wrap;
		row-gap: 0.25rem;
	}
}
/* ---------------------------------------------------------------------------
 * 7. Curriculum sidebar on the right.
 *    Note #4: „Съдържанието да се премести в дясно."
 *
 *    .tutor-course-single-content-wrapper is a flex row holding the sidebar
 *    first and #tutor-single-entry-content second. Reordering the sidebar is
 *    enough — the content keeps the default order:0 and so moves ahead of it.
 *    Tutor's own border sits on the right edge, so it swaps sides too.
 *
 *    Desktop only: below 1200px Tutor turns the sidebar into an overlay that
 *    already opens from the right (right:0!important), and the collapse state
 *    simply sets display:none, so neither is affected by the reorder.
 * ------------------------------------------------------------------------ */

@media (min-width: 1200px) {
	.turski-lesson-template .tutor-course-single-sidebar-wrapper {
		order: 2;
		border-right: 0;
		border-left: 1px solid #e0e2ea;
	}
}
/* --------------------------------------------------------------------------
 * Material standfirst
 *
 * The first paragraph of every imported lesson and exercise is the client's
 * subtitle. It is public copy — the same sentence feeds the meta description
 * and the locked-page teaser — so it is set apart from the material below it.
 * -------------------------------------------------------------------------- */

.turski-material-subtitle {
	margin: 0 0 2rem;
	padding: 0 0 0 1rem;
	border-left: 3px solid var(--t-gold, #B4A00A);
	color: var(--t-plum-deep);
	font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.15rem);
	font-weight: 500;
	line-height: 1.6;
}

/* Word wraps every table cell's text in a paragraph; its margins would treble
   the row height inside the table skin's own padding. */
.turski-lesson-template .turski-table th p,
.turski-lesson-template .turski-table td p {
	margin: 0;
}