@charset "UTF-8";

:root {
  --az-bg: #020a15;
  --az-text: #eaf7ff;
  --az-muted: #9ab8cf;
  --az-blue: #52c7ff;
  --az-side: 270px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 18px; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--az-text);
  font-family: Arial, Helvetica, sans-serif;
  background: var(--az-bg);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Tło dokładnie w klimacie obecnej strony ArezzoMT2. */
.az266-bg {
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    linear-gradient(180deg, rgba(1, 8, 18, .10), rgba(1, 8, 18, .38) 58%, rgba(1, 7, 16, .88) 100%),
    url('../ui/background-blue.webp') center top / cover no-repeat;
  background-attachment: fixed;
}
.az266-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 5, 13, .20), transparent 24%, transparent 76%, rgba(0, 5, 13, .20)),
    radial-gradient(circle at 50% 3%, rgba(83, 192, 255, .14), transparent 32%);
}

/* Główne logo ze strony. Brak górnego paska menu. */
.az267-hero {
  position: relative;
  z-index: 10;
  min-height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px 8px;
}
.az267-main-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.az267-main-logo img {
  display: block;
  width: min(455px, 44vw);
  max-height: 145px;
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(70, 184, 255, .22)) drop-shadow(0 12px 24px rgba(0, 0, 0, .46));
}
.az266-menu-toggle { display: none; }

.az266-layout {
  width: min(1500px, calc(100% - 30px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--az-side) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* GRAFICZNA RAMA bocznego menu — używa obrazu panel-frame.png. */
#presentation-menu {
  position: sticky;
  top: 14px;
  height: calc(100vh - 28px);
  z-index: 40;
}
.az266-sidebar {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  border: 30px solid transparent;
  border-image-source: url('../ui/panel-frame.png');
  border-image-slice: 64 fill;
  border-image-width: 38px;
  border-image-repeat: stretch;
  background:
    linear-gradient(180deg, rgba(4, 19, 37, .94), rgba(2, 10, 22, .98)),
    url('../ui/panel-texture.webp') center / 520px 520px repeat;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .34));
  overflow: hidden;
}
.az267-side-heading {
  flex: 0 0 auto;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -10px -12px 8px;
  padding: 12px 18px 11px;
  background: url('../ui/menu-shell.png') center / 100% 100% no-repeat;
  text-align: center;
}
.az267-side-heading span {
  display: block;
  color: #f4fbff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(70, 190, 255, .30);
}
.az267-side-heading small {
  display: block;
  margin-top: 4px;
  color: #9ec8e4;
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.az266-side-logo { display: none !important; }

.az266-nav {
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 1px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(82, 185, 247, .76) rgba(2, 14, 27, .62);
}
.az266-nav::-webkit-scrollbar { width: 6px; }
.az266-nav::-webkit-scrollbar-thumb { background: rgba(82, 185, 247, .72); border-radius: 10px; }
.az266-nav::-webkit-scrollbar-track { background: rgba(2, 14, 27, .62); }
.az266-nav-group { margin: 0 0 7px; }

/* Graficzne niebieskie nagłówki grup menu. */
.az266-nav-title {
  position: relative;
  min-height: 31px;
  display: flex;
  align-items: center;
  margin: 0 -3px 3px;
  padding: 6px 23px 6px 26px;
  color: #f4fbff;
  background: url('../ui/button-primary.png') center / 100% 100% no-repeat;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
}
.az266-nav-title::before {
  content: "◆";
  position: absolute;
  left: 12px;
  color: #8bdcff;
  font-size: 7px;
  text-shadow: 0 0 8px #44bfff;
}
.az266-nav-group a {
  display: block;
  position: relative;
  padding: 5px 9px 5px 20px;
  color: #a9c5da;
  font-size: 10px;
  line-height: 1.24;
  transition: color .16s ease, padding-left .16s ease, background .16s ease;
}
.az266-nav-group a::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  transform: rotate(45deg);
  background: rgba(83, 188, 249, .46);
}
.az266-nav-group a:hover,
.az266-nav-group a.is-current {
  padding-left: 24px;
  color: #fff;
  background: linear-gradient(90deg, rgba(34, 124, 190, .32), transparent 90%);
}
.az266-nav-group a.is-current::before {
  background: #8bdcff;
  box-shadow: 0 0 8px #42bfff;
}

.az266-side-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 9px 0 0;
}
.az266-button {
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  color: #f4fbff;
  background: url('../ui/button-primary.png') center / 100% 100% no-repeat;
  border: 0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
}
.az266-button:hover,
.az266-button.is-primary {
  background-image: url('../ui/button-hover.png');
  filter: drop-shadow(0 0 7px rgba(63, 189, 255, .28));
}

