/* =====================================================================
 * Strona ogloszenia (5a/5b) i profil korepetytora (6a/6b).
 *
 * Jeden arkusz na oba ekrany, bo specyfikacja opisuje je jako blizniacze —
 * roznia sie naglowkiem i zestawem sekcji, nie jezykiem wizualnym.
 *
 * Prefiks .rd- (redesign), zeby nie zderzac sie z .offer-* z main.css, ktore
 * dalej obsluguje ogloszenia ucznia i pracy pod tymi samymi adresami.
 *
 * Fallbacki w var() sa celowe — bez ds_tokens.css strona dalej wyglada tak
 * samo (ta sama konwencja co offer_tile.css i featured_tile.css).
 * ===================================================================== */

.rd-page,
.rd-page *,
.rd-page *::before,
.rd-page *::after { box-sizing: border-box; }

/* main.css nadaje kroj i kolor bezposrednio na h1-h3, p, a i button, wiec samo
   dziedziczenie z .rd-page sie urywa. Tu — inaczej niz na stronie glownej —
   wymuszamy kroj na CALEJ stronie, bo redesign obejmuje ja w komplecie, a nie
   pojedyncza sekcje wsrod starych. */
.rd-page,
.rd-page h1, .rd-page h2, .rd-page h3, .rd-page h4,
.rd-page p, .rd-page a, .rd-page span, .rd-page b, .rd-page li,
.rd-page button, .rd-page div { font-family: var(--font-sans, "Source Sans 3", system-ui, sans-serif); }

