/* ============================================================
   PORTFOLIO PROJECT — single project page (/portfolio/<n>/)
   (nav, footer, statement band, .pm tile grid and the CTA panel come from shared.css)
   ============================================================ */

/* nav sits over the top of the page (the shared bar is absolutely positioned inside .hero) */
.proj-nav { position: relative; height: 0; }

/* page-specific nav override: the chevron box of the "Kontaktiraj nas" button is light grey with a black chevron */
.nav__cta .btn-chev { background: linear-gradient(135deg, #f2f2f2, #d6d6d6); color: #111111; }

/* the page starts with the shared statement band, on a light grey gradient from the top of the page */
.section-statement {
  padding: 250px 0 100px;
  background: linear-gradient(180deg, #e9e9e9 0%, #ffffff 520px);
}

/* wider text column: narrower label column, text up to the right edge of the content */
.section-statement .statement__grid { grid-template-columns: 240px minmax(0, 1fr); }
.section-statement .statement__text { max-width: none; }

/* ── gallery: two square tiles per row (shared .pm-grid), no links ── */
.section-proj-gallery { background: #ffffff; padding: 0 0 20px; }
.section-proj-gallery .pm-grid { margin-top: 0; }
/* two image blocks directly after each other keep the same 14px gap as the tiles inside a block */
.section-proj-gallery .pm-grid + .pm-grid { margin-top: 14px; }
/* project story between the two image groups */
.proj-story {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  padding: 110px 0;
}
.proj-story__intro {
  max-width: 980px;
  margin: 0;
  font-family: var(--font-mont);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: var(--ls-default);
  color: #111111;
}
.proj-quote { max-width: 980px; margin: 56px 0 0; padding: 0; }
.proj-quote__text {
  margin: 0;
  font-family: var(--font-dutch);
  font-size: var(--fs-h3);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: var(--ls-default);
  color: #111111;
}
.proj-quote__author {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mont);
  font-size: var(--fs-p-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-default);
  color: #6a6a6a;
}
.proj-quote__avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
.proj-quote__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
  transform-origin: 50% 40%;
  display: block;
}
.proj-story__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}
.proj-story__list li { padding-top: 22px; border-top: 1px solid rgba(17, 17, 17, 0.12); }
.proj-story__list li:nth-child(-n+2) { padding-top: 0; border-top: 0; }
.proj-story__title {
  margin: 0 0 10px;
  font-family: var(--font-mont);
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2-mont);
  letter-spacing: var(--ls-default);
  color: #111111;
}
.proj-story__text {
  max-width: 520px;
  margin: 0;
  font-family: var(--font-mont);
  font-size: var(--fs-p-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-p);
  letter-spacing: var(--ls-default);
  color: #6a6a6a;
}
/* blocks shown on one breakpoint only (e.g. a different image set on phones) */
.proj-only-mob { display: none; }

/* a block marked .pm-grid--lead starts with one tile that spans the whole row (needs a 2:1 image) */
.section-proj-gallery .pm-grid--lead .pm:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }

/* ============================================================
   NEXT PROJECT SECTION
   ============================================================ */
.section-next-proj {
  background: #ffffff;
  padding: 130px 0 0;
}
.section-qa .cta-panel {
  margin-top: 40px;
}
.next-proj__title {
  margin: 0 0 36px;
  font-family: var(--font-mont);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.06em;
  color: #111111;
  text-align: left;
}

/* ── WIDE PROJECT CARD (.pc) ── */
.pc {
  position: relative;
  display: grid;
  gap: var(--pf-pad, 10px);
  padding: var(--pf-pad, 10px);
  border-radius: 12px;
  background: #eeeeee;
  border: 1px solid #eeeeee;
  overflow: hidden;
  font-family: var(--font-mont);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.pc:hover { border-color: #e6e6e6; background: #e6e6e6; }
.pc__link { position: absolute; inset: 0; z-index: 2; }
.pc--imgleft {
  grid-template-columns: minmax(0, 1fr) calc(50% + 8px);
}
.pc__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 20px 16px 20px;
}
.pc__title {
  margin: 0;
  max-width: 560px;
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: #111111;
}
.pc__desc {
  order: 2;
  max-width: 560px;
  margin: 16px 0 0;
  font-size: var(--fs-p-sm);
  line-height: 1.55;
  color: #6a6a6a;
}
.pc__pills {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.pc__pills li {
  padding: 8px 11px;
  border-radius: 6px;
  background: rgba(17, 17, 17, 0.08);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #111111;
}
.pc__media {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}
.pc__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.pc__media img.is-active { opacity: 1; }

.pf-blur { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pf-blur i {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, rgba(0, 0, 0, 0) 100%);
          mask-image: radial-gradient(closest-side, #000 35%, rgba(0, 0, 0, 0) 100%);
}
.pf-blur i:nth-child(1) { width: 440px; height: 260px; right: calc(72px - 220px); bottom: calc(30px - 130px); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pf-blur i:nth-child(2) { width: 330px; height: 190px; right: calc(72px - 165px); bottom: calc(30px - 95px); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pf-blur i:nth-child(3) { width: 240px; height: 130px; right: calc(72px - 120px); bottom: calc(30px - 65px); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.pf-blur i:nth-child(4) { width: 180px; height: 96px; right: calc(72px - 90px); bottom: calc(30px - 48px); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pc:hover .pf-blur i { opacity: 1; }

.pc__more {
  position: absolute;
  right: var(--pf-pad, 10px);
  bottom: var(--pf-pad, 10px);
  z-index: 3;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  pointer-events: none;
}
.pc:hover .pc__more { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .pc__media img { transition: none; }
}