.az266-main {
  min-width: 0;
  padding: 0 0 42px;
}
.az266-presentation { width: 100%; }

/* GRAFICZNA RAMA środkowej prezentacji — nie zwykła obwódka CSS. */
.az266-content-frame {
  position: relative;
  width: 100%;
  min-height: 760px;
  padding: 18px 13px 34px;
  border: 38px solid transparent;
  border-image-source: url('../ui/panel-frame.png');
  border-image-slice: 64 fill;
  border-image-width: 48px;
  border-image-repeat: stretch;
  background:
    linear-gradient(180deg, rgba(3, 15, 30, .72), rgba(1, 8, 18, .91)),
    url('../ui/background-blue.webp') center top / 1120px auto no-repeat,
    url('../ui/panel-texture.webp') center / 620px 620px repeat;
  background-blend-mode: normal, soft-light, normal;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .38));
  overflow: hidden;
}
.az266-content-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 4%, rgba(76, 188, 255, .10), transparent 32%),
    linear-gradient(90deg, rgba(1, 9, 20, .16), transparent 16%, transparent 84%, rgba(1, 9, 20, .16));
}
.az266-content-frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 30px;
  right: 30px;
  top: 2px;
  height: 32px;
  pointer-events: none;
  background: url('../ui/divider.png') center / 100% 100% no-repeat;
  opacity: .75;
}

/* W środku pozostaje prawdziwa stara prezentacja ArezzoMT2. */
.azp-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 8px;
  text-align: center;
  line-height: 0;
}
.azp-image-block {
  width: 100%;
  margin: 0 auto 5px;
  text-align: center;
  line-height: 0;
}
.azp-image-block img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  vertical-align: top;
  border: 0;
  filter: drop-shadow(0 7px 14px rgba(0, 0, 0, .25));
}
.azp-image-row { display: block; }
.azp-image-row img { display: block; margin: 0 auto 5px; }
.azp-missing { display: none; }
.az170-section-anchor {
  display: block;
  position: relative;
  top: -16px;
  visibility: hidden;
}

/* Delikatna oprawa prawdziwych dużych screenów — nie zasłania ich treści. */
.azp-image-block img[width="1352"],
.azp-image-block img[width="1280"],
.azp-image-block img[width="1250"],
.azp-image-block img[width="1200"],
.azp-image-block img[width="1150"],
.azp-image-block img[width="826"],
.azp-image-block img[width="802"],
.azp-image-block img[width="787"],
.azp-image-block img[width="772"],
.azp-image-block img[width="762"],
.azp-image-block img[width="726"],
.azp-image-block img[width="723"] {
  padding: 4px;
  background: rgba(3, 17, 32, .72);
  border: 1px solid rgba(86, 184, 245, .22);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(0, 9, 20, .76);
}

