/* header-footer.css — uzupełnienia oprawy (G1 → G1-rev2). Ładowane PO kit.css.
   kit.css stylizuje .sn-header / .sn-footer / .sn-mega + menu mobilne (≤880px).
   G1-rev2: pasek skrócony (bez „Promocje"); mega „Produkty" = grupy wg napoju;
   mega „Znakowanie" = lewa szyna zakładek technik × prawy panel grup; nagłówki
   napoju nieklikalne; stopka kuratorska (3 kolumny + brand + kontakt). */

/* — Mega-menu: domyślnie ukryte; pokazywane klasą .is-open (z header.js). */
.sn-mega {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.sn-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (max-width: 880px) {
  .sn-mega { display: none; }
  /* Szuflada mobilna: spójne wyrównanie do lewej (triggery mega + zwykłe linki). */
  .sn-nav-link,
  .sn-nav-link-trigger { justify-content: flex-start; text-align: left; width: 100%; }
}

/* — Pasek górny: zero zawijania, zero nachodzenia na plakietkę (naprawa G1-rev2). */
.sn-nav { flex-wrap: nowrap; }
.sn-nav-link { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1180px) {
  .sn-header-inner { gap: 16px; }
  .sn-nav { gap: 4px; }
  .sn-nav-link { padding: 9px 11px; }
}

/* ── Layout paneli mega v2 ──────────────────────────────────────── */
/* „Produkty" — siatka grup + karta feature. */
.sn-mega-inner-groups {
  grid-template-columns: 1fr 300px;
  gap: 48px;
}
/* „Znakowanie" — szyna zakładek | panel grup | feature. */
.sn-mega-inner-tabs {
  grid-template-columns: 210px 1fr 290px;
  gap: 40px;
}

/* Siatka grup wg napoju (wspólna dla obu layoutów). */
.sn-mega-groupgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 40px;
  align-items: start;
}
.sn-mega-group { min-width: 0; }

/* Nagłówek napoju — NIEklikalny (grupowanie, nie link). */
.sn-mega-group-h {
  display: block;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  color: var(--brass-400);
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Płaski link money-page (jeden wiersz: nagłówek + strzałka, bez sub). */
.sn-mega-link-flat {
  grid-template-rows: auto;
  padding: 11px 4px;
  align-items: center;
}
.sn-mega-link-flat .sn-mega-link-arrow { grid-row: 1; }

/* ── Zakładki technik (lewa szyna) ──────────────────────────────── */
.sn-mega-tabrail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding-right: 24px;
}
.sn-mega-tab {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 4px;
  padding: 12px 14px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.82);
  transition: background 200ms, color 200ms;
}
.sn-mega-tab:hover { background: rgba(255, 255, 255, 0.05); }
.sn-mega-tab.is-active {
  background: rgba(176, 144, 88, 0.10);
  box-shadow: inset 2px 0 0 var(--brass-500);
}
.sn-mega-tab-label {
  grid-column: 1;
  font-family: var(--font-heading, "Inter", sans-serif);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.005em;
}
.sn-mega-tab.is-active .sn-mega-tab-label { color: var(--brass-300); }
.sn-mega-tab-sub {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.35;
}
.sn-mega-tab-arrow {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 15px; height: 15px;
  color: rgba(255, 255, 255, 0.25);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms, transform 200ms, color 200ms;
}
.sn-mega-tab:hover .sn-mega-tab-arrow,
.sn-mega-tab.is-active .sn-mega-tab-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--brass-400);
}

/* Tabpanele — tylko aktywny widoczny (hidden attr z header.js); animacja wejścia. */
.sn-mega-tabpanel[hidden] { display: none; }
.sn-mega-tabpanel.is-active { animation: snTabIn 220ms var(--ease-out, ease); }
@keyframes snTabIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* — Wąskie viewporty desktop: 2 kolumny grup, zwęź szynę/feature. */
@media (min-width: 881px) and (max-width: 1180px) {
  .sn-mega-groupgrid { grid-template-columns: repeat(2, 1fr); }
  .sn-mega-inner-tabs { grid-template-columns: 190px 1fr 240px; gap: 28px; }
  .sn-mega-inner-groups { grid-template-columns: 1fr 260px; gap: 32px; }
}

/* ── Stopka kuratorska (G1-rev2): brand + 3 kolumny nawigacji + kontakt. ── */
.sn-footer-main {
  grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr;
  gap: 40px;
}
@media (max-width: 1100px) {
  .sn-footer-main { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .sn-footer-main { grid-template-columns: 1fr; gap: 28px; }
}

/* — Placeholder kafla feature — bez <img> (brak zdjęcia realizacji do G12). */
.sn-mega-feature-photo {
  background: linear-gradient(135deg, var(--ink-700, #2b2927), var(--ink-900, #151513));
}