/* ============================================================
   EVENT MARKET — organizacja wydarzeń (event-market.pl)
   Brand CSS dla szablonu imsa-multi (Joomla 6)

   Ścieżka docelowa (pierwsza istniejąca wygrywa — patrz index.php):
     media/templates/site/imsa-multi/css/brands/{brandKey}/style.css

   ZAKRES: wszystkie reguły są pod .em-site (klasa na <body> nadawana
   w index.php), więc plik nie wpływa na inne marki multi-szablonu
   i nie zależy od nazwy katalogu marki.

   MOTYW: ciemna wersja pod [data-bs-theme="dark"] na <html> — jak
   w całym imsa-multi. Wszystkie kolory idą przez tokeny niżej; motyw
   ciemny podmienia tylko tokeny.

   PALETA
     --em-navy       #0B1B33  granat — hero, pas kontaktu, stopka akcentów
     --em-navy-deep  #07142A  granat głęboki — tło hero
     --em-gold       #E0B85C  złoto — przyciski, akcenty na granacie
     --em-gold-ink   #7D5F17  złoto ciemne — tekst akcentowy na jasnym tle
     --em-bg         #F8F6F1  tło strony (ciepła biel)

   KROJE: Montserrat (nagłówki, 600–900) + Figtree (tekst, 400–700).

   SPIS
     1. Tokeny            8. Korzyści (bento)
     2. Baza              9. Realizacje
     3. Przyciski        10. Kontakt / formularz
     4. Nawigacja        11. Stopka
     5. Hero             12. Podstrony + treść artykułu
                         13. Pływające przyciski, cookies, drobne
     7. Sekcje, karty    14. Animacje wejścia, ruch ograniczony
   ============================================================ */


/* ============================================================
   1. TOKENY
   ============================================================ */
.em-site {
  --em-bg:          #F8F6F1;
  --em-bg-head:     rgba(248, 246, 241, .9);
  --em-surface:     #FFFFFF;
  --em-ink:         #0F1A2C;
  --em-muted:       #4A5366;
  --em-line:        #E4DED2;
  --em-soft:        #F3EAD3;

  --em-gold:        #E0B85C;
  --em-gold-hi:     #EBCB7E;
  --em-gold-ink:    #7D5F17;
  --em-on-gold:     #0B1B33;

  --em-navy:        #0B1B33;
  --em-navy-deep:   #07142A;
  --em-navy-card:   #0F2247;
  --em-night-ink:   #F6F2E9;
  --em-night-muted: #B7C0D2;

  --em-ph:          #E9E5DC;
  --em-ph-line:     #DFDACF;

  --em-btn-bg:      #0B1B33;   /* przycisk główny na jasnym tle */
  --em-btn-ink:     #F6F2E9;
  --em-btn-bg-hi:   #172C56;

  --em-shadow:      0 24px 48px -28px rgba(11, 27, 51, .35);
  --em-radius:      22px;
  --em-radius-sm:   14px;

  --em-font-head:   'Montserrat', system-ui, sans-serif;
  --em-font-body:   'Figtree', system-ui, sans-serif;

  --em-header-h:    76px;      /* do scroll-margin kotwic */
}

[data-bs-theme="dark"] .em-site {
  --em-bg:          #08111F;
  --em-bg-head:     rgba(8, 17, 31, .9);
  --em-surface:     #101C30;
  --em-ink:         #F3EFE6;
  --em-muted:       #AAB4C6;
  --em-line:        #22304A;
  --em-soft:        #2A2516;

  --em-gold-ink:    #E8C877;

  --em-navy-card:   #13274F;

  --em-ph:          #13213A;
  --em-ph-line:     #182842;

  --em-btn-bg:      #E0B85C;
  --em-btn-ink:     #0B1B33;
  --em-btn-bg-hi:   #EBCB7E;

  --em-shadow:      0 24px 48px -28px rgba(0, 0, 0, .7);
}


/* ============================================================
   2. BAZA
   ============================================================ */
html { scroll-padding-top: var(--em-header-h); }

body.em-site {
  margin: 0;
  font-family: var(--em-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--em-ink);
  background-color: var(--em-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.em-site h1, .em-site h2, .em-site h3, .em-site h4 {
  font-family: var(--em-font-head);
  color: inherit;
}

.em-site a { color: var(--em-gold-ink); text-underline-offset: .2em; }
.em-site a:hover { color: var(--em-ink); }

.em-site :focus-visible {
  outline: 3px solid var(--em-gold);
  outline-offset: 3px;
}

.em-site .container {
  max-width: 1288px;
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 575.98px) {
  .em-site .container { padding-left: 16px; padding-right: 16px; }
}

.em-site main { display: block; }

/* Link „przejdź do treści” */
.em-site .em-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1090;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--em-navy);
  color: var(--em-night-ink);
  font-weight: 600;
}

/* Plansze zastępcze dla brakujących zdjęć */
.em-site .em-ph {
  background: repeating-linear-gradient(135deg, var(--em-ph) 0 14px, var(--em-ph-line) 14px 28px);
}
.em-site .em-ph-dark {
  background: repeating-linear-gradient(135deg, #12254A 0 14px, #172C56 14px 28px);
}

/* Nadtytuł sekcji */
.em-site .em-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--em-gold-ink);
}
.em-site .em-eyebrow--dot { letter-spacing: .16em; }
.em-site .em-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--em-gold);
  box-shadow: 0 0 0 6px rgba(224, 184, 92, .22);
}

.em-site .em-h2 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.125rem, 3.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.em-site .em-h2--xl {
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.em-site .em-h2 span { color: var(--em-gold-ink); }

.em-site .em-muted { color: var(--em-muted); margin: 0; }

.em-site .em-link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  color: var(--em-gold-ink);
}
.em-site .em-link-more .bi { transition: transform .2s ease; }
.em-site .em-link-more:hover { color: var(--em-ink); }
.em-site .em-link-more:hover .bi { transform: translateX(4px); }


/* ============================================================
   3. PRZYCISKI
   ============================================================ */
.em-site .em-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.em-site .em-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--em-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.em-site .em-btn:hover { transform: translateY(-1px); }
.em-site .em-btn--lg { min-height: 60px; padding: 0 32px; font-size: 1.125rem; }

