/* =========================================================
   Łososina Górna — responsive.css
   Wszystkie reguły RWD w jednym miejscu, mobile-first cascade.

   Breakpointy (zgodne z siatką projektu):
     xs   ≤576       telefon
     sm   577–768    duży telefon / mały tablet
     md   769–991    tablet
     lg   992–1200   mały desktop
     xl   1201–1380  desktop
     xxl  ≥1381      duży desktop

   Konwencja: w większości używamy max-width, bo bazowy main.css jest
   desktop-first. Wyjątek: zakres .lg-row 769–1200 (tylko ten układ
   wymaga dolnej granicy).
   ========================================================= */


/* ============================================================
   ≤576px — telefon (xs)
   ============================================================ */
@media (max-width: 576px) {

    /* ---------- Treść strony ---------- */
    .lg-404 .code {
        font-size: 64px;
    }

    /* Paginacja zwarta */
    .lg-pagination {
        gap: 6px;
    }

    .lg-pagination .page-numbers {
        padding: 4px 10px;
        font-size: 12px;
    }

    /* Wyszukiwarka: input + button łamią się do kolumny gdy brak miejsca */
    .lg-search {
        flex-wrap: wrap;
    }

    .lg-search input[type="search"] {
        flex: 1 1 100%;
    }

    /* ---------- Nawigacja między wpisami ---------- */
    .lg-post-nav {
        flex-direction: column;
    }

    .lg-post-nav > span,
    .lg-post-nav > span:last-child {
        text-align: left;
    }

    /* ---------- Plakietki kategorii — poziomy scroll z fadem ---------- */
    .lg-badges {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        /* delikatny fade na prawym brzegu — subtelna sugestia, że jest więcej */
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    }

    .lg-badges::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .lg-badges > li {
        flex: 0 0 auto;
    }

    .lg-badge {
        white-space: nowrap;
    }

    /* ---------- Wiersz katalogu — telefon: mocniej zwarte ---------- */
    .lg-row {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "thumb title"
            "info  info"
            "more  more";
        gap: 10px 14px;
        padding: 16px 2px;
    }

    .lg-row__thumb {
        width: 64px;
    }

    .lg-content h2.lg-row__title {
        font-size: 15px;
        align-self: center;
    }

    .lg-row__info {
        gap: 6px;
        font-size: 13px;
    }

    .lg-row__info-item {
        line-height: 1.4;
    }

    /* Globe wraca do układu wierszowego — nie wycentrowanego kółeczka */
    .lg-row__info-item--icon a {
        width: auto;
        height: auto;
        border-radius: 0;
        padding: 0;
        color: var(--lg-muted);
    }

    .lg-row__info-item--icon a:hover {
        background: transparent;
        color: var(--lg-accent);
    }

    /* ---------- Single firma — zwarty meta ---------- */
    .lg-company {
        gap: 22px;
    }

    .lg-company__meta {
        gap: 6px 12px;
        font-size: 13.5px;
    }

    .lg-company__meta-item + .lg-company__meta-item::before {
        margin-right: 6px;
        margin-left: -4px;
    }

    .lg-company__related-title {
        font-size: 18px;
    }

    /* ---------- Galeria masonry — 1 kolumna ---------- */
    .lg-masonry {
        column-count: 1;
    }

    /* Caption stale widoczny: na touch nie ma hovera */
    .lg-masonry__caption {
        opacity: 1;
    }

    /* ---------- Lightbox — mniejsze kontrolki ---------- */
    .lg-lightbox {
        padding: 12px;
    }

    .lg-lightbox__close,
    .lg-lightbox__nav {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .lg-lightbox__close {
        top: 10px;
        right: 10px;
    }

    .lg-lightbox__nav--prev { left: 8px; }
    .lg-lightbox__nav--next { right: 8px; }

    .lg-lightbox__img {
        max-height: calc(100vh - 110px);
    }

    .lg-lightbox__caption {
        font-size: 13px;
    }
}


/* ============================================================
   ≤768px — telefon + mały tablet (xs + sm)
   Najgrubszy blok: cały układ mobilny (sidebar/hamburger/karuzela)
   ============================================================ */
@media (max-width: 768px) {

    /* H1 zostawia miejsce na logo pinowane u góry (84px + margines) */
    .lg-content h1 {
        margin-top: 4rem;
    }

    /* Layout główny: kolumna zamiast wiersza */
    .lg-app {
        flex-direction: column;
        align-items: stretch;
        position: relative;
        /* logo (absolute) referuje się do .lg-app, scrolluje się z treścią */
    }

    /* Hamburger widoczny tylko na mobile */
    .lg-menu-toggle {
        display: inline-flex;
    }

    /* Sidebar w stanie zamkniętym: brak własnej powierzchni — logo
       trafia w kontekst .lg-app, więc scrolluje się z treścią. */
    .lg-sidebar {
        flex: 0 0 auto;
        position: static;
        width: auto;
        height: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        gap: 0;
        overflow: visible;
    }

    /* Spłaszczamy strukturę karty brand żeby logo dało się wypozycjonować
       absolutnie względem .lg-sidebar (a nie .lg-brand-card) */
    .lg-sidebar .lg-brand-card,
    .lg-sidebar .lg-brand__head {
        display: contents;
    }

    /* W stanie zamkniętym chowamy wszystko poza logiem */
    .lg-sidebar .lg-brand__info,
    .lg-sidebar .lg-nav,
    .lg-sidebar .lg-projects,
    .lg-sidebar .lg-sidebar__footer,
    .lg-sidebar .lg-divider {
        display: none;
    }

    .lg-sidebar .lg-brand__logo-wrap {
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 60;
        pointer-events: auto;
    }

    /* Większe logo na mobile (zamknięty stan) */
    .lg-sidebar .lg-brand__logo-wrap img,
    .lg-sidebar .lg-brand__logo-wrap .custom-logo-link img,
    .lg-sidebar .lg-brand__logo-fallback {
        width: 84px;
        height: 84px;
        border-width: 3px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    }

    /* Homepage — pełnoekranowy swiper zajmuje cały viewport, więc nie
       chcemy żadnego logo przypiętego u góry. Pojawi się dopiero po
       otwarciu hamburgera. */
    body.home .lg-sidebar .lg-brand-card {
        display: none;
    }

    /* Stan otwarty — pełnoekranowy sidebar */
    body.lg-menu-open {
        overflow: hidden;
    }

    body.lg-menu-open .lg-sidebar {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background: #e6e6e4;
        padding: 1rem;
        gap: 14px;
        overflow-y: auto;
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        z-index: 50;
    }

    body.lg-menu-open .lg-sidebar .lg-brand-card,
    body.lg-menu-open .lg-sidebar .lg-brand__head {
        display: flex;
    }

    body.lg-menu-open .lg-sidebar .lg-brand-card {
        flex-direction: column;
        gap: 14px;
        margin-top: 0;
    }

    body.lg-menu-open .lg-sidebar .lg-brand__head {
        align-items: flex-start;
        gap: 14px;
    }

    body.lg-menu-open .lg-sidebar .lg-brand__logo-wrap {
        position: static;
    }

    /* Logo w otwartym stanie wraca do desktopowego rozmiaru */
    body.lg-menu-open .lg-sidebar .lg-brand__logo-wrap img,
    body.lg-menu-open .lg-sidebar .lg-brand__logo-wrap .custom-logo-link img,
    body.lg-menu-open .lg-sidebar .lg-brand__logo-fallback {
        width: 60px;
        height: 60px;
        border-width: 2px;
        box-shadow: none;
    }

    body.lg-menu-open .lg-sidebar .lg-brand__info,
    body.lg-menu-open .lg-sidebar .lg-nav,
    body.lg-menu-open .lg-sidebar .lg-projects,
    body.lg-menu-open .lg-sidebar .lg-sidebar__footer,
    body.lg-menu-open .lg-sidebar .lg-divider {
        display: revert;
    }

    /* Hamburger po otwarciu: czysty czarny X, bez tła i paddingu */
    body.lg-menu-open .lg-menu-toggle {
        top: 1.5rem;
        right: 2rem;
        width: 28px;
        height: 28px;
        background: transparent;
        box-shadow: none;
        padding: 0;
        gap: 0;
        z-index: 70;
    }

    body.lg-menu-open .lg-menu-toggle__bar {
        background: #000;
        width: 28px;
        height: 2px;
        position: absolute;
        top: 50%;
        left: 0;
    }

    body.lg-menu-open .lg-menu-toggle__bar:nth-child(1) {
        transform: translateY(-50%) rotate(45deg);
    }

    body.lg-menu-open .lg-menu-toggle__bar:nth-child(2) {
        display: none;
    }

    body.lg-menu-open .lg-menu-toggle__bar:nth-child(3) {
        transform: translateY(-50%) rotate(-45deg);
    }

    /* Plakietka "Made with by Net-Factory" — ukryj gdy menu otwarte */
    body.lg-menu-open .lg-credit {
        display: none;
    }

    .lg-main {
        min-height: 60vh;
    }

    /* ---------- Karuzela pełnoekranowa ---------- */
    .lg-carousel {
        height: 100vh;
        height: 100dvh;
        padding: 0;
    }

    .lg-carousel .swiper,
    .lg-carousel .swiper-slide {
        border-radius: 0;
    }

    .lg-carousel .swiper-slide::after {
        border-radius: 0;
    }

    .lg-slide__caption {
        font-size: 12px;
        padding: 5px 10px;
    }

    /* Plakietka credit — mocno zmniejszona, w samym rogu */
    .lg-credit {
        right: .5rem;
        bottom: .5rem;
        font-size: 8px;
        letter-spacing: .2px;
        padding: 3px 7px;
    }

    /* ---------- Wiersz katalogu — układ tabletowy ---------- */
    .lg-row {
        grid-template-columns: 80px 1fr;
        grid-template-areas:
            "thumb title"
            "thumb info"
            "more  more";
        gap: 8px 16px;
        padding: 16px 4px;
    }

    .lg-row__thumb {
        grid-area: thumb;
        width: 80px;
        align-self: start;
    }

    .lg-content h2.lg-row__title {
        grid-area: title;
        font-size: 16px;
    }

    .lg-row__info {
        grid-area: info;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 13px;
    }

    .lg-row__more {
        grid-area: more;
        margin-top: 6px;
        justify-self: start;
    }
}


/* ============================================================
   ≤991px — telefon + tablet (xs + sm + md)
   Wszystko co dotyczy "nie-desktopa"
   ============================================================ */
@media (max-width: 991px) {

    /* Wąski sidebar (gdy widoczny — czyli ≥769px) */
    :root {
        --lg-sidebar: 30vw;
    }

    /* Galeria masonry — 2 kolumny */
    .lg-masonry {
        column-count: 2;
    }

    /* Firma: hero w jednej kolumnie (sidebar info pod treścią) */
    .lg-company__hero {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lg-company__figure {
        max-width: 320px;
    }

    .lg-company__map iframe {
        min-height: 280px;
    }
}


/* ============================================================
   769–1200px — tablet + mały desktop (md + lg)
   Tylko ten zakres ma sens dla 3-kolumnowego układu wiersza katalogu:
   miniatura ǁ tytuł ǁ CTA, info pod tytułem.
   ============================================================ */
@media (min-width: 769px) and (max-width: 1200px) {
    .lg-row {
        grid-template-columns: 96px 1fr auto;
        grid-template-areas:
            "thumb title title"
            "thumb info  more";
        column-gap: 20px;
        row-gap: 6px;
        padding: 14px 4px;
        align-items: center;
    }

    .lg-row__thumb {
        grid-area: thumb;
        align-self: center;
    }

    .lg-content h2.lg-row__title {
        grid-area: title;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lg-row__info {
        grid-area: info;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 18px;
    }

    .lg-row__more {
        grid-area: more;
        align-self: center;
    }
}


/* ============================================================
   ≥1381px — duży desktop (xxl)
   Bazowy układ działa poprawnie; pilnujemy tylko, żeby sidebar
   nie urósł nadmiernie na bardzo szerokich monitorach.
   ============================================================ */
@media (min-width: 1381px) {
    .lg-sidebar {
        max-width: 360px;
    }
}