/* =====================================================================
   PORTFOLIO (strony-siatki: Product Design, Graphic Design)
   Motyw jasny. Marquee + siatka kafelków + hover.
   ===================================================================== */

.portfolio {
  background: var(--c-white);
  color: var(--c-ink);
  min-height: 100vh;
  padding-top: var(--header-h);
}

/* --- MARQUEE (przewijany napis, animacja zachowana) --- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 40px 0 24px;
  user-select: none;
}
.marquee__track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 0; /* start bez luki */
  animation: marquee-scroll 24s linear infinite;
  will-change: transform;
}
.marquee__track span {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);   /* ~43px jak w oryginale */
  font-weight: 700;
  letter-spacing: 0;
  padding-right: 0.35em;
  display: inline-block;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* track zawiera 2× komplet, więc -50% = płynna pętla */
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* --- SIATKA KAFELKÓW --- */
.portfolio-grid {
  width: 100%;
  max-width: 1600px;         /* live jest pełnoszerokie z ~40px marginesem */
  margin-inline: auto;
  padding: 8px 40px 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--pg-col-gap, 10px);
  row-gap: var(--pg-row-gap, 12px);
}
.tile {
  display: block;
  color: inherit;
}
.tile__media {
  position: relative;
  aspect-ratio: var(--pg-aspect, 4 / 3);   /* per-strona: Graphic 4:3, Product 3:2 */
  overflow: hidden;
  background: var(--c-white);   /* białe tło — okładki z zaokrąglonymi rogami (przezroczyste narożniki) wtapiają się w stronę zamiast pokazywać szare/beżowe tło */
}
.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.tile:hover .tile__media img { transform: scale(1.04); }

/* --- WARIANT: podświetlenie białą nakładką zamiast przybliżania (Product Design) --- */
.portfolio-grid--overlay .tile__media img { transition: none; }
.portfolio-grid--overlay .tile:hover .tile__media img { transform: none; }
.portfolio-grid--overlay .tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.portfolio-grid--overlay .tile:hover .tile__media::after { opacity: 0.35; }

/* Podświetlenie ma być TYLKO na hover — usuwamy „przyklejoną" obwódkę focus,
   która zostawała na ostatnio klikniętym/odwiedzonym kafelku po powrocie.
   Obwódka dla nawigacji klawiaturą (dostępność) zostaje. */
.tile:focus { outline: none; }
.tile:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.tile__title {
  margin-top: 12px;
  font-size: var(--fs-h4);   /* ~22px */
  font-weight: 700;
  color: var(--c-ink);
}

/* --- RESPONSYWNOŚĆ --- */
@media (max-width: 640px) {
  .portfolio-grid { grid-template-columns: 1fr; padding-inline: 20px; column-gap: 0; }
}