.em-site .em-btn--gold { background: var(--em-gold); color: var(--em-on-gold); font-weight: 700; }
.em-site .em-btn--gold:hover { background: var(--em-gold-hi); color: var(--em-on-gold); }
.em-site .em-btn--gold .bi { transition: transform .2s ease; }
.em-site .em-btn--gold:hover .bi { transform: translateX(4px); }

.em-site .em-btn--ghost-light {
  border-color: rgba(246, 242, 233, .4);
  color: var(--em-night-ink);
  background: transparent;
}
.em-site .em-btn--ghost-light:hover {
  background: rgba(246, 242, 233, .08);
  border-color: rgba(246, 242, 233, .7);
  color: var(--em-night-ink);
}

.em-site .em-btn--tel { padding-left: 9px; padding-right: 28px; }
.em-site .em-btn-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(224, 184, 92, .18);
  color: var(--em-gold-hi);
  font-size: 1.05rem;
}

.em-site .em-btn--primary { background: var(--em-btn-bg); color: var(--em-btn-ink); padding: 0 28px; }
.em-site .em-btn--primary:hover { background: var(--em-btn-bg-hi); color: var(--em-btn-ink); }
.em-site .em-btn[disabled] { opacity: .65; cursor: progress; transform: none; }


/* ============================================================
   4. NAWIGACJA
   ============================================================ */
.em-site .em-header {
  background: var(--em-bg-head);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--em-line);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.em-site .im-navbar { padding: 12px 0; transition: padding .35s ease; }
.em-site .im-navbar .nav-link,
.em-site .im-lang a,
.em-site .navbar-toggler { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }

/* --- Po przewinięciu: granatowy pasek + logo-dark.png ----------
   Klasę .is-scrolled nadaje script.js (sekcja 1a).                */
.em-site .em-header.is-scrolled {
  background: rgba(11, 27, 51, .96);
  border-bottom-color: rgba(246, 242, 233, .08);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6);
}
.em-site .em-header.is-scrolled .im-navbar { padding: 8px 0; }

.em-site .em-header.is-scrolled .im-logo-jasny  { display: none; }
.em-site .em-header.is-scrolled .im-logo-ciemny { display: block; }
.em-site .em-header.is-scrolled .em-logo-word   { color: var(--em-night-ink); }
.em-site .em-header.is-scrolled .em-logo-tag    { color: var(--em-night-muted); }
.em-site .em-header.is-scrolled .em-logo-box    { fill: var(--em-gold); }
.em-site .em-header.is-scrolled .em-logo-beam   { fill: var(--em-navy); }
.em-site .em-header.is-scrolled .em-logo-stage  { fill: var(--em-gold-hi); }

.em-site .em-header.is-scrolled .im-navbar .nav-link { color: var(--em-night-ink); }
.em-site .em-header.is-scrolled .im-navbar .nav-link:hover,
.em-site .em-header.is-scrolled .im-navbar .nav-link:focus-visible {
  background: rgba(246, 242, 233, .08);
  color: var(--em-night-ink);
}
.em-site .em-header.is-scrolled .im-navbar .nav-item.current > .nav-link,
.em-site .em-header.is-scrolled .im-navbar .nav-item.active > .nav-link,
.em-site .em-header.is-scrolled .im-navbar .nav-link[aria-current="page"] {
  background: rgba(224, 184, 92, .14);
  color: var(--em-gold-hi);
}
.em-site .em-header.is-scrolled .im-navbar .em-nav-cta > .nav-link,
.em-site .em-header.is-scrolled .im-navbar .nav-link.em-nav-cta {
  border-color: rgba(246, 242, 233, .6);
  background: transparent;
  color: var(--em-night-ink);
}
.em-site .em-header.is-scrolled .im-navbar .em-nav-cta > .nav-link:hover,
.em-site .em-header.is-scrolled .im-navbar .nav-link.em-nav-cta:hover {
  border-color: var(--em-gold);
  background: var(--em-gold);
  color: var(--em-on-gold);
}

.em-site .em-header.is-scrolled .im-lang a {
  border-color: rgba(246, 242, 233, .25);
  background: transparent;
  color: var(--em-night-ink);
}
.em-site .em-header.is-scrolled .im-lang a:hover { border-color: var(--em-gold); }
.em-site .em-header.is-scrolled .im-lang li.lang-active a,
.em-site .em-header.is-scrolled .im-lang a.active,
.em-site .em-header.is-scrolled .im-lang a[aria-current] {
  border-color: var(--em-gold);
  background: var(--em-gold);
  color: var(--em-on-gold);
}

.em-site .em-header.is-scrolled .navbar-toggler { border-color: rgba(246, 242, 233, .25); }
.em-site .em-header.is-scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28246, 242, 233, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (prefers-reduced-motion: reduce) {
  .em-site .em-header,
  .em-site .im-navbar { transition: none; }
}

/* Logo */
.em-site .navbar-brand { padding: 0; margin-right: 24px; }
.em-site .im-navbar-logo { height: 52px; width: auto; display: block; }
.em-site .em-logo { display: inline-flex; align-items: center; gap: 12px; }
.em-site .em-logo-box   { fill: var(--em-navy); }
.em-site .em-logo-beam  { fill: var(--em-gold); opacity: .92; }
.em-site .em-logo-stage { fill: var(--em-bg); }
[data-bs-theme="dark"] .em-site .em-logo-box   { fill: var(--em-gold); }
[data-bs-theme="dark"] .em-site .em-logo-beam  { fill: var(--em-navy); }
[data-bs-theme="dark"] .em-site .em-logo-stage { fill: var(--em-gold-hi); }
.em-site .em-logo-text { display: flex; flex-direction: column; line-height: 1; }
.em-site .em-logo-word {
  font-family: var(--em-font-head);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -.02em;
  color: var(--em-ink);
}
.em-site .em-logo-tag {
  margin-top: 5px;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--em-muted);
}

/* Logo z pliku — wariant jasny/ciemny */
.em-site .im-logo-ciemny { display: none; }
[data-bs-theme="dark"] .em-site .im-logo-ciemny { display: block; }
[data-bs-theme="dark"] .em-site .im-logo-jasny { display: none; }

/* Menu (statyczne i mod_menu w układzie navbar) */
.em-site .im-navbar .navbar-nav { gap: 2px; margin: 0; padding: 0; align-items: center; }
.em-site .im-navbar .navbar-nav > .nav-item { margin: 0; }
.em-site .im-navbar .nav-link {
  padding: 11px 14px;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--em-ink);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.em-site .im-navbar .nav-link:hover,
