/* Strona główna (spec §6.2) — z makiety projekt/strona-glowna-v1.html. Ładowana tylko na stronie głównej (inc/dom.php). */
/* hero — telefon: zdjęcie z łodzią na górze, tekst pod nim, nic nie zasłania łodzi */
.hero { position: relative; color: #fff; background: var(--navy); }
.hero-media { height: 260px; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 47% 58%; }
.hero-in { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 22px var(--gut) 28px; }
.eyebrow { font: 700 12px/1 Barlow, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffd9a8; }
.hero h1 { font: 800 36px/1.02 Barlow, sans-serif; margin: 10px 0 12px; color: #fff; }
.hero p { margin: 0 0 20px; color: #f0f2f6; font-size: 15.5px; max-width: 46ch; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
/* pasek zaufania (.trust w makiecie) */
.j-trustbar { background: var(--bg); border-bottom: 1px solid var(--line); }
.j-trustbar .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding-top: 16px; padding-bottom: 16px; }
.j-trustbar a { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.3; }
.j-trustbar svg { color: var(--brand); margin-top: 1px; }
.j-trustbar b { display: block; font: 700 14.5px/1.2 Barlow, sans-serif; color: var(--ink); }
.j-trustbar span { color: var(--muted); }
/* kategorie */
.cats { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 4px; scroll-snap-type: x mandatory; }
.cats::-webkit-scrollbar { display: none; }
.cat { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: grid; gap: 6px; scroll-snap-align: start; background: #fff; transition: border-color .15s, transform .15s; }
.cat:hover { border-color: var(--brand); transform: translateY(-2px); }
.cat img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--bg); border-radius: 8px; mix-blend-mode: multiply; }
.cat b { font: 700 16px/1.15 Barlow, sans-serif; }
.cat span { color: var(--muted); font-size: 12.5px; }
/* pasek kategorii jadący sam; włącza go pasek-kategorii.js tylko wtedy, gdy kafle nie mieszczą się w rzędzie */
.cats-wrap.is-marquee { overflow: hidden; margin: 0 calc(var(--gut) * -1); touch-action: pan-y; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.cats-wrap.is-marquee .cats { display: flex; width: max-content; gap: 0; margin: 0; padding: 0 0 4px; overflow: visible; scroll-snap-type: none; will-change: transform; user-select: none; -webkit-user-select: none; }
.cats-wrap.is-marquee .cat { flex: 0 0 auto; width: calc((100vw - 2 * var(--gut)) * .44); margin-right: 10px; }
.cats-wrap.is-marquee .cat img { -webkit-user-drag: none; }
.cats-wrap.dragging { cursor: grabbing; }
.cats-wrap.dragging .cat { pointer-events: none; }
/* wyróżniony produkt */
.feature { margin-top: 30px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #f1f5fc 0%, #e6edf8 100%); display: grid; }
.feature-img { background: #fff; display: flex; align-items: center; justify-content: center; padding: 16px; }
.feature-img a { display: flex; align-items: center; justify-content: center; width: 100%; }
.feature-img img { width: 100%; max-width: 420px; height: auto; aspect-ratio: 1; object-fit: contain; }
.feature-b { padding: 22px 18px 24px; display: grid; gap: 12px; align-content: center; }
.feature-b .h2 { font-size: 26px; }
.feature .eyebrow { color: var(--brand); }
.feature ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14.5px; }
.feature li { display: flex; gap: 8px; align-items: flex-start; }
.feature li svg { color: var(--brand); width: 18px; height: 18px; margin-top: 2px; }
.feature .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.feature .price { font-size: 30px; }
.feature .stock { margin: 0; color: var(--muted); font-size: 14px; }
/* społeczność (filmy, Facebook) */
.panel { border: 1px solid var(--line); border-radius: 16px; padding: 20px 18px; display: grid; gap: 14px; background: #fff; }
.social { margin-top: 30px; }
.social-txt { display: grid; gap: 10px; }
.social .h2 { font-size: 24px; }
.panel p { margin: 0; color: var(--muted); font-size: 14.5px; }
.panel .row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ komputer ============ */
@media (min-width: 900px) {
  /* 900–1099 px: zdjęcie na górze (wyższe), tekst pod nim */
  .hero-media { height: 340px; }
  .hero-media img { object-position: 50% 58%; }
  .hero-in { padding-top: 32px; padding-bottom: 36px; }
  .hero h1 { font-size: 68px; max-width: 15ch; }
  .hero p { font-size: 18.5px; }
  .j-trustbar .wrap { grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 22px; padding-bottom: 22px; }
  .j-trustbar a { font-size: 14px; }
  .j-trustbar b { font-size: 16.5px; }
  .cats { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: 18px; overflow: visible; margin: 0; padding: 0; }
  .cat { padding: 14px; }
  .cat b { font-size: 20px; }
  .feature { grid-template-columns: 1fr 1.1fr; margin-top: 54px; }
  .feature-img { padding: 26px; }
  .feature-b { padding: 40px 46px; }
  .feature-b .h2 { font-size: 38px; }
  .panel { padding: 28px 30px; }
  .social { grid-template-columns: 1fr auto; align-items: center; gap: 30px; margin-top: 54px; }
}

/* ============ szeroki ekran: dorysowane zdjęcie 21:9 na całą szerokość, pod tekstem półprzezroczysty granat (kontrast tekstu zmierzony — raport P06-OD) ============ */
@media (min-width: 1100px) {
  .hero { min-height: 560px; display: flex; align-items: center; overflow: hidden; }
  .hero-media { position: absolute; inset: 0; height: 100%; }
  .hero-media img { object-position: 0 56%; } /* zdjęcie przylega do lewej: przy 1100–1327 px łódź zostaje na prawo od tekstu */
  /* lewy brzeg tekstu (--tx) = środek kontenera 1240 px; granat 0,68 → 0 na ≈700 px od lewego brzegu tekstu (łódź zostaje czytelna); nad lewą krawędzią zdjęcia słabszy */
  .hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; --tx: calc(max(0px, (100% - var(--maxw)) / 2) + var(--gut)); background: linear-gradient(90deg, rgba(var(--navy-rgb),.3) 0, rgba(var(--navy-rgb),.68) var(--tx), rgba(var(--navy-rgb),.64) calc(var(--tx) + 440px), rgba(var(--navy-rgb),.5) calc(var(--tx) + 530px), rgba(var(--navy-rgb),0) calc(var(--tx) + 700px)); }
  .hero-in { padding-top: 40px; padding-bottom: 40px; }
}

/* --- zgodność z Blocksy --- */
/* Kolor nagłówków i cen z palety Blocksy: reset we wspólnym baza.css. Tu zostaje tylko dolny odstęp klasy .row. */
.j-dom .feature .price { color: var(--ink); }
.j-dom .feature .row, .j-dom .panel .row { padding-bottom: 0; }