.rd-page {
	background: var(--bg-page, #f6f8f7);
	color: var(--text-primary, #161e1c);
	padding: 16px 0 32px;
}

/* ============================== KARTY ============================== */
.rd-card,
.rd-side-card,
.rd-hero {
	background: var(--bg-surface, #ffffff);
	border: 1px solid var(--border-subtle, #e2e7e5);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(14, 20, 19, 0.06));
}

.rd-card      { padding: 24px 28px; }
.rd-side-card { padding: 20px 24px; }

.rd-page .rd-h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--text-primary, #161e1c);
	line-height: var(--lh-snug, 1.3);
}

/* Kolejny naglowek w tej samej karcie (Kursy, Doswiadczenie, Adres zajec). */
.rd-page .rd-h2--next { margin-top: 24px; }

.rd-page .rd-h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary, #161e1c);
}

.rd-page .rd-h3--next { margin-top: 18px; }

.rd-empty { margin: 10px 0 0; font-size: 13.5px; color: var(--text-tertiary, #7c8886); }

.rd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================== IKONY ============================== */
.rd-ico { width: 15px; height: 15px; flex: 0 0 auto; display: block; }

/* ============================= NAGLOWEK ============================ */
/* Grid, a nie zagniezdzone flexy, bo pasmo opinii stoi INACZEJ na kazdym
   breakpoincie: na desktopie obok zdjecia (zdjecie idzie przez oba wiersze na
   pelna wysokosc karty), a na mobile pod nim, na cala szerokosc. Flexy
   wymagalyby dwoch kopii markupu albo przerzucania elementow JS-em; grid robi
   oba uklady z jednego DOM, samym przestawieniem obszarow. Kafel listingu
   rozwiazuje to tak samo. */
.rd-hero {
	display: grid;
	grid-template-columns: 176px minmax(0, 1fr);
	grid-template-areas:
		"photo body"
		"photo band";
	overflow: hidden;
	margin-bottom: 16px;
}

/* Zdjecie: slot o SZTYWNEJ proporcji 5:6 - na kazdym ekranie i breakpoincie.

   Wczesniej stalo tu samo min-height, a komorka grida rozciagala sie do
   wysokosci kolumny tekstu. Proporcja wychodzila przez to rozna: 0.800 na
   ogloszeniu, 0.821 na profilu, a na mobile schodzila do 0.53. Odkad zrodla
   sa 5:6, kazde odstepstwo od tej proporcji oznacza kadrowanie zdjecia, wiec
   slot musi trzymac ja sam, zamiast zalezec od dlugosci tresci obok.

   align-self: start, bo inaczej grid i tak rozciagnalby komorke. Skutek
   uboczny: gdy tresc obok jest wyzsza od zdjecia, pod zdjeciem zostaje tlo
   karty. Tak samo zachowuje sie .ot-photo na listingu.

   Obrazek jest wyjety z ukladu (absolute), bo przy zwyklym height:100%
   procent nie ma sie do czego odniesc i to plik dyktowalby wysokosc slotu
   zamiast dac sie przyciac. */
.rd-hero-photo {
	grid-area: photo;
	position: relative;
	/* Slot wypelnia wysokosc karty, a roznice pochlania kadrowanie.
	   Sztywne 5:6 dawalo 176x211.2 przy karcie 220.4, czyli 8.2 px bialej
	   szpary pod zdjeciem. Przy stretch slot ma 176x220.4 (0.799) - odchylka
	   od 5:6 ponizej 4%, wizualnie nie do odroznienia, a szpara znika.
	   aspect-ratio musi przy tym zniknac: przy definitywnej wysokosci
	   proporcja liczylaby z niej szerokosc i wypchnelaby slot poza kolumne. */
	/* Slot ZAWSZE wypelnia karte - brak bialego paska ma pierwszenstwo przed
	   dokladna proporcja. Sztywne 5:6 dziala tylko dopoki tresc miesci sie
	   w 211 px; przy wezszym oknie cytat opinii zawija sie bardziej, karta
	   rosnie i pasek wraca. Przy stretch proporcja plynie (0.80-0.83), ale
	   roznice pochlania object-fit: cover na obrazku.
	   aspect-ratio musi zniknac: przy definitywnej wysokosci liczyloby z niej
	   szerokosc i wypchnelo slot poza kolumne. */
	aspect-ratio: auto;
	align-self: stretch;
	display: block;
	overflow: hidden;
	background: var(--gray-100, #eef1f0);
}

.rd-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.rd-hero-body {
	grid-area: body;
	min-width: 0;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 20px 28px 14px;   /* -8 px: tresc musi zmiescic sie w slocie 5:6 */
}

.rd-hero-text { flex: 1; min-width: 0; }

.rd-page .rd-hero-title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	color: var(--text-primary, #161e1c);
	line-height: var(--lh-tight, 1.15);
}

.rd-hero-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* Na profilu h1 SIEDZI w tym samym wierszu co pigulka, wiec nie potrzebuje
   gornego marginesu, ktory na ogloszeniu oddziela nazwisko od tytulu. */
.rd-hero-title--name { margin-top: 0; }
.rd-hero-who > .rd-hero-title--name + .rd-pill { align-self: center; }
.rd-hero-text > .rd-hero-who:first-child { margin-top: 0; }

.rd-page .rd-hero-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary, #161e1c);
	text-decoration: none;
}

.rd-page .rd-hero-name:hover { text-decoration: underline; }

.rd-hero-loc {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--text-secondary, #5a6664);
}

.rd-hero-loc .rd-ico { color: var(--gray-400, #a3adab); }

.rd-hero-meta { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

.rd-hero-metarow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	color: var(--text-secondary, #5a6664);
}

.rd-hero-metarow .rd-ico { color: var(--gray-400, #a3adab); }

.rd-hero-price { flex: 0 0 auto; text-align: right; }

.rd-hero-priceval { display: block; font-size: 24px; font-weight: 700; color: var(--text-primary, #161e1c); white-space: nowrap; }
/* Brak ceny renderuje sie jak na listingu: tam ten sam komunikat idzie przez
   .ot-price span, czyli 11 px w kolorze trzeciorzednym - nie jako duza cena. */
.rd-hero-priceval--soft { font-size: 11px; font-weight: 400; color: var(--text-tertiary, #7c8886); }
.rd-hero-unit { display: block; font-size: 12px; color: var(--text-tertiary, #7c8886); }

/* ---------------------------- PIGULKA ---------------------------- */
.rd-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: var(--radius-pill, 999px);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.rd-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.rd-pill--fresh { background: var(--success-100, #d8f4ec); color: var(--brand-700, #1d8a6e); }
.rd-pill--stale { background: var(--gray-100, #eef1f0); color: var(--text-tertiary, #7c8886); }

/* ========================== PASMO OPINII ========================== */
.rd-band {
	grid-area: band;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 10px 28px;   /* -4 px, jw. */
	background: var(--gray-50, #f6f8f7);
	border-top: 1px solid var(--border-subtle, #e2e7e5);
	min-width: 0;
}

.rd-band-rate { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.rd-band-val { font-size: 24px; font-weight: 700; color: var(--text-primary, #161e1c); }
.rd-band-count { font-size: 12px; margin-top: 1px; }
.rd-page .rd-band-count a,
.rd-page .rd-band-all {
	font-weight: 600;
	color: var(--text-link, #1d8a6e);
	text-decoration: none;
}
.rd-page .rd-band-count a:hover,
.rd-page .rd-band-all:hover { color: var(--text-link-hover, #25a282); text-decoration: underline; }

.rd-band-sep { width: 1px; align-self: stretch; background: var(--border-subtle, #e2e7e5); flex: 0 0 auto; }
.rd-band-quote { flex: 1; min-width: 0; }

/* Cytat zawsze dwie linie — wysokosc pasma nie zalezy od dlugosci opinii. */
.rd-band-text {
	margin: 0;
	font-size: 13.5px;
	color: var(--text-secondary, #5a6664);
	line-height: var(--lh-normal, 1.5);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rd-band-meta { margin: 3px 0 0; font-size: 12.5px; color: var(--text-tertiary, #7c8886); }
.rd-band-all { flex: 0 0 auto; font-size: 13px; white-space: nowrap; }

/* --------------------------- GWIAZDKI ---------------------------- */
.rd-stars { display: inline-flex; gap: 1px; }
.rd-star { width: 13px; height: 13px; display: block; fill: var(--warning-500, #d98a1c); }
.rd-star--off { fill: var(--gray-300, #c8d0ce); }
.rd-stars--lg .rd-star { width: 14px; height: 14px; }
.rd-stars--sm .rd-star { width: 12px; height: 12px; }

/* ============================ KOLUMNY ============================= */
.rd-cols { display: flex; gap: 16px; align-items: flex-start; }
.rd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* Sidebar jedzie z trescia, a gdy jego dol dojdzie do dolu ekranu - zatrzymuje
   sie i dalej przewija sie juz sama kolumna glowna.

   top, a nie bottom: przy bottom sidebar odkleja sie w momencie, gdy go minieszy
   i odjezdza w gore razem z trescia - sprawdzone zrzutem przy przewinieciu o
   1400 px, prawa kolumna byla pusta. Przy top zostaje na ekranie przez cale
   przewijanie kolumny glownej.

   align-self: flex-start jest konieczne - bez tego kolumna rozciagnelaby sie na
   wysokosc kolumny glownej i sticky nie mialoby po czym jechac. Na mobile regula
   jest nieszkodliwa, bo tam .rd-side ma display: contents. */
.rd-side {
	width: 320px;
	flex: 0 0 auto;
	align-self: flex-start;
	position: sticky;
	/* 66 px to offset, ktory .navbar rezerwuje w main.css na przyklejony pasek
	   serwisu (.navbar-top ma position: fixed). Bez tego offsetu sidebar
	   przykleja sie do samej gory okna i karta ceny wjezdza pod menu.
	   Do tego 16 px oddechu, tyle co odstep miedzy kartami.
	   Wartosc chodzi w parze z padding-top w .navbar — zmieniac razem. */
	top: calc(66px + 16px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ============================= WIDEO ============================== */
.rd-video {
	position: relative;
	margin-top: 14px;
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	background: var(--gray-900, #161e1c);
	aspect-ratio: 16 / 9;
}

.rd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.rd-video-cap { margin: 8px 0 0; font-size: 12.5px; color: var(--text-tertiary, #7c8886); }

/* ======================= TRESC RICH-TEXT ========================== */
.rd-rich-wrap { position: relative; }

.rd-rich {
	margin-top: 12px;
	font-size: 14.5px;
	color: var(--text-secondary, #5a6664);
	line-height: var(--lh-normal, 1.5);
	/* ~10 linii: 14.5px * 1.5 = 21.75px na linie. Zwiniecie zdejmuje JS przez
	   klase na .rd-rich-wrap, wiec bez JS-a tresc jest widoczna w calosci —
	   nigdy nie zostaje obcieta bez mozliwosci rozwiniecia. */
	overflow: hidden;
}

.is-clamped .rd-rich { max-height: 218px; }

.rd-rich p { margin: 0 0 12px; }
.rd-rich p:last-child { margin-bottom: 0; }
.rd-rich strong, .rd-rich b { color: var(--text-primary, #161e1c); font-weight: 600; }
.rd-rich ul, .rd-rich ol { margin: 0 0 12px; padding-left: 20px; }
.rd-rich li { margin-bottom: 4px; }

/* Wygaszenie tylko w stanie zwinietym — na rozwinietym opisie gradient
   nakladalby sie na czytelny tekst. */
.rd-rich-fade { display: none; }

.is-clamped .rd-rich-fade {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 56px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-surface, #ffffff));
	pointer-events: none;
}

.rd-rich-toggle {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--border-subtle, #e2e7e5);
	text-align: center;
}

.rd-page .rd-link-btn {
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-link, #1d8a6e);
	cursor: pointer;
}

.rd-page .rd-link-btn:hover { color: var(--text-link-hover, #25a282); text-decoration: underline; }

/* ====================== WYKSZTALCENIE / CV ======================== */
.rd-cv-row { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle, #e2e7e5); }
.rd-cv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rd-cv .rd-h2 + .rd-cv-row { padding-top: 12px; }

.rd-cv-date { flex: 0 0 150px; font-size: 13px; color: var(--text-tertiary, #7c8886); }
.rd-cv-body { flex: 1; min-width: 0; }
.rd-cv-main { font-size: 14.5px; font-weight: 600; color: var(--text-primary, #161e1c); }
.rd-cv-sub  { font-size: 13.5px; color: var(--text-secondary, #5a6664); margin-top: 2px; }

/* ======================== LISTA PRZEDMIOTOW ======================= */
/* Linki w dwoch kolumnach z cenami, a NIE pastylki (spec). */
.rd-subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: 6px; }

.rd-page .rd-subject {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border-subtle, #e2e7e5);
	text-decoration: none;
	min-width: 0;
}

.rd-subject-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-link, #1d8a6e);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rd-page .rd-subject:hover .rd-subject-name { color: var(--text-link-hover, #25a282); text-decoration: underline; }
.rd-subject-price { flex: 0 0 auto; font-size: 13px; color: var(--text-tertiary, #7c8886); white-space: nowrap; }

/* Nadmiar jest w HTML-u i tylko chowany — przycisk niczego nie dogrywa.
   Progi rozne na breakpointach, wiec decyzja nalezy do CSS-a, nie do PHP. */
.rd-subjects .rd-subject:nth-child(n+17) { display: none; }
.rd-subjects.is-expanded .rd-subject { display: flex; }

/* ============================= OPINIE ============================= */
.rd-reviews-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rd-reviews-sum { display: flex; align-items: center; gap: 8px; }
.rd-reviews-val { font-size: 20px; font-weight: 700; color: var(--text-primary, #161e1c); }
.rd-reviews-count { font-size: 13px; color: var(--text-secondary, #5a6664); white-space: nowrap; }

.rd-review-list { margin-top: 4px; }

/* Opinia: zdjecie autora w lewej kolumnie, tresc po prawej. */
.rd-review {
	display: flex;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--border-subtle, #e2e7e5);
}

/* Slot 5:6 jak wszedzie indziej w serwisie. Szerokosc jest stala, wiec
   proporcja sama wyznacza wysokosc - bez wyjmowania obrazka z ukladu. */
.rd-review-photo {
	flex: 0 0 auto;
	/* align-self, bo .rd-review to flex z domyslnym stretch - bez tego kolumna
	   ze zdjeciem rozciagala sie na cala wysokosc wiersza, wysokosc stawala sie
	   definitywna, szerokosc zostawala 48 px i aspect-ratio przestawalo cokolwiek
	   znaczyc: przy dluzszej opinii zdjecie robilo sie wysokim paskiem. */
	align-self: flex-start;
	width: 48px;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	border-radius: var(--radius-sm, 4px);
	background: var(--gray-100, #eef1f0);
}

.rd-review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rd-review-body { flex: 1; min-width: 0; }
.rd-review:last-child { border-bottom: 0; padding-bottom: 0; }

.rd-review-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rd-review-author { font-size: 14px; font-weight: 600; color: var(--text-primary, #161e1c); }
.rd-review-meta { display: inline-flex; align-items: center; gap: 8px; }
.rd-review-date { font-size: 12.5px; color: var(--text-tertiary, #7c8886); white-space: nowrap; }

.rd-review-text {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--text-secondary, #5a6664);
	line-height: var(--lh-normal, 1.5);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rd-review.is-open .rd-review-text { -webkit-line-clamp: unset; display: block; }
.rd-review-more { margin-top: 4px; font-size: 13px; }

/* Odpowiedz korepetytora pod opinia. Wciecie i lewa krawedz, zeby czytalo sie
   jako reakcja na te opinie, a nie jako kolejna opinia z listy. Celowo nie ma
   clampa jak na .rd-review-text — odpowiedzi sa krotkie, a ucinanie ich
   przyciskiem "Czytaj calosc" mieszaloby sie z tym od opinii. */
.rd-review-reply {
	margin-top: 10px;
	padding-left: 12px;
	border-left: 2px solid var(--border-subtle, #e2e7e5);
}

.rd-review-reply-head { display: flex; align-items: center; gap: 8px; }

.rd-review-reply-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.rd-review-reply-author { font-size: 13px; font-weight: 600; color: var(--text-primary, #161e1c); }

.rd-review-reply-text {
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-secondary, #5a6664);
}

.rd-review-list .rd-review:nth-child(n+4) { display: none; }
.rd-review-list.is-expanded .rd-review { display: flex; }

.rd-more { margin-top: 16px; }

/* ============================ SIDEBAR ============================= */
.rd-side-pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rd-side-label { font-size: 14px; color: var(--text-secondary, #5a6664); }
.rd-side-priceval { white-space: nowrap; text-align: right; }
.rd-side-price { font-size: 22px; font-weight: 700; color: var(--text-primary, #161e1c); }
.rd-side-price--soft { font-size: 15px; font-weight: 600; color: var(--text-secondary, #5a6664); }
.rd-side-unit { display: block; font-size: 12px; color: var(--text-tertiary, #7c8886); }

.rd-side-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rd-side-card > .rd-h3 + .rd-side-cta { margin-top: 12px; }

.rd-side-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-tertiary, #7c8886); text-align: center; line-height: var(--lh-normal, 1.5); }

/* Numer telefonu wstrzykuje card_contacts.js do .phone — pusty span nie moze
   zabierac miejsca w kolumnie przyciskow. */
.rd-phone:empty { display: none; }
.rd-phone { font-size: 16px; font-weight: 700; color: var(--text-primary, #161e1c); text-align: center; }

.rd-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13.5px; }
.rd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text-secondary, #5a6664); }
.rd-row > span:last-child { color: var(--text-primary, #161e1c); text-align: right; }
/* Dzien bez zajec wyszarza sie po OBU stronach — inaczej myslnik czytalby sie
   jak wartosc, a nie jak jej brak. */
.rd-row--off > span,
.rd-row--off > span:last-child { color: var(--text-tertiary, #7c8886); }

.rd-rows--short { display: none; }

.rd-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--text-secondary, #5a6664); }
.rd-check { display: flex; align-items: center; gap: 8px; }
.rd-check .rd-ico { color: var(--brand-500, #2db994); }

.rd-list--inline { display: none; margin: 8px 0 0; font-size: 13.5px; color: var(--text-secondary, #5a6664); }

.rd-addr { margin: 8px 0 0; font-size: 13.5px; color: var(--text-secondary, #5a6664); line-height: var(--lh-normal, 1.5); }

/* ============================ PRZYCISKI =========================== */
.rd-page .rd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--radius-md, 8px);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.rd-page .rd-btn--primary { border: 1px solid var(--brand-500, #2db994); background: var(--brand-500, #2db994); color: var(--text-on-brand, #ffffff); }
.rd-page .rd-btn--primary:hover { border-color: var(--brand-600, #25a282); background: var(--brand-600, #25a282); color: var(--text-on-brand, #ffffff); }

.rd-page .rd-btn--ghost { border: 1px solid var(--border-default, #c8d0ce); background: var(--bg-surface, #ffffff); color: var(--text-primary, #161e1c); }
.rd-page .rd-btn--ghost:hover { border-color: var(--border-strong, #a3adab); background: var(--gray-50, #f6f8f7); color: var(--text-primary, #161e1c); }

.rd-more .rd-btn { width: 100%; height: 40px; }

/* Rzad CTA pod naglowkiem istnieje tylko na mobile — na desktopie te same
   przyciski stoja w sidebarze i dublowanie ich byloby szumem (spec). */
.rd-cta-mobile { display: none; }

/* ===================== PRZYCISKI STARYCH FORMULARZY ================= */
/* Formularz kontaktu i formularz opinii to widoki sprzed redesignu, dzielone
   z ogloszeniami ucznia i pracy - przepisanie ich markupu wyszloby poza ten
   ekran. Zamiast tego nakladamy na ich klasy .btn wyglad .rd-btn, ale TYLKO
   wewnatrz .rd-page, wiec na tamtych stronach nic sie nie zmienia.

   Reguly z main.css, ktore trzeba zdjac: line-height 48/38 px (rozjezdza tekst
   w pionie przy naszej wysokosci 44 px), border-radius 2 px i padding 0 28px.
   Wysokosc ustawiamy min-height, a nie height, zeby dluzsza etykieta zawinela
   sie zamiast wyjsc poza przycisk. */
.rd-page .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 44px;
	line-height: 1.2;
	padding: 0 20px;
	border-radius: var(--radius-md, 8px);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

/* Ikony w przyciskach znikaja - makieta ma sam tekst (tak samo kafel listingu). */
.rd-page .btn img { display: none; }

/* <div class="btn"> owijajacy <a> to wzorzec ze starych widokow: klikalny ma
   byc caly przycisk, a nie sam tekst w srodku. */
.rd-page .btn > a { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; color: inherit; text-decoration: none; }

.rd-page .btn-full-lead,
.rd-page .btn-full-lead:hover,
.rd-page .btn-full-lead:focus {
	border: 1px solid var(--brand-500, #2db994);
	background: var(--brand-500, #2db994);
	color: var(--text-on-brand, #ffffff);
}

.rd-page .btn-full-lead:hover,
.rd-page .btn-full-lead:focus {
	border-color: var(--brand-600, #25a282);
	background: var(--brand-600, #25a282);
}

.rd-page .btn-frame-lead,
.rd-page .btn-noframe-lead {
	border: 1px solid var(--border-default, #c8d0ce);
	background: var(--bg-surface, #ffffff);
	color: var(--text-primary, #161e1c);
}

.rd-page .btn-frame-lead:hover,
.rd-page .btn-noframe-lead:hover {
	border-color: var(--border-strong, #a3adab);
	background: var(--gray-50, #f6f8f7);
	color: var(--text-primary, #161e1c);
}

/* Formularz opinii pod lista - oddzielony separatorem, zeby nie sklejal sie
   z ostatnia opinia ani z przyciskiem "Pokaz wszystkie". */
.rd-review-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-subtle, #e2e7e5); }
.rd-review-form .form-group { margin-bottom: 12px; }
.rd-review-form p { font-size: 12.5px; color: var(--text-tertiary, #7c8886); line-height: var(--lh-normal, 1.5); }

/* ============================== MOBILE ============================= */
@media (max-width: 767px) {
	.rd-page { padding: 12px 0 24px; }

	/* Pasek CTA jest ostatnim wierszem karty naglowka, a nie osobnym kafelkiem
	   (mock 5b) - karta traci wiec dolne zaokraglenie i dolna krawedz, a pasek
	   dokleja je od siebie. Miedzy pasmem opinii a paskiem zostaje sama linia. */
	.rd-hero {
		margin-bottom: 0;
		border-bottom: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	/* Pasmo schodzi POD zdjecie i idzie przez cala szerokosc karty - zdjecie
	   przestaje spinac oba wiersze, wiec przy waskiej karcie nie robi sie
	   nienaturalnie wysokie. */
	.rd-hero {
		grid-template-columns: 110px minmax(0, 1fr);
		grid-template-areas:
			"photo body"
			"band  band";
	}

	/* Slot mobilny wspolny dla listingu, ogloszenia i profilu: 110 px szerokosci,
	   min-height 132 px (baza 5:6). Kontener moze sie rozciagnac, gdy kolumna tresci
	   jest wyzsza - cover to absorbuje (spec). */
	/* proporcje 5:6 z reguly bazowej - mobile zmienia tylko szerokosc kolumny */

	.rd-hero-body { flex-direction: column; gap: 10px; padding: 14px 16px; }

	.rd-page .rd-hero-title { font-size: 19px; }

	.rd-hero-who { gap: 8px; margin-top: 6px; }

	.rd-hero-loc { margin-top: 6px; font-size: 13px; }

	.rd-hero-meta { margin-top: 8px; }
	.rd-hero-metarow { font-size: 13px; }

	.rd-hero-price { text-align: left; }
	.rd-hero-priceval { font-size: 19px; }
	.rd-hero-priceval--soft { font-size: 11px; }

	.rd-band { gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
	.rd-band-val { font-size: 20px; }
	.rd-band-sep { display: none; }
	.rd-band-quote { flex: 1 0 100%; }
	.rd-band-all { display: none; }

	/* Pasek CTA przyklejony do dolu ekranu (mock 5b).
	   fixed, a NIE sticky: pasek stoi na gorze dokumentu, tuz pod naglowkiem,
	   wiec sticky z bottom:0 trzymalby go tylko do momentu, az przewiniemy
	   ponizej jego naturalnej pozycji - potem odjechalby razem z trescia.
	   Przy fixed zostaje na ekranie przez cale przewijanie, a .rd-page dostaje
	   padding-bottom, zeby ostatnia sekcja nie chowala sie pod paskiem. */
	.rd-cta-mobile {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 12px;
		padding: 10px 16px;
		background: var(--bg-surface, #ffffff);
		border: 1px solid var(--border-subtle, #e2e7e5);
		border-top-color: var(--border-subtle, #e2e7e5);
		border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
	}

	/* Cena zjezdza tu z naglowka - dzieki temu kolumna tresci naglowka jest
	   nizsza, a slot zdjecia mniej sie rozciaga. */
	.rd-cta-price { flex: 0 0 30%; line-height: 1.15; }
	.rd-cta-price b { display: block; font-size: 17px; font-weight: 700; color: var(--text-primary, #161e1c); }
	.rd-cta-price span { display: block; font-size: 11px; color: var(--text-tertiary, #7c8886); }

	/* Telefon jako kwadratowa ikona 44x44, wiadomosc bierze reszte szerokosci. */
	.rd-cta-mobile .rd-btn--ghost { flex: 0 0 44px; width: 44px; padding: 0; }
	.rd-cta-mobile .rd-btn--ghost .rd-ico { width: 19px; height: 19px; }
	.rd-cta-mobile .rd-btn--primary { flex: 1 1 auto; min-width: 0; padding: 0 8px; }
	/* Po kliknieciu w telefon skrypt DIP chowa przycisk i wstawia numer do tego
	   spana. Bez wlasnej reguly numer wchodzil w nowy wiersz (flex 1 0 100%) i
	   pasek robil sie dwurzedowy, a sam numer byl golym linkiem. Tutaj przejmuje
	   gabaryt przycisku, ktory zastapil - wysokosc 44 px, ten sam promien - wiec
	   po odslonieciu nic nie skacze. */
	.rd-cta-mobile .rd-phone {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		padding: 0 14px;
		border: 1px solid var(--brand-500, #2db994);
		border-radius: var(--radius-md, 8px);
		background: var(--success-100, #d8f4ec);
		color: var(--brand-700, #1d8a6e);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .02em;
		white-space: nowrap;
	}

	/* Pusty span nie moze zabierac miejsca przed odslonieciem numeru. */
	.rd-cta-mobile .rd-phone:empty { display: none; }

	/* Numer ma byc klikalny jak tel: - kolor i brak podkreslenia z kontenera. */
	.rd-cta-mobile .rd-phone a,
	.rd-cta-mobile .rd-phone a:hover,
	.rd-cta-mobile .rd-phone a:focus { color: inherit; text-decoration: none; }

	/* Dopoki numer jest schowany, przycisk ma sam tekst - ikona jest zbedna. */
	.rd-cta-mobile .rd-btn--primary .rd-ico { display: none; }

	/* Po odslonieciu numeru w wierszu robi sie ciasno: numer bierze wolne
	   miejsce, a "Wyslij wiadomosc" kurczy sie do samej koperty 44x44.
	   Etykieta zostaje w DOM dla czytnikow ekranu. Selektor siostrzany dziala,
	   bo w markupie span z numerem stoi PRZED przyciskiem wiadomosci. */
	.rd-cta-mobile .rd-phone:not(:empty) { flex: 1 1 auto; }

	.rd-cta-mobile .rd-phone:not(:empty) ~ .rd-btn--primary {
		flex: 0 0 44px;
		width: 44px;
		padding: 0;
	}

	.rd-cta-mobile .rd-phone:not(:empty) ~ .rd-btn--primary .rd-ico { display: block; width: 19px; height: 19px; }

	.rd-cta-mobile .rd-phone:not(:empty) ~ .rd-btn--primary .rd-btn-label {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}

	/* Przypiecie do dolu wlacza JS dopiero, gdy pasek w plywie zjedzie ponad
	   gorna krawedz ekranu (spec: pokazywany po przescrollowaniu CTA z
	   naglowka). Do tego czasu pasek stoi normalnie pod pasmem opinii. */
	.rd-cta-mobile.is-pinned {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		margin-bottom: 0;
		/* Przypiety pasek nie jest juz czescia karty - wraca prosta krawedz
		   u gory, cien zamiast obrysu i brak zaokraglen. */
		border: 0;
		border-top: 1px solid var(--border-subtle, #e2e7e5);
		border-radius: 0;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
		animation: rd-cta-in 150ms var(--ease-out, ease);
	}

	@keyframes rd-cta-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

	/* Pasek CTA zajmuje dol ekranu, wiec strzalka "do gory" i plakietka
	   recaptchy nachodzilyby na niego. Ten arkusz laduje sie tylko na
	   ogloszeniu i profilu, wiec reguly nie wyciekaja na reszte serwisu. */
	.scrollToTop { display: none !important; }
	.grecaptcha-badge { display: none !important; }

	/* Cena jest juz w pasku - w naglowku bylaby drugi raz. */
	.rd-hero-price { display: none; }

	/* Sekcje boczne wchodza MIEDZY sekcje kolumny glownej (spec 5b), a nie na
	   koniec strony. display:contents rozpuszcza oba kontenery, zeby wszystkie
	   karty staly sie rodzenstwem jednego flexa i dalo sie im nadac order.
	   Bez tego trzeba by trzymac drugi komplet markupu tylko dla mobile. */
	/* align-items z reguly bazowej to flex-start - potrzebne na desktopie, zeby
	   sidebar nie rozciagal sie na wysokosc kolumny glownej. W kolumnie na
	   mobile ta sama wartosc kurczyla KAZDA karte do szerokosci jej tresci,
	   przez co boxy mialy rozne szerokosci. stretch przywraca pelna szerokosc. */
	.rd-cols { flex-direction: column; gap: 12px; align-items: stretch; }
	.rd-main, .rd-side { display: contents; }

	/* Kolejnosc po KLASACH, nie po nth-child: sekcje sa warunkowe (brak wideo,
	   brak innych ogloszen, brak dostepnosci), wiec numer pozycji w rodzicu
	   zmienia sie z ogloszenia na ogloszenie i pozycyjne reguly rozjechalyby
	   uklad przy pierwszym tutorze bez filmu. */
	.rd-page--advert .rd-card--video        { order: 1; }
	.rd-page--advert .rd-card--desc         { order: 2; }
	.rd-page--advert .rd-side-card--availability { order: 3; }
	.rd-page--advert .rd-side-card--ranges  { order: 4; }
	.rd-page--advert .rd-side-card--places  { order: 5; }
	.rd-page--advert .rd-card--cv           { order: 6; }
	.rd-page--advert .rd-card--subjects     { order: 7; }
	.rd-page--advert .rd-card--reviews      { order: 8; }

	/* Profil nie potrzebuje przeplatania — jego kolejnosc w DOM juz odpowiada
	   specyfikacji 6b (O mnie -> Udzielam korepetycji -> CV -> Opinie), a w
	   sidebarze ma tylko karte kontaktu. */

	/* Karta ceny i kontaktu z sidebaru na mobile znika — jej role przejmuje
	   rzad CTA pod naglowkiem, ktory stoi wyzej i nie wymaga scrollowania. */
	.rd-side-card--contact { display: none; }

	.rd-card      { padding: 16px; }
	.rd-side-card { padding: 16px; }

	.rd-page .rd-h2 { font-size: 16px; }
	.rd-page .rd-h2--next { margin-top: 20px; }

	/* Data nad trescia, nie obok — 150 px etykiety zjadaloby polowe szerokosci. */
	.rd-cv-row { flex-direction: column-reverse; gap: 2px; }
	.rd-cv-date { flex: none; }

	.rd-subjects { grid-template-columns: minmax(0, 1fr); }
	.rd-subjects .rd-subject:nth-child(n+7) { display: none; }
	.rd-subjects.is-expanded .rd-subject { display: flex; }

	/* Wezszy slot na telefonie - kolumna tekstu obok jest waska. */
	.rd-review-photo { width: 40px; }

	.rd-review-list .rd-review:nth-child(n+3) { display: none; }
	.rd-review-list.is-expanded .rd-review { display: flex; }

	/* Dostepnosc skraca sie do zgrupowanych przedzialow, zakres i miejsce
	   lekcji schodza do jednej linii z separatorami (spec 5b). */
	.rd-rows--full { display: none; }
	.rd-rows--short { display: flex; }
	.rd-list--full { display: none; }
	.rd-list--inline { display: block; }
}