.em-site .im-navbar .nav-link:focus-visible { background: var(--em-soft); color: var(--em-ink); }

.em-site .im-navbar .nav-item.current > .nav-link,
.em-site .im-navbar .nav-item.active > .nav-link,
.em-site .im-navbar .nav-link[aria-current="page"] {
  color: var(--em-gold-ink);
  background: var(--em-soft);
}

/* CTA „Kontakt” — statycznie li.em-nav-cta, w mod_menu „Klasa odnośnika” */
.em-site .im-navbar .em-nav-cta > .nav-link,
.em-site .im-navbar .nav-link.em-nav-cta {
  margin-left: 6px;
  padding: 10px 20px;
  border: 1px solid var(--em-ink);
  font-weight: 600;
  background: transparent;
  color: var(--em-ink);
}
.em-site .im-navbar .em-nav-cta > .nav-link:hover,
.em-site .im-navbar .nav-link.em-nav-cta:hover {
  background: var(--em-ink);
  color: var(--em-bg);
}

/* Podmenu */
.em-site .im-navbar .nav-item.dropdown > .dropdown-menu { display: none; }
.em-site .im-navbar .nav-item.dropdown > .dropdown-menu.show,
.em-site .im-navbar .nav-item.dropdown.im-open > .dropdown-menu { display: block; }
@media (min-width: 992px) {
  .em-site .im-navbar .nav-item.dropdown:hover > .dropdown-menu,
  .em-site .im-navbar .nav-item.dropdown:focus-within > .dropdown-menu { display: block; }
}
.em-site .im-navbar .dropdown-menu {
  padding: 6px;
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius-sm);
  background: var(--em-surface);
  box-shadow: var(--em-shadow);
}
.em-site .im-navbar .dropdown-item {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--em-ink);
}
.em-site .im-navbar .dropdown-item:hover,
.em-site .im-navbar .dropdown-item:focus { background: var(--em-soft); color: var(--em-gold-ink); }

/* Przełącznik języka — okrągłe plakietki (fallback i mod_languages) */
.em-site .im-lang ul,
.em-site .im-lang .lang-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.em-site .im-lang li { margin: 0; }
.em-site .im-lang a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--em-line);
  border-radius: 50%;
  background: var(--em-surface);
  color: var(--em-ink);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s ease, border-color .2s ease;
}
.em-site .im-lang a:hover { border-color: var(--em-gold); color: var(--em-ink); }
.em-site .im-lang li.lang-active a,
.em-site .im-lang a.active,
.em-site .im-lang a[aria-current] {
  background: var(--em-gold);
  border-color: var(--em-gold);
  color: var(--em-on-gold);
}
.em-site .im-lang a img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* Hamburger */
.em-site .navbar-toggler {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--em-line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.em-site .navbar-toggler:focus { box-shadow: none; }
.em-site .navbar-toggler-icon { width: 1.3em; height: 1.3em; }

/* Mobile */
@media (max-width: 991.98px) {
  .em-site .im-navbar .navbar-collapse { margin-top: 12px; padding-bottom: 8px; }
  .em-site .im-navbar .navbar-nav { align-items: stretch; gap: 2px; }
  .em-site .im-navbar .nav-link { padding: 12px 16px; border-radius: 12px; }
  .em-site .im-navbar .em-nav-cta > .nav-link,
  .em-site .im-navbar .nav-link.em-nav-cta {
    margin: 8px 0 0;
    text-align: center;
    border-radius: 999px;
  }
  .em-site .im-navbar .dropdown-menu { margin: 0 0 6px; box-shadow: none; }
  .em-site .im-nav-mobile-tools .im-lang a { width: 40px; height: 40px; }
}
@media (max-width: 575.98px) {
  .em-site .im-navbar-logo { height: 36px; }
  .em-site .em-logo-sigil { width: 38px; height: 38px; }
  .em-site .em-logo-word { font-size: 1.2rem; }
  .em-site .em-logo-tag { font-size: .5625rem; letter-spacing: .12em; }
  .em-site .navbar-brand { margin-right: 8px; }
}


/* ============================================================
   5. HERO — hasło po lewej, „Ostatnia realizacja” i „25+” po prawej
   ============================================================ */
.em-site .em-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 72px;
  background: var(--em-navy-deep);
  color: var(--em-night-ink);
}
.em-site .em-hero-glow {
  position: absolute;
  left: -160px;
  top: -200px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224, 184, 92, .22), rgba(224, 184, 92, 0));
  pointer-events: none;
}
.em-site .em-hero .container { position: relative; }

.em-site .em-mozaika {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(240px, auto));
  gap: 16px;
}
.em-site .em-mz-intro { grid-column: 1; grid-row: 1 / 3; }
.em-site .em-mz-real  { grid-column: 2; grid-row: 1; }
.em-site .em-mz-stat  { grid-column: 2; grid-row: 2; }

/* Płynne wejście po wczytaniu (kolejno) */
.em-js .em-site .em-mozaika > * { animation: em-mz-in .8s cubic-bezier(.2, .7, .2, 1) both; }
.em-js .em-site .em-mozaika > :nth-child(2) { animation-delay: .1s; }
.em-js .em-site .em-mozaika > :nth-child(3) { animation-delay: .2s; }
@keyframes em-mz-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Lewa kolumna — hasło */
.em-site .em-mz-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 20px 48px 20px 4px;
}
.em-site .em-hero .em-eyebrow { margin: 0; color: var(--em-gold-hi); }
.em-site .em-hero-title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(3rem, 6.4vw, 6.25rem);
  line-height: .92;
  letter-spacing: -.045em;
  color: var(--em-night-ink);
}
.em-site .em-hero-title span { color: var(--em-gold); }
.em-site .em-hero-lead {
  margin: 0;
  max-width: 560px;
  font-size: 1.1875rem;
  color: #C9CCD8;
}

/* Kafel „Ostatnia realizacja” (złoty).
   Kontener na 1–n pozycji ułożonych w tej samej komórce siatki —
   aktywna jest widoczna, reszta przenika się przy zmianie. */
.em-site .em-mz-real {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--em-radius);
  background: var(--em-gold);
  color: var(--em-on-gold);
  transition: background-color .25s ease, transform .25s ease;
}
.em-site .em-mz-real:hover { background: var(--em-gold-hi); transform: translateY(-2px); }

