/* =====================================================================
 * Wyroznione ogloszenia na stronie glownej (warianty 4a/4b).
 *
 * Kompaktowy krewny kafla listingu: ten sam jezyk wizualny (karta, zdjecie
 * z lewej na pelna wysokosc, tokeny z ds_tokens.css), ale bez CTA i bez
 * cytatu z opinii — w trzecim wierszu jest sama ocena.
 *
 * Prefiks .ft- (featured tile), zeby nie zderzac sie ani z .offer-* z
 * main.css, ani z .ot-* z offer_tile.css.
 *
 * Fallbacki w var() sa celowe: gdyby ds_tokens.css sie nie zaladowal,
 * sekcja dalej wyglada tak samo (ta sama konwencja co offer_tile.css).
 * ===================================================================== */

.ft-section,
.ft-section *,
.ft-section *::before,
.ft-section *::after { box-sizing: border-box; }

/* main.css nadaje font-family i color bezposrednio na p, a i button, wiec samo
   dziedziczenie z kontenera sie urywa — kroj trzeba wymusic na dzieciach. Ten
   sam problem i to samo obejscie co w offer_tile.css.

   Obejmuje to kafle i przycisk, a NIE naglowek sekcji. Naglowek jest golym
   .section-heading - dokladnie tym samym, co "Blog e-korepetycje.net" tuz
   nizej. Wczesniej mial tu wlasne nadpisania (600, --text-primary, lead 15px
   w 720 px) prosto ze specyfikacji, ale obok sasiednich sekcji wygladal na
   pogrubiony przez pomylke, a nie na redesign - zdjete na prosbe autora.
   Listing trzyma sie tej samej zasady: .ot wymusza kroj w srodku kafla,
   strona wokol zostaje na stylistyce serwisu. */
.ft p,
.ft a,
.ft span,
.ft b,
.ft-more { font-family: var(--font-sans, "Source Sans 3", system-ui, sans-serif); }

/* ------------------------------- SIATKA ------------------------------ */
.ft-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* -------------------------------- KAFEL ------------------------------ */
.ft {
	display: flex;
	overflow: hidden;                  /* przycina zdjecie do zaokraglenia karty */
	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));
	cursor: pointer;
	transition: box-shadow var(--dur-fast, 150ms) var(--ease-out, ease),
	            border-color var(--dur-fast, 150ms) var(--ease-out, ease);
}

/* Tylko na urzadzeniach z prawdziwym hoverem — na dotyku stan zostawal
   przyklejony po tapnieciu. */
