/* =====================================================
   PORTFOLIO OGAH SÉVÉRIN
   DEVELOPPEMENT WEB
   MOBILE FIRST
===================================================== */


/* =====================================================
   HERO
===================================================== */

.projects-hero{
  position:relative;

  min-height:70svh;

  padding:118px 0 76px;

  display:flex;
  align-items:center;

  overflow:hidden;

  background:#070707;
}

.projects-hero__glow{
  position:absolute;

  top:-210px;
  right:-300px;

  width:570px;
  height:570px;

  border-radius:50%;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(200,162,103,.11),
      transparent 68%
    );
}

.projects-hero .container{
  position:relative;
  z-index:2;
}

.projects-hero__title{
  width:100%;
  max-width:1080px;

  color:#f7f7f4;

  font-size:clamp(42px,11vw,65px);

  line-height:.99;
  letter-spacing:-.055em;
}

.projects-hero__title span{
  display:inline;
  color:#ecece7;
}

.projects-hero__intro{
  max-width:730px;

  margin-top:27px;

  color:#e7e7e2;

  font-size:16px;
  line-height:1.82;
}


/* =====================================================
   SHOWCASE
===================================================== */

.projects-showcase{
  padding:70px 0 100px;

  background:#080808;
}


/* =====================================================
   PROJET
===================================================== */

.project-showcase{
  padding:46px 0;

  border-top:1px solid rgba(255,255,255,.11);

  display:grid;

  gap:30px;
}

.project-showcase:last-child{
  border-bottom:1px solid rgba(255,255,255,.11);
}


/* =====================================================
   IMAGE
===================================================== */

.project-showcase__media{
  position:relative;

  width:100%;
  aspect-ratio:16 / 9;

  overflow:hidden;

  background:#111;

  border:1px solid rgba(255,255,255,.08);
}

.project-showcase__media img{
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  transform:scale(1.005);

  transition:
    transform .8s var(--ease),
    filter .5s ease;
}

.project-showcase:hover
.project-showcase__media img{
  transform:scale(1.035);
}


/* =====================================================
   NUMERO
===================================================== */

.project-showcase__number{
  position:absolute;

  top:15px;
  left:15px;

  min-width:39px;
  height:39px;

  padding:0 11px;

  display:grid;
  place-items:center;

  background:rgba(7,7,7,.84);

  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;

  color:var(--gold);

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

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


/* =====================================================
   CONTENU
===================================================== */

.project-showcase__info{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:28px;
}

.project-showcase__type{
  color:var(--gold);

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

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

.project-showcase h2{
  max-width:850px;

  margin-top:14px;

  color:#f5f5f1;

  font-size:clamp(32px,8.5vw,50px);

  line-height:1.04;
}

.project-showcase__info > div:first-child > p{
  max-width:720px;

  margin-top:20px;

  color:#deded9;

  font-size:14px;
  line-height:1.82;
}


/* =====================================================
   META
===================================================== */

.project-showcase__meta{
  display:grid;

  gap:16px;
}

.project-showcase__meta div{
  padding-top:15px;

  border-top:1px solid rgba(255,255,255,.09);
}

.project-showcase__meta span{
  display:block;

  margin-bottom:6px;

  color:#bebeb9;

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

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

.project-showcase__meta p{
  color:#deded9;

  font-size:12px;
  line-height:1.6;
}


/* =====================================================
   LIEN EXTERNE
===================================================== */

.project-showcase__link{
  width:max-content;
  max-width:100%;

  display:inline-flex;
  align-items:center;

  gap:8px;

  color:#f2f2ee;

  font-size:13px;
  font-weight:700;
}

.project-showcase__link span{
  color:var(--gold);

  transition:
    transform .3s ease;
}

.project-showcase__link:hover span{
  transform:translate(3px,-3px);
}


/* =====================================================
   BRIDGE SEO
===================================================== */

.projects-seo-bridge{
  position:relative;

  padding:95px 0;

  overflow:hidden;

  background:#f4f2ed;
}

.projects-seo-bridge::after{
  content:"";

  position:absolute;

  right:-270px;
  bottom:-280px;

  width:540px;
  height:540px;

  border-radius:50%;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(200,162,103,.09),
      transparent 68%
    );
}

.projects-seo-bridge__inner{
  position:relative;

  z-index:2;

  max-width:1000px;
}

.projects-seo-bridge h2{
  width:100%;
  max-width:980px;

  color:#151515;

  font-size:clamp(34px,9vw,52px);

  line-height:1.05;
}

.projects-seo-bridge h2 span{
  display:inline;
  color:#77736d;
}

.projects-seo-bridge p:not(.eyebrow){
  max-width:720px;

  margin-top:24px;

  color:#514e49;

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

.projects-seo-bridge .btn{
  margin-top:29px;
}


/* =====================================================
   TABLETTE
===================================================== */

@media(min-width:640px){

  .projects-hero__title{
    font-size:clamp(54px,8.4vw,76px);
  }

  .project-showcase{
    padding:60px 0;
  }

  .project-showcase h2{
    font-size:clamp(39px,6vw,55px);
  }

  .project-showcase__meta{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:20px;
  }

}


/* =====================================================
   DESKTOP
===================================================== */

@media(min-width:980px){

  .projects-hero{
    min-height:75svh;

    padding:150px 0 90px;
  }

  .projects-hero__title{
    max-width:1100px;

    font-size:clamp(65px,6.3vw,82px);
  }

  .projects-hero__intro{
    font-size:16px;
  }

  .projects-showcase{
    padding:85px 0 135px;
  }

  .project-showcase{
    padding:80px 0;

    grid-template-columns:
      minmax(0,1.25fr)
      minmax(330px,.75fr);

    gap:58px;

    align-items:center;
  }

  .project-showcase:nth-child(even){
    grid-template-columns:
      minmax(330px,.75fr)
      minmax(0,1.25fr);
  }

  .project-showcase:nth-child(even)
  .project-showcase__media{
    order:2;
  }

  .project-showcase:nth-child(even)
  .project-showcase__info{
    order:1;
  }

  .project-showcase h2{
    font-size:clamp(43px,3.6vw,55px);
  }

  .project-showcase__info > div:first-child > p{
    font-size:15px;
  }

  .projects-seo-bridge{
    padding:130px 0;
  }

  .projects-seo-bridge h2{
    font-size:clamp(48px,4.45vw,62px);
  }

}


/* =====================================================
   GRAND DESKTOP
===================================================== */

@media(min-width:1280px){

  .projects-hero__title{
    font-size:82px;
  }

}