/* Base styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #ffffff; /* white */
    color: #374151; /* gray-700 - Default body text color */
    overflow-x: hidden; /* Prevent horizontal scrolling */
     /* CSS variables for mouse position (used in interactive gradient) */
     --mouse-x: 50;
     --mouse-y: 50;
}

/* Header Styling */
header {
    position: sticky; top: 0; z-index: 50; /* Sticky header */
    background-color: #ffffff; border-bottom: 1px solid #e5e7eb; /* White background, bottom border */
}

/* Smooth Scrolling & Overscroll Behavior */
html {
    scroll-behavior: smooth;
    overscroll-behavior-y: contain; /* Prevent body scroll bounce on top/bottom */
}

header svg, footer svg:not(.social-icon-link svg) { /* Exclude social icons from general footer rule */
     flex-shrink: 0;
}

/* Primary Button Style */
.btn-primary {
    background-color: #111827; color: white;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 9999px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.btn-primary:hover { background-color: #1f2937; transform: translateY(-1px); box-shadow: 0 6px 10px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.btn-primary:focus { outline: 2px solid #4f46e5; outline-offset: 2px; background-color: #1f2937; }

/* Gradient Button Styling */
.btn-gradient {
    background-image: linear-gradient(to right, #4f46e5, #7c3aed, #0d9488); background-size: 200% auto;
    transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease; color: white;
    border-radius: 9999px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.btn-gradient:hover { background-position: right center; transform: translateY(-1px); box-shadow: 0 6px 10px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.btn-gradient:focus { outline: 2px solid #4f46e5; outline-offset: 2px; background-position: right center; transform: translateY(-1px); box-shadow: 0 6px 10px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

/* Service Box Styling */
.service-box {
    position: relative;
    border-radius: 0.75rem; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
    border: 1px solid #e5e7eb; background-clip: padding-box;
     background-image: linear-gradient(to bottom right, #f5f3ff, #ffffff);
     cursor: pointer;
}
.service-box:hover, .service-box:focus-within { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.07); border-color: #d1d5db; outline: none; }

/* Animated Heading Styles */
.animated-heading {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}
.animated-heading.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Logo Hover Effect */
.logo-link svg path { transition: fill 0.4s ease; }
.logo-link:hover svg path, .logo-link:focus svg path { fill: url(#logoGradient); }
footer .logo-link:hover svg path, footer .logo-link:focus svg path { fill: url(#logoGradientFooter); }
.logo-link span { transition: color 0.4s ease; }
.logo-link:focus { outline: none; }

/* Service Icon Styling */
.icon-circle { transition: transform 0.3s ease; }
.icon-circle img { color: #1f2937; }
.service-box:hover .icon-circle, .service-box:focus-within .icon-circle { transform: scale(1.1); }

/* Cursor Trail Styling */
.cursor-trail-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: linear-gradient(to right, #4f46e5, #7c3aed, #0d9488); border-radius: 50%; pointer-events: none; z-index: 9999; opacity: 0.8; transform: translate(-50%, -50%) scale(1); transition: opacity 0.4s ease-out, transform 0.4s ease-out; will-change: transform, opacity; }
.cursor-trail-dot.fading-out { opacity: 0; transform: translate(-50%, -50%) scale(0); }
@media (hover: none) { .cursor-trail-dot { display: none; } }

/* Interactive Gradient Text */
.interactive-gradient-text {
    background-image: linear-gradient(90deg, #4f46e5, #7c3aed, #0d9488);
    background-size: 400% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    transition: background-position 0.1s linear;
    will-change: background-position;
    background-position: calc(var(--mouse-x) * 1%) calc(var(--mouse-y) * 1%);
}
@supports not (background-clip: text) {
    .interactive-gradient-text { color: #4f46e5; }
}

/* Section Z-index & Sticky */
#cytat {
    background-color: white; text-align: center; position: sticky; top: 0;
    z-index: 40; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
}
#cytat .container {
    position: relative;
    z-index: 20;
    padding-bottom: 8rem;
}
#about, #portfolio, #offer, #contact { position: relative; z-index: 45; }

/* Specific section styles */
#about { background-color: white; padding-top: 0; padding-bottom: 4rem; }
 @media (min-width: 768px) { #about { padding-bottom: 6rem; } }
#portfolio { background-color: #f9fafb; }
#offer { background-color: white; }
#contact { background-color: #f1f5f9; }

/* Video Container Styling */
#about-video-container { transform-origin: center center; will-change: transform; }

/* Scroll Down Icon Animation */
@keyframes bounce-slow { 0%, 100% { transform: translateY(-15%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
.animate-bounce-slow { animation: bounce-slow 2s infinite; }

/* Desktop Navigation Links */
#desktop-nav a { padding: 0.5rem 0.25rem; border: none; border-radius: 0; transition: color 0.2s ease; color: #1f2937; font-weight: 500; text-transform: uppercase; font-size: 0.875rem; background: none; }
#desktop-nav a:hover { color: #9333ea; background: none; }
#desktop-nav a.nav-link-active { color: #9333ea; font-weight: 600; background: none; }
#desktop-nav a:focus { outline: 2px solid #9333ea; outline-offset: 2px; color: #9333ea; }
#desktop-nav a.nav-link-active:focus { outline: 2px solid #7e22ce; color: #7e22ce; }

/* --- ZMIANY DLA MASONRY GRID --- */
#masonry-grid {
    column-count: 2;
    column-gap: 0.25rem; /* Zmniejszony odstęp poziomy (4px) */
    font-size: 0;
    padding: 0 0.125rem; /* Zmniejszony padding boczny (2px) */
}
@media (min-width: 768px) {
    #masonry-grid { column-count: 3; }
}
@media (min-width: 1024px) {
    #masonry-grid { column-count: 4; }
}

.masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 0.25rem; /* Zmniejszony odstęp pionowy (4px) */
    break-inside: avoid;
    position: relative; /* Potrzebne dla overlay */
    overflow: hidden;
    cursor: pointer;
    background-color: #e5e7eb;
    transition: opacity 0.3s ease-in-out;
    min-height: 100px;
    vertical-align: top;
    font-size: 1rem;
}
/* --- KONIEC ZMIAN DLA MASONRY GRID --- */

.masonry-item:hover, .masonry-item:focus-within {
    opacity: 0.85;
}
.masonry-item:focus { outline: none; }
.masonry-item:focus-visible {
    outline: 3px solid #4f46e5;
    outline-offset: 2px;
    opacity: 1;
}
.masonry-item img, .masonry-item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    vertical-align: middle;
    position: relative; /* Ustawienie dla z-index */
    z-index: 1;        /* Obraz/wideo jest pod nakładką */
}

/* --- NOWE STYLE DLA OVERLAY --- */
.masonry-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* Nakładka jest niewidoczna */
    z-index: 2; /* Nakładka jest nad obrazem/wideo */
    cursor: pointer; /* Zachowaj kursor wskazujący na klikalność (dla lightboxa) */
}
/* --- KONIEC STYLI DLA OVERLAY --- */

/* Lightbox Styles */
#lightbox { will-change: opacity; }
#lightbox-content video, #lightbox-content img { border-radius: 0.5rem; }
#lightbox-prev, #lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 103; padding: 1rem; color: white; opacity: 0.7; transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; background-color: rgba(0,0,0,0.2); border-radius: 9999px; cursor: pointer; }
#lightbox-prev { left: 1rem; }
#lightbox-next { right: 1rem; }
#lightbox-prev:hover, #lightbox-next:hover, #lightbox-prev:focus, #lightbox-next:focus { opacity: 1; background-color: rgba(0,0,0,0.4); outline: none; }
#lightbox-prev:focus-visible, #lightbox-next:focus-visible { outline: 2px solid white; outline-offset: 2px; }
#lightbox-prev svg, #lightbox-next svg { width: 2rem; height: 2rem; }

/* Language Switcher Style */
.language-switcher button { padding: 0.5rem 0.25rem; border-radius: 0; transition: color 0.2s ease; color: #1f2937; font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; min-width: 2.5rem; text-align: center; border: none; background: none; }
.language-switcher button:hover { color: #9333ea; background: none; }
.language-switcher button:focus { outline: 2px solid #9333ea; outline-offset: 2px; color: #9333ea; }

/* Language Visibility Control */
body.show-en .lang-pl, body.show-pl .lang-en { display: none; }
body.show-en .lang-en span.block, body.show-pl .lang-pl span.block { display: block; }
body.show-en .lang-en span:not(.block), body.show-pl .lang-pl span:not(.block) { display: inline; }

/* Sticky Footer Styles */
main { position: relative; z-index: 20; background-color: #f1f5f9; }
footer { position: sticky; bottom: 0; z-index: 10; background-color: #111827; color: #9ca3af; }
footer a { transition: color 0.2s ease; }
footer ul a { color: #9ca3af; }
footer ul a:hover { color: #ffffff; }
footer ul a:focus { outline: 2px solid #4f46e5; outline-offset: 2px; color: #ffffff; }
footer .social-icon-link { color: #9ca3af; font-size: 1.5rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; }
footer .social-icon-link:hover { color: #ffffff; }
footer .social-icon-link:focus { outline: 2px solid #4f46e5; outline-offset: 2px; color: #ffffff; }

/* Changed text selection style */
::selection { background-color: #9333ea; color: #ffffff; }
::-moz-selection { background-color: #9333ea; color: #ffffff; }