.em-site .em-mz-real-item {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 24px;
  color: var(--em-on-gold);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.em-site .em-mz-real-item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .6s ease .1s, transform .6s ease .1s, visibility 0s;
}
.em-site .em-mz-real-item:hover,
.em-site .em-mz-real-item:focus { color: var(--em-on-gold); }
.em-site .em-mz-real-item:focus-visible { outline-offset: -6px; outline-color: var(--em-on-gold); border-radius: var(--em-radius); }
.em-site .em-mz-real[data-em-rotate] .em-mz-real-item { padding-bottom: 34px; }

/* Pasek postępu = przełącznik realizacji (2+ pozycje) */
.em-site .em-mz-real-dots {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  z-index: 1;
  display: flex;
  gap: 6px;
}
.em-site .em-mz-real-dot {
  position: relative;
  flex: 1;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.em-site .em-mz-real-dot::before,
.em-site .em-mz-real-dot::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
}
.em-site .em-mz-real-dot::before { right: 0; background: rgba(11, 27, 51, .22); }
.em-site .em-mz-real-dot::after  { width: 0; background: var(--em-on-gold); }
.em-site .em-mz-real-dot.is-active::after { width: 100%; }
.em-site .em-mz-real.is-running .em-mz-real-dot.is-active::after {
  width: 0;
  animation: em-real-fill var(--em-delay, 6s) linear forwards;
}
.em-site .em-mz-real.is-running:hover .em-mz-real-dot::after,
.em-site .em-mz-real.is-running:focus-within .em-mz-real-dot::after { animation-play-state: paused; }
@keyframes em-real-fill {
  from { width: 0; }
  to   { width: 100%; }
}
.em-site .em-mz-real-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.em-site .em-mz-real-title {
  font-family: var(--em-font-head);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.em-site .em-mz-real-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  font-weight: 500;
}
.em-site .em-mz-real-meta .bi { flex-shrink: 0; transition: transform .2s ease; }
.em-site .em-mz-real-item:hover .em-mz-real-meta .bi { transform: translateX(4px); }

/* Kafel „25+” */
.em-site .em-mz-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 28px;
  border-radius: var(--em-radius);
  background: var(--em-navy-card);
  border: 1px solid rgba(246, 242, 233, .12);
}
.em-site .em-mz-stat-num {
  font-family: var(--em-font-head);
  font-weight: 900;
  font-size: 6.5rem;
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--em-gold);
}
.em-site .em-mz-stat-txt { display: flex; flex-direction: column; gap: 2px; }
.em-site .em-mz-stat-txt strong { font-size: 1.25rem; }
.em-site .em-mz-stat-txt span { font-size: .9375rem; color: var(--em-night-muted); }

/* Tablet */
@media (max-width: 1199.98px) {
  .em-site .em-mozaika { grid-template-rows: repeat(2, minmax(220px, auto)); }
  .em-site .em-mz-stat-num { font-size: 5rem; }
}
@media (max-width: 991.98px) {
  .em-site .em-hero { padding: 32px 0 48px; }
  .em-site .em-mozaika {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(210px, auto);
  }
  .em-site .em-mozaika > * { grid-column: auto; grid-row: auto; }
  .em-site .em-mz-intro { grid-column: 1 / -1; padding: 16px 0 16px; gap: 24px; }
}
/* Telefon — realizacja i 25+ jedno pod drugim */
@media (max-width: 575.98px) {
  .em-site .em-mozaika { grid-auto-rows: auto; gap: 12px; }
  .em-site .em-mz-real,
  .em-site .em-mz-stat { grid-column: 1 / -1; }
  .em-site .em-mz-stat { flex-direction: row; align-items: flex-end; gap: 16px; }
  .em-site .em-mz-stat-num { font-size: 3.75rem; }
  .em-site .em-mz-real-title { font-size: 1.1875rem; }
  .em-site .em-hero-lead { font-size: 1.0625rem; }
  .em-site .em-hero .em-btn--lg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .em-js .em-site .em-mozaika > * { animation: none; }
  .em-site .em-mz-real-item,
  .em-site .em-mz-real-item.is-active { transition: none; transform: none; }
}


/* ============================================================
   7. SEKCJE, KARTY „CO ROBIMY”, „DLA KOGO”
   ============================================================ */
.em-site .em-section { padding: 104px 0 96px; scroll-margin-top: var(--em-header-h); }
.em-site .em-section--surface {
  background: var(--em-surface);
  border-top: 1px solid var(--em-line);
  border-bottom: 1px solid var(--em-line);
}
.em-site .em-section--tight-top { padding-top: 24px; }
@media (max-width: 767.98px) {
  .em-site .em-section { padding: 64px 0; }
  .em-site .em-section--tight-top { padding-top: 8px; }
}

.em-site .em-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 44px;
}
.em-site .em-sec-head > div { max-width: 680px; }
@media (max-width: 767.98px) { .em-site .em-sec-head { margin-bottom: 28px; } }

/* Karty usług */
.em-site .em-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}
.em-site .em-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--em-line);
  border-radius: 20px;
  background: var(--em-surface);
  transition: transform .25s ease, box-shadow .25s ease;
}
.em-site .em-card:hover { transform: translateY(-4px); box-shadow: var(--em-shadow); }
.em-site .em-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--em-ph);
}
.em-site .em-card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}
.em-site .em-card-nr {
  font-family: var(--em-font-head);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--em-gold-ink);
}
.em-site .em-card-title {
  margin: 0;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.em-site .em-card-txt {
  margin: 0;
  font-size: .9375rem;
  color: var(--em-muted);
  display: -webkit-box;          /* lead: maks. 4 linijki */
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.em-site .em-card-link { margin-top: auto; }   /* „Zobacz” zawsze na dole karty */
.em-site .em-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.em-site .em-card-link .bi { transition: transform .2s ease; }
.em-site .em-card-link:hover .bi { transform: translateX(4px); }

/* Dla kogo */
.em-site .em-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 40px 56px;
}
.em-site .em-split-body { display: flex; flex-direction: column; gap: 24px; }
.em-site .em-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--em-line);
}
.em-site .em-checklist li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--em-line);
  font-weight: 500;
}
.em-site .em-check {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--em-soft);
  color: var(--em-gold-ink);
}


