/* ===== Projects – section ===== */
.projects{
  background:#fff; color:#000;
  position: relative;
  overflow-x: clip;              /* NU mai există scroll pe orizontală */
}

/* ===== Featured ticker ===== */
.projects-ticker{
  background:#fff;
  color:#000;
  border-top:2px solid #000;
  border-bottom:2px solid #000;
  overflow:hidden;
  padding-block: clamp(18px, 3vw, 36px);
}
.ticker{ width:100%; overflow:hidden; }

/* bandă continuă cu 2 blocuri identice */
.runner{
  display:flex; align-items:baseline; gap:0;
  width:max-content;
  will-change: transform;
  --speed: 22s;
  animation: marquee var(--speed) linear infinite;
}
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.block{
  display:inline-flex; align-items:baseline; white-space:nowrap;
  gap: clamp(48px, 7vw, 96px);
  padding-inline: clamp(24px, 3vw, 40px);
}
.item{ display:inline-flex; align-items:center; gap:.35em; }
.item .s{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900; letter-spacing:.02em;
  font-size: clamp(24px, 6.0vw, 88px); line-height:1;
}
.item .r{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:800; letter-spacing:-.01em;
  font-size: clamp(26px, 6.6vw, 96px); line-height:1;
}
.item .sep{
  position:relative; display:inline-block;
  width: clamp(12px, 1.8vw, 22px); height: clamp(12px, 1.8vw, 22px);
  margin-left: clamp(18px, 2.8vw, 36px);
  border-radius: 50%; border: 2px solid currentColor;
}
.item .sep::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:50%;
  background: currentColor; border-bottom-left-radius:50%; border-bottom-right-radius:50%;
}

/* ===== Portfolio + BG marquee ===== */
.portfolio{
  position: relative;
  background:#fff;
  color:#000;
  overflow: clip;         /* ← taie randarea copiilor în afara containerului */
  /* fallback universal: overflow: hidden; */
}

/* Sticky BG – vizibil, dar limitat la secțiunea .portfolio */
.bg-marquee{
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  margin-bottom: -100svh;
}

/* moving band */
.bg-runner{
  display:flex;
  width:max-content;
  align-items:center;
  gap:0;
  opacity: .12;
  animation: bgMove var(--bg-speed, 40s) linear infinite;
  will-change: transform;
}
@keyframes bgMove{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.bg-block{
  display:inline-flex;
  gap: clamp(40px, 6vw, 80px);
  padding-inline: clamp(24px, 4vw, 48px);
  white-space: nowrap;
}
.bg-item{
  font-family:"Inter", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: clamp(96px, 22vw, 320px);
  line-height: .9;
  color:#000;
}

/* the project list stays above */
.portfolio-list{
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* give a clear landing zone so sticky releases before TRUST */
.portfolio-outro{
  height: clamp(160px, 24svh, 32svh);
}

/* ===== LISTA PROIECTE ===== */
.project{
  width: min(1200px, 92vw);
  margin: clamp(36px, 6vw, 72px) auto;
}

/* --- MOBILE FIRST: AFIȘEAZĂ IMAGINILE ÎNTREGI (landscape), FĂRĂ ROTUNJIRI --- */
.project-media{
  position: relative; display:block;
  /* pe mobil înălțimea urmează imaginea */
  height: auto;
  overflow: visible;                     /* nu mai taie imaginea */
  border-radius: 0;                      /* fără colțuri rotunde */
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  transform: translateZ(0);
  transition: none;                      /* fără efecte de hover pe mobil */
  will-change: auto;
}

/* imaginea pe mobil: se vede toată */
.project-media img{
  display:block;
  width: 100%;
  height: auto;                          /* important pt landscape */
  object-fit: contain;                   /* cheia: nu taie nimic */
  transform: none !important;            /* anulează scale din JS/hover */
  border-radius: 0;                      /* fără colțuri rotunde */
}

/* dezactivez complet overlay-ul lichid pe mobil */
.project-media::after,
.project-media::before{
  display: none;                         /* fără overlay și fără bordură */
}

/* meta sub imagine */
.project-meta{
  margin-top: clamp(14px, 2.5vw, 22px);
  display:grid; grid-template-columns: 1fr 1fr 1fr; align-items:center; column-gap: 12px;
  font-family:"Inter", system-ui, sans-serif; font-weight:700; letter-spacing:.01em; text-transform: uppercase;
  font-size: clamp(12px, 1.1vw, 14px);
}
.project-meta .name{ justify-self:start; }
.project-meta .tags{ justify-self:center; opacity:.75; }
.project-meta .year{ justify-self:end; opacity:.75; }

/* spațiu de închidere – sticky-ul se termină curat în .portfolio */
.portfolio-outro{
  height: clamp(160px, 24svh, 32svh);
}

/* separator după toată secțiunea Projects */
.section-divider{
  height: 2px; background:#000; width:100%;
}

/* ====== DESKTOP / TABLETĂ: REVIN LA CARD ÎNALT CU COVER ȘI HOVER ====== */
@media (min-width: 769px){

  .project-media{
    height: clamp(66svh, 74svh, 80svh);
    overflow: hidden;
    border-radius: 0;                    /* rămâne fără colțuri rotunde */
    transition: box-shadow .45s ease, transform .6s cubic-bezier(.22,.9,.16,1);
    will-change: transform;
  }

  .project-media img{
    width:100%;
    height:100%;
    object-fit: cover;                   /* pentru look-ul tău inițial */
  }

  /* reactivez overlay-ul lichid pe ecrane mari */
  .project-media::after{
    content:""; position:absolute; left:0; right:0; bottom:0; top:100%;
    background:
      radial-gradient(120% 140% at 50% 120%, rgba(0,0,0,.16) 0%, rgba(0,0,0,.05) 55%, transparent 75%),
      linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,.0) 65%);
    transition: top .7s cubic-bezier(.22,.9,.16,1); pointer-events:none;
    display:block;
  }
  .project-media::before{
    content:""; position:absolute; inset:-2px; border-radius: 0;
    box-shadow: 0 0 0 0 rgba(0,0,0,.0); transition: box-shadow .6s ease; pointer-events:none;
    display:block;
  }

  /* hover doar când există mouse */
  @media (hover:hover) and (pointer:fine){
    .project:hover .project-media{ transform: translateY(-2px); box-shadow: 0 20px 44px rgba(0,0,0,.12); }
    .project:hover .project-media img{ transform: scale(1.06); }
    .project:hover .project-media::after{ top: 30%; }
    .project:hover .project-media::before{ box-shadow: 0 0 0 2px rgba(0,0,0,.15), 0 28px 60px rgba(0,0,0,.18); }
  }
}

/* ===== (OPȚIONAL) asigurare: nicio imagine din .portfolio nu primește colțuri rotunde ===== */
.portfolio img{ border-radius: 0 !important; }