/* =====================================================================
   KARUZELA REALIZACJI — osobna wtyczka
   ---------------------------------------------------------------------
   Cały element siedzi w trzech plikach: assets/karuzela.css,
   assets/karuzela.js i podgląd karuzela.html. Reszta strony o nim nie wie,
   więc można go przerabiać bez ruszania site.css i site.js.

   Jak to działa: każdy kafel niesie własne zmienne opisujące motyw
   pokazywanej strony — kolor akcentu (--w), tło (--w-bg), kolor tekstu
   (--w-ink) i krój (--w-font). JS przepisuje je z aktywnego kafla na całą
   sekcję, więc nagłówek, akapit, strzałki, kropki i przycisk przebierają
   się w motyw oglądanej realizacji. Bez JS zostaje zwykły pasek przewijany
   w bok, dlatego układ coverflow włącza dopiero klasa .is-ready.

   Wymaga z site.css jedynie zmiennych --gut i --display; obie mają tu
   wartości zapasowe, więc plik działa też sam.
   ===================================================================== */

/* krój ze strony Caritasu — Atkinson Hyperlegible Next (OFL, Braille
   Institute). Ładuje się dopiero wtedy, gdy sekcja faktycznie go użyje. */
@font-face{
  font-family:'Atkinson Hyperlegible Next';
  src:url('/assets/fonts/atkinson-next-latin-ext.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';
  src:url('/assets/fonts/atkinson-next-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------------- sekcja */
.mt-works{
  /* stan wyjściowy: kolory własne Matenetu, nadpisywane przez JS */
  --w:#00953a;--w-rgb:0,149,58;
  --w-bg:#0e1a13;--w-ink:#e8efe9;
  --w-font:var(--display,system-ui,sans-serif);

  overflow:hidden;
  background-color:var(--w-bg);
  color:var(--w-ink);
  font-family:var(--w-font);
  transition:background-color .55s ease,color .55s ease;
}
.mt-works h2,.mt-works h3,.mt-works p,.mt-works a,.mt-works button{font-family:var(--w-font)}
/* nagłówki dziedziczą kolor po sekcji, żeby przechodziły razem z tłem */
.mt-works h2,.mt-works h3{color:inherit}
.mt-works .mt-rule{border-top-color:rgba(255,255,255,.18)}
.mt-works .mt-rule{border-top-color:color-mix(in srgb,currentColor 26%,transparent)}
.mt-works .mt-rule{text-align:center}

/* ---------------------------------------------------------------- scena */
.mt-stage{
  --sw:min(78vw,620px);
  --sh:calc(var(--sw) * .625 + 38px);
  position:relative;margin-top:32px;
}

/* stan bez JS: zwykły pasek przewijany w bok, bez utraty treści */
.mt-deck{
  display:flex;gap:16px;margin:0;padding:0 0 10px;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;
}
.mt-slide{flex:0 0 min(86%,520px);scroll-snap-align:center}
.mt-slide figcaption{margin-top:10px;font-size:15px;line-height:1.5;opacity:.72}

/* stan z JS: coverflow — aktywny na środku, sąsiedzi odsunięci i obróceni */
.is-ready .mt-deck{
  display:block;padding:0;overflow:visible;
  height:var(--sh);
  perspective:1500px;
}
.is-ready .mt-slide{
  position:absolute;left:50%;top:0;width:var(--sw);
  transform-origin:50% 50%;backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s ease;
}
.is-ready .mt-slide:not(.is-active){cursor:pointer}
.is-ready .mt-slide figcaption{display:none}

/* ---------------------------------------------------------------- okno */
.mt-win{
  display:flex;flex-direction:column;margin:0;overflow:hidden;
  background:#fff;outline:1px solid rgba(0,0,0,.2);outline-offset:-1px;
}
.mt-win-bar{display:flex;align-items:center;gap:5px;flex:none;padding:8px 10px;background:var(--w)}
.mt-win-bar i{flex:none;width:7px;height:7px;background:rgba(255,255,255,.5)}
.mt-win-url{
  flex:1;margin-left:6px;padding:2px 9px;
  font:600 10px/1.7 var(--display,system-ui);letter-spacing:.05em;
  color:rgba(255,255,255,.88);background:rgba(255,255,255,.16);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mt-win-view{
  position:relative;flex:1 1 auto;min-height:0;
  aspect-ratio:16/10;background:var(--w-bg);
}
.mt-win-view img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* ---- makieta zastępcza tam, gdzie nie ma jeszcze zrzutu ekranu ---- */
.mt-mk{
  display:flex;flex-direction:column;gap:7px;height:100%;padding:10px;
  background:var(--w-bg);color:var(--w-ink);
}
.mt-mk-top{display:flex;align-items:center;gap:6px;flex:none}
.mt-mk-logo{flex:none;width:34px;height:9px;background:var(--w)}
.mt-mk-nav{display:flex;gap:6px;margin-left:auto}
.mt-mk-nav i{width:16px;height:5px;background:currentColor;opacity:.32}
.mt-mk-hero{flex:1 1 auto;min-height:0;background:var(--w);opacity:.92}
.mt-mk-row{display:grid;gap:6px;flex:none}
.mt-mk-row.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mt-mk-row.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mt-mk-row.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mt-mk .grow{flex:1 1 auto;min-height:0}
.mt-mk-col{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.mt-mk-tile{min-height:24px;background:currentColor;opacity:.13}
.mt-mk-tile.solid{background:var(--w);opacity:.85}
.mt-mk-line{height:5px;background:currentColor;opacity:.28}
.mt-mk-line.s{width:58%}
.mt-mk-line.m{width:78%}
.mt-mk-btn{flex:none;width:54px;height:13px;background:var(--w)}
.mt-mk-side{display:flex;gap:7px;flex:1 1 auto;min-height:0}
.mt-mk-side .mt-mk-rail{flex:0 0 22%;background:currentColor;opacity:.13}
.mt-mk-side .mt-mk-main{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0}

/* ------------------------------------------------- podpis i sterowanie */
/* Wysokość opisu i przycisku jest zarezerwowana z góry, żeby krótszy
   tekst nie podciągał sekcji do góry przy zmianie realizacji. */
.mt-works-meta{display:none;justify-items:center;text-align:center;gap:8px;margin-top:26px}
.is-ready .mt-works-meta{display:grid}
.mt-works-meta h3{font-weight:700;font-size:clamp(21px,2.4vw,28px);line-height:1.2}
.mt-works-of{font-size:16px;opacity:.72}
.mt-works-note{max-width:58ch;min-height:calc(1.7em * 2);opacity:.82}
.mt-works-cta{display:grid;place-items:center;min-height:52px}
.mt-works-go{
  --cut:8px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 16px 10px;border:0;cursor:pointer;
  font:700 15px/1.1 var(--w-font);text-decoration:none;white-space:nowrap;
  color:#fff;background:var(--w);
  transition:background-color .55s ease;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.mt-works-go:hover{filter:brightness(1.18)}
.mt-works-go:focus-visible{outline:2px solid #fff;outline-offset:-5px}
.mt-works-go[hidden]{display:none}

/* Strzałki stoją po bokach podglądu, na połowie jego wysokości.
   Są wpięte w scenę, a nie w tekst pod nią, więc przy zmianie
   realizacji nie ruszają się ani o piksel. */
.mt-arrow{
  --cut:7px;
  position:absolute;z-index:40;top:calc(var(--sh) / 2);
  display:none;place-items:center;width:40px;height:40px;
  margin:0;padding:0;border:0;cursor:pointer;
  transform:translateY(-50%);
  color:#fff;background:var(--w);
  transition:background-color .55s ease;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.is-ready .mt-arrow{display:grid}
.mt-arrow-l{left:max(0px,calc(50% - var(--sw) / 2 - 64px))}
.mt-arrow-r{right:max(0px,calc(50% - var(--sw) / 2 - 64px))}
.mt-arrow:hover{filter:brightness(1.18)}
.mt-arrow:focus-visible{outline:2px solid #fff;outline-offset:-5px}
.mt-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6}

/* kropki tuż pod podglądem, zanim zacznie się zmienny tekst */
.mt-dots{display:none;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:20px}
.is-ready .mt-dots{display:flex}
/* jedna realizacja: nie ma czego przewijać */
.is-single .mt-arrow,.is-single .mt-dots{display:none}
.mt-dot{
  width:26px;height:8px;padding:0;border:0;cursor:pointer;
  background:currentColor;opacity:.3;
  transition:opacity .2s ease,background-color .55s ease;
}
.mt-dot:hover{opacity:.6}
.mt-dot[aria-current="true"]{background:var(--w);opacity:1}
.mt-dot:focus-visible{outline:2px solid currentColor;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .mt-works,.is-ready .mt-slide,.mt-arrow,.mt-dot,.mt-works-go{transition:none}
}