html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}


/* Usuń ograniczenie wysokości dla portfolio */
.wide-img,
.portfolio-item,
.item-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Obraz responsywny */
.wide-img {
    width: 90%;          /* dopasowuje szerokość do ekranu */
    max-width: 1920px;
    height: auto !important; 
    max-height: none !important;
    display: block;
    margin: 0 auto;      /* centrowanie */
}


.map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.reptile-frame {
    padding: 26px;
    border-radius: 22px;
    max-width: 900px;
    margin: 0 auto;

/* gadzia tekstura dla obrazka w srodku */
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(0,0,0,0.5), transparent 45%),
        repeating-radial-gradient(
            circle,
            rgba(255,255,255,0.06) 0 6px,
            rgba(0,0,0,0.08) 6px 12px
        ),
        linear-gradient(145deg, #4e7a1f, #2f4f14);

    box-shadow:
        inset 0 0 20px rgba(0,0,0,0.35),
        0 18px 40px rgba(0,0,0,0.35);
}

.notebook.gadzi {
    padding: 4px;            /* jeszcze mniej paddingu */
    border-radius: 10px;     
    margin-bottom: 12px;     /* odstęp między wierszami */
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(0,0,0,0.5), transparent 45%),
         repeating-linear-gradient(
            135deg,                 /* kąt nachylenia łusek */
            #4e7a1f 0px,            /* kolor łuski */
            #4e7a1f 8px,            /* wysokość łuski */
            #3c6e2a 8px,             /* odstęp między łuskami */
            #3c6e2a 16px
        ),
        linear-gradient(145deg, #4e7a1f, #2f4f14);
    box-shadow:
        inset 0 0 6px rgba(0,0,0,0.25),
        0 4px 10px rgba(0,0,0,0.25);
    transition: transform .25s ease;
}

.notebook.gadzi:hover {
    transform: scale(1.02);
}

.notebook.gadzi img {
    width: 100%;
    height: 120px;           /* mniejszy obrazek */
    object-fit: cover;
    border-radius: 8px;
}

/* Nadpisanie notebooka na roślinny motyw */
.notebook .screen {
    background:
        /* dodajemy lekki wzorek liści w formie gradientu */
        repeating-linear-gradient(
            45deg,
            rgba(34, 139, 34, 0.1),
            rgba(34, 139, 34, 0.1) 5px,
            transparent 5px,
            transparent 10px
        ),
        /* główne tło roślinne */
        linear-gradient(145deg, #3c6e2a, #6ba84a);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);


}

/* usuń pseudo-elementy laptopa */
.notebook .screen::before,
.notebook .screen::after {
    display: none;
}

/* obrazek w środku */
.notebook .screen img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
}

/* opis */
.notebook .screen .desc {
    padding: 8px 0;
    text-align: center;
    color: #fff;
}


/* tekst pod obrazkami */

.portfolio-desc {
    color: #000;       /* czarny kolor tekstu */
    font-size: 1rem;   /* możesz zmienić rozmiar */
    text-align: center; /* wyśrodkowanie tekstu */
}

/*tekst nad obrazkami przed klikiem */

.notebook .desc h4 {
    color: #000 !important;
    text-align: center !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* po kliku */

.portfolio-modal h1 {
    color: #000 !important;    /* wymusza czarny kolor */
    text-align: center;         /* opcjonalnie wyśrodkowanie */
    font-weight: bold;          /* pogrubienie */
}

/* Header layout */
#header .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;


.notebook,
.notebook * {
  max-width: 100%;
  box-sizing: border-box;
}

}

/* Logo left */
#header .logo {
    text-align: left;
}

/* Contact right */
#header .header-contact {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

#header .header-contact a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 10px;
}

#header .header-contact a:hover {
    text-decoration: underline;
}
/* Mobile */
@media (max-width: 768px) {
    #header .header-inner {
        flex-direction: column;
        gap: 8px;
    }

    #header .header-contact {
        text-align: center;
    }
}

/*google i fb razem*/

.map-fb-wrapper {
    display: flex;
    gap: 10px;
    align-items: stretch; /* 🔥 WAŻNE */
}

/* Obie kolumny mają IDENTYCZNY rozmiar */
.map-box,
.fb-box {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
}

/* Google Maps – MUSI wypełnić kontener */
.map-box iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 450px;
    border: 0;
}

/* Facebook też */
.fb-box .fb-page,
.fb-box iframe {
    width: 100% !important;
    min-height: 450px;
}

/* MOBILE */
@media (max-width: 992px) {
    .map-fb-wrapper {
        flex-direction: column;
    }

    .map-box iframe,
    .fb-box iframe {
        min-height: 350px;
    }
}

.map-fb-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;

    /* TO JEST KLUCZ */
    gap: 0 !important;

    max-width: 1400px;
    margin: 60px auto 120px auto; /* ↑ odsunięcie od footera */
    padding: 0;
}
/* Kontener mapy + FB w łuskach */
.map-fb-wrapper.reptile-frame {
    display: flex;
    gap: 10px;           /* odległość między mapą a FB */
    align-items: stretch;
    justify-content: space-between;

    padding: 20px;       /* padding łuski */
    margin: 60px auto 120px auto;
}

/* Obie kolumny równomierne */
.map-fb-wrapper.reptile-frame .map-box,
.map-fb-wrapper.reptile-frame .fb-box {
    flex: 1 1 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* Iframe pełna szerokość / wysokość */
.map-fb-wrapper.reptile-frame iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 450px;
    border-radius: 8px;
}

/* RESPONSYWNE – mobile / małe okno */
@media (max-width: 992px) {
    .map-fb-wrapper.reptile-frame {
        flex-direction: column; /* jeden pod drugim */
    }



 /* zabijamy całą stylówkę notebooka */
  .portfolio .notebook {
    background: none !important;
    border-radius: 16px !important;
    padding: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    position: static !important;
  }

  /* reset WSZYSTKICH cudów typu pionowy tekst */
  .portfolio .notebook *,
  .portfolio .notebook h4,
  .portfolio .notebook p {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
  }

/* FIX: tekst nie wychodzi poza kartę */
.portfolio .notebook .desc h4,
.portfolio .notebook .desc p {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;

  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
}