/* home-v2.css, small additions for the home page.
 Most home sections reuse classes from category-v2.css, single-portfolio-v2.css,
 realizacje-v2.css, technique-v2.css. This file only adds:
 - Hero variant with photo on the right (full-bleed, like a product still life)
 - Hero action buttons (primary + secondary side-by-side)
 - "Zobacz wszystkie →" link below grids (portfolio, realizacje)
 - Trust logo strip (light variant) */

.sn-hm-main {
 background: var(--bone-100);
 color: var(--fg-on-light-1);
 --hm-rule: rgba(20, 17, 13, 0.12);
}
/* Home hero follows the category pattern, chapter marker above the
 headline. Extra top padding gives breathing room from the header bar. */
.sn-hm-main > .sn-r2-hero {
 padding-top: clamp(36px, 4.5vw, 80px);
}

/* Clip meta column so no text bleeds into the grid gap */
.sn-hm-main > .sn-r2-hero .sn-r2-hero-meta {
 overflow: hidden;
}

/* 50 / 50 grid, equal columns, no gap; spacing via padding on photo */
.sn-hm-main > .sn-r2-hero .sn-r2-hero-grid {
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 column-gap: 0 !important;
 align-items: stretch !important;
}
.sn-hm-main > .sn-r2-hero .sn-hm-hero-photo {
 padding-left: clamp(32px, 4vw, 64px);
}

/* ─── Hero headline, matches category base size ─────── */
/* No font-size override, inherits sn-r2-hero-h base clamp(36px, 5vw, 72px) */
.sn-hm-hero-h .sn-r2-hero-h-line { margin-top: 0; }

/* Sub-line inside the heading, generous spacing above, breathable size */
.sn-hm-hero-h .sn-r2-hero-h-sub {
 margin-top: clamp(28px, 3vw, 40px);
 max-width: 44ch;
 font-size: clamp(16px, 1.4vw, 19px);
 line-height: 1.55;
 text-wrap: pretty;
}

/* Ladder, push it further from the sub-line for breathing room */
.sn-hm-hero-ladder.sn-r2-hero-ladder {
 margin-top: clamp(48px, 5.5vw, 72px);
}

/* ─── Hero: actions row ────────────────────────────────── */
.sn-hm-hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 margin-top: clamp(32px, 3.5vw, 44px);
 align-items: center;
}
.sn-hm-hero-actions .sn-r2-cta-primary {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 16px 26px;
 background: var(--brass-500);
 color: #fff;
 font-family: var(--font-body);
 font-size: 13px;
 font-weight: 700;
 letter-spacing: var(--ls-cta);
 text-transform: uppercase;
 border-radius: var(--radius-tight);
 text-decoration: none;
 transition: background 220ms;
}
.sn-hm-hero-actions .sn-r2-cta-primary:hover { background: var(--brass-400); }
.sn-hm-hero-actions .sn-r2-cta-primary svg { width: 11px; height: 11px; }

.sn-hm-hero-actions .sn-r2-cta-secondary {
 font-family: var(--font-body);
 font-size: 13px;
 letter-spacing: 0.02em;
 color: var(--fg-on-dark-3);
 text-decoration: none;
 transition: color 220ms;
}
.sn-hm-hero-actions .sn-r2-cta-secondary em {
 font-style: italic;
 text-decoration: underline;
 text-underline-offset: 4px;
 text-decoration-thickness: 1px;
}
.sn-hm-hero-actions .sn-r2-cta-secondary:hover { color: var(--fg-on-dark-1); }

