/* ===========================================================================
   Baltic Energy — Design System v1 (plugin: baltic-design)
   ---------------------------------------------------------------------------
   Globalne tokeny (kolory, czcionki, rozmiary, navbar) ustawione przez Panel
   i kompilowane przez Zero One / less.php. Ten plik dokłada motywy maritime
   (eyebrow, grid-bg, signal underline, course-line, chip współrzędnych,
   partnerzy, display), wariant przycisku accent, fluid headings oraz drobne
   korekty UIkit-a. NIE dotyka kirby/, vendor/ ani plugin/zero-one.
   =========================================================================== */

:root{
  --be-teal:#058675;
  --be-teal-strong:#056052;
  --be-teal-deep:#052F2A;
  --be-teal-100:#DBF1EC;
  --be-teal-300:#76D0BF;
  --be-navy:#07151F;
  --be-navy-800:#0B2433;
  --be-ink:#12181A;
  --be-storm:#4E5E61;
  --be-paper:#F4F3EC;
  --be-paper-cool:#EDF1EF;
  --be-border:#DCE2DF;
  --be-accent:#E8552A;
  --be-accent-hover:#D34B23;
  --be-yellow:#F4C24B;
  --be-mono:"Space Mono", ui-monospace, monospace;
  --be-display:"Archivo Expanded", "Archivo", sans-serif;
  --be-ease:cubic-bezier(.16,.84,.44,1);
  /* Aliasy do tokenów ze skill (design-tokens.md) */
  --be-course:var(--be-yellow);
  --be-signal:var(--be-accent);
  --be-radius:6px;
}

/* ── Typografia: dopinki ─────────────────────────────────────────────────── */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.uk-text-lead{
  font-size:1.3125rem;
  line-height:1.65;
  color:var(--be-storm);
}

h1, .uk-h1, .uk-heading-medium{
  font-size:clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
  line-height:1.05;
  letter-spacing:-.02em;
}
h2, .uk-h2, .uk-heading-small{
  font-size:clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);
  line-height:1.1;
  letter-spacing:-.015em;
}
h3, .uk-h3{ letter-spacing:-.01em; }

/* ── Eyebrow / mono label ────────────────────────────────────────────────── */
.be-eyebrow{
  font-family:var(--be-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--be-teal-strong);
  margin:0 0 .75rem;
}
.uk-light .be-eyebrow,
.uk-section-secondary .be-eyebrow,
.uk-background-secondary .be-eyebrow{ color:var(--be-teal-300); }
.uk-section-primary .be-eyebrow{ color:#fff; opacity:.85; }

/* ── Signal underline ────────────────────────────────────────────────────── */
.be-signal-underline{
  position:relative;
  display:inline-block;
}
.be-signal-underline::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-.12em;
  height:3px;
  background:var(--be-accent);
}