/* --- Jak pracujemy — granatowy pas z czterema zasadami --------- */
.em-site .em-zasady {
  position: relative;
  overflow: hidden;
  background: var(--em-navy);
  color: var(--em-night-ink);
}
.em-site .em-zasady-glow {
  position: absolute;
  right: -220px;
  top: -260px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224, 184, 92, .16), rgba(224, 184, 92, 0));
  pointer-events: none;
}
.em-site .em-zasady .container { position: relative; }
.em-site .em-zasady .em-eyebrow { color: var(--em-gold-hi); }
.em-site .em-zasady .em-h2 span { color: var(--em-gold); }

.em-site .em-zasady-lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(246, 242, 233, .16);
}
.em-site .em-zasada {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 32px 8px 0;
}
.em-site .em-zasada::before {           /* złota kreska nad aktywną kolumną */
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--em-gold);
  transition: width .4s ease;
}
.em-site .em-zasada:hover::before { width: calc(100% - 32px); }
.em-site .em-zasada + .em-zasada { padding-left: 32px; border-left: 1px solid rgba(246, 242, 233, .1); }
.em-site .em-zasada + .em-zasada::before { left: 32px; }
.em-site .em-zasada + .em-zasada:hover::before { width: calc(100% - 64px); }

.em-site .em-zasada-nr {
  font-family: var(--em-font-head);
  font-weight: 900;
  font-size: 4.5rem;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--em-gold);
}
.em-site .em-zasada h3 {
  margin: 8px 0 0;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.em-site .em-zasada p { margin: 0; font-size: .9875rem; color: var(--em-night-muted); }

@media (max-width: 991.98px) {
  .em-site .em-zasady-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-site .em-zasada:nth-child(3) { padding-left: 0; border-left: 0; }
  .em-site .em-zasada:nth-child(3)::before { left: 0; }
  .em-site .em-zasada:nth-child(n+3) { border-top: 1px solid rgba(246, 242, 233, .16); margin-top: 24px; }
}
@media (max-width: 575.98px) {
  .em-site .em-zasady-lista { grid-template-columns: minmax(0, 1fr); }
  .em-site .em-zasada,
  .em-site .em-zasada + .em-zasada { padding: 28px 0 4px; border-left: 0; }
  .em-site .em-zasada + .em-zasada { border-top: 1px solid rgba(246, 242, 233, .16); margin-top: 20px; }
  .em-site .em-zasada + .em-zasada::before { left: 0; }
  .em-site .em-zasada-nr { font-size: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .em-site .em-zasada::before { transition: none; }
}


/* ============================================================
   8. KORZYŚCI — BENTO
   ============================================================ */
.em-site .em-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
}
.em-site .em-bento-big {
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 440px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  border-radius: 24px;
  background: var(--em-navy);
  color: var(--em-night-ink);
}
.em-site .em-bento-beam {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(224, 184, 92, .35), rgba(224, 184, 92, 0));
  clip-path: polygon(72% 0, 80% 0, 100% 100%, 42% 100%);
}
.em-site .em-bento-since {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--em-gold-hi);
}
.em-site .em-bento-big-body { display: flex; flex-direction: column; gap: 6px; }
.em-site .em-bento-num {
  font-family: var(--em-font-head);
  font-weight: 900;
  font-size: clamp(6.25rem, 11vw, 10.5rem);
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--em-gold);
}
.em-site .em-bento-big-title {
  font-family: var(--em-font-head);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.15;
}
.em-site .em-bento-big p { max-width: 320px; margin: 8px 0 0; color: var(--em-night-muted); }

.em-site .em-benefit {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--em-line);
  border-radius: 24px;
  background: var(--em-surface);
}
.em-site .em-benefit-ico {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--em-soft);
  color: var(--em-gold-ink);
  font-size: 1.4rem;
}
.em-site .em-benefit h3 { margin: 0; font-weight: 800; font-size: 1.375rem; line-height: 1.2; }
.em-site .em-benefit p { margin: 0; font-size: .9375rem; color: var(--em-muted); }
@media (max-width: 767.98px) {
  .em-site .em-bento-big { grid-row: auto; min-height: 340px; padding: 28px; }
}


/* ============================================================
   9. REALIZACJE
   ============================================================ */
.em-site .em-real-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.em-site .em-real-hero {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--em-radius);
  background: var(--em-navy);
  color: var(--em-night-ink);
}
.em-site .em-real-grid--solo .em-real-hero { grid-column: 1 / -1; }
.em-site .em-real-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.em-site .em-real-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 20, 42, .15) 20%, rgba(7, 20, 42, .9) 100%);
}
.em-site .em-real-hero-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px;
}
.em-site .em-real-hero h3 {
  max-width: 680px;
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.625rem, 2.6vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.em-site .em-real-hero p { max-width: 560px; margin: 0; color: var(--em-night-muted); }
.em-site .em-real-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  color: var(--em-night-ink);
}
.em-site .em-real-hero-link:hover { color: var(--em-gold-hi); }
.em-site .em-real-hero-link::before { content: ''; position: absolute; inset: 0; } /* cała karta klikalna */

.em-site .em-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.em-site .em-chip {
  padding: 5px 14px;
  border: 1px solid rgba(246, 242, 233, .4);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
}
.em-site .em-chip--gold {
  border-color: var(--em-gold);
  background: var(--em-gold);
  color: var(--em-on-gold);
  font-weight: 600;
}

.em-site .em-real-side { display: flex; flex-direction: column; gap: 20px; }
.em-site .em-real-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  background: var(--em-surface);
  color: var(--em-ink);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.em-site .em-real-card:hover { color: var(--em-ink); transform: translateY(-3px); box-shadow: var(--em-shadow); }
.em-site .em-real-card-img { display: block; width: 100%; height: 140px; object-fit: cover; }
.em-site .em-real-card-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.em-site .em-real-card-meta { font-size: .8125rem; font-weight: 600; color: var(--em-gold-ink); }
.em-site .em-real-card strong {
  font-family: var(--em-font-head);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
}

@media (max-width: 991.98px) {
  .em-site .em-real-grid { grid-template-columns: minmax(0, 1fr); }
  .em-site .em-real-hero { grid-column: auto; min-height: 400px; }
  .em-site .em-real-side { flex-direction: row; flex-wrap: wrap; }
  .em-site .em-real-card { flex: 1 1 260px; }
}
@media (max-width: 575.98px) {
  .em-site .em-real-hero-body { padding: 24px; }
}


