/* NFHotel Apartments.
   Card tokens/values are lifted 1:1 from the Oxygen 4 room-tile export
   (templates 726 available / 727 unavailable). --main-color resolves to
   #d7a97d in the site's universal.css :root, --main-color-hover to #b28255.
   Oxygen breakpoints used throughout: page-width <=1200, tablet <=991,
   phone-landscape <=767, phone-portrait <=479. */
.nfap {
	--nfap-primary: #d7a97d;          /* var(--main-color) */
	--nfap-primary-hover: #b28255;    /* var(--main-color-hover) */
	--nfap-primary-tint: rgba(215, 169, 125, 0.49);
	--nfap-primary-tint-hover: rgba(215, 169, 125, 0.54);
	--nfap-gold: #c1ae81;
	--nfap-dark: #242424;             /* .btn:hover / .wonder-btn-book */
	--nfap-dark-hover: #5b5a5e;       /* .wonder-btn-book:hover */
	--nfap-danger: #ce0000;           /* badges + unavailable notice */
	--nfap-price-crossed: #d87070;    /* .price-box__price przekreślona */
	--nfap-text: #404040;
	--nfap-heading: #242424;          /* .horizontalTile__title, __description */
	--nfap-value: #3a3838;            /* equipment value/unit */
	--nfap-title: #af9797;
	--nfap-muted: #8b8f96;
	--nfap-border: rgba(215, 169, 125, 0.49);
	--nfap-line: rgba(215, 169, 125, 0.2);   /* .wonder-equipment border-top */
	--nfap-card-line: rgba(204, 204, 204, 0.5); /* .horizontal-room border-bottom */
	--nfap-bg: #ffffff;
	--nfap-chip-bg: #f7f3ee;
	--nfap-radius: 5px;
	--nfap-card-radius: 0px;          /* the source tile has no rounding */
	--nfap-gap: 30px;                 /* .horizontal-room margin-top */
	--nfap-value-font: 'Montserrat', 'Lato', system-ui, sans-serif;
	--nfap-cols: 1;
	color: var(--nfap-text);
	/* Inter — globalny krój „Text" szablonu na wonderhome.eu. Potwierdzone
	   w DevTools: #div_block-73-563 { font-family: 'Inter' }. Nie widać tego
	   w HTML ani w universal.css, bo silnik rezerwacji wstrzykuje style
	   szablonu do shadow DOM komponentu. Lato zostaje jako zapas. */
	font-family: 'Inter', 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
	/* Long apartment names / location labels must wrap rather than widen the
	   column — most visible on narrow Android screens. */
	overflow-wrap: break-word;
}
.nfap *, .nfap *::before, .nfap *::after { box-sizing: inherit; }

.nfap__layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 48px;
	align-items: start;
}

/* ============================ FILTERS ============================
   The filter sidebar's own styles live in nfap-bar.css (nfap-f__* namespace).
   Only the column shell stays here. */
.nfap__filters { position: -webkit-sticky; position: sticky; top: 20px; }

/* Shared button — used by the "load more" control. */
.nfap__btn {
	flex: 1; padding: 13px 16px; border-radius: var(--nfap-radius); font-weight: 600;
	cursor: pointer; border: 1px solid transparent; font-size: .92rem; font-family: inherit;
}
.nfap__btn--ghost { background: transparent; border-color: var(--nfap-border); color: var(--nfap-text); }
.nfap__btn--ghost:hover { border-color: var(--nfap-primary); color: var(--nfap-primary); }

/* ============================ MAIN ============================ */
/* A `1fr` grid track defaults to min-width:auto, so a long apartment name or a
   wide image would push the results column past the viewport instead of
   shrinking it. Explicit min-width:0 is what keeps the layout contained. */
.nfap__main { min-width: 0; }
.nfap__toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 12px; flex-wrap: wrap; }
/* Licznik wyników ukryty — decyzja z 01.10.2026 (wcześniej, 24.09, miał zostać).
   Produkcja go nie ma. DOM zostaje, bo JS wpisuje tu liczbę po każdym filtrowaniu. */
.nfap__toolbar { display: none; }
.nfap__count { color: var(--nfap-muted); font-size: .9rem; }
.nfap__count strong { color: var(--nfap-text); }
.nfap__loading { color: var(--nfap-primary); font-size: .85rem; }
.nfap.is-loading .nfap__results { opacity: .5; transition: opacity .15s ease; }