@media (hover: hover) {
	.ft:hover {
		box-shadow: var(--shadow-md, 0 4px 12px rgba(14, 20, 19, 0.08));
		border-color: var(--border-default, #c8d0ce);
	}
}

/* Zdjecie: slot 104 px o SZTYWNEJ proporcji 5:6. Nie rozciaga sie do wysokosci
   kafla - odkad zrodla miniatur sa 5:6, kazde odstepstwo od tej proporcji
   oznaczaloby kadrowanie zdjecia. align-self: start, wiec przy wyzszej tresci
   obok pod zdjeciem zostaje tlo kafla; tak samo trzyma to .ot-photo. */
.ft-photo {
	/* position: relative, bo zdjecie jest pozycjonowane absolutnie - patrz nizej. */
	position: relative;
	flex: 0 0 auto;
	align-self: start;
	width: 104px;
	aspect-ratio: 5 / 6;
	display: block;
	overflow: hidden;
	background: var(--gray-100, #eef1f0);
}

/* Zdjecie WYJETE Z UKLADU (absolute), a nie zwykle width/height:100%.
   Obrazek w plywie wnosilby do slotu wlasna wysokosc i to plik dyktowalby
   proporcje kafla zamiast dac sie przyciac - portretowe 600x800 rozpychalo tak
   kafel do 139 px, a rzad wyrownywal reszte do najwyzszego zdjecia w wierszu.
   Absolutne inset:0 sprawia, ze obrazek nie wnosi nic do ukladu, a wysokosc
   wyznacza aspect-ratio - i dopiero wtedy object-fit: cover faktycznie
   kadruje. */
.ft-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ft-body {
	flex: 1;
	min-width: 0;                      /* bez tego ellipsis w srodku nie zadziala */
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 14px 16px;
}

/* --- wiersz 1: przedmiot <-> cena --- */
.ft-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}

.ft .ft-subject {
	min-width: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary, #161e1c);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ft .ft-subject:hover { color: var(--text-primary, #161e1c); text-decoration: underline; }

.ft-price {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
	color: var(--text-primary, #161e1c);
}

.ft-price b { font-weight: 700; }

.ft-unit {
	margin-left: 2px;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--text-tertiary, #7c8886);
}

/* --- wiersz 2: pinezka + miasta --- */
.ft-loc {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	margin: 0;
	font-size: 13px;
	color: var(--text-secondary, #5a6664);
}

.ft-loc svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--gray-400, #a3adab); }

.ft-loc span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- wiersz 3: ocena (przypiety do dolu) --- */
.ft-rate {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: auto;                  /* rowna ocene do dolu niezaleznie od tresci wyzej */
	min-width: 0;
}

/* Gwiazdka inline, a nie /images/svg/star-on.svg — tamten plik ma wpisana na
   sztywno zielen serwisu, ktorej nie da sie nadpisac CSS-em, a design system
   chce bursztynu. */
.ft-star { flex: 0 0 auto; width: 13px; height: 13px; display: block; fill: var(--warning-500, #d98a1c); }

.ft-rate-val { font-size: 13.5px; font-weight: 700; color: var(--text-primary, #161e1c); }

.ft .ft-count {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-link, #1d8a6e);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ft .ft-count:hover { color: var(--text-link-hover, #25a282); text-decoration: underline; }

.ft-new { font-size: 12.5px; color: var(--text-tertiary, #7c8886); }

/* --------------------- PRZYCISK "ZOBACZ WIECEJ" ---------------------- */
/* Tylko mobile — na desktopie widac cala szostke, wiec nie ma czego dokladac. */
.ft-more-wrap { display: none; }

/* ============================== MOBILE ============================== */
@media (max-width: 767px) {
	.ft-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

	/* Spec: na mobile renderujemy trzy kafle plus przycisk zamiast pelnej
	   szostki. Chowamy nadmiar CSS-em, a nie w PHP, zeby ten sam HTML
	   obsluzyl oba breakpointy — inaczej po zmianie szerokosci okna trzeba by
	   bylo przeladowac strone, zeby zobaczyc brakujace kafle. */
	.ft-grid .ft:nth-child(n+4) { display: none; }
	.ft-grid.is-expanded .ft:nth-child(n+4) { display: flex; }

	.ft-more-wrap { display: flex; justify-content: center; margin-top: 12px; }

	.ft-more {
		height: 44px;
		padding: 0 24px;
		border-radius: var(--radius-md, 8px);
		border: 1px solid var(--border-default, #c8d0ce);
		background: var(--bg-surface, #ffffff);
		font-size: 14px;
		font-weight: 600;
		color: var(--text-primary, #161e1c);
		cursor: pointer;
	}

	.ft-photo { width: 96px; }   /* proporcje 5:6 z reguly bazowej */

	.ft-body { padding: 12px 14px; gap: 4px; }

	.ft-top { gap: 8px; }

	.ft .ft-subject { font-size: 15px; }

	.ft-price { font-size: 13.5px; }

	.ft-unit { font-size: 11px; }

	.ft-loc { font-size: 12.5px; }

	.ft-loc svg { width: 12px; height: 12px; }

	.ft-star { width: 12px; height: 12px; }

	.ft-rate-val { font-size: 13px; }

	.ft .ft-count { font-size: 12px; }
}