/* ============================================================
   10. KONTAKT — FORMULARZ
   ============================================================ */
/* Tekst na górze, formularz pod nim na całą szerokość */
.em-site .em-kontakt {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.em-site .em-kontakt-intro { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.em-site .em-kontakt-intro .em-eyebrow { margin: 0; }

.em-site .em-form-card {
  width: 100%;
  padding: 40px;
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  background: var(--em-bg);
}
@media (max-width: 767.98px) { .em-site .em-form-card { padding: 28px; } }
@media (max-width: 575.98px) { .em-site .em-form-card { padding: 22px; } }

/* Szeroki formularz: imię, firma, e-mail, telefon w jednym rzędzie
   (4 kolumny), temat na pół szerokości, wiadomość na całą. */
@media (min-width: 992px) {
  .em-site .em-kontakt .em-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .em-site .em-kontakt .em-field:has(#em-temat) { max-width: calc(50% - 8px); }
}

.em-site .em-form { display: flex; flex-direction: column; gap: 18px; }
.em-site .em-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.em-site .em-field { display: flex; flex-direction: column; gap: 6px; }
.em-site .em-field label { font-size: .875rem; font-weight: 600; }

.em-site .em-form input[type="text"],
.em-site .em-form input[type="email"],
.em-site .em-form input[type="tel"],
.em-site .em-form select,
.em-site .em-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--em-line);
  border-radius: 12px;
  background: var(--em-surface);
  color: var(--em-ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.em-site .em-form textarea { min-height: 120px; resize: vertical; }
.em-site .em-form select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237D5F17' stroke-width='2' stroke-linecap='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.em-site .em-form input:focus,
.em-site .em-form select:focus,
.em-site .em-form textarea:focus {
  outline: none;
  border-color: var(--em-gold);
  box-shadow: 0 0 0 3px rgba(224, 184, 92, .3);
}
.em-site .em-form .is-invalid { border-color: #C62828 !important; }
[data-bs-theme="dark"] .em-site .em-form .is-invalid { border-color: #FF8A80 !important; }

.em-site .em-field-error {
  display: block;
  min-height: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: #B3261E;
}
.em-site .em-field-error:empty { display: none; }
[data-bs-theme="dark"] .em-site .em-field-error { color: #FF8A80; }

.em-site .em-checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--em-muted);
  cursor: pointer;
}
.em-site .em-checkbox input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--em-navy);
}
[data-bs-theme="dark"] .em-site .em-checkbox input { accent-color: var(--em-gold); }

.em-site .em-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.em-site .em-form-note { font-size: .8125rem; color: var(--em-muted); }

.em-site .em-form-status {
  padding: 12px 16px;
  border-left: 3px solid var(--em-gold);
  border-radius: 8px;
  background: var(--em-soft);
  font-size: .9rem;
  line-height: 1.5;
}
.em-site .em-form-status.is-error {
  border-left-color: #C62828;
  background: rgba(198, 40, 40, .08);
  color: #7F1D1D;
}
[data-bs-theme="dark"] .em-site .em-form-status.is-error { color: #FFCDD2; background: rgba(255, 138, 128, .1); }

.em-site .em-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.em-site .em-form-ok { padding: 40px 8px; text-align: center; outline: none; }
.em-site .em-form-ok h3 { margin: 0 0 10px; font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.em-site .em-form-ok p { margin: 0; color: var(--em-muted); }
.em-site .em-form-ok-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--em-gold);
  color: var(--em-on-gold);
  font-size: 2rem;
}


/* ============================================================
   11. STOPKA
   ============================================================ */
.em-site .em-cta {
  padding: 36px 0;
  background: var(--em-navy);
  color: var(--em-night-ink);
}
.em-site .em-cta .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
.em-site .em-cta-txt { margin: 0; font-size: 1.25rem; }
.em-site .em-cta-txt a { color: var(--em-night-ink); text-underline-offset: 6px; text-decoration-color: rgba(246, 242, 233, .5); }
.em-site .em-cta-txt a:hover { color: var(--em-gold-hi); text-decoration-color: var(--em-gold-hi); }
.em-site .em-cta-tels { display: flex; flex-wrap: wrap; gap: 12px; }
.em-site .em-cta-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(246, 242, 233, .45);
  border-radius: 999px;
  color: var(--em-night-ink);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.em-site .em-cta-tel:hover { border-color: var(--em-gold); background: rgba(224, 184, 92, .1); color: var(--em-night-ink); }
.em-site .em-cta-tel .bi { color: var(--em-gold-hi); }

.em-site .em-footer .im-footer-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--em-muted);
}

/* Udostępnij */
.em-site .em-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--em-line);
}
.em-site .em-share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.em-site .im-share-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--em-line);
  border-radius: 50%;
  background: var(--em-surface);
  color: var(--em-ink);
  font-size: 1.1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.em-site .im-share-btn:hover,
.em-site .im-share-btn:focus-visible {
  transform: translateY(-2px);
  background: var(--em-gold);
  border-color: var(--em-gold);
  color: var(--em-on-gold);
}
.em-site .im-share-native { display: none; }
.em-site .im-share-supported .im-share-native { display: inline-flex; }
@media (max-width: 767.98px) {
  .em-site .im-share-supported .im-share-social { display: none; }
}
.em-site .em-share-copied { font-size: .875rem; font-weight: 600; color: var(--em-gold-ink); }

/* Belka */
.em-site .em-belka {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 0 40px;
}
.em-site .em-belka-left { display: flex; flex-direction: column; gap: 6px; }
.em-site .em-copy { margin: 0; }
.em-site .em-legal { margin: 0; font-size: .9375rem; color: var(--em-muted); }
.em-site .em-legal a { color: var(--em-muted); text-decoration: none; }
.em-site .em-legal a:hover { color: var(--em-ink); text-decoration: underline; }
.em-site .em-sep { margin: 0 .4rem; }
.em-site .em-belka-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-right: 72px;       /* miejsce na pływające przyciski */
}
.em-site .em-im-logo { max-height: 40px; width: auto; opacity: .9; transition: opacity .2s ease; }
.em-site .em-belka-right a:hover .em-im-logo { opacity: 1; }
@media (max-width: 767.98px) {
  .em-site .em-belka { flex-direction: column; align-items: flex-start; padding-bottom: 96px; }
  .em-site .em-belka-right { align-items: flex-start; margin-right: 0; }
}