/* ─── Hero photo: full-bleed + editorial stamp ────────── */
.sn-hm-hero-photo {
 position: relative;
 aspect-ratio: 4 / 5;
 width: 100%;
 background: var(--ink-900);
 border-radius: var(--radius-tight);
 overflow: hidden;
}
.sn-hm-hero-photo img {
 border: 1px solid rgba(255, 255, 255, 0.06);
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 30%;
 display: block;
}
.sn-hm-hero-photo::after {
 content: "";
 position: absolute;
 inset: 0;
 background:
 linear-gradient(180deg, transparent 0%, transparent 60%, rgba(20,17,13,0.55) 100%),
 radial-gradient(circle at 100% 0%, rgba(176,144,88,0.10) 0%, transparent 50%);
 pointer-events: none;
 z-index: 1;
}
.sn-hm-hero-photo-stamp {
 position: absolute;
 left: clamp(24px, 2.5vw, 36px);
 bottom: clamp(22px, 2.5vw, 34px);
 z-index: 2;
 display: flex;
 flex-direction: column;
 gap: 4px;
}
.sn-hm-hero-photo-stamp-no {
 font-family: var(--font-display);
 font-weight: 700;
 font-style: italic;
 font-size: clamp(36px, 4vw, 56px);
 line-height: 0.9;
 letter-spacing: -0.03em;
 color: var(--brass-400);
 text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.sn-hm-hero-photo-stamp-no em { font-style: italic; }
.sn-hm-hero-photo-stamp-lbl {
 font-family: var(--font-body);
 font-size: var(--fs-nano);
 font-weight: 700;
 letter-spacing: var(--ls-loose);
 text-transform: uppercase;
 color: rgba(255,255,255,0.88);
 text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* ─── Section header with right-side "See all" CTA ────── */
.sn-hm-sec-head {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 24px;
 flex-wrap: wrap;
 margin-bottom: clamp(40px, 5vw, 56px);
}
.sn-hm-sec-head-text {
 flex: 1;
 min-width: 0;
}
.sn-hm-sec-head-text .sn-kt2-h,
.sn-hm-sec-head-text .sn-kt2-lede {
 margin-bottom: 0;
}
.sn-hm-sec-head-text .sn-kt2-h { margin-bottom: clamp(16px, 1.8vw, 22px); }

.sn-hm-seeall {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 14px 18px;
 border: 1px solid var(--hm-rule);
 border-radius: var(--radius-tight);
 font-family: var(--font-body);
 font-size: var(--fs-mini);
 font-weight: 700;
 letter-spacing: var(--ls-eyebrow);
 text-transform: uppercase;
 color: var(--fg-on-light-1);
 text-decoration: none;
 transition: background 220ms, color 220ms, border-color 220ms;
 white-space: nowrap;
 flex-shrink: 0;
}
.sn-hm-seeall:hover {
 background: var(--ink-900);
 color: #fff;
 border-color: var(--ink-900);
}
.sn-hm-seeall svg { width: 10px; height: 10px; transition: transform 220ms; }
.sn-hm-seeall:hover svg { transform: translateX(3px); }
/* L16 (nagranie 2026-07-11): delikatna linia między pytaniami FAQ na home. */
.sn-kt2-faq-list > li + li { border-top: 1px solid var(--hm-rule, rgba(0,0,0,0.1)); }
.sn-kt2-faq-list > li { padding-top: 6px; }

/* Mobile: flex-wrap nie zadziała, bo tekst ma flex:1+min-width:0 (kurczy się w nieskończoność zamiast
   łamać wiersz) — przy 390px tekst dostawał ~100px kolumny, a przycisk nachodził (panel 2026-07-11 pkt 7).
   Poniżej 640px nagłówek sekcji układa się w pion. */
@media (max-width: 640px) {
 .sn-hm-sec-head { flex-direction: column; align-items: flex-start; }
 .sn-hm-sec-head-text { width: 100%; }
 .sn-hm-seeall { white-space: normal; }
}

/* On-dark variant of seeall */
.sn-r2-process .sn-hm-seeall,
.sn-kt2-sec-dark .sn-hm-seeall {
 color: var(--fg-on-dark-1);
 border-color: rgba(255,255,255,0.18);
}
.sn-r2-process .sn-hm-seeall:hover,
.sn-kt2-sec-dark .sn-hm-seeall:hover {
 background: var(--brass-500);
 border-color: var(--brass-500);
 color: #fff;
}

/* ─── Trust logo strip (home variant, light) ─────────── */
.sn-hm-trust {
 padding: clamp(72px, 8vw, 112px) 0;
 background: var(--bone-100);
 border-top: 1px solid var(--hm-rule);
}
.sn-hm-trust-grid {
 list-style: none;
 padding: 0;
 margin: clamp(28px, 3vw, 40px) 0 0;
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 border-top: 1px solid var(--hm-rule);
 border-left: 1px solid var(--hm-rule);
}
.sn-hm-trust-mark {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 112px;
 padding: 18px 22px;
 border-right: 1px solid var(--hm-rule);
 border-bottom: 1px solid var(--hm-rule);
 color: var(--fg-on-light-3);
 opacity: 0.72;
 filter: grayscale(1);
 transition: opacity 240ms, color 240ms, background 240ms;
}
.sn-hm-trust-mark:hover {
 opacity: 1;
 color: var(--fg-on-light-1);
 background: #fff;
}
.sn-hm-trust-mark svg {
 width: 100%;
 height: auto;
 max-height: 56px;
 display: block;
}
.sn-hm-trust-mark img {
 max-width: 100%;
 max-height: 56px;
 width: auto;
 height: auto;
 object-fit: contain;
 display: block;
}

/* ─── Tiny home additions ────────────────────────────── */
.sn-hm-cat-grid {
 /* 4 categories on home, same shape as .sn-kt2-subcats but 4 columns */
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: clamp(16px, 1.8vw, 24px);
}

@media (max-width: 1100px) {
 .sn-hm-cat-grid { grid-template-columns: repeat(2, 1fr); }
 .sn-hm-trust-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
 .sn-hm-cat-grid { grid-template-columns: 1fr; }
 .sn-hm-trust-grid { grid-template-columns: repeat(2, 1fr); }
 .sn-hm-hero-actions { width: 100%; }
 .sn-hm-hero-actions .sn-r2-cta-primary { width: 100%; justify-content: center; }
 /* Hero: stos na mobile — foto pod tekstem (grid nie skladal sie, foto bylo PENDING) */
 .sn-hm-main > .sn-r2-hero .sn-r2-hero-grid { grid-template-columns: 1fr; row-gap: clamp(28px, 6vw, 40px); }
 .sn-hm-main > .sn-r2-hero .sn-hm-hero-photo { padding-left: 0; }
}

/* ─── KF-O2 (2026-06-22): front page full-bleed ──────────
 Motyw blokowy owija treść strony w <main class="...is-layout-constrained">,
 który nakłada max-width na .entry-content. Przez to ciemne sekcje home
 (hero / techniki / CTA „Wypełnij zapytanie") są „ucięte" zamiast iść
 edge-to-edge jak na szablonach kategorii/money-page (g7-landing, g7-kategoria).
 Zdejmujemy max-width i root-padding z wrappera FSE tylko na froncie;
 .sn-container w środku każdej sekcji nadal centruje treść. */
.home main.is-layout-constrained > .entry-content { max-width: none; }
.home main.is-layout-constrained { padding-left: 0; padding-right: 0; }
.home .entry-content > .sn-hm-main { max-width: none; }

/* ─── Proces POZIOMY na home (Batch 3, 2026-07-09) ───────
   Baza .sn-r2-proc-* (single-portfolio-v2.css) jest pionowa i wspoldzielona
   z realizacjami — NIE ruszamy jej. Tu tylko HOME (.sn-hm-main): 4 kroki
   w rzedzie, dzielniki pionowe; 2×2 na tablecie, stos na mobile. */
.sn-hm-main .sn-r2-proc-list { grid-template-columns: repeat(5, 1fr); gap: 0; }
.sn-hm-main .sn-r2-proc-item {
  display: block;
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2vw, 28px);
  border-top: none;
  border-left: 1px solid var(--r2-rule-dark);
}
.sn-hm-main .sn-r2-proc-item:first-child { border-left: none; padding-left: 0; }
.sn-hm-main .sn-r2-proc-item:last-child { border-bottom: none; }
.sn-hm-main .sn-r2-proc-num { display: block; font-size: clamp(30px, 3vw, 42px); margin-bottom: 12px; }
.sn-hm-main .sn-r2-proc-body { max-width: none; }
@media (max-width: 1100px) {
  .sn-hm-main .sn-r2-proc-list { grid-template-columns: repeat(2, 1fr); }
  .sn-hm-main .sn-r2-proc-item:nth-child(odd) { border-left: none; padding-left: 0; }
  .sn-hm-main .sn-r2-proc-item:nth-child(-n+4) { border-bottom: 1px solid var(--r2-rule-dark); padding-bottom: clamp(20px, 2.4vw, 28px); }
  .sn-hm-main .sn-r2-proc-item:last-child { border-bottom: none; }
}
@media (max-width: 720px) {
  .sn-hm-main .sn-r2-proc-list { grid-template-columns: 1fr; }
  .sn-hm-main .sn-r2-proc-item { border-left: none; padding-left: 0; border-top: 1px solid var(--r2-rule-dark); }
  .sn-hm-main .sn-r2-proc-item:first-child { border-top: none; }
  .sn-hm-main .sn-r2-proc-item:nth-child(-n+2) { border-bottom: none; }
  .sn-hm-main .sn-r2-proc-num { font-size: 30px; margin-bottom: 6px; }
}