/* =========================================================
   PORTFOLIO PAGE ONLY
   IMPORTANT: header/footer are in style.css
   Scope: .page-portfolio
========================================================= */

.page-portfolio{
  --container: 1440px;
  --pad-x: 60px;

  --left-col: 360px;
  --col-gap: 60px;

  --frame-w: 830px;
  --frame-h: 1000px;
  --frame-ratio: 830 / 1000;

  --radius: 0px;

  --title-size: 96px;
  --title-top: 260px;
  --title-left: -420px;

  --ui-top: 260px;
  --ui-inset: 12px;
}

/* =========================================================
   🔥 IMPORTANT FIX
   Neutralise le carousel global de style.css
   (sinon tes images "scrollent" automatiquement)
========================================================= */
.page-portfolio .carousel-track{
  display: block !important;
  width: 100% !important;
  animation: none !important;
  transform: none !important;
  overflow: hidden !important;
}

.page-portfolio .carousel-track img{
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/* wrapper */
.page-portfolio .portfolio{
  width: min(var(--container), 100%);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  gap: 110px;
}

.page-portfolio .portfolio-row{
  display: grid;
  grid-template-columns: var(--left-col) 1fr;
  column-gap: var(--col-gap);
  min-height: var(--frame-h);
  align-items: start;
  min-width: 0;
}

/* LEFT */
.page-portfolio .row-left{
  position: relative;
  height: var(--frame-h);
  min-width: 0;
}

.page-portfolio .row-info{
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 320px;
}

.page-portfolio .row-info *{ margin: 0; }

.page-portfolio .project-title{
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.page-portfolio .project-meta{
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 10px;
}

.page-portfolio .project-desc{
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.9;
}

/* RIGHT */
.page-portfolio .row-right{
  position: relative;
  height: var(--frame-h);
  min-width: 0;
}

.page-portfolio .carousel{
  position: absolute;
  right: 0;
  top: 0;
  width: var(--frame-w);
  height: var(--frame-h);
  overflow: hidden;
  border-radius: var(--radius);
}

/* Slides empilées */
.page-portfolio .slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;

  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.page-portfolio .slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

.page-portfolio .slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* OVERLAYS */
.page-portfolio .row-title{
  position: absolute;
  top: var(--title-top);
  left: var(--title-left);
  z-index: 10;

  font-size: var(--title-size);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.page-portfolio .row-top-ui{
  position: absolute;
  top: var(--ui-top);
  right: 0;
  width: var(--frame-w);
  z-index: 11;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.page-portfolio .counter{
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.04em;
  user-select: none;
  color: #E7483F;
}

.page-portfolio .nav{
  border: none;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  color: #E7483F;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1200px){
  .page-portfolio{
    --pad-x: 32px;
    --left-col: 320px;
    --col-gap: 32px;
  }
}

@media (max-width: 768px){

  /* anti micro scroll vrai mobile */
  html, body{ overflow-x: clip; }

  .page-portfolio .portfolio{
    width: 100%;
    padding: 0 16px;
    gap: 56px;
  }

  .page-portfolio .portfolio-row{
    grid-template-columns: 1fr;
    min-height: auto;
    row-gap: 12px;

    grid-template-areas:
      "catTitle"
      "media"
      "info";
  }

  .page-portfolio .row-left{ grid-area: info; height: auto; }
  .page-portfolio .row-title{ grid-area: catTitle; }
  .page-portfolio .row-right{ grid-area: media; height: auto; }

  .page-portfolio .row-info{
    position: static;
    max-width: 65ch;
  }

  .page-portfolio .row-title{
    position: static;
    margin: 0 0 6px 0;
    font-size: 34px;
    line-height: 1.05;
    white-space: normal;
  }

  .page-portfolio .carousel{
    position: relative;
    right: auto;
    top: auto;

    width: 100%;
    height: min(62vh, 520px);
    aspect-ratio: var(--frame-ratio);
    overflow: hidden;
  }

  .page-portfolio .row-top-ui{
    position: absolute;
    top: auto;
    bottom: var(--ui-inset);
    right: var(--ui-inset);
    width: auto;
    z-index: 20;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    background: rgba(245,240,238,0.78);
    backdrop-filter: blur(6px);
    padding: 8px 10px;
    border-radius: 999px;
  }

  .page-portfolio .counter,
  .page-portfolio .nav{
    font-size: 22px;
    line-height: 1;
  }
}