/* HOME: geometria według referencji 2560 × 1440. */
:root { color-scheme: dark; --orange:#ff8100; --gold:#da8e24; }
* { box-sizing:border-box; }
body { margin:0; background:#000; color:var(--orange); font-family:Arial,Helvetica,sans-serif; }
.home-scene { position:relative; width:100%; aspect-ratio:16/9; min-height:0; background:url('../assets/png/home-tlo-nieprzezroczyste.png') center/cover no-repeat; }
.site-header { position:absolute; z-index:2; top:3.5%; left:7%; right:7%; }
.menu { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.menu li { display:flex; align-items:center; }
.menu li::before { content:'/'; padding-inline:.36em; color:var(--gold); }
.menu li:last-child::after { content:'/'; padding-left:.36em; }
.menu a { color:var(--gold); text-transform:uppercase; text-decoration:none; font-size:clamp(12px,1.43vw,36px); line-height:1.4; padding-block:8px; white-space:nowrap; }
.menu li:first-child a { color:#fff; }
.menu a:hover { color:#fff; }
.home img { position:absolute; display:block; height:auto; }
.emblemat { width:30.6%; left:34.7%; top:9%; }
h1 { position:absolute; top:23.8%; left:27%; width:46%; margin:0; text-align:center; font-weight:400; text-transform:uppercase; font-size:1.05vw; line-height:1.3; }
.column { width:6.42%; top:21.6%; }
.column-left { left:20.45%; }
.column-right { right:20.45%; }
.cross { width:16.7%; left:41.65%; top:31.1%; }
.motto { position:absolute; top:79.7%; left:29%; width:42%; margin:0; text-align:center; text-transform:uppercase; font-size:1.85vw; line-height:1.3; }
.base { width:81.3%; left:9.35%; top:89.6%; }
:focus-visible { outline:2px solid white; outline-offset:4px; }
.skip-link { position:absolute; left:12px; top:8px; z-index:5; background:#000; color:white; padding:10px; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
@media (min-width:701px) and (max-width:1100px) {
 .site-header { top:2%; left:3%; right:3%; }
 .menu a { font-size:1.5vw; }
 h1 { font-size:1.25vw; left:23%; width:54%; }
}
/* W pionie zmieniamy rozmieszczenie, zachowując proporcje każdego SVG. */
@media (max-width:900px) {
 .home-scene { aspect-ratio:auto; min-height:820px; min-height:max(820px,100svh); padding-top:18px; background-position:center top; }
 .site-header { position:relative; top:auto; left:auto; right:auto; margin:0 12px; }
 .menu { gap:0; }
 .menu a { font-size:13px; min-height:44px; display:flex; align-items:center; padding-block:8px; }
 .menu li::before { padding-inline:5px; }
 .home { position:relative; height:690px; margin-top:20px; }
 .emblemat { top:0; width:72%; left:14%; }
 h1 { top:88px; left:15%; width:70%; font-size:clamp(12px,3.2vw,18px); }
 .home .column { top:180px; width:auto; height:370px; }
 .column-left { left:5%; }
 .column-right { right:5%; }
 .cross { top:192px; width:40%; left:30%; }
 .motto { top:465px; left:15%; width:70%; font-size:clamp(16px,4.2vw,24px); }
 .base { top:550px; width:94%; left:3%; }
}
@media (min-width:480px) and (max-width:900px) {
 .home { height:850px; }
 h1 { top:125px; }
 .home .column { top:200px; height:510px; }
 .cross { top:220px; }
 .motto { top:630px; }
 .base { top:710px; }
}

@media (min-width:701px) and (max-width:900px) {
 .home { height:900px; }
 h1 { top:155px; }
 .home .column { top:220px; height:560px; }
 .cross { top:250px; width:32%; left:34%; }
 .motto { top:700px; }
 .base { top:780px; }
}

/* Odnośnik zachowuje dotychczasową geometrię krzyża na każdym ekranie. */
a.cross { position:absolute; display:block; cursor:pointer; text-decoration:none; }
.home a.cross img { position:static; width:100%; height:auto; transition:filter .18s ease; }
.cross-label { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px; color:var(--gold); font-size:13px; line-height:1.4; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .18s ease; }
a.cross:focus-visible img { filter:brightness(1.12); }
a.cross:focus-visible .cross-label { opacity:1; }
@media(hover:hover) {
 a.cross:hover img { filter:brightness(1.12); }
 a.cross:hover .cross-label { opacity:1; }
}
@media(prefers-reduced-motion:reduce) {
 .home a.cross img, .cross-label { transition:none; }
}