/* ============================================================================
   FN — Banery na stronie glownej (front)
   Arkusz ladowany TYLKO na stronie glownej i tylko wtedy, gdy jest wlaczony
   przynajmniej jeden baner (patrz fn_hb_enqueue()).

   Zasady:
   - stale proporcje kafla 12:5 = dokladnie 1920x800 px, wiec grafika nigdy
     sie nie rozciaga; nadmiar jest przycinany przez object-fit: cover;
   - na telefonie proporcje 16:9 => przycinane sa BOKI, zostaje srodek grafiki
     (stad zalecenie: najwazniejszy element w srodkowych 1200 px);
   - szerokosc dopasowana do siatki strony glownej z fn-design-width.php
     (kolumna 1440 px + 24 px gutterow, wysrodkowana).
   ========================================================================== */

.fn-home-banners {
	box-sizing: border-box;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	/* Gornego marginesu prawie nie ma — baner ma sie kleic do sekcji nad nim,
	   a dolny odstep oddziela go od naglowka "Nowosci w naszej ofercie". */
	padding: 8px 24px 8px;
}

.fn-hb-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.fn-hb-count-2 .fn-hb-grid { grid-template-columns: repeat(2, 1fr); }
.fn-hb-count-3 .fn-hb-grid { grid-template-columns: repeat(3, 1fr); }

.fn-home-banners .fn-hb-item {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 12 / 5;           /* 1920 x 800 */
	border-radius: 16px;
	border: 1px solid #E7DAD4;      /* ta sama ramka co kafle kategorii/produktow */
	background: #F5EBE7;            /* delikatne tlo, zanim obrazek sie doladuje */
	line-height: 0;                 /* zero bialego paska pod <img> */
	text-decoration: none;
}

.fn-home-banners .fn-hb-item img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;              /* przycina, nigdy nie deformuje */
	object-position: center;
	transition: transform .35s ease;
}

/* Hover tylko dla banerow z linkiem — zeby nie sugerowac klikalnosci tam,
   gdzie jej nie ma. Animujemy WYLACZNIE transform (lekkie, nie blokuje watku). */
@media (hover: hover) {
	.fn-home-banners .fn-hb-item--link:hover img { transform: scale(1.03); }
	.fn-home-banners .fn-hb-item--link:hover { border-color: #C9A15A; }
}

/* Widoczny focus dla nawigacji klawiatura (dostepnosc). */
.fn-home-banners .fn-hb-item--link:focus-visible {
	outline: 3px solid #A34B65;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.fn-home-banners .fn-hb-item img { transition: none; }
	.fn-home-banners .fn-hb-item--link:hover img { transform: none; }
}

/* Zapas dla przegladarek bez aspect-ratio (stary Safari): klasyczny trik z padding-top. */
@supports not (aspect-ratio: 12 / 5) {
	.fn-home-banners .fn-hb-item { height: 0; padding-top: 41.666%; }
	.fn-home-banners .fn-hb-item img { position: absolute; inset: 0; }
}

/* Tablet: trzy banery obok siebie robia sie za male — schodzimy do dwoch kolumn. */
@media (max-width: 1024px) {
	.fn-hb-count-3 .fn-hb-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Telefon: zawsze jedna kolumna, ale proporcje TE SAME co na desktopie (12:5).
   ZMIANA 17.08.2026 - wczesniej bylo tu 16:9 i to byl realny blad, zmierzony:
   przy kontenerze 16:9 (1,778) i grafice 12:5 (2,400) object-fit: cover przycinal
   25,9 % SZEROKOSCI, czyli po 311 px z kazdej strony banera 2400 px - dokladnie
   tam, gdzie producenci umieszczaja logo i przycisk. Baner zrobiony IDEALNIE wg
   naszej specyfikacji i tak tracil cwierc szerokosci na telefonie.
   Po zmianie poprawnie przygotowany baner nie jest przycinany nigdzie.
   Koszt: kafel na ekranie 375 px ma 142 px wysokosci zamiast 192 px. Swiadomy
   wybor - lepiej pokazac caly baner nizszy niz wysoki z obcietymi bokami. */
@media (max-width: 767px) {
	.fn-home-banners { padding: 4px 16px 4px; }
	.fn-hb-grid { grid-template-columns: 1fr !important; gap: 14px; }
	.fn-home-banners .fn-hb-item { aspect-ratio: 12 / 5; border-radius: 12px; }
	@supports not (aspect-ratio: 12 / 5) {
		.fn-home-banners .fn-hb-item { height: 0; padding-top: 41.666%; }
	}
}