/* AOS's fade-left/fade-right animations sit translated up to 100px off-canvas
   until they scroll into view, which can widen the page's scrollable area on
   mobile. overflow-x: hidden on body alone doesn't reliably clip that on every
   browser, so it's set on html too. */
html {
    overflow-x: hidden;
}

body {
    font-family: 'Raleway', sans-serif;
    color: #333;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

.text-beige { color: #F5E6D3; }
.bg-beige { background-color: #F5E6D3; }
.border-beige { border-color: #F5E6D3; }

.gradient-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
}

/* About page: quote bubble */
.quote-bubble {
    position: relative;
    background: #f8f8f8;
    border-left: 5px solid #F5E6D3;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.quote-bubble::before {
    content: "\201C";
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 4rem;
    color: #ccc;
    opacity: 0.5;
    line-height: 1;
}

/* About page: large script statement */
.statement {
    width: 100%;
    padding: 90px 40px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #f5f5f6;
}

.statement p {
    margin: 0;
    max-width: 1200px;
    font-family: "Allura", "Brush Script MT", cursive;
    font-size: clamp(55px, 5.5vw, 105px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.5px;
    color: #c9a227;
}

/* Portfolio page: justified mosaic. portfolio.html splits each session into
   rows; inside a row every photo gets flex-grow = its aspect ratio (--ar), so
   all photos in the row share one height and the row fills the full width
   without cropping or stretching anything. */
.pf-grid {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.pf-row {
    display: flex;
    gap: 0.375rem;
}
@media (min-width: 640px) { .pf-grid, .pf-row { gap: 0.625rem; } }
@media (min-width: 1024px) { .pf-grid, .pf-row { gap: 0.75rem; } }
.pf-item {
    flex: var(--ar) 1 0;
    min-width: 0;
    aspect-ratio: var(--ar);
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: #efe9e1;
    cursor: zoom-in;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.pf-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.pf-item:hover img, .pf-item:focus-visible img { transform: scale(1.04); }
.pf-item:focus-visible { outline: 3px solid #F5E6D3; outline-offset: 2px; }

/* Portfolio page: lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-content {
    position: relative;
    max-width: 92%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.lightbox-close {
    position: absolute;
    top: -32px;
    right: -32px;
    color: white;
    font-size: 2.4rem;
    cursor: pointer;
    line-height: 1;
}
@media (max-width: 768px) {
    .lightbox-close {
        top: 10px;
        right: 10px;
        background-color: rgba(0,0,0,.45);
        border-radius: 999px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
    }
}
.lightbox-caption { color: white; margin-top: 0.75rem; text-align: center; font-size: 1.05rem; }
.lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    color: white;
    font-size: 2.2rem;
    line-height: 1;
    padding-bottom: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-nav[hidden] { display: none; }
.lightbox-nav:hover { background: rgba(0,0,0,.7); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
@media (max-width: 768px) {
    .lightbox-nav { width: 40px; height: 40px; font-size: 1.8rem; }
    .lightbox-prev { left: 6px; }
    .lightbox-next { right: 6px; }
}

/* Services page: FAQ accordion */
.accordion-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}
.accordion-header:hover { background-color: #efefef; }
.accordion-content {
    padding: 1rem 1.5rem;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.accordion-content.active {
    max-height: 200px;
    transition: max-height 0.3s ease-in;
}
.accordion-icon { transition: transform 0.3s ease; }
.accordion-header.active .accordion-icon { transform: rotate(180deg); }

/* Full-page hero, shared by every page */
.hero-full {
    position: relative;
    height: 100vh; /* fallback for browsers without svh support */
    height: 100svh; /* avoids jumping/cropping as mobile browser chrome shows/hides */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

/* O marce hero photo: show the bottom of the image on mobile instead of cropping it out */
@media (max-width: 767px) {
    .hero-omarce-img {
        object-position: center bottom;
    }

    /* The default gradient-overlay is nearly transparent in the middle, right where the
       centered heading sits. Now that the crop shows more of the bright background there,
       darken that middle band so the text stays readable. */
    .hero-omarce-overlay {
        background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.65) 100%);
    }
}

.hero-omarce-overlay ~ .container h1,
.hero-omarce-overlay ~ .container p {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Warsztaty: "Szkoły i przedszkola" card photo, shifted to show more of the bottom */
.warsztaty-szkoly-img {
    object-position: center 75%;
}

/* Mobile nav dropdown: fill the rest of the screen with a solid panel (no
   transparency) so hero text behind it can't bleed through the links, and
   lock page scroll while it's open. */
#mobile-menu {
    height: calc(100vh - 5rem);
}

body.mobile-menu-open {
    overflow: hidden;
}