/* =========================================================
   DETAIL TOPBAR — PAGE SHOW
   KANON BREAKPOINTÓW:
   MOBILE: hide/show (JS)
   TABLET: zawsze widoczny
   DESKTOP: podąża za menu
========================================================= */

body.page-show {
  --topbar-h: 68px;
}

/* TOPBAR — baza */
body.page-show .detail-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;

  height: var(--topbar-h);
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;

  display: flex;
  align-items: center;

  transform: translateY(0);
  transition: transform 0.22s ease;
  will-change: transform;
}

/* STAN: SCHOWANY (mobile) */
body.page-show .detail-topbar.is-hidden {
  transform: translateY(calc(var(--topbar-h) * -1));
}

/* LINK */
body.page-show .detail-topbar .topbar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  height: 100%;
  padding: 0 14px;

  font-weight: 500;
  color: #0f172a;
  text-decoration: none;
}

/* OFFSET TREŚCI */
body.page-show main.detail-layout {
  padding-top: var(--topbar-h);
  padding-bottom: 80px;
}

/* =========================================================
   TABLET (768–1023) — ZAWSZE WIDOCZNY
========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  body.page-show .detail-topbar {
    transform: translateY(0) !important;
  }
}



/* =========================================================
   DESKTOP (>=1024) — PODĄŻA ZA MENU
   Wymaga: .detail-topbar bezpośrednio po .menu
========================================================= */
/* =========================================================
   DESKTOP (>=1024) — MENU + TOPBAR (STABILNIE)
========================================================= */
/* =========================================================
   DESKTOP (>=1024) — TOPBAR STATYCZNY, W LAYOUCIE
   - nad zdjęciem
   - z paddingiem strony
   - NIE fixed
   - NIE full width
========================================================= */
@media (min-width: 1024px) {
  body.page-show .detail-topbar {
    position: static;
    transform: none !important;
    height: auto;
	padding-top: calc(var(--menu-h, 64px) + 20px);
    background: transparent;
    border-bottom: none;

    margin: 0 0 12px 0;
  }
  

  body.page-show .detail-topbar .topbar-back {
    color: #f8fafc;                 /* jasny tekst */
  }

body.page-show .detail-topbar .arrow-icon {
  color: #f8fafc;
}



/* OFFSET TREŚCI */
body.page-show main.detail-layout {
  padding-top: 0;
  padding-bottom: 80px;
}

    body.page-show .detail-topbar .topbar-back:hover {
    color: #e5e7eb;               /* delikatnie przygaszony */
  }
  
}