/* ===== PODSTRONA PROJEKTY — kompaktowe, skalowalne portfolio ===== */

.projects-page .page-hero .section-label {
  color: var(--gold) !important;
}

.projects-page .page-hero .shell {
  width: min(1480px, calc(100% - 64px)) !important;
  max-width: 1480px !important;
}

.projects-page .page-hero h1 {
  font-size: clamp(42px, 4.2vw, 68px) !important;
  line-height: .98 !important;
  letter-spacing: .035em !important;
}

.projects-page .page-hero .shell > p:last-child {
  max-width: 720px;
}

.projects-page-section {
  padding: calc(var(--header-h) + clamp(44px, 4.5vw, 70px)) 0 clamp(86px, 7vw, 118px);
}

.projects-page-list {
  width: min(1480px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 5vw, 78px) clamp(20px, 2.2vw, 34px);
}

.projects-page-card {
  min-width: 0;
}

.projects-page-card.is-project-hidden {
  display: none;
}

.projects-page-card__button {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: zoom-in;
}

.projects-page-card__head {
  order: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  margin: 15px 1px 0;
}

.projects-page-card__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1.3;
  text-transform: uppercase;
}

.projects-page-card__title {
  display: block;
  color: var(--navy-dark);
  font-family: var(--display);
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 400;
  letter-spacing: .035em;
  line-height: 1.02;
  text-transform: uppercase;
}

.projects-page-card__number {
  padding-bottom: 3px;
  color: rgba(23, 40, 79, .42);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
}

.projects-page-card__media {
  order: 1;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(33, 48, 76, .08);
}

.projects-page-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 40, .18);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.projects-page-card__media img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border-radius: 14px !important;
  object-fit: cover !important;
  object-position: center center;
  transform: scale(1.001);
  transition: transform .7s cubic-bezier(.2, .75, .25, 1), filter .35s ease !important;
}

.projects-page-card__hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 9px 12px 8px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(242, 238, 231, .9);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: var(--navy-dark);
  font-family: var(--body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .28s ease, transform .28s ease;
}

.projects-page-card__button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 7px;
  border-radius: 14px;
}

@media (hover: hover) and (pointer: fine) {
  .projects-page-card__button:hover .projects-page-card__media img,
  .projects-page-card__button:focus-visible .projects-page-card__media img {
    transform: scale(1.035);
    filter: brightness(.96);
  }

  .projects-page-card__button:hover .projects-page-card__media::after,
  .projects-page-card__button:focus-visible .projects-page-card__media::after {
    opacity: 1;
  }

  .projects-page-card__button:hover .projects-page-card__hint,
  .projects-page-card__button:focus-visible .projects-page-card__hint {
    opacity: 1;
    transform: translateY(0);
  }
}

.projects-page-more-wrap {
  width: min(1480px, calc(100% - 64px));
  margin: clamp(48px, 5vw, 72px) auto 0;
  display: flex;
  justify-content: center;
}

/* Uwaga klienta nr 9 (22.09): "guziki mialy byc wszystkie takie same".
   "Pokaz wiecej projektow" mial tu wlasny styl (50 px zamiast 54,
   przezroczyste tlo zamiast granatowego, pelna pigulka zamiast ksztaltu
   kropli, 12 px bold zamiast 15 px, brak ikony). Caly ten blok zostal
   usuniety - przycisk jest teraz zwyklym .drop-button ze style.css. */

.projects-page-more[hidden] {
  display: none;
}

.projects-page-cta {
  padding: clamp(78px, 7vw, 112px) 0 clamp(84px, 7vw, 120px);
  border-top: 1px solid var(--line);
}

.projects-page-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.projects-page-cta .section-label {
  margin-bottom: 16px;
}

.projects-page-cta h2 {
  max-width: 900px;
  margin: 0 auto 20px;
  font-size: clamp(40px, 4vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: .035em !important;
}

.projects-page-cta p:not(.section-label) {
  max-width: 640px;
  margin: 0 auto 32px;
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .projects-page .page-hero .shell,
  .projects-page-list,
  .projects-page-more-wrap {
    width: min(100% - 48px, 1280px) !important;
  }

  .projects-page-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .projects-page .page-hero .shell,
  .projects-page-list,
  .projects-page-more-wrap {
    width: calc(100% - 32px) !important;
  }

  .projects-page .page-hero h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1.02 !important;
  }

  .projects-page-section {
    padding-top: calc(var(--header-h) + 34px);
  }

  .projects-page-list {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .projects-page-card__head {
    margin-top: 13px;
  }

  .projects-page-card__title {
    font-size: clamp(28px, 8.4vw, 38px);
  }

  .projects-page-card__media {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }

  .projects-page-card__media img {
    border-radius: 12px !important;
  }

  .projects-page-card__hint {
    opacity: 1;
    transform: none;
  }

  .projects-page-more-wrap {
    margin-top: 44px;
  }

  .projects-page-cta h2 {
    max-width: 100%;
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1.04 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projects-page-card__media img,
  .projects-page-card__media::after,
  .projects-page-card__hint,
  .projects-page-more {
    transition: none !important;
  }
}


/* =========================================================
   KOREKTA KLIENTA — 04.09.2026
   ========================================================= */

/* Nad listą zostaje sam akapit — większy i granatowy. */
.projects-page .page-hero .shell > p:last-child {
  max-width: 900px;
  color: var(--navy) !important;
  font-size: clamp(20px, 1.55vw, 25px) !important;
  line-height: 1.5 !important;
}

/* Podpisy pod zdjęciami = zapis z karuzeli na stronie głównej. */
.projects-page-card__eyebrow {
  margin: 0 0 5px;
  color: var(--gold);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* „Zobacz galerię" — większe i bez pogrubienia. */
.projects-page-card__hint {
  padding: 10px 15px 9px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
}

/* Po usunięciu napisów "Pracownia" i "Projekty" nad listą został sam akapit,
   więc górna belka dostaje proporcje wstępu, a nie pustego nagłówka. */
body.projects-page .page-hero {
  padding-top: calc(var(--header-h) + 52px);
  padding-bottom: 40px;
}

/* Tytuły kafli w tym samym zapisie co w karuzeli na stronie głównej. */
.projects-page-card__title {
  font-size: 27px;
  letter-spacing: normal;
  line-height: 1.1;
  text-transform: none;
}

/* =========================================================
   UWAGI KLIENTA 22.09
   ========================================================= */

/* 8. Strzalki takie same wszedzie. Kafel mial znak tekstowy →,
   teraz nosi te sama ikone co przyciski i linki na calej stronie. */
.projects-page-card__hint {
  gap: 8px;
}

.projects-page-card__hint svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* 9. Guziki takie same wszedzie. "Pokaz wiecej projektow" mialo wlasny
   styl: 50 px zamiast 54, przezroczyste tlo zamiast granatowego, pelna
   pigulke zamiast ksztaltu kropli, 12 px bold zamiast 15 px i zadnej
   ikony. Teraz jest to zwykly .drop-button — caly styl przychodzi ze
   style.css. Ustawienia kontenera (.projects-page-more-wrap) sa juz
   zdefiniowane wyzej w tym pliku, wiec nie powtarzamy ich tutaj. */

.projects-page-more[hidden] {
  display: none;
}