/* Wersja 4 strony głównej: kremowy panel nad zdjęciem, wysunięty od góry strony ponad pasek menu. */
#gl-home{position:relative;--panel-l:5.3%;--panel-w:max(340px,33.8%);--krem:#f1ede5}
/* Pasek menu: nawigacja w prawej części, obok panelu. */
#gl-home .v3-naglowek header{grid-template-columns:calc(var(--panel-l) + var(--panel-w)) 1fr}
#gl-home .v3-naglowek header > nav.gl-menu{grid-column:2;justify-content:center}
/* Hero: zdjęcie na całą szerokość, panel absolutnie, od górnej krawędzi strony do dołu hero. */
#gl-home .v4-hero{position:relative;display:flex;align-items:stretch;min-height:calc(100svh - var(--naglowek));background:var(--grafit)}
/* Pasek na lewo od panelu: ta sama fotografia zakotwiczona do lewej (kamienna ściana z lewej krawędzi zdjęcia),
   żeby nie było pustego grafitu (prośba Janka 01.11). Główne zdjęcie z Martą leży nad nią, od 22% szerokości. */
#gl-home .v4-hero:before{content:"";position:absolute;inset:0;right:auto;width:calc(var(--panel-l) + 30%);
  background:url(/img/hero-foto.webp?v=8576771608) left 22% / cover no-repeat;filter:grayscale(1)}
/* Zdjęcie od ~22% szerokości: zaczyna się pod panelem, a Marta stoi wyraźnie na prawo od niego. */
.v4-hero__foto{position:absolute;top:0;bottom:0;left:22%;right:0}
.v4-hero__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1)}
/* Panel w przepływie (flex): hero rośnie, gdy treść panelu jest wyższa niż ekran. */
#gl-home .v4-panel{position:relative;z-index:3;flex:none;margin-left:var(--panel-l);width:var(--panel-w);margin-top:calc(-1 * var(--naglowek));   /* tło panelu od góry strony (na całą wysokość) */
  display:flex;flex-direction:column;padding:calc(var(--naglowek) + clamp(40px,8vh,90px)) clamp(28px,3.4vw,64px) clamp(44px,6vh,64px)   /* treść (logo) zaczyna się poniżej paska menu */;background:var(--krem);color:var(--grafit)}
.v4-logo{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--grafit);margin:0 auto clamp(36px,7vh,80px)}
.v4-logo img{width:clamp(120px,10.4vw,200px);height:auto}
.v4-logo__nazwa{margin-top:clamp(14px,1.6vh,22px);font:400 clamp(30px,2.75vw,52px)/1 Georgia,"Times New Roman",serif;font-variant:small-caps;letter-spacing:.08em;color:var(--grafit)}
.v4-logo__kreska{display:block;position:relative;width:clamp(190px,17vw,330px);height:1px;margin:clamp(12px,1.6vh,20px) 0 clamp(10px,1.3vh,15px);
  background:linear-gradient(90deg,var(--zloto) 0 44%,transparent 44% 56%,var(--zloto) 56%)}
.v4-logo__kreska:after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;background:var(--zloto);transform:translate(-50%,-50%) rotate(45deg)}
.v4-logo__podpis{font:400 clamp(11px,.92vw,15px)/1 Georgia,serif;letter-spacing:.24em;text-transform:uppercase;color:#7a6236}
.v4-logo:focus-visible{outline:2px solid var(--grafit);outline-offset:6px}
#gl-home .v4-tytul{margin:0;font:400 clamp(36px,3.15vw,62px)/1.12 Georgia,serif;color:var(--grafit)}
#gl-home .v4-tytul em{font-style:italic;color:var(--grafit)}
#gl-home .v4-obszary{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:11px;margin-top:clamp(24px,4vh,44px);padding:0;border:0}
.v4-obszary p{margin:0 0 6px;font:400 14px/1.4 Arial,sans-serif;letter-spacing:.5px;color:var(--grafit)}
#gl-home .v4-obszary a{display:block;min-height:0;border:1px solid rgba(36,37,39,.75);padding:11px 12px;text-align:center;color:var(--grafit);
  text-decoration:none;font:400 14px/1.35 Georgia,serif;letter-spacing:1.4px;text-transform:none}   /* wielkie litery w tekście, łączniki („i”) małe */
#gl-home .v4-obszary a:hover,#gl-home .v4-obszary a:focus-visible{background:var(--grafit);color:var(--krem);border-color:var(--grafit)}
#gl-home .v4-obszary a:focus-visible{outline:2px solid var(--grafit);outline-offset:2px}
/* Strzałka w przepływie panelu (na dole, ale zawsze pod przyciskami, bez nachodzenia przy niskim ekranie). */
.v4-dalej{position:relative;display:block;flex:none;width:28px;height:28px;margin:auto auto 0;top:clamp(12px,3vh,36px)}
#gl-home .v4-obszary{margin-bottom:24px}
.v4-dalej:after{content:"";position:absolute;inset:22%;border:solid var(--grafit);border-width:0 1px 1px 0;transform:rotate(45deg)}
.v4-dalej:focus-visible{outline:1px solid var(--grafit);outline-offset:3px}
@media(max-width:860px){
  #gl-home .v3-naglowek header{grid-template-columns:1fr}
  #gl-home .v3-naglowek header > nav.gl-menu{grid-column:1}
  #gl-home .v4-hero{display:flex;flex-direction:column;min-height:0}
  #gl-home .v4-hero:before{display:none}
  .v4-hero__foto{position:relative;left:auto;right:auto;order:2;display:block;height:62vh;min-height:360px}
  .v4-hero__foto img{position:absolute}
  #gl-home .v4-panel{position:relative;left:auto;top:auto;width:auto;margin:0;padding:40px 20px 56px}
  .v4-logo{margin-bottom:36px}
}