/* No grid gap: each tile carries its own margin-top (.horizontal-room). */
.nfap__grid { display: flex; flex-direction: column; gap: 0; }
.nfap__empty {
	padding: 48px 24px; text-align: center; color: var(--nfap-muted);
	border: 1px dashed var(--nfap-border); border-radius: var(--nfap-card-radius);
}

/* ============================ CARD ============================
   Source: Oxygen tile export. Class → source selector map:
     .nfap-card         .nf-room-description.horizontal-room
     .nfap-card__inner  .horizontalTile
     .nfap-card__media  .horizontalTile__imageBox
     .nfap-card__image  .horizontalTile__image
     .nfap-card__body   .horizontalTile__detailsBox
     .nfap-card__details .horizontalTile__details
     .nfap-card__specs  .room-standard__equipments
     .nfap-card__spec   .equipment.wonder-equipment
     .nfap-card__footer .horizontalTile__price
   ---------------------------------------------------------------- */
.nfap-card {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--nfap-bg);
	padding: 10px;
	margin-top: var(--nfap-gap);
	border-bottom: 1px solid var(--nfap-card-line);
}

.nfap-card__inner {
	width: 100%; height: 100%;
	display: flex; flex-direction: row; align-items: flex-start;
	padding: 8px 20px 20px;
}

/* ---- Media column ---- */
.nfap-card__media {
	width: 35%;
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start;
}
.nfap-card__image {
	position: relative; overflow: hidden;
	width: 100%; height: 400px;             /* .swiper-wrapper 25rem */
	background: var(--nfap-chip-bg);
}
.nfap-card__media-link { display: block; width: 100%; height: 100%; }
.nfap-card__img {
	width: 100%; height: 100%; display: block;
	object-fit: cover; object-position: 50% 50%;   /* background-size:cover / 50% 50% */
}
.nfap-card__img--placeholder { background: linear-gradient(135deg, #eef0f2, #dfe3e7); }

/* Diagonal "Szarfa" ribbon (.bon__ribbon) */
.nfap-card__ribbon {
	position: absolute; top: 50px; left: -55px; z-index: 10;
	width: 100%; max-width: 250px;
	padding: 10px 0;
	display: flex; flex-direction: column; align-items: center;
	text-align: center;
	background: var(--nfap-primary);
	transform: rotate(-45deg);
	transition: all .3s;
	color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
}

/* Tag badges (.wonder-check-online). The base class is red-on-white, but every
   instance in the export inverts it, so the inverted look is what renders.
   Stacked from the bottom-right instead of the source's hardcoded 10/60/111px
   offsets, so a tile with only one badge doesn't leave a floating gap. */
.nfap-card__badges {
	position: absolute; right: 10px; bottom: 10px; z-index: 3;
	display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px;
}
.nfap-card__badge {
	padding: 8px 20px;
	font-size: 14px; font-weight: 700;
	color: var(--nfap-danger);
	background: rgba(255, 255, 255, .8);
	border: 3px solid var(--nfap-danger);
}

/* Gallery arrows. The export leaves .swiper-button-prev/next unstyled (Swiper's
   own stylesheet handles them there); this element has no Swiper, so it keeps
   its own buttons and only adopts the source's arrow colour. */
/* Oryginał to gołe .swiper-button-prev/next z ikoną FontAwesome 25 px w kolorze
   rgba(74,74,74,.85) — klasy w Oxygenie nie mają własnych styli, więc obowiązuje
   sam Swiper: bez tła, bez obwódki, bez cienia. Mieliśmy tu białe kółko 38 px
   z cieniem i to był największy rozjazd w obszarze zdjęcia. */
.nfap-card__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer;
	color: rgba(74, 74, 74, .85);
	display: inline-flex; align-items: center; justify-content: center;
	transition: opacity .15s ease;
	z-index: 4;
}
.nfap-card__nav:hover { opacity: .7; }
.nfap-card__nav-icon { width: 25px; height: 25px; display: block; }
.nfap-card__nav--prev { left: 10px; }
.nfap-card__nav--next { right: 10px; }

/* ---- Content column ---- */
.nfap-card__body {
	width: 65%; height: 100%; min-height: 400px;
	padding-left: 20px;
	display: flex; flex-direction: column; justify-content: space-between;
}
.nfap-card__details {
	width: 100%; max-width: 100%; height: 100%;
	padding-left: 20px;
	display: flex; flex-direction: column;
	align-items: flex-start; justify-content: center; text-align: left;
}

/* Krój podany wprost: globalna reguła Oxygena dla h3 (Lato) wygrywała
   z dziedziczeniem po .nfap i tytuł wychodził cieńszy niż na produkcji. */
.nfap-card__title {
	margin: 0;
	font-family: 'Inter', 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--nfap-heading); font-size: 32px; font-weight: 500; line-height: 1.1;
}
.nfap-card__title a { color: inherit; text-decoration: none; }
.nfap-card__title a:hover { color: var(--nfap-primary); }

