:root{ --logo-col: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));  --footer-nudge: 4px;  --pad:16px;  --gap:12px; --r:999px; --max:1200px; color-scheme: light dark; }
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; background: Canvas; color: CanvasText; }
.container{ max-width: var(--max); margin:0 auto; padding-left: calc(var(--pad) + env(safe-area-inset-left)); padding-right: calc(var(--pad) + env(safe-area-inset-right)); padding-top:16px; padding-bottom:16px; }
header.container{ max-width: var(--max); margin:0 auto; padding-left: calc(var(--pad) + env(safe-area-inset-left)); padding-right: calc(var(--pad) + env(safe-area-inset-right)); padding-top:16px; padding-bottom:16px; }
h1{ margin: 4px 0; font-size: clamp(22px, 3vw, 30px); letter-spacing:.2px; }
.langswitch{ display:flex; gap:8px; align-items:center; margin-left:auto; }
.langswitch a{
  --bd: color-mix(in oklab, currentColor 15%, transparent);
  --bg: color-mix(in oklab, currentColor 4%, transparent);
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; min-width:46px; padding:0 12px; border-radius: 999px;
  border:1px solid var(--bd); background: var(--bg); text-decoration:none;
  font-weight:500; font-size:14px; letter-spacing:.2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 0 0 1px color-mix(in oklab, white 6%, transparent);
  transition: transform .07s ease, background .15s ease, border-color .15s ease;
}
.langswitch a:hover{ transform: translateY(-1px); }
.langswitch a:focus-visible{ outline: 2px solid color-mix(in oklab, currentColor 40%, transparent); outline-offset:2px; }
.langswitch a[aria-current="page"]{
  --bd: color-mix(in oklab, currentColor 30%, transparent);
  --bg: color-mix(in oklab, currentColor 10%, transparent);
}
.grid{ display:grid; gap: var(--gap); grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width:1199.98px){ .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width:899.98px){  .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:599.98px){  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tile{ display:block; position:relative; overflow:hidden; border-radius: 14px; background:#000; aspect-ratio: 1/1; }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.section-text{
  margin: 18px 0; padding: 16px 18px; text-align:center;
  border:1px solid color-mix(in oklab, currentColor 12%, transparent);
  border-radius: 14px; background: color-mix(in oklab, currentColor 3%, transparent);
  font-size: clamp(16px, 2.2vw, 18px);
}


/* ---- media corner/border artifact fix ---- */
a, a:focus, a:focus-visible { outline: none !important; }
a, .tile, .tile * { -webkit-tap-highlight-color: transparent; }
.tile { box-shadow: none !important; overflow: hidden; border-radius: 14px; }
.tile img, .tile video, picture, figure {
  border: 0 !important; outline: none !important; box-shadow: none !important;
  border-radius: inherit !important; background: transparent !important; display: block;
}
/* Hide any accidental fallback text in empty tiles */
.tile{ color: transparent; }


/* === PATCH v6 === */
/* Header container uses same side padding as .container (16px) */


/* Kill any borders/outlines/shadows around tiles & media (both themes) */
.grid .tile, .grid .tile *, .grid picture, .grid figure {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Make tile background transparent in light mode so no grey halo shows */
@media (prefers-color-scheme: light){
  .grid .tile{ background: transparent !important; }
}
@media (prefers-color-scheme: dark){
  .grid .tile{ background: #000 !important; }
}

/* Tighten logo card so image left aligns visually with first tile edge */
.logo-card{ padding-left: 8px; padding-right: 12px; }


/* === PATCH v7 === */
/* Center footer text */


/* Responsive column count variable aligned with .grid breakpoints */
:root{ --logo-col: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));  --footer-nudge: 4px;  --pad:16px;  --cols:6; }
@media (max-width:1199.98px){ :root{ --logo-col: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));  --footer-nudge: 4px;  --pad:16px;  --cols:4; } }
@media (max-width:899.98px){  :root{ --logo-col: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));  --footer-nudge: 4px;  --pad:16px;  --cols:3; } }
@media (max-width:599.98px){  :root{ --logo-col: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));  --footer-nudge: 4px;  --pad:16px;  --cols:2; } }

/* Logo card matches one tile's width; height a bit lower than square */
.site-topbar .logo-card{ width: var(--logo-col); max-width: var(--logo-col); aspect-ratio: 1 / 0.34; box-sizing:border-box; }
.site-topbar .logo-card img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; object-position:center; transform: scale(.86); }


/* === PATCH v8 === */
/* Make logo tile very low (still fits the logo) */
.site-topbar .logo-card{ width: var(--logo-col); max-width: var(--logo-col); aspect-ratio: 1 / 0.34; box-sizing:border-box; }
.site-topbar .logo-card img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; object-position:center; transform: scale(.86); }

/* Footer left-aligned with container edge */


/* === PATCH v11 === */
.site-topbar .logo-card{ width: var(--logo-col); max-width: var(--logo-col); aspect-ratio: 1 / 0.34; box-sizing:border-box; } /* jeszcze niższe */
.site-topbar .logo-card img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; object-position:center; transform: scale(.86); }


/* === PATCH v12 === */



/* Logo: ultra-wide, central crop */
.site-topbar .logo-card{ width: var(--logo-col); max-width: var(--logo-col); aspect-ratio: 1 / 0.34; box-sizing:border-box; }
.site-topbar .logo-card img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; object-position:center; transform: scale(.86); }

/* v13 logo scale */
.site-topbar .logo-card img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; object-position:center; transform: scale(.86); }


/* === PATCH v16 === */
/* Footer EXACTLY same box model as .container */
footer.container{
  max-width: var(--max);
  margin: 22px auto 10px;
  padding-left: calc(var(--pad) + env(safe-area-inset-left));
  padding-right: calc(var(--pad) + env(safe-area-inset-right));
  font-size:13px;
  color: color-mix(in oklab, currentColor 60%, transparent);
  text-align:left;
}


/* === PATCH #2: logo not clipping in Chrome/Firefox === */
.site-topbar .logo-card{ 
  overflow: visible;               /* zapobiega clipowaniu w niektórych silnikach */
  padding-bottom: 12px;            /* trochę większy margines pod logiem */
  box-sizing: border-box;
}

.site-topbar .logo-card img{
  display:block;
  height:auto;                     /* nie wymuszaj sztywnej wysokości */
  max-height: 64px;                /* kontrola wielkości zamiast height */
  width:auto;
  object-fit: contain;             /* zachowaj całe logo */
}

/* na mniejszych ekranach */
@media (max-width: 767.98px){
  .site-topbar .logo-card img{ max-height: 56px; }
}