/* ============================================================
   12. PODSTRONY + TREŚĆ ARTYKUŁU
   ============================================================ */
.em-site .em-page-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: var(--em-navy-deep);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--em-night-ink);
}
.em-site .em-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 600px at 0 0, rgba(224, 184, 92, .2), rgba(224, 184, 92, 0)),
    linear-gradient(180deg, rgba(7, 20, 42, .74) 0%, rgba(7, 20, 42, .9) 100%);
}
.em-site .em-page-hero > .container { position: relative; z-index: 1; }
.em-site .em-page-hero .em-eyebrow { color: var(--em-gold-hi); }
.em-site .em-page-hero h1 {
  max-width: 18ch;
  margin: 0 0 16px;
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--em-night-ink);
}
.em-site .em-page-lead { max-width: 62ch; margin: 0; font-size: 1.125rem; color: #C9CCD8; }
@media (max-width: 767.98px) {
  .em-site .em-page-hero { padding: 60px 0; }
  .em-site .em-page-lead { font-size: 1rem; }
}

.em-site .em-tresc { padding: 64px 0 96px; }

.em-site .breadcrumb { margin: 0; padding: 0; background: transparent; font-size: .875rem; }
.em-site .breadcrumb a { color: var(--em-muted); text-decoration: none; }
.em-site .breadcrumb a:hover { color: var(--em-gold-ink); }
.em-site .breadcrumb-item.active { color: var(--em-gold-ink); font-weight: 600; }

/* Treść z edytora (com_content) */
.em-site .em-tresc .item-page,
.em-site .em-tresc .article-body { max-width: 820px; font-size: 1.0625rem; line-height: 1.75; }
.em-site .em-tresc h2 {
  margin: 2.4rem 0 1rem;
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -.02em;
}
.em-site .em-tresc h3 {
  margin: 2rem 0 .75rem;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.015em;
}
.em-site .em-tresc p { margin-bottom: 1.15rem; }
.em-site .em-tresc a { font-weight: 600; }
.em-site .em-tresc ul,
.em-site .em-tresc ol { margin-bottom: 1.15rem; padding-left: 1.35rem; }
.em-site .em-tresc li { margin-bottom: .4rem; }
.em-site .em-tresc img { max-width: 100%; height: auto; border-radius: var(--em-radius-sm); }
.em-site .em-tresc table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; font-size: .95rem; }
.em-site .em-tresc table th {
  padding: 12px 14px;
  background: var(--em-navy);
  color: var(--em-night-ink);
  font-family: var(--em-font-head);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
}
.em-site .em-tresc table td { padding: 11px 14px; border-bottom: 1px solid var(--em-line); }
.em-site .em-tresc blockquote {
  margin: 2rem 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--em-gold);
  font-family: var(--em-font-head);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.45;
}

/* --- Stary układ artykułu (kategorie spoza 111–114) ------------
   html/com_content/article/eventmarket.php, wariant B.          */
.em-site .em-tresc .issue-header { max-width: 820px; }
.em-site .em-tresc .issue-header-title {
  margin: 0 0 16px;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.em-site .em-tresc .issue-header-lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--em-muted);
}
.em-site .em-tresc .issue-header-lead p:last-child { margin-bottom: 0; }
.em-site .em-tresc .issue-header-divider {
  width: 64px;
  height: 3px;
  margin: 28px 0 0;
  border: 0;
  background: var(--em-gold);
  opacity: 1;
}

.em-site .em-tresc .page-header {
  position: relative;
  overflow: hidden;
  margin: 0 0 40px;
  padding: 56px 48px;
  border-radius: var(--em-radius);
  background:
    radial-gradient(520px 520px at 0 0, rgba(224, 184, 92, .18), rgba(224, 184, 92, 0)),
    var(--em-navy);
  color: var(--em-night-ink);
}
.em-site .em-tresc .page-header h1 {
  max-width: 22ch;
  margin: 0 0 14px;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--em-night-ink);
}
.em-site .em-tresc .page-header-lead { max-width: 62ch; font-size: 1.125rem; color: #C9CCD8; }
.em-site .em-tresc .page-header-lead p:last-child { margin-bottom: 0; }
.em-site .em-tresc .page-header-lead a { color: var(--em-gold-hi); }
@media (max-width: 767.98px) {
  .em-site .em-tresc .page-header { padding: 36px 24px; }
}

/* ============================================================
   OŚ CZASU REALIZACJI — html/com_content/category/em-timeline.php
   Pionowa linia po lewej, lata jako znaczniki, imprezy jako karty
   (zdjęcie | treść). Na telefonie zdjęcie nad treścią.
   ============================================================ */
.em-site .em-tl { --tl-x: 22px; max-width: 1100px; }
.em-site .em-tl-intro { max-width: 760px; margin-bottom: 32px; font-size: 1.0625rem; color: var(--em-muted); }
.em-site .em-tl-pusto { color: var(--em-muted); }

/* Skróty do lat */
.em-site .em-tl-lata {
  position: sticky;
  top: calc(var(--em-header-h) - 4px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 40px;
  padding: 12px 0;
  background: var(--em-bg);
}
.em-site .em-tl-rok-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--em-line);
  border-radius: 999px;
  background: var(--em-surface);
  color: var(--em-ink);
  font-family: var(--em-font-head);
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.em-site .em-tl-rok-link span {
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--em-soft);
  color: var(--em-gold-ink);
  font-family: var(--em-font-body);
  font-size: .8125rem;
  text-align: center;
}
.em-site .em-tl-rok-link:hover { border-color: var(--em-gold); color: var(--em-ink); }

/* Rok */
.em-site .em-tl-rok { position: relative; scroll-margin-top: calc(var(--em-header-h) + 80px); }
.em-site .em-tl-rok + .em-tl-rok { margin-top: 24px; }
.em-site .em-tl-rok-h {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 8px;
  padding-left: calc(var(--tl-x) * 2 + 8px);
}
.em-site .em-tl-rok-h::before {             /* duży punkt roku na linii */
  content: '';
  position: absolute;
  left: calc(var(--tl-x) - 11px);
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--em-gold);
  box-shadow: 0 0 0 6px rgba(224, 184, 92, .2);
}
.em-site .em-tl-rok-num {
  font-family: var(--em-font-head);
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--em-ink);
}
.em-site .em-tl-rok-ile { font-size: .875rem; font-weight: 600; color: var(--em-muted); }

