.realizacje {
width: 100%;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--wp--preset--color--base);
overflow: hidden;
}
.realizacje::backdrop {
background: color-mix(in srgb, #0d110c 92%, transparent);
backdrop-filter: blur(6px);
}
.realizacje[open] { display: flex; }
.realizacje__okno {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
width: min(100%, 92rem);
height: 100%;
margin-inline: auto;
padding: clamp(1rem, 2.4vw, 2rem) clamp(1rem, 3vw, 2.5rem) calc(clamp(1rem, 2.4vw, 2rem) + env(safe-area-inset-bottom, 0px));
gap: clamp(0.75rem, 1.6vw, 1.25rem);
pointer-events: auto;
}
.realizacje__glowa {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: end;
gap: 0.25rem 1.5rem;
}
.realizacje__badge {
grid-column: 1 / -1;
margin: 0;
font-size: 0.625rem;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: 0.7;
}
.realizacje__tytul {
margin: 0;
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(1.4rem, 2.6vw, 2.4rem);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--wp--preset--color--base);
}
.realizacje__licznik {
margin: 0;
font-size: 0.75rem;
letter-spacing: 0.18em;
font-variant-numeric: tabular-nums;
opacity: 0.75;
}
.realizacje__zamknij {
position: relative;
width: 48px;
height: 48px;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent);
border-radius: 50%;
background: none;
cursor: pointer;
transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.realizacje__zamknij span::before,
.realizacje__zamknij span::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 1.5px;
background: var(--wp--preset--color--base);
transform: translate(-50%, -50%) rotate(45deg);
}
.realizacje__zamknij span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.realizacje__scena {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
gap: clamp(0.5rem, 1.5vw, 1.25rem);
min-height: 0;
user-select: none;
}
.realizacje__kadr {
position: relative;
min-height: 0;
margin: 0;
touch-action: pan-y;
}
.realizacje__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.realizacje__foto.is-zmiana { opacity: 0; transform: scale(0.985); }
.realizacje__strzalka {
width: 52px;
height: 52px;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent);
border-radius: 50%;
background: none;
color: var(--wp--preset--color--base);
font-size: 1.1rem;
align-self: center;
cursor: pointer;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.realizacje__szyna {
display: flex;
gap: 0.5rem;
margin: 0;
padding: 0 0 0.25rem;
list-style: none;
overflow-x: auto;
scrollbar-width: thin;
justify-content: safe center;
}
.realizacje__miniatura {
flex: none;
width: clamp(56px, 6vw, 84px);
aspect-ratio: 1;
padding: 0;
border: 1px solid transparent;
border-radius: 3px;
overflow: hidden;
background: none;
opacity: 0.45;
cursor: pointer;
transition: opacity 0.3s ease, border-color 0.3s ease;
}
.realizacje__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.realizacje__miniatura[aria-current="true"] {
opacity: 1;
border-color: var(--wp--preset--color--base);
}
@media (hover: hover) {
.realizacje__zamknij:hover { border-color: var(--wp--preset--color--base); transform: rotate(90deg); }
.realizacje__strzalka:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.realizacje__miniatura:hover { opacity: 0.8; }
}
@media (max-width: 620px) {
.realizacje__scena { grid-template-columns: minmax(0, 1fr); }
.realizacje__strzalka { display: none; }
.realizacje__szyna { justify-content: flex-start; padding-bottom: 3rem; }
}
body.realizacje-otwarte { overflow: hidden; }