.az266-footer {
  padding: 18px 8px 0;
  color: rgba(177, 209, 231, .66);
  text-align: center;
  font-size: 11px;
}
.az266-top-button {
  position: fixed;
  z-index: 90;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border: 0;
  color: #f4fbff;
  background: url('../ui/diamond.png') center / 100% 100% no-repeat;
  text-shadow: 0 1px 2px #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.az266-top-button.is-visible { opacity: 1; pointer-events: auto; }
.az266-top-button:hover { transform: translateY(-2px); }

@media (max-width: 1180px) {
  :root { --az-side: 245px; }
  .az266-layout { width: calc(100% - 18px); gap: 10px; }
  .az266-content-frame { border-width: 30px; border-image-width: 40px; padding-inline: 7px; }
}

@media (max-width: 920px) {
  .az267-hero { min-height: 124px; padding-top: 12px; }
  .az267-main-logo img { width: min(365px, 68vw); }
  .az266-menu-toggle {
    display: inline-flex;
    position: fixed;
    z-index: 120;
    top: 12px;
    left: 12px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    color: #f4fbff;
    background: url('../ui/button-primary.png') center / 100% 100% no-repeat;
    border: 0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .az266-layout { display: block; width: min(100% - 12px, 1120px); }
  #presentation-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;
    width: min(300px, 88vw);
    height: 100vh;
    transform: translateX(-106%);
    transition: transform .20s ease;
  }
  body.az266-menu-open #presentation-menu { transform: translateX(0); }
  .az266-content-frame {
    border-width: 22px;
    border-image-width: 30px;
    padding: 12px 2px 24px;
    background-size: auto, 900px auto, 500px 500px;
  }
  .az266-top-button { right: 10px; bottom: 10px; }
}


/* ===== ArezzoMT2 prezentacja v269 — rzeczywiste poprawki graficzne ===== */
:root { --az-side: 250px; }
.az266-layout {
  width: min(1440px, calc(100% - 32px));
  grid-template-columns: var(--az-side) minmax(0, 1fr);
  gap: 18px;
}
#presentation-menu { top: 10px; height: calc(100vh - 20px); }
.az266-sidebar {
  border: 22px solid transparent;
  border-image-source: url('../ui/panel-frame-v269.png');
  border-image-slice: 64;
  border-image-width: 28px;
  border-image-repeat: stretch;
  background:
    linear-gradient(180deg, rgba(3,17,34,.985), rgba(1,8,18,.995)),
    url('../ui/panel-texture.webp') center / 580px 580px repeat;
  box-shadow: inset 0 0 0 1px rgba(85,188,255,.12), 0 18px 38px rgba(0,0,0,.34);
  filter: none;
}
.az267-side-heading { margin: -5px -6px 8px; }
.az266-nav-title { min-height: 29px; margin-left: 0; margin-right: 0; }
.az266-content-frame {
  min-height: 760px;
  padding: 34px 24px 48px;
  border: 28px solid transparent;
  border-image-source: url('../ui/panel-frame-v269.png');
  border-image-slice: 64;
  border-image-width: 34px;
  border-image-repeat: stretch;
  background:
    linear-gradient(180deg, rgba(2,13,28,.91), rgba(1,8,18,.97)),
    radial-gradient(circle at 50% 4%, rgba(51,150,218,.13), transparent 32%),
    url('../ui/panel-texture.webp') center / 720px 720px repeat;
  box-shadow: inset 0 0 0 1px rgba(91,192,255,.13), 0 24px 48px rgba(0,0,0,.38);
  filter: none;
}
.az266-content-frame::before {
  inset: 10px;
  background:
    linear-gradient(90deg, rgba(0,6,15,.20), transparent 13%, transparent 87%, rgba(0,6,15,.20)),
    radial-gradient(circle at 50% 3%, rgba(68,177,242,.10), transparent 26%);
}
.az266-content-frame::after { left: 56px; right: 56px; top: 7px; height: 24px; opacity: .52; }
.azp-content { max-width: 1080px; padding-top: 6px; }
.azp-image-block { margin-bottom: 7px; }
.azp-image-block img { filter: drop-shadow(0 6px 12px rgba(0,0,0,.24)); }

/* Nagłówki starej prezentacji są już prawdziwymi, przekolorowanymi grafikami PNG. */
.azp-image-block img[width="367"][height="105"],
.azp-image-block img[width="300"][height="34"],
.azp-image-block img[width="500"][height="40"] {
  filter: drop-shadow(0 0 8px rgba(42,165,255,.22)) drop-shadow(0 6px 10px rgba(0,0,0,.26));
}

@media (max-width: 1180px) {
  :root { --az-side: 225px; }
  .az266-layout { width: min(1180px, calc(100% - 18px)); gap: 12px; }
  .az266-content-frame { padding: 28px 16px 42px; border-width: 24px; border-image-width: 30px; }
  .az266-sidebar { border-width: 19px; border-image-width: 25px; }
}


/* ===== ArezzoMT2 prezentacja v271 — czyste ramki bez czarnej otoczki ===== */
.az266-sidebar {
  border: 20px solid transparent;
  border-image-source: url('../ui/panel-frame-v271.png');
  border-image-slice: 64;
  border-image-width: 24px;
  border-image-repeat: stretch;
  background:
    linear-gradient(180deg, rgba(3,17,34,.985), rgba(1,8,18,.995)),
    url('../ui/panel-texture.webp') center / 580px 580px repeat;
  box-shadow: inset 0 0 0 1px rgba(85,188,255,.10), 0 18px 38px rgba(0,0,0,.22);
}
.az266-content-frame {
  border: 24px solid transparent;
  border-image-source: url('../ui/panel-frame-v271.png');
  border-image-slice: 64;
  border-image-width: 28px;
  border-image-repeat: stretch;
  padding: 30px 22px 46px;
  background:
    linear-gradient(180deg, rgba(2,13,28,.90), rgba(1,8,18,.96)),
    radial-gradient(circle at 50% 4%, rgba(51,150,218,.12), transparent 32%),
    url('../ui/panel-texture.webp') center / 720px 720px repeat;
  box-shadow: inset 0 0 0 1px rgba(91,192,255,.10), 0 24px 48px rgba(0,0,0,.24);
}
.az266-content-frame::before { inset: 8px; }
@media (max-width: 1180px) {
  .az266-sidebar { border-width: 18px; border-image-width: 22px; }
  .az266-content-frame { border-width: 21px; border-image-width: 25px; padding: 24px 14px 40px; }
}
@media (max-width: 920px) {
  .az266-content-frame { border-width: 18px; border-image-width: 21px; padding: 18px 6px 26px; }
}

/* ===== ArezzoMT2 prezentacja v272 — finalna naprawa ramek =====
   Przyczyna wcześniejszych odcięć: tło elementu było rysowane pod
   przezroczystymi pikselami border-image. background-clip: padding-box
   usuwa ciemne kliny i otoczki na narożnikach. */
.az266-sidebar,
.az266-content-frame {
  border-image-source: url('../ui/panel-frame-v272.png') !important;
  border-image-slice: 64 !important;
  border-image-repeat: stretch !important;
  border-image-outset: 0 !important;
  background-clip: padding-box !important;
  background-origin: padding-box !important;
  filter: none !important;
}

.az266-sidebar {
  border-width: 20px !important;
  border-image-width: 22px !important;
  box-shadow: inset 0 0 0 1px rgba(86,188,255,.10) !important;
}

.az266-content-frame {
  border-width: 23px !important;
  border-image-width: 26px !important;
  padding: 29px 21px 45px !important;
  box-shadow: inset 0 0 0 1px rgba(91,192,255,.10) !important;
}

/* Usunięcie dodatkowych ciemnych warstw dochodzących do graficznej krawędzi. */
.az266-content-frame::before {
  inset: 1px !important;
  border-radius: 0 !important;
}

@media (max-width:1180px) {
  .az266-sidebar {
    border-width: 18px !important;
    border-image-width: 20px !important;
  }
  .az266-content-frame {
    border-width: 20px !important;
    border-image-width: 23px !important;
    padding: 24px 14px 40px !important;
  }
}

@media (max-width:920px) {
  .az266-content-frame {
    border-width: 17px !important;
    border-image-width: 20px !important;
    padding: 18px 6px 26px !important;
  }
}


/* v273 — sekcja nagród posiada własną pełną ramę graficzną. */
.azp-image-block img[src*="07cf9195.png"] {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.28)) !important;
}