/* Lista z linią */
.em-site .em-tl-lista {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 16px 0 8px;
  list-style: none;
}
.em-site .em-tl-lista::before {
  content: '';
  position: absolute;
  left: calc(var(--tl-x) - 1px);
  top: -8px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--em-gold), var(--em-line) 40%);
}
.em-site .em-tl-item {
  position: relative;
  padding-left: calc(var(--tl-x) * 2 + 8px);
}
.em-site .em-tl-dot {
  position: absolute;
  left: calc(var(--tl-x) - 7px);
  top: 32px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--em-bg);
  border-radius: 50%;
  background: var(--em-navy);
  box-shadow: 0 0 0 2px var(--em-gold);
}
[data-bs-theme="dark"] .em-site .em-tl-dot { background: var(--em-gold); }

/* Karta */
.em-site .em-tl-card {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  background: var(--em-surface);
  transition: transform .25s ease, box-shadow .25s ease;
}
.em-site .em-tl-card:hover { transform: translateY(-3px); box-shadow: var(--em-shadow); }

.em-site .em-tl-media {
  position: relative;
  display: block;
  min-height: 220px;
  overflow: hidden;
  background: var(--em-navy);
}
.em-site .em-tl-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.em-site .em-tl-card:hover .em-tl-media img { transform: scale(1.05); }
.em-site .em-tl-media--logo { background: #FFFFFF; }
.em-site .em-tl-media--logo img { object-fit: contain; padding: 28px; }
.em-site .em-tl-ph {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, #12254A 0 14px, #172C56 14px 28px);
}
.em-site .em-tl-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 27, 51, .78);
  color: #FFFFFF;
  font-size: 1.75rem;
}

.em-site .em-tl-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 28px;
}
.em-site .em-tl-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.em-site .em-tl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--em-line);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--em-muted);
}
.em-site .em-tl-chip--gold { border-color: transparent; background: var(--em-soft); color: var(--em-gold-ink); }

.em-site .em-tl-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.015em;
}
.em-site .em-tl-title a { color: var(--em-ink); text-decoration: none; }
.em-site .em-tl-title a:hover { color: var(--em-gold-ink); }
.em-site .em-tl-opis {
  margin: 0;
  font-size: .9375rem;
  color: var(--em-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.em-site .em-tl-akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: auto;
  padding-top: 4px;
}
.em-site .em-tl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--em-line);
  border-radius: 999px;
  color: var(--em-ink);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.em-site .em-tl-btn:hover { border-color: var(--em-gold); color: var(--em-ink); }
.em-site .em-tl-btn--main { border-color: var(--em-btn-bg); background: var(--em-btn-bg); color: var(--em-btn-ink); }
.em-site .em-tl-btn--main:hover { background: var(--em-btn-bg-hi); border-color: var(--em-btn-bg-hi); color: var(--em-btn-ink); }
.em-site .em-tl-btn .bi-youtube { color: #E53935; }
.em-site .em-tl-logo { max-height: 40px; max-width: 150px; width: auto; margin-left: auto; object-fit: contain; }
[data-bs-theme="dark"] .em-site .em-tl-logo { background: #FFFFFF; padding: 4px 8px; border-radius: 8px; }

.em-site .em-tl-pagination { margin-top: 32px; padding-left: calc(var(--tl-x) * 2 + 8px); }

/* Tablet / telefon */
@media (max-width: 767.98px) {
  .em-site .em-tl { --tl-x: 12px; }
  .em-site .em-tl-card { grid-template-columns: minmax(0, 1fr); }
  .em-site .em-tl-media { min-height: 0; aspect-ratio: 16 / 9; }
  .em-site .em-tl-body { padding: 20px; }
  .em-site .em-tl-dot { top: 20px; }
  .em-site .em-tl-logo { margin-left: 0; }
  .em-site .em-tl-lata { overflow-x: auto; flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .em-site .em-tl-card,
  .em-site .em-tl-media img { transition: none; }
}

/* Komunikaty systemowe Joomla */
.em-site .system-message-container { margin: 1rem auto; max-width: 1288px; padding: 0 24px; }


/* ============================================================
   13. PŁYWAJĄCE PRZYCISKI, COOKIES, DROBNE
   ============================================================ */
.em-site .bd-mode-toggle { z-index: 1030; }
.em-site .bd-mode-toggle .btn {
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--em-line);
  background: var(--em-surface);
  color: var(--em-ink);
  font-size: 1.1rem;
  box-shadow: 0 8px 20px -10px rgba(11, 27, 51, .45);
  transition: transform .2s ease, background-color .2s ease, color .2s ease, opacity .25s ease, visibility .25s ease;
}
.em-site .bd-mode-toggle .btn:hover { transform: translateY(-2px); border-color: var(--em-gold); }
.em-site .bd-mode-toggle #backToTop {
  background: var(--em-gold);
  border-color: var(--em-gold);
  color: var(--em-on-gold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}
.em-site .bd-mode-toggle #backToTop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.em-site .bd-mode-toggle #backToTop:hover { background: var(--em-gold-hi); }

.em-site .im-theme-toggle .theme-icon-light { display: none; }
[data-bs-theme="dark"] .em-site .im-theme-toggle .theme-icon-dark { display: none; }
[data-bs-theme="dark"] .em-site .im-theme-toggle .theme-icon-light { display: inline-block; }

/* Banner cookies z _shared/cookies — dociągnięcie do palety marki */
.em-site .cookies {
  border-radius: var(--em-radius-sm);
  background: var(--em-navy);
  color: var(--em-night-ink);
}
.em-site .cookies p { color: var(--em-night-muted); }
.em-site .cookies p strong { color: var(--em-night-ink); }
.em-site .cookies a { color: var(--em-gold-hi); }

.grecaptcha-badge { bottom: 140px !important; }


/* ============================================================
   14. ANIMACJE WEJŚCIA + OGRANICZONY RUCH
   Klasa em-js na <html> (ustawia ją index.php) — bez JS treść jest
   widoczna od razu.
   ============================================================ */
.em-js .em-site .em-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.em-js .em-site .em-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .em-js .em-site .em-reveal { opacity: 1; transform: none; transition: none; }
  .em-site .em-card,
  .em-site .em-real-card,
  .em-site .em-btn { transition: none; }
}