/* ── Display heading (hero) ──────────────────────────────────────────────── */
.be-display{
  font-family:var(--be-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.98;
  font-size:clamp(2.6rem, 1.4rem + 4.6vw, 5.5rem);
  margin:0;
}

/* ── Siatka współrzędnych ────────────────────────────────────────────────── */
.be-grid-bg{
  background-image:
    linear-gradient(to right,  rgba(78,94,97,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(78,94,97,.07) 1px, transparent 1px);
  background-size:48px 48px;
}
.be-grid-bg--fade{
  -webkit-mask-image:radial-gradient(120% 90% at 90% 100%, #000, transparent 70%);
          mask-image:radial-gradient(120% 90% at 90% 100%, #000, transparent 70%);
}
.uk-section-secondary .be-grid-bg,
.uk-light .be-grid-bg,
.be-grid-bg--dark{
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
}

/* ── Linia kursu (dashed divider) ────────────────────────────────────────── */
.be-course-line{
  height:0;
  border:0;
  border-top:2px dashed #C0CAC9;
  margin:2rem 0;
}
.uk-light .be-course-line,
.uk-section-secondary .be-course-line{ border-top-color:rgba(255,255,255,.22); }

/* ── Chip współrzędnych ──────────────────────────────────────────────────── */
.be-chips{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.be-chip{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  padding:10px 14px;
  border:1px solid var(--be-border);
  border-radius:4px;
  background:#fff;
  min-width:104px;
}
.be-chip__l{
  font-family:var(--be-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--be-storm);
}
.be-chip__v{
  font-family:var(--be-mono);
  font-size:17px;
  font-weight:700;
  color:var(--be-ink);
}
.uk-light .be-chip{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
}
.uk-light .be-chip__l{ color:#90A0A1; }
.uk-light .be-chip__v{ color:#fff; }

/* ── Partnerzy / patroni ─────────────────────────────────────────────────── */
.be-partners{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(24px, 4vw, 56px);
}
.be-partners img{
  height:64px;
  width:auto;
  object-fit:contain;
  display:block;
}
.tm-patroni .be-partners img{ height:56px; }

@media (max-width: 959px){
  .be-partners img{ height:48px; }
  .tm-patroni .be-partners img{ height:44px; }
}

/* ── Buttony: dopinki ────────────────────────────────────────────────────── */
/* Zero One z Siteborderradius=true wkleja zaokrąglony radius do przycisków.
   Architektoniczny target = 6px — celowo `!important` żeby pokonać inline
   z UIkit-compile. Pille (uk-label, status) trzymają swój radius. */
.uk-button{
  border-radius:6px !important;
  letter-spacing:.01em;
  transition:
    background-color .24s var(--be-ease),
    color .24s var(--be-ease),
    transform .14s var(--be-ease),
    box-shadow .24s var(--be-ease),
    border-color .24s var(--be-ease);
}
.uk-button:active{ transform:translateY(1px); }

/* Primary hover → teal-700 (ciemniejszy), nie tint(80%) jasno-teal jak default */
.uk-button-primary:hover,
.uk-button-primary:focus{
  background-color:var(--be-teal-strong) !important;
  color:#fff !important;
}
.uk-button-primary:active{
  background-color:var(--be-teal-deep) !important;
}

/* Accent — signal orange (CTA „energetyczne") */
.uk-button.be-button-accent,
a.be-button-accent.uk-button{
  background:var(--be-accent);
  color:#fff;
  border:1px solid var(--be-accent);
}
.uk-button.be-button-accent:hover,
.uk-button.be-button-accent:focus{
  background:var(--be-accent-hover);
  border-color:var(--be-accent-hover);
  color:#fff;
}

/* Outline ghost na zdjęciu / w sekcji ciemnej (uk-light) */
.uk-light .uk-button-default{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.85);
}
.uk-light .uk-button-default:hover,
.uk-light .uk-button-default:focus{
  background:rgba(255,255,255,.10);
  color:#fff;
  border-color:#fff;
}

/* ── Rytm sekcji ─────────────────────────────────────────────────────────── */
.uk-section-large{   padding-top:96px;  padding-bottom:96px;  }
.uk-section-xlarge{  padding-top:128px; padding-bottom:128px; }
@media (max-width: 959px){
  .uk-section-large{  padding-top:64px; padding-bottom:64px; }
  .uk-section-xlarge{ padding-top:80px; padding-bottom:80px; }
}

/* ── Karty: architektonicze 10px ─────────────────────────────────────────── */
.uk-card{ border-radius:10px; }

/* ── Hero protection gradient (utility) ─────────────────────────────────── */
.be-hero-protect{ position:relative; }
.be-hero-protect::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(7,21,31,0)   35%,
    rgba(7,21,31,.55) 100%);
  pointer-events:none;
}

/* ── Hero (home) ─────────────────────────────────────────────────────────── */
/* Sekcja `.be-hero` (sectionclass) = pełnoekranowy hero. Layout.php Zero One
   renderuje strukturę: <section.uk-section.uk-cover-container.be-hero> →
   <div.uk-grid> → <div.uk-width-*> → z-html block. Tu wymuszamy:
   - min-height ~92vh i wyrównanie zawartości do dołu sekcji
   - własny kontener (padding top ~116px+ pod glass-navbar, padding bottom)
   - większy biały lead, klaster CTA i chipy współrzędnych */

.be-hero{
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  padding:0;
}
.be-hero > .uk-grid{
  width:100%;
  margin:0 !important;
}
.be-hero > .uk-grid > [class*="uk-width"]{
  width:100%;
  padding-left:0;
  padding-right:0;
}

/* Kontener treści hero — własne marginesy + padding pod navbar */
/* Uwaga: Zero One nakłada `margin-top:-72px` na #swup (klasa
   `tm-transparent-navbar-negative`), żeby treść wsunęła się pod glass
   navbar. Dlatego padding-top zawiera te 72px (Sitenavbarheight) plus
   właściwe „oddychanie" projektu (≥116px wg components/sections.md). */
.be-hero-container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:
    clamp(192px, 24vh, 248px)
    clamp(20px, 4vw, 40px)
    clamp(48px, 7vw, 90px);
}

/* be-display w hero — mniejszy `clamp` żeby polskie wyrazy się mieściły */
.be-hero .be-display{
  max-width:16ch;
  margin:.5rem 0 0;
  font-size:clamp(2.2rem, 1.2rem + 4vw, 5rem);
}

/* Eyebrow w hero — biały, większe pole oddechu */
.be-hero .be-eyebrow{
  color:rgba(255,255,255,.78);
  margin:0 0 1rem;
}

/* Lead biały na ciemnym tle (niezależnie od .uk-text-lead muted color) */
.be-hero-lead{
  font-family:"Archivo", system-ui, sans-serif;
  font-size:clamp(1.0625rem, .9rem + .6vw, 1.3125rem);
  line-height:1.55;
  color:rgba(255,255,255,.92);
  max-width:54ch;
  margin:1.25rem 0 0;
  font-weight:400;
}

/* CTA cluster — accent + outline ghost */
.be-hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:2rem;
}

/* Chip cluster pod CTA */
.be-hero-chips{
  margin-top:2.5rem;
}

/* ── Moduł "Najbliższe wydarzenie" w hero ────────────────────────────────────
   Pasek instrument/glass pod CTA. Trzy segmenty: nazwa + 2× label/value.
   Treść z pól Panelu (Eventname, Eventdate, Eventcoords); markup wstrzykiwany
   przez baltic-design plugin w miejsce <div data-be-event-anchor></div>.
   ─────────────────────────────────────────────────────────────────────────── */
.be-event{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  margin-top:clamp(28px, 4vw, 44px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--be-radius, 6px);
  overflow:hidden;
  background:rgba(255,255,255,.06);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  color:#fff;
  max-width:760px;
  text-decoration:none;
  transition:
    background .24s var(--be-ease),
    border-color .24s var(--be-ease),
    transform .24s var(--be-ease);
}
a.be-event:hover,
a.be-event:focus-visible{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.28);
  transform:translateY(-2px);
}
a.be-event:focus-visible{
  outline:2px solid var(--be-course, #F4C24B);
  outline-offset:3px;
}

.be-event__seg{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:clamp(14px, 2vw, 20px) clamp(18px, 2.6vw, 28px);
  border-right:1px solid rgba(255,255,255,.16);
}
.be-event__seg:last-child{ border-right:0; }
.be-event__main{
  min-width:240px;
  flex:1 1 auto;
}

.be-event__kicker{
  font-family:var(--be-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--be-course, #F4C24B);
  display:inline-flex;
  align-items:center;
  gap:9px;
  line-height:1;
}
.be-event__kicker::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--be-signal, #E8552A);
  box-shadow:0 0 0 4px rgba(232,85,42,.22);
  animation:be-event-pulse 2.4s ease-in-out infinite;
}
@keyframes be-event-pulse{
  0%, 100% { box-shadow:0 0 0 4px rgba(232,85,42,.22); }
  50%      { box-shadow:0 0 0 7px rgba(232,85,42,.06); }
}

.be-event__name{
  font-family:"Archivo Expanded", "Archivo", sans-serif;
  font-weight:800;
  font-size:clamp(1.15rem, .95rem + .9vw, 1.6rem);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:#fff;
}

.be-event__l{
  font-family:var(--be-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#90A0A1;
  line-height:1;
}
.be-event__v{
  font-family:var(--be-mono);
  font-size:clamp(15px, .9rem + .25vw, 17px);
  font-weight:700;
  color:#fff;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}

/* Mobile: segmenty zawijają się w pionie, separator poziomy zamiast pionowego */
@media (max-width:639px){
  .be-event{ max-width:none; margin-top:clamp(22px, 6vw, 36px); }
  .be-event__seg{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.16);
    flex:1 1 100%;
    padding:14px 18px;
  }
  .be-event__seg:last-child{ border-bottom:0; }
  .be-event__main{ min-width:0; }
}

/* Reduced motion: wyłącz pulsowanie kropki i lift na hover */
@media (prefers-reduced-motion: reduce){
  .be-event__kicker::before{ animation:none; }
  a.be-event:hover, a.be-event:focus-visible{ transform:none; }
}

@media (max-width:639px){
  .be-hero{ min-height:86vh; }
  .be-hero-container{
    padding:
      clamp(152px, 22vh, 200px)
      clamp(16px, 4vw, 28px)
      clamp(40px, 7vw, 80px);
  }
  .be-hero .be-display{
    max-width:12ch;
    font-size:clamp(2rem, 1.1rem + 3.6vw, 3.4rem);
  }
  .be-hero-cta{
    flex-direction:column;
    align-items:stretch;
  }
  .be-hero-cta .uk-button{
    width:100%;
    min-width:0;
    text-align:center;
    /* Tekst zostaje w jednej linii; gdy nie ma już miejsca (≤340 px) — wrap,
       ale font fluid trzyma go zwykle do końca. */
    white-space:nowrap;
    /* Fluid font: na 360 px → ~0.875 rem, na 640 px → ~1 rem (UIkit base).
       Pozwala zmieścić "Obieramy kurs na nową przyszłość ↗" w jednej linii. */
    font-size:clamp(.84rem, .55rem + 1.4vw, 1rem);
    letter-spacing:.01em;
    padding-left:clamp(14px, 4vw, 30px);
    padding-right:clamp(14px, 4vw, 30px);
  }
  /* Bardzo wąskie ekrany (≤339 px): pozwól na łamanie raczej niż clipping. */
  @media (max-width:339px){
    .be-hero-cta .uk-button{ white-space:normal; }
  }
}

/* ── Navbar: glass / solid / logo swap ───────────────────────────────────── */
/* Wszystkie reguły są nadbudową nad Zero One. Sterowane stanami:
   - `tm-navbar-transparent`  → glass nad hero (logo białe, toggle biały)
   - `+ uk-navbar-sticky`     → solid po scrollu (logo zielone, paper, hairline)
   - bez `tm-navbar-transparent` → solid stale (pozostałe podstrony)
   UIkit z `Sticky: scroll` (site.pl.txt) automatycznie dokleja `uk-navbar-sticky`. */

.uk-navbar-container{
  transition:
    background-color .24s var(--be-ease),
    box-shadow      .24s var(--be-ease),
    border-color    .24s var(--be-ease);
}

/* Solid (default na podstronach + sticky state) — paper z hairlinem */
.uk-navbar-container:not(.tm-navbar-transparent),
.uk-navbar-container.tm-navbar-transparent.uk-navbar-sticky{
  background:var(--be-paper) !important;
  border-bottom:1px solid var(--be-border);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

/* Glass — przed scrollem na home: absolutnie nad hero, transparentny */
.uk-navbar-container.tm-navbar-transparent:not(.uk-navbar-sticky){
  position:absolute;
  top:0; left:0; right:0;
  z-index:100;
  background:transparent !important;
  border-bottom:0;
  box-shadow:none;
}

/* Logo swap — domyślnie pokazuj dark, ukryj light */
.be-logo{ position:relative; display:inline-flex; align-items:center; }
.be-logo .be-logo-light{ display:none; }
.be-logo .be-logo-dark { display:block; }

/* W stanie glass — odwracamy: biały logotyp, ciemny ukryty */
.tm-navbar-transparent:not(.uk-navbar-sticky) .be-logo .be-logo-light{ display:block; }
.tm-navbar-transparent:not(.uk-navbar-sticky) .be-logo .be-logo-dark { display:none;  }

/* Hamburger / toggle — kolor zależny od stanu (glass = biały, solid = ink) */
.uk-navbar-toggle{
  color:var(--be-ink);
  transition:color .24s var(--be-ease);
}
.uk-navbar-toggle:hover,
.uk-navbar-toggle:focus{ color:var(--be-teal-strong); }

.tm-navbar-transparent:not(.uk-navbar-sticky) .uk-navbar-toggle{ color:#fff; }
.tm-navbar-transparent:not(.uk-navbar-sticky) .uk-navbar-toggle:hover,
.tm-navbar-transparent:not(.uk-navbar-sticky) .uk-navbar-toggle:focus{
  color:rgba(255,255,255,.78);
}

/* ─────────────────────────────────────────────────────────────────────────
   Phase 5 — sekcje home (mission / articles / projects / partners)
   ─────────────────────────────────────────────────────────────────────────
   Sterowane przez `sectionclass` w Layout JSON: be-section-mission,
   be-section-articles, be-section-projects (+ be-grid-bg--dark),
   be-section-partners. Nadbudowa nad Zero One; karty i typografia działają
   na bazie istniejących bloków `z-articles` (tylko CSS). */

/* ── Misja: rytm i hierarchia ───────────────────────────────────────────── */
.be-section-mission{
  padding-top:clamp(72px, 9vw, 120px);
  padding-bottom:clamp(72px, 9vw, 120px);
}
.be-section-mission .be-section-h{
  font-size:clamp(1.85rem, 1.2rem + 1.8vw, 2.6rem);
  margin:.4rem 0 0;
  max-width:14ch;
}
/* Pierwszy akapit w drugiej kolumnie (tekst) jako lead. */
.be-section-mission .uk-grid > [class*="uk-width"]:nth-child(2) > .uk-text-default > p:first-of-type,
.be-section-mission .uk-grid > [class*="uk-width"]:nth-child(2) > p:first-of-type{
  font-size:clamp(1.0625rem, .95rem + .55vw, 1.3125rem);
  line-height:1.6;
  color:var(--be-ink);
  font-weight:400;
  margin-bottom:1.5rem;
}
.be-section-mission .uk-grid > [class*="uk-width"]:nth-child(2) p{
  color:var(--be-storm);
  font-size:1.0625rem;
  line-height:1.7;
}

/* ── Artykuły: tło paper-cool, większe odstępy nagłówka ────────────────── */
.be-section-articles{
  padding-top:clamp(72px, 9vw, 120px);
  padding-bottom:clamp(72px, 9vw, 120px);
}
.be-section-articles .be-section-h{
  font-size:clamp(1.85rem, 1.2rem + 1.8vw, 2.6rem);
  margin:.4rem 0 clamp(2rem, 4vw, 3rem);
}

/* ── ArticleCard (components/cards.md) ──────────────────────────────────────
   Karta artykułu w sekcji `.be-section-articles`. Renderowana przez nadpisany
   snippet z-articles (site/snippets/blocks/z-articles.php) jako:
     <article.be-article-card>
       <div.uk-card-media-top.be-article-card__media>
         <a><picture><img.be-article-card__img/></picture></a>
       </div>
       <div.uk-card-body.be-article-card__body>
         <p.be-coord.be-article-card__meta> data · czas czytania · kategoria </p>
         <h3.be-article-card__title><a>Tytuł</a></h3>
         <p.uk-text-muted.be-article-card__dek>Dek (excerpt)</p>
         <span.be-eyebrow.be-article-card__cta>Czytaj →</span>
       </div>
     </article>
   ─────────────────────────────────────────────────────────────────────────── */
.be-section-articles .be-article-card{
  position:relative;
  background:#FFFFFF;
  border:none;
  border-radius:10px;
  box-shadow:inset 0 0 0 1px var(--be-border), 0 1px 2px rgba(7,21,31,.04);
  transition:
    transform .24s var(--be-ease),
    box-shadow .24s var(--be-ease);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
.be-section-articles .be-article-card:hover,
.be-section-articles .be-article-card:focus-within{
  transform:translateY(-3px);
  box-shadow:
    inset 0 0 0 1px var(--be-border),
    0 12px 34px rgba(7,21,31,.12);
}

/* Media 3:2 — wymuszone na `<a>` i `<picture>` (oba inline w domyślnym renderze
   UIkit, więc img z height:100% nie miałby wysokości). */
.be-section-articles .be-article-card__media{
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  overflow:hidden;
  background:#EDF1EF;
}
.be-section-articles .be-article-card__media > a,
.be-section-articles .be-article-card__media picture{
  display:block;
  width:100%;
  height:100%;
}
.be-section-articles .be-article-card__img,
.be-section-articles .be-article-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .68s var(--be-ease);
}
.be-section-articles .be-article-card:hover .be-article-card__img,
.be-section-articles .be-article-card:hover .be-article-card__media img{
  transform:scale(1.04);
}

/* Body */
.be-section-articles .be-article-card__body{
  padding:clamp(20px, 2vw, 28px);
  display:flex;
  flex-direction:column;
  gap:.6rem;
  flex:1 1 auto;
}

/* Meta: mono uppercase, data · czas czytania · kategoria */
.be-section-articles .be-article-card__meta{
  font-family:var(--be-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--be-storm);
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem .35rem;
  align-items:baseline;
}
.be-section-articles .be-article-card__meta time{ font-variant-numeric:tabular-nums; }
.be-section-articles .be-article-card__cat{ color:var(--be-teal-strong); font-weight:700; }

/* Tytuł — Archivo 700, mixed case (override globalnego heading-transform) */
.be-section-articles .be-article-card__title{
  font-family:"Archivo", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-.005em;
  font-size:clamp(1.125rem, .95rem + .5vw, 1.375rem);
  line-height:1.25;
  margin:0;
  text-transform:none;
}
.be-section-articles .be-article-card__title a{
  color:var(--be-ink);
  text-decoration:none;
  background-image:linear-gradient(var(--be-teal-strong),var(--be-teal-strong));
  background-size:0 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .35s var(--be-ease), color .2s var(--be-ease);
}
.be-section-articles .be-article-card__title a:hover,
.be-section-articles .be-article-card:hover .be-article-card__title a{
  color:var(--be-teal-strong);
  background-size:100% 1px;
}

/* Dek (excerpt) */
.be-section-articles .be-article-card__dek{
  color:var(--be-storm);
  font-size:.95rem;
  line-height:1.55;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* CTA "Czytaj →" w teal monospace */
.be-section-articles .be-article-card__cta{
  color:var(--be-teal-strong);
  font-family:var(--be-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  margin-top:auto;
  padding-top:.4rem;
  transition:transform .24s var(--be-ease), color .2s var(--be-ease);
}
.be-section-articles .be-article-card:hover .be-article-card__cta{
  color:var(--be-teal);
  transform:translateX(3px);
}

/* Cała karta klikalna — pseudo-overlay na linku tytułu (rozszerza obszar
   trafienia bez powtarzania linka pod każdym elementem). */
.be-section-articles .be-article-card__title a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.be-section-articles .be-article-card__title a{ position:static; }
.be-section-articles .be-article-card__meta,
.be-section-articles .be-article-card__dek,
.be-section-articles .be-article-card__cta{
  position:relative;
  z-index:2;
  pointer-events:none;
}

/* ── Nasze projekty: navy + grid + kafle dokumentalne ───────────────────── */
.be-section-projects{
  padding-top:clamp(72px, 9vw, 120px);
  padding-bottom:clamp(72px, 9vw, 120px);
  color:#FFFFFF;
}
.be-section-projects .be-section-h{
  color:#FFFFFF;
  font-size:clamp(1.85rem, 1.2rem + 1.8vw, 2.6rem);
  margin:.4rem 0 clamp(1.5rem, 3vw, 2rem);
  max-width:18ch;
}
.be-section-projects .be-eyebrow{
  color:rgba(255,255,255,.7);
}

/* Karty projektów (z-articles w trybie articlesimage=true): kafel z obrazem,
   gradient scrim na dole, lift + zoom. */
.be-section-projects .uk-card{
  background:#07151F;
  border-radius:10px;
  border:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
  transition:transform .24s var(--be-ease), box-shadow .24s var(--be-ease);
}
.be-section-projects .uk-card:hover,
.be-section-projects .uk-card:focus-within{
  transform:translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 14px 36px rgba(0,0,0,.35);
}
/* ProjectCard: karta układana flex-kolumną, by media + body wypełniały
   wysokość komórki gridu. Bez tego `uk-card-media-top` (inline-block w UIkit)
   nie dostaje szerokości i `aspect-ratio:4/3` redukuje się do 0×0. */
.be-section-projects .be-article-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.be-section-projects .uk-card-media-top{
  display:block;
  width:100%;
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
}
/* `<a>` i `<picture>` w UIkit są domyślnie inline — wymuszamy block,
   aby img z height:100% wypełnił 4:3 kadr. */
.be-section-projects .uk-card-media-top > a,
.be-section-projects .uk-card-media-top picture{
  display:block;
  width:100%;
  height:100%;
}
.be-section-projects .uk-card-media-top::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,21,31,0) 30%, rgba(7,21,31,.72) 100%);
  pointer-events:none;
  z-index:1;
}
.be-section-projects .uk-card-media-top img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .68s var(--be-ease);
}
.be-section-projects .uk-card:hover .uk-card-media-top img{
  transform:scale(1.05);
}
.be-section-projects .uk-card-body{
  padding:24px;
  background:transparent;
}
.be-section-projects .uk-card-body h3{
  font-family:var(--be-display);
  font-weight:800;
  letter-spacing:-.01em;
  font-size:1.45rem;
  line-height:1.15;
  margin:.25rem 0;
}
.be-section-projects .uk-card-body h3 a{
  color:#FFFFFF;
  text-decoration:none;
}
.be-section-projects .uk-card-body h3 a:hover{
  color:var(--be-teal-300);
}
/* W sekcji projektów używamy z-articles, ale nie chcemy excerpt'a ani CTA
   "Czytaj →" — to ProjectCard, nie ArticleCard. */
.be-section-projects .be-article-card__dek,
.be-section-projects .be-article-card__cta{ display:none; }
.be-section-projects .be-article-card__meta{
  font-family:var(--be-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
  margin:0 0 .35rem;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem .35rem;
}
.be-section-projects .be-article-card__cat{ color:var(--be-teal-300); }
.be-section-projects .be-article-card__title{
  font-family:var(--be-display);
  font-weight:800;
  letter-spacing:-.01em;
  font-size:1.45rem;
  line-height:1.15;
  margin:0;
  text-transform:none;
}
.be-section-projects .be-article-card__title a{ color:#FFFFFF; text-decoration:none; }
.be-section-projects .be-article-card__title a:hover{ color:var(--be-teal-300); }

.be-section-projects .uk-article-meta{
  font-family:var(--be-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
}

/* ── Partnerzy / Patroni: białe tło, większe loga, grupy ────────────────── */
.be-section-partners{
  background:#FFFFFF !important;
  border-top:1px solid var(--be-border);
  padding-top:clamp(64px, 8vw, 104px);
  padding-bottom:clamp(64px, 8vw, 104px);
}
/* Zlikwiduj nakładkę overlayową w sekcji partnerów (Zero One renderuje
   uk-position-cover z koloru). */
.be-section-partners .uk-position-cover{ display:none !important; }

.be-section-partners .be-eyebrow{
  color:var(--be-storm);
}
.be-section-partners .be-partners-group{
  margin-top:clamp(8px, 2vw, 24px);
  color:var(--be-ink);
  letter-spacing:.16em;
}

/* Layout logotypów: flex z dużym gap'em, vertical-align środek.
   Wysokość każdego logo (i ewentualny max-width) podajemy inline w
   `style="height:Xpx"` na <img> — pozwala to ustawić indywidualne
   proporcje per logo (Gdańsk jest pionowy, Struk kwadratowy, itd.).
   Tutaj sterujemy tylko spacingiem, fit-em i fallback'iem rozmiaru. */
.be-partners{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(40px, 6vw, 96px);
  row-gap:clamp(28px, 4vw, 56px);
}
/* Patroni mają szersze loga (3:1 ministerialne) — mniejszy gap, żeby
   4-logo rząd mieścił się na desktop 1280+ w jednym wierszu. */
.be-partners.tm-patroni{
  gap:clamp(20px, 2.4vw, 48px);
  row-gap:clamp(24px, 3vw, 48px);
}
.be-partners img{
  width:auto;
  object-fit:contain;
  filter:none;
  opacity:1;
}
/* Fallback gdy IMG nie ma inline height (np. dodany w panelu bez stylu) */
.be-partners img:not([style*="height"]){ height:96px; }
.be-partners.tm-patroni img:not([style*="height"]){ height:108px; }

/* Mobile: globalny cap dla wysokości — inline style przegra z !important */
@media (max-width:959px){
  .be-partners img{ height:auto !important; max-height:88px; }
  .be-partners.tm-patroni img{ max-height:96px; }
}
@media (max-width:639px){
  /* Na mobile prezentujemy logotypy jeden pod drugim — pełna szerokość
     kolumny zamiast chaotycznego wrap'a (np. wąski Struk vs szerokie
     ministerstwa). row-gap powiększony o ~25% względem desktopu. */
  .be-partners,
  .be-partners.tm-patroni{
    flex-direction:column;
    flex-wrap:nowrap;
    gap:0;
    row-gap:clamp(30px, 5vw, 45px);
  }
  .be-partners img{ max-height:64px; flex:0 0 auto; }
  .be-partners.tm-patroni img{ max-height:72px; }
}

/* Course line między grupami (PL: linia kursu) */
.be-section-partners .be-course-line{
  border:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--be-border) 50%,
    transparent 100%);
}

/* ── Footer (navy + grid, mono nagłówki, teal linki) ─────────────────────── */
.be-footer{
  background:linear-gradient(180deg, var(--be-navy-800) 0%, var(--be-navy) 100%) !important;
  color:rgba(255,255,255,.82);
  padding-top:clamp(56px, 7vw, 88px);
  padding-bottom:clamp(40px, 5vw, 64px);
  border-top:1px solid rgba(255,255,255,.06);
}
.be-footer .uk-position-cover{ display:none !important; }
.be-footer p,
.be-footer li{
  color:rgba(255,255,255,.82);
  font-size:.95rem;
  line-height:1.7;
}
.be-footer strong{
  color:#FFFFFF;
  font-weight:700;
  letter-spacing:-.005em;
}
.be-footer a{
  color:var(--be-teal-300);
  text-decoration:none;
  border-bottom:1px solid rgba(118,208,191,.3);
  transition:color .2s var(--be-ease), border-color .2s var(--be-ease);
}
.be-footer a:hover{
  color:#FFFFFF;
  border-bottom-color:rgba(255,255,255,.5);
}
.be-footer-eyebrow{
  font-family:var(--be-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55) !important;
  margin:0 0 .8rem;
}

/* ── Motion: respect prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}