.nfap-card__address {
	margin-top: 5px;
	color: var(--nfap-primary);
	font-size: 13px; font-weight: 400; letter-spacing: 1px;
}

.nfap-card__excerpt {
	margin: 10px 0 0;
	color: var(--nfap-heading); font-size: 15px; font-weight: 400; text-align: left;
	max-height: 10em; overflow: hidden; text-overflow: ellipsis;
}

/* Przełącznik ulubionych — odwzorowanie .horizontalTile__favourite z Oxygena.
   Dwa stany różnią się ikoną i kolorem, nie samym odcieniem: kontur #4f4f4f,
   gdy niezapisany, pełne serce #e84747, gdy zapisany. Pod ikoną koło o 150%
   jej rozmiaru, które przy najechaniu wychodzi do 30% krycia. */
.nfap-card__fav {
	position: absolute; top: 1em; right: 1em; z-index: 4;
	padding: 6px 0 0; border: 0; background: transparent; cursor: pointer;
	display: flex; color: #4f4f4f;
	font-family: inherit; /* button ma domyślnie Arial — dymek ma być w kroju karty */
}
.nfap-card__fav.is-active { color: #e84747; }

.nfap-card__fav::before {
	content: ""; position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 150%; height: 150%; border-radius: 100%;
	background: currentColor; opacity: 0; pointer-events: none;
	transition: opacity .2s ease-in-out;
}
.nfap-card__fav.is-active::before { transition-duration: .1s; }
.nfap-card__fav:hover::before { opacity: .3; }

.nfap-card__fav-icon { position: relative; display: block; width: 32px; height: 32px; }
.nfap-card__fav-icon--on { display: none; }
.nfap-card__fav.is-active .nfap-card__fav-icon--off { display: none; }
.nfap-card__fav.is-active .nfap-card__fav-icon--on { display: block; }

/* Dymek po lewej stronie ikony, ze strzałką skierowaną w jej stronę.
   Pojawia się z opóźnieniem, żeby nie migał przy przejeżdżaniu myszą. */
.nfap-card__fav-tip {
	position: absolute; top: 50%; right: calc(100% + 14px);
	transform: translateY(-50%);
	padding: 4px 8px; border-radius: 6px;
	font-size: 14px; color: #e0e0e0; background: rgba(66, 66, 66, .8);
	width: max-content; text-align: left;
	opacity: 0; pointer-events: none;
	transition: opacity .1s ease-out; transition-delay: .4s;
}
.nfap-card__fav-tip::before {
	content: ""; position: absolute; left: 100%; top: 50%;
	transform: translateY(-50%);
	width: 0; height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid rgba(66, 66, 66, .8);
}
.nfap-card__fav-tip--on { display: none; }
.nfap-card__fav.is-active .nfap-card__fav-tip--off { display: none; }
.nfap-card__fav.is-active .nfap-card__fav-tip--on { display: block; }
.nfap-card__fav:hover .nfap-card__fav-tip { opacity: 1; }

/* ---- Equipment rows (icon + label + value + unit), 2 columns ---- */
.nfap-card__specs {
	width: 100%; margin-top: 5px;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px; row-gap: 0;
	align-items: center; text-align: left;
}
.nfap-card__spec {
	display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
	flex-wrap: nowrap; flex-grow: 0; flex-shrink: 0; flex-basis: 50%;
	/* ŚWIADOME ODSTĘPSTWO od produkcji. Oryginalna klasa .equipment ma
	   font-size: 20px, przez co etykieta („Powierzchnia:") jest tam wyraźnie
	   większa od wartości obok, która ma 14px. Ujednolicone na życzenie —
	   decyzja potwierdzona po okazaniu pełnej specyfikacji kafelka.
	   Nie „poprawiać" z powrotem na 20 przy porównywaniu z wonderhome.eu. */
	font-size: 14px;
	padding: 8px 0;
	border-top: 1px solid var(--nfap-line);
}
/* First row has no top rule in the source (elements 379 / 412). */
.nfap-card__spec:nth-child(-n+2) { border-top: 0; }

.nfap-card__spec-icon {
	flex: 0 0 auto;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	margin-right: 6px; padding-bottom: 0;
	color: var(--nfap-primary);
	transition: transform .5s;
}
.nfap-card__spec-icon svg { width: 20px; height: 20px; }
.nfap-card__spec-label,
.nfap-card__spec-value,
.nfap-card__spec-unit { padding-left: 4px; }     /* .pl-ch */
.nfap-card__spec-label { color: #3b3b3b; }
.nfap-card__spec-value,
.nfap-card__spec-unit {
	font-family: var(--nfap-value-font);
	font-size: 14px; font-weight: 400; color: var(--nfap-value);
}

/* ---- Footer: price + actions ---- */
.nfap-card__footer {
	width: 100%; height: 100%;
	display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
	text-align: right;
	padding-left: 20px; padding-top: 0; margin-top: 13px;
}
/* DOM order is current → crossed → label (see NFAP_Render::price_block); the
   reading order label → crossed → current is restored with `order`, which lets
   the "nothing priced yet" case be handled by a plain sibling selector instead
   of :has() — Safari only got :has() in 15.4. */
/* Blok ceny wg reusable 563 z Oxygena. Etykieta stoi po lewej, a ceny
   w kolumnie po jej prawej: przekreślona nad bieżącą. Wcześniej wszystkie trzy
   leżały w jednym rzędzie na wspólnej linii bazowej. */
.nfap-card__price {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"label old"
		"label current";
	align-items: end; justify-content: flex-end;
	column-gap: 12px;
}
/* Etykieta („cena za pobyt") nie ma w oryginale własnego koloru ani rozmiaru —
   dziedziczy je po karcie. Była u nas wyszarzona i pomniejszona. */
.nfap-card__price-label {
	grid-area: label; align-self: end;
	color: var(--nfap-text); /* #404040 — odziedziczony kolor kafelka na produkcji */
}
.nfap-card__price-old {
	grid-area: old; justify-self: end;
	color: var(--nfap-price-crossed); text-decoration: line-through;
	font-size: 20px; font-weight: 600; line-height: 1;
}
/* inline-block: przekreślenie rodzica nie przechodzi na „PLN”, jak na produkcji */
.nfap-card__price-old .unit { font-size: 12px; display: inline-block; text-decoration: none; padding-left: 5px; }
.nfap-card__price-current {
	grid-area: current; justify-self: end;
	padding: 0 5px;
	color: var(--nfap-primary); font-weight: 600; font-size: 40px; line-height: 1;
}
.nfap-card__price-current .unit { font-size: 20px; font-weight: 600; }
/* No price yet → the empty span collapses and takes the label with it. */
.nfap-card__price-current:empty ~ * { display: none; }

.nfap-card__actions {
	display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;
	gap: 15px; margin-top: 24px; margin-left: 16px;
}

.nfap-card__btn {
	position: relative; z-index: 1; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 42px; padding: 10px 15px;
	font-family: inherit; font-size: 14px; letter-spacing: 1px; line-height: 1.6;
	text-transform: none; text-align: center; text-decoration: none;
	color: #fff; background: transparent;
	border: 1px solid transparent; border-radius: var(--nfap-card-radius);
	cursor: pointer; transition: all .3s ease-in-out;
}
/* "Szczegóły" — gold (.btn + element override to var(--main-color)) */
.nfap-card__btn--primary { background: var(--nfap-primary); border-color: var(--nfap-primary); }
.nfap-card__btn--primary:hover { background: var(--nfap-dark); border-color: var(--nfap-dark); }
/* "Rezerwuj" — na kafelku z wonderhome.eu jest w tym samym złocie co
   „Szczegóły", nie czarny. Wcześniej mapowaliśmy go na .wonder-btn-book
   (--nfap-dark), przez co odcinał się czernią od reszty karty. Ciemny
   kolor zostaje na stan hover. */
/* Złote tło (.map-btn-book), ale obwódka 1 px #242424 z bazowej klasy
   .wonder-btn-book — na produkcji ten przycisk ma ciemną ramkę.
   Hover jak .wonder-btn-book:hover: grafit #5b5a5e. */
.nfap-card__btn--book { background: var(--nfap-primary); border-color: var(--nfap-dark); }
.nfap-card__btn--book:hover { background: var(--nfap-dark-hover); border-color: var(--nfap-dark-hover); }

/* ---- Unavailable variant (template 727) ---- */
/* Kafelek niedostępny NIE jest odbarwiany ani przyciemniany. Na referencyjnym
   kafelku z wonderhome.eu zdjęcie, wstążka i przyciski zostają w pełnym
   kolorze — o niedostępności mówi czerwony komunikat i przycisk „Dostosuj
   termin". Były tu wcześniej dwa mechanizmy przyciemniania i oba wycięto:
   filter: sepia+grayscale (zabijał też czerwień komunikatu) oraz beżowa
   powłoka .nfap-card__overlay. Nie przywracać. */
.nfap-card__notice {
	margin-top: 12px;
	color: var(--nfap-danger); font-weight: 800;
	text-align: left;
}
/* Kafelek niedostępny na wonderhome.eu jest przykryty jasnobeżową
   półprzezroczystą warstwą (cała karta: zdjęcie, tekst, przyciski).
   Wartość wyliczona z porównania pikseli tego samego kafelka na obu
   stronach: tło #fff -> #f6f0ec, tytuł #242424 -> #58524e, czerwień
   #d30000 -> #d23834 — wszystkie trzy daje rgba(223,201,187,.28).
   pointer-events:none, żeby nie blokowała kliknięć. */
.nfap-card--unavailable::after {
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20;
	background: rgba(223, 201, 187, .28);
	pointer-events: none;
}
/* Bez padding-left — dawał widoczną spację przed „Upss!” (uwaga klientki 28.09.2026). */
.nfap-card__notice span { margin-top: 3px; }

/* "Dostosuj termin" (.horizontalTile__btn.nf-open-calendar) */
.nfap-card__btn--adjust {
	display: inline-flex; flex-direction: row;
	align-items: center; justify-content: center; gap: 8px;
	min-height: 42px; padding: 6px 25px;
	border: 1px solid var(--nfap-primary);
	background: var(--nfap-danger); color: #fff;
	transition: all .4s; cursor: pointer;
}
.nfap-card__btn--adjust:hover { background: var(--nfap-primary); color: #fff; }
/* Ikona stoi w potoku flexa obok tekstu. Wcześniej była position:absolute
   bez top/left, dosuwana marginesami i podpierana padding-left na tekście —
   rozjeżdżała się przy każdej zmianie rozmiaru czcionki i zawijaniu. */
.nfap-card__btn-icon {
	display: inline-flex; align-items: center; flex: 0 0 auto;
	line-height: 0; color: inherit;
}
.nfap-card__btn-icon svg { display: block; }
.nfap-card__btn--adjust .nfap-card__btn-text { color: inherit; }
/* Odstępy zmierzone na kafelku niedostępnym z produkcji: przyciski ok. 16 px
   pod komunikatem (13 px stopki + 3 px), odstęp między nimi ok. 21 px. */
.nfap-card--unavailable .nfap-card__actions { margin-left: 0; margin-top: 3px; }
.nfap-card--unavailable .nfap-card__btn--primary { margin-left: 6px; }

/* Pasek pod ceną i przyciskami: „Wybierz rezerwuj i zobacz pełną kalkulację ceny”.
   Kolory zdjęte z makiety klientki (28.09.2026): tło = akcent w 30 % na bieli,
   tekst ciemny brąz. Body karty jest kolumną flex, więc align-self: flex-end
   ustawia pasek pod blokiem cena+przyciski i zwęża go do treści. */
.nfap-card__hint {
	align-self: flex-end; max-width: 100%;
	margin-top: 5px; padding: 8px 16px;
	background: rgba(215, 169, 125, .3);
	color: #8f5d27; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center;
}
@media (max-width: 767px) {
	.nfap-card__hint { align-self: stretch; font-size: 14px; }
}

/* ============================ PAGINATION ============================ */
.nfap__pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 36px; }
.nfap__page {
	min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--nfap-radius);
	border: 1px solid var(--nfap-border); background: var(--nfap-bg); color: var(--nfap-text);
	cursor: pointer; font-weight: 600; font-family: inherit;
}
.nfap__page:hover:not(:disabled) { border-color: var(--nfap-primary); color: var(--nfap-primary); }
.nfap__page.is-active { background: var(--nfap-primary); color: #fff; border-color: var(--nfap-primary); }
.nfap__page:disabled { opacity: .45; cursor: default; }

/* ============================ INFINITE SCROLL ============================ */
.nfap__more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; }
.nfap__sentinel { width: 100%; height: 1px; }
.nfap__loadmore { min-width: 200px; }
.nfap__more.is-loading .nfap__loadmore { opacity: .6; pointer-events: none; }
.nfap__more.is-loading::after {
	content: ""; width: 22px; height: 22px; border-radius: 50%;
	border: 2px solid var(--nfap-border); border-top-color: var(--nfap-primary);
	animation: nfap-spin .7s linear infinite;
}
@keyframes nfap-spin { to { transform: rotate(360deg); } }

/* ============================ RESPONSIVE ============================
   Oxygen breakpoint names → media queries (confirmed against the site's
   generated universal.css):
     page-width      -> max-width: 1200px
     tablet          -> max-width:  991px
     phone-landscape -> max-width:  767px
     phone-portrait  -> max-width:  479px
   ------------------------------------------------------------------- */

/* -- page-width (<=1200) -- */
@media (max-width: 1200px) {
	.nfap-card__image  { height: 250px; }
	.nfap-card__details { width: auto; padding-left: 0; }
	.nfap-card__spec   { flex-basis: 100%; }
	.nfap-card__footer { width: auto; padding-left: 0; }
	.nfap__layout      { grid-template-columns: 260px 1fr; gap: 32px; }
}

/* -- tablet (<=991) -- */
@media (max-width: 991px) {
	.nfap__layout      { grid-template-columns: 1fr; }
	.nfap__filters     { position: static; }

	.nfap-card         { height: auto; padding: 0; }
	.nfap-card__inner  { flex-direction: column; height: auto; padding-left: 0; padding-right: 0; }
	.nfap-card__media  { width: 100%; max-width: 100%; height: 300px; }
	.nfap-card__image  { width: 100%; height: 100%; }
	.nfap-card__body   { width: 100%; margin-top: 20px; padding-left: 8px; min-height: 0; }
	.nfap-card__details { width: 100%; max-width: 100%; }
	.nfap-card__specs  { grid-template-columns: minmax(0, 1fr); }
}

/* -- phone-landscape (<=767) -- */
@media (max-width: 767px) {
	.nfap-card__badge  { padding: 6px 12px; font-size: 12px; }
	.nfap-card__spec   { padding: 8px 0; margin: 2px 0; }
	/* Single column here, so the second row needs its rule back. */
	.nfap-card__spec:nth-child(2) { border-top: 1px solid var(--nfap-line); }
	.nfap-card__footer { align-items: flex-end; text-align: right; }
	.nfap-card__actions { margin-top: 20px; }
}

/* -- phone-portrait (<=479) -- */
@media (max-width: 479px) {
	.nfap-card__media   { height: 200px; }
	.nfap-card__image   { width: 100%; height: 100%; max-height: 100%; }
	.nfap-card__title   { font-size: 20px; text-align: left; }
	.nfap-card__excerpt { font-size: 15px; }
	/* Bez odstępu między wierszami — na produkcji jest tu grid bez gap,
	   a rytm dają same wiersze (padding 8 + margin 2). */
	.nfap-card__specs   { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; column-gap: 20px; }
	.nfap-card__spec    { flex-grow: 1; }
	.nfap-card__footer  { flex-direction: column; align-items: flex-end; }
	.nfap-card__actions { align-items: center; justify-content: center; }
	/* Tekst obu przycisków zostaje 14 px — na produkcji 12 px ma tylko
	   kontener, a napis w środku ma własne 14 px. */
	.nfap-card__btn     { min-height: 0; height: auto; font-size: 14px; padding-left: 15px; padding-right: 15px; }
	.nfap-card__btn--adjust { padding-top: 10px; padding-bottom: 10px; }
	.nfap-card--unavailable .nfap-card__btn--primary { margin-top: 10px; }
}