.elementor-9340 .elementor-element.elementor-element-5b891bf{--display:flex;}/* Start custom CSS for html, class: .elementor-element-8772ca5 *//* ===========================================
BRUTALIST HEADER — PREMIUM + SUBTELNA ANIMACJA
=========================================== */

.md-portfolio-header {
    padding: 140px 110px 40px; /* było 90px → teraz krócej */
}


/* LEKKI NOISE DLA PREMIUM FEEL */
.md-portfolio-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://grainy-gradients.vercel.app/noise.svg");
  opacity: 0.06;
  pointer-events: none;
}

/* ————————————————————————
NAGŁÓWEK
———————————————————————— */
.md-header-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 88px;
  letter-spacing: 1px;
  line-height: 0.9;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ————————————————————————
STRZAŁKA W DÓŁ – CIENKA + SUBTELNA ANIMACJA
———————————————————————— */
.md-arrow {
  display: inline-block;
  font-size: 62px;         /* cieńsza, mniejsza */
  line-height: 1;
  color: #F25623;

  font-weight: 300;        /* CIENSZA! */
  opacity: 0.9;

  animation: arrowSubtle 1.8s infinite ease-in-out;
}

/* SUBTELNE „ODDYCHANIE” */
@keyframes arrowSubtle {
  0%   { transform: translateY(0); opacity: 0.8; }
  50%  { transform: translateY(10px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.8; }
}

/* ————————————————————————
PODTYTUŁ
———————————————————————— */
.md-header-sub {
  margin-top: 12px;
  max-width: 560px;
  color: #d4d4d4;
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(14px);
  animation: subFadeIn 0.9s ease forwards 0.2s;
}

@keyframes subFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ————————————————————————
MOBILE
———————————————————————— */
@media (max-width: 768px) {
  .md-portfolio-header {
    padding: 90px 26px 60px;
  }

  .md-header-title {
    font-size: 54px;
    gap: 12px;
  }

  .md-arrow {
    font-size: 46px;     /* cieńsza na mobile */
  }

  .md-header-sub {
    font-size: 17px;
    max-width: 100%;
    margin-top: 18px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-354fdbb *//* ===========================================
PORTFOLIO — NOWY SYSTEM PREMIUM
=========================================== */

/* GRID */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 100px 110px;
  background: #000;
}

/* POJEDYNCZY PROJEKT */
.portfolio-item {
  text-align: center;
  font-family: 'Inter Tight', sans-serif;
  position: relative;
}

/* ========== ZDJĘCIE ========== */
.p-img-wrap {
  width: 100%;
  aspect-ratio: 9/16;
  overflow: hidden;
  background: #111;
  position: relative;
}

.p-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform .45s ease, filter .45s ease;
}

/* PODŚWIETLENIE ZDJĘCIA PRZY HOVER */
.portfolio-item:hover .p-img-wrap img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* ===========================================
30% PANEL Z DOŁU – WYSUWANY PRZY HOVER
=========================================== */
.p-hover-panel {
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 30%;                     /* wysokość panelu */

  background: rgba(0,0,0,0.85);    /* tło panelu */
  padding: 22px 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 300;
  text-align: center;

  transform: translateY(100%);     /* start: ukryty */
  transition: transform .45s ease;
  z-index: 5;
}

/* PANEL POJAWIA SIĘ PRZY HOVER */
.portfolio-item:hover .p-hover-panel {
  transform: translateY(0);
}

/* ========== TYTUŁ ========== */
.portfolio-item h3 {
  margin-top: 18px;
  font-size: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #dedede;
}

/* ========== PRZYCISK ========== */
.p-btn {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid #F25623;
  color: #F25623;
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
  margin-top: 14px;
}

.p-btn:hover {
  background: #F25623;
  color: #000;
}

/* ===========================================
MOBILE
=========================================== */
@media (max-width: 768px) {

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 70px;
    padding: 40px 20px;
  }

  .p-img-wrap {
    aspect-ratio: 9/18;
    max-height: 360px;
  }

  .p-hover-panel {
    height: 36%;     /* trochę wyższy panel na mobile */
    font-size: 13px;
    padding: 18px;
  }

  .portfolio-item h3 {
    font-size: 18px;
  }

  .p-btn {
    font-size: 13px;
    padding: 10px 22px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4d0e7c2 *//* ==========================================
MOBILE PORTFOLIO — SMART COVER + NO LEG CUT
========================================== */
@media(max-width:768px){

  .md-portfolio-mobile {
    padding: 40px 20px 80px;
    background: #000;
    display: flex;
    flex-direction: column;
    gap: 60px;
  }

  .mdm-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }

  /* STAŁY PROSTOKĄT (pionowy, ale krótszy) */
  .mdm-img {
    width: 100%;
    aspect-ratio: 2.6 / 3.5; /* ⭐ delikatnie wyższy, idealny pod sylwetkę */
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 0;

    position: relative;
  }

  .mdm-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* ⭐ pełne zdjęcie, bez pasków */
    object-position: bottom; /* ⭐ najważniejsze — nogi NIGDY nie ucięte */

    display: block;
    transition: transform .35s ease;
  }

  /* Hover (opcjonalny, subtelny) */
  .mdm-item:hover .mdm-img img {
    transform: scale(1.03);
  }

  /* TEKSTY */
  .mdm-item h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.7px;
  }

  .mdm-item p {
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    color: #b8b8b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
  }

  /* BUTTON */
  .mdm-btn {
    padding: 10px 22px;
    border: 2px solid #F25623;
    color: #F25623;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: 0;
    transition: background .25s ease, color .25s ease;
  }

  .mdm-btn:hover {
    background: #F25623;
    color: #000;
  }
}

@media(min-width:769px){
  .md-portfolio-mobile { display:none; }
}


/* ==========================================
OVERRIDE 2 — DELIKATNIE MNIEJSZE, ZERO RAMKI
========================================== */
@media(max-width:768px){

  /* usuń ramkę całkiem */
  .mdm-img {
    border: none !important;
    background: #000 !important;
  }

  /* zdjęcie minimalnie mniejsze, brak borderów, idealny kadr */
  .mdm-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 85% !important; /* dół idealny, góra poprawiona */

    /* ⭐ minimalnie bardziej zmniejszone */
    transform: scale(0.92) !important;

    filter: none !important;
    opacity: 1 !important;
    transition: transform .35s ease !important;
  }

  .mdm-item:hover .mdm-img img {
    transform: scale(0.96) !important;
  }
}


/* ==========================================
OVERRIDE 3 — JESZCZE TROCHĘ MNIEJSZE
========================================== */
@media(max-width:768px){

  .mdm-img {
    border: none !important;
    background: #000 !important;
  }

  .mdm-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 85% !important;

    /* ⭐ jeszcze minimalnie mniejsze (2% mniej) */
    transform: scale(0.90) !important;

    filter: none !important;
    opacity: 1 !important;
    transition: transform .35s ease !important;
  }

  .mdm-item:hover .mdm-img img {
    transform: scale(0.95) !important;
  }
}/* End custom CSS */