/* ArezzoMT2 v273 — wydajność i dostępność prezentacji. */
.az273-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.azp-content>.azp-image-block:nth-of-type(n+8){content-visibility:auto;contain-intrinsic-size:auto 520px}
.azp-image-block img{height:auto;max-width:100%}


/* ArezzoMT2 v277 — mniej kosztowne renderowanie na telefonach. */
@media (max-width:920px){
  .az266-bg{background-attachment:scroll}
  .azp-image-block img{filter:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #presentation-menu,.az266-top-button,.az266-nav-group a{transition:none!important}
}

/* ArezzoMT2 v278 — pewna nawigacja do kategorii.
   Wyłączamy wyłącznie zbyt agresywne pomijanie układu sekcji. Grafiki nadal
   korzystają z loading="lazy", więc nie są pobierane wszystkie naraz. */
.azp-content > .azp-image-block:nth-of-type(n+8) {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

/* ===== ArezzoMT2 prezentacja v279 — stabilna nawigacja i lżejsze ładowanie ===== */
html {
  scroll-padding-top: 12px;
  scrollbar-gutter: stable;
}

/* Kotwica nie zmienia wysokości prezentacji i ma jednoznaczną pozycję docelową. */
.az170-section-anchor {
  position: relative !important;
  top: 0 !important;
  width: 100%;
  height: 1px;
  margin-top: -1px;
  scroll-margin-top: 12px;
  visibility: hidden;
}

/* Podczas programowego skoku wyłączamy konkurujące przewijanie CSS. */
body.az279-navigation-active,
body.az279-navigation-active * {
  scroll-behavior: auto !important;
}

/* Wymiary z HTML rezerwują miejsce zanim grafika zostanie pobrana. */
.azp-image-block img {
  max-width: 100%;
  height: auto;
}

/* Wybrana kategoria jest ładowana od razu, reszta pozostaje natywnie lazy. */
.azp-image-block img.az279-section-priority {
  content-visibility: visible;
}

@media (max-width: 920px) {
  html { scrollbar-gutter: auto; }
  body.az266-menu-open { overscroll-behavior: contain; }
}