/* =========================================================
   ZHOVA — PORTFOLIO HERO
   ========================================================= */

.zhova-portfolio-hero{
 
  --zhova-text:#f3f1ec;
  --zhova-muted:#a9a69f;
  --zhova-gold:#d7b56a;
  --zhova-line:rgba(255,255,255,.12);

  width:min(1360px,calc(100% - 48px));
  margin:0 auto;

  min-height:650px;

  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  align-items:center;

  gap:58px;
  padding:55px 0;

  position:relative;
  overflow:hidden;

  background:var(--zhova-bg);
  color:var(--zhova-text);
}


/* ---------------------------------------------------------
   LEFT — CONTENT
   --------------------------------------------------------- */

.portfolio-copy{
  max-width:640px;
  position:relative;
  z-index:3;
}

.portfolio-kicker{
  display:flex;
  align-items:center;
  gap:13px;

  margin:0 0 24px;

  color:var(--zhova-gold);

  font-family:
    "Bricolage Grotesque",
    Arial,
    Helvetica,
    sans-serif;

  font-size:12px;
  font-weight:700;
  line-height:1;

  letter-spacing:.18em;
  text-transform:uppercase;
}

.portfolio-kicker::before{
  content:"";

  width:42px;
  height:1px;

  background:var(--zhova-gold);

  flex:0 0 auto;
}


/* ---------------------------------------------------------
   MAIN TITLE
   --------------------------------------------------------- */

.portfolio-title{
  margin:0;

  color:var(--zhova-text);

  font-family:
    "Bricolage Grotesque",
    Arial,
    Helvetica,
    sans-serif;

  font-size:clamp(52px,6vw,88px);
  font-weight:700;
  line-height:.91;

  letter-spacing:-.065em;
}

.portfolio-outline{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;

  -webkit-text-stroke:
    1.25px
    rgba(255,255,255,.72);

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-weight:700 !important;

  text-shadow:none !important;

  letter-spacing:-.055em;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.portfolio-lead{
  max-width:600px;

  margin:30px 0 0;

  color:var(--zhova-muted);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:17px;
  font-weight:400;
  line-height:1.72;
}


/* ---------------------------------------------------------
   TOPIC TAGS
   --------------------------------------------------------- */

.portfolio-topics{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin-top:28px;
}

.portfolio-topics span{
  display:inline-flex;
  align-items:center;

  min-height:34px;

  padding:8px 12px;

  border:1px solid var(--zhova-line);

  color:#d8d5cf;

  font-family:
    "Bricolage Grotesque",
    Arial,
    Helvetica,
    sans-serif;

  font-size:10px;
  font-weight:600;

  letter-spacing:.11em;
  text-transform:uppercase;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    color .25s ease;
}

.portfolio-topics span:hover{
  color:var(--zhova-text);

  border-color:
    rgba(215,181,106,.48);

  background:#101010;

  transform:translateY(-2px);
}


/* ---------------------------------------------------------
   RIGHT — VISUAL
   --------------------------------------------------------- */

.portfolio-visual{
  min-height:540px;

  position:relative;

  display:grid;
  place-items:center;

  isolation:isolate;
}


/* ---------------------------------------------------------
   ORBITS
   --------------------------------------------------------- */

.portfolio-orbit{
  position:absolute;

  border:1px solid
    rgba(215,181,106,.16);

  border-radius:50%;

  pointer-events:none;
}

.orbit-one{
  width:88%;
  aspect-ratio:1;

  transform:
    rotate(-12deg)
    scaleY(.43);
}

.orbit-two{
  width:68%;
  aspect-ratio:1;

  transform:
    rotate(23deg)
    scaleY(.35);

  border-color:
    rgba(255,255,255,.08);
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.portfolio-image{
  width:100%;
  max-width:760px;
  height:auto;

  display:block;

  position:relative;
  z-index:2;

  object-fit:contain;

  border:0;
  outline:0;

  filter:
    drop-shadow(
      0 30px 65px
      rgba(0,0,0,.55)
    );

  transform:translateZ(0);

  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    filter .4s ease;
}

.portfolio-visual:hover .portfolio-image{
  transform:
    translateY(-7px)
    scale(1.012);

  filter:
    drop-shadow(
      0 38px 78px
      rgba(0,0,0,.68)
    );
}


/* ---------------------------------------------------------
   VISUAL LABEL
   --------------------------------------------------------- */

.portfolio-visual-label{
  position:absolute;

  right:3%;
  bottom:6%;

  z-index:4;

  display:flex;
  flex-direction:column;
  gap:5px;

  padding:11px 14px;

  background:
    rgba(5,5,5,.76);

  border:
    1px solid
    rgba(215,181,106,.35);

  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);

  pointer-events:none;
}

.portfolio-visual-label span{
  color:var(--zhova-gold);

  font-family:
    "Bricolage Grotesque",
    Arial,
    sans-serif;

  font-size:9px;
  font-weight:700;

  letter-spacing:.16em;
}

.portfolio-visual-label strong{
  color:var(--zhova-text);

  font-family:
    "Bricolage Grotesque",
    Arial,
    sans-serif;

  font-size:10px;
  font-weight:600;

  letter-spacing:.12em;
}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

.portfolio-title,
.portfolio-outline,
.portfolio-lead,
.portfolio-topics span{
  -webkit-tap-highlight-color:transparent;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:980px){

  .zhova-portfolio-hero{
    grid-template-columns:1fr;

    gap:28px;

    min-height:auto;

    padding:
      48px 0
      42px;
  }

  .portfolio-copy{
    max-width:760px;
  }

  .portfolio-visual{
    min-height:440px;
  }

  .portfolio-image{
    max-width:760px;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:600px){

  .zhova-portfolio-hero{
    width:min(100% - 28px,1360px);

    padding:
      34px 0
      30px;

    gap:20px;
  }

  .portfolio-kicker{
    margin-bottom:20px;
  }

  .portfolio-title{
    font-size:
      clamp(48px,14vw,68px);

    line-height:.92;
  }

  .portfolio-lead{
    margin-top:23px;

    font-size:15px;
    line-height:1.68;
  }

  .portfolio-topics{
    margin-top:22px;
  }

  .portfolio-topics span{
    font-size:9px;
    padding:8px 10px;
  }

  .portfolio-visual{
    min-height:315px;
  }

  .portfolio-visual-label{
    right:0;
    bottom:3%;
  }

  .portfolio-orbit{
    opacity:.65;
  }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

  .portfolio-image,
  .portfolio-topics span{
    transition:none;
  }

  .portfolio-visual:hover .portfolio-image{
    transform:none;
  }

  .portfolio-topics span:hover{
    transform:none;
  }
}