.galeria {
--gutter: clamp(1.25rem, 3vw, 3.5rem);
--kol: 4;
--odstep: clamp(0.6rem, 1vw, 1rem);
--kont: min(100vw - 2 * var(--gutter), 120rem);
--kafel: calc((var(--kont) - (var(--kol) - 1) * var(--odstep)) / var(--kol));
--ciecie: calc(var(--kafel) * 0.5);
--ciemny: var(--wp--preset--color--deep);
--jasny: var(--wp--preset--color--base);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
isolation: isolate;
overflow: hidden;
overflow: clip;
color: var(--wp--preset--color--contrast);
}
.galeria__kontener { width: var(--kont); margin-inline: auto; } .galeria__gora { padding-block: var(--wp--preset--spacing--60) clamp(2.25rem, 3.2vw, 3.25rem); }
.galeria__glowa {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--wp--preset--spacing--30);
}
.galeria__wstep { text-align: center; }
.galeria__badge {
width: fit-content;
margin: 0 auto clamp(1.1rem, 2vw, 2rem);
padding-left: 1rem;
border-left: 2px solid var(--wp--preset--color--accent);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
}
.galeria__tytul {
margin: 0;
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(3.25rem, 8.6vw, 10.5rem);
font-weight: 800;
line-height: 0.84;
letter-spacing: -0.035em;
text-transform: uppercase;
white-space: nowrap;
}
.galeria__litera { display: inline-block; }
.galeria__lead {
max-width: 40ch;
margin: clamp(1.1rem, 1.8vw, 1.75rem) auto 0;
font-size: clamp(1.1rem, 1.5vw, 1.55rem);
line-height: 1.38;
color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
}
.galeria__notatki { position: relative; display: flex; }
.galeria__notatki--lewe { flex-direction: column; align-items: flex-start; justify-self: start; padding: 12% 0 0 clamp(3rem, 9vw, 10rem); }
.galeria__notatki--prawe { align-items: stretch; gap: 1.6rem; justify-self: end; }
.galeria__notatka {
margin: 0;
font-size: 0.625rem;
font-weight: 500;
line-height: 1.95;
letter-spacing: 0.26em;
text-transform: uppercase;
white-space: nowrap;
}
.galeria__notatka::after {
content: "";
display: block;
width: 2.4rem;
height: 1px;
margin-top: 1.4rem;
background: currentColor;
opacity: 0.55;
transform-origin: left center;
}
.galeria__krzyzyk { position: relative; display: block; width: 1.75rem; height: 1.75rem; margin-bottom: 2.4rem; }
.galeria__krzyzyk::before,
.galeria__krzyzyk::after { content: ""; position: absolute; background: currentColor; opacity: 0.6; }
.galeria__krzyzyk::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.galeria__krzyzyk::after  { top: 50%; left: 0; right: 0; height: 1px; }
.galeria__pion {
display: block;
width: 1px;
min-height: 7rem;
background: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
transform-origin: center top;
} .galeria__filtry {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
width: var(--kont);
margin: clamp(1.75rem, 3vw, 2.75rem) auto 0;
}
.galeria__filtr {
min-height: 44px;
padding: 0.7rem clamp(1.1rem, 1.6vw, 1.6rem);
border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 26%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
color: var(--wp--preset--color--contrast);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.galeria__filtr[aria-pressed="true"] {
background: var(--wp--preset--color--contrast);
border-color: var(--wp--preset--color--contrast);
color: var(--jasny);
}
@media (hover: hover) {
.galeria__filtr[aria-pressed="false"]:hover { border-color: var(--wp--preset--color--contrast); }
} .galeria__siatka-pas {
position: relative;
z-index: 2;
isolation: isolate;
padding-bottom: var(--wp--preset--spacing--50);
}
.galeria__siatka-pas::before {
content: "";
position: absolute;
inset: var(--ciecie) 0 0;
z-index: -1;
background: var(--ciemny);
transform-origin: center top;
}
.galeria__siatka {
display: grid;
grid-template-columns: repeat(var(--kol), minmax(0, 1fr));
gap: var(--odstep);
margin: 0 auto;
padding: 0;
list-style: none;
}
.galeria__el { aspect-ratio: 1; width: 100%; }
.galeria__kafel {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
border-radius: 8px;
overflow: hidden;
background: #161c15;
cursor: zoom-in;
}
.galeria__kafel img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.1s var(--ease), filter 0.6s ease;
} .galeria__kafel::after {
content: "";
position: absolute;
inset: clamp(8px, 0.8vw, 12px);
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 5px;
pointer-events: none;
transition: border-color 0.5s ease, inset 0.5s var(--ease);
} .galeria__kafel::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 3.4rem;
height: 3.4rem;
margin: -1.7rem 0 0 -1.7rem;
border-radius: 50%;
background:
linear-gradient(var(--jasny), var(--jasny)) center / 16px 1.5px no-repeat,
linear-gradient(var(--jasny), var(--jasny)) center / 1.5px 16px no-repeat,
rgba(18, 22, 16, 0.45);
opacity: 0;
transform: scale(0.6);
transition: opacity 0.4s ease, transform 0.5s var(--ease);
pointer-events: none;
}
@media (hover: hover) {
.galeria__kafel:hover img { transform: scale(1.07); filter: brightness(0.86); }
.galeria__kafel:hover::after { border-color: rgba(255, 255, 255, 0.75); }
.galeria__kafel:hover::before { opacity: 1; transform: none; }
}
.galeria__kafel:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; } .galeria__cta {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 100%;
padding: clamp(1.4rem, 2.6vw, 2.75rem);
border: 1px solid color-mix(in srgb, var(--jasny) 10%, transparent);
border-radius: 8px;
background: #161c15;
color: var(--jasny);
}
.galeria__naroznik {
position: absolute;
width: 1.6rem;
height: 1.6rem;
border: 0 solid color-mix(in srgb, var(--jasny) 70%, transparent);
}
.galeria__naroznik--lg { left: 0.9rem; top: 0.9rem; border-left-width: 1px; border-top-width: 1px; }
.galeria__naroznik--pg { right: 0.9rem; top: 0.9rem; border-right-width: 1px; border-top-width: 1px; }
.galeria__naroznik--ld { left: 0.9rem; bottom: 0.9rem; border-left-width: 1px; border-bottom-width: 1px; }
.galeria__naroznik--pd { right: 0.9rem; bottom: 0.9rem; border-right-width: 1px; border-bottom-width: 1px; }
.galeria__cta-tytul {
margin: 0;
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(1rem, 1.35vw, 1.4rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.galeria__cta-btn { border-radius: 6px; padding-inline: 2.4rem; }
.galeria__wiecej-wrap { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.galeria__wiecej { border-radius: 6px; padding-inline: 3.2rem; } .galeria__rekwizyty { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.galeria__rekwizyt { position: absolute; height: auto; }
.galeria__rekwizyt--lewy {
width: clamp(130px, 13vw, 250px);
top: 3%;
left: -2.5%; filter: saturate(0.4) brightness(0.92) drop-shadow(0 24px 30px rgba(20, 22, 18, 0.25)); transform: rotate(16deg) scaleX(-1);
rotate: calc(var(--galeria-p, 0.5) * 16deg - 8deg);
}
.galeria__rekwizyt--prawy {
width: clamp(60px, 5.25vw, 105px);
bottom: 5%;
right: 2%;
filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.45));
transform: rotate(28deg);
rotate: calc(var(--galeria-p, 0.5) * -22deg + 11deg);
} .galeria__pion,
.galeria__notatka,
.galeria__notatka::after,
.galeria__krzyzyk::before,
.galeria__krzyzyk::after,
.galeria__filtr,
.galeria__kafel,
.galeria__cta,
.galeria__naroznik,
.galeria__siatka-pas::before { will-change: transform, opacity; backface-visibility: hidden; }
.galeria__litera:nth-child(2) { --l: 1; }
.galeria__litera:nth-child(3) { --l: 2; }
.galeria__litera:nth-child(4) { --l: 3; }
.galeria__litera:nth-child(5) { --l: 4; }
.galeria__litera:nth-child(6) { --l: 5; }
.galeria__litera:nth-child(7) { --l: 6; }
.galeria__litera:nth-child(8) { --l: 7; }
.galeria__litera:nth-child(9) { --l: 8; }
.galeria__litera:nth-child(10) { --l: 9; }
.js .galeria__badge { opacity: 0; filter: blur(8px); transition: opacity 0.9s ease, filter 0.9s ease; }
.js .galeria__litera {
opacity: 0;
transform: translate3d(0, 0.5em, 0) scale(0.92);
filter: blur(18px);
transition: opacity 0.9s ease, transform 1.2s var(--ease), filter 1.1s ease;
transition-delay: calc(0.12s + var(--l, 0) * 0.05s);
}
.js .galeria__lead { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(10px); transition: opacity 1s ease 0.6s, transform 1.1s var(--ease) 0.6s, filter 1s ease 0.6s; }
.js .galeria__notatka { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 0.6s ease 0.8s, clip-path 1.1s var(--ease) 0.8s; }
.js .galeria__notatka::after { transform: scaleX(0); transition: transform 0.9s var(--ease) 1.2s; }
.js .galeria__pion { transform: scaleY(0); transition: transform 1.3s var(--ease) 0.5s; }
.js .galeria__krzyzyk::before { transform: scaleY(0); transition: transform 0.9s var(--ease) 0.6s; }
.js .galeria__krzyzyk::after { transform: scaleX(0); transition: transform 0.9s var(--ease) 0.7s; }
.galeria__filtr:nth-child(2) { --f: 1; }
.galeria__filtr:nth-child(3) { --f: 2; }
.galeria__filtr:nth-child(4) { --f: 3; }
.galeria__filtr:nth-child(5) { --f: 4; }
.galeria__filtr:nth-child(6) { --f: 5; }
.js .galeria__filtr {
opacity: 0;
transform: translate3d(0, 18px, 0) scale(0.94);
transition: opacity 0.7s ease, transform 0.9s var(--ease), background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
transition-delay: calc(0.75s + var(--f, 0) * 0.07s), calc(0.75s + var(--f, 0) * 0.07s), 0s, 0s, 0s;
}
.js .galeria__rekwizyt { opacity: 0; translate: 0 40px; transition: opacity 1.4s ease 0.3s, translate 1.8s var(--ease) 0.3s; }
.galeria__gora.is-aktywna .galeria__badge,
.galeria__gora.is-aktywna .galeria__litera,
.galeria__gora.is-aktywna .galeria__lead { opacity: 1; transform: none; filter: none; }
.galeria__gora.is-aktywna .galeria__notatka { opacity: 1; clip-path: inset(0 0 0 0); }
.galeria__gora.is-aktywna .galeria__notatka::after,
.galeria__gora.is-aktywna .galeria__pion,
.galeria__gora.is-aktywna .galeria__krzyzyk::before,
.galeria__gora.is-aktywna .galeria__krzyzyk::after { transform: none; }
.galeria__gora.is-aktywna .galeria__filtr { opacity: 1; transform: none; }
.galeria.is-widoczna .galeria__rekwizyt { opacity: 1; translate: 0 0; }
.js .galeria__siatka-pas::before { transform: scaleY(0); transition: transform 1.5s var(--ease); }
.galeria__siatka-pas.is-aktywna::before { transform: none; }
.js .galeria__el {
opacity: 0;
transform: translate3d(0, 34px, 0) scale(0.96);
filter: blur(10px);
transition: opacity 0.8s ease, transform 1s var(--ease), filter 0.9s ease;
transition-delay: calc(var(--k, 0) * 0.06s);
}
.js .galeria__kafel img { transform: scale(1.22); }
.galeria__siatka-pas.is-aktywna .galeria__el.is-pokazany { opacity: 1; transform: none; filter: none; }
.galeria__siatka-pas.is-aktywna .galeria__el.is-pokazany .galeria__kafel img { transform: none; transition-delay: calc(var(--k, 0) * 0.06s); }
.galeria__siatka-pas.is-po-wejsciu .galeria__el .galeria__kafel img { transition-delay: 0s; }
.galeria__siatka-pas.is-aktywna .galeria__el.is-znika { opacity: 0; transform: scale(0.94); filter: blur(8px); transition-duration: 0.28s; transition-delay: 0s; }
@media (hover: hover) {
.galeria__siatka-pas.is-po-wejsciu .galeria__kafel:hover img { transform: scale(1.07); }
}
.js .galeria__naroznik { opacity: 0; transform: scale(0.4); transition: opacity 0.6s ease, transform 0.9s var(--ease); transition-delay: calc(var(--k, 0) * 0.06s + 0.4s); }
.galeria__siatka-pas.is-aktywna .galeria__el.is-pokazany .galeria__naroznik { opacity: 1; transform: none; }
@media (max-width: 1100px) {
.galeria { --kol: 3; }
.galeria__glowa { grid-template-columns: minmax(0, 1fr); }
.galeria__notatki { display: none; }
}
@media (max-width: 720px) {
.galeria { --kol: 2; }
.galeria__tytul { font-size: clamp(2.4rem, 12.4vw, 4rem); }
.galeria__filtry { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: none; }
.galeria__filtry::-webkit-scrollbar { display: none; }
.galeria__kafel::after { inset: 6px; } .galeria__el--cta { aspect-ratio: auto; } .galeria__cta {
justify-content: center;
align-items: stretch;
gap: 16px;
min-height: 100%; padding: 26px 22px;
}
.galeria__naroznik { width: 13px; height: 13px; }
.galeria__naroznik--lg, .galeria__naroznik--ld { left: 8px; }
.galeria__naroznik--pg, .galeria__naroznik--pd { right: 8px; }
.galeria__naroznik--lg, .galeria__naroznik--pg { top: 8px; }
.galeria__naroznik--ld, .galeria__naroznik--pd { bottom: 8px; }
.galeria__cta-tytul {
font-size: 0.8125rem;
line-height: 1.3;
letter-spacing: 0.04em;
text-wrap: balance;
} .galeria__cta-btn {
align-self: stretch;
justify-content: center;
width: auto;
min-height: 44px;
height: auto;
padding: 10px 12px;
font-size: 0.6875rem;
letter-spacing: 0.04em;
white-space: normal;
text-align: center;
}
.galeria__cta-btn .toda-btn__label { white-space: normal; }
.galeria__cta-btn .toda-btn__arrow { display: none; }
.galeria__wiecej { width: auto; padding-inline: 2rem; }
.galeria__rekwizyt--lewy { width: 110px; top: 1%; left: -8%; }
.galeria__rekwizyt--prawy { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.galeria *, .galeria *::before, .galeria *::after { transition-duration: 0.001ms !important; transition-delay: 0s !important; }
.galeria__rekwizyt { rotate: none; }
}