/* =========================================
   PROJECTS
========================================= */

.c-projects{
  position:relative;
  padding:clamp(80px,10vh,120px) 0;
  background:#fff;
  overflow:hidden;
  font-family:"Lexend Deca",sans-serif;
}

.c-projects__container{
  width:min(1280px,calc(100% - 48px));
  margin:0 auto;
}

/* =========================================
   HEADER
========================================= */

.c-projects__header{
  max-width:820px;
  margin:0 auto clamp(48px,6vw,72px);
  text-align:center;
}

.c-projects__subtitle{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#C98028;
}

.c-projects__title{
  margin:0;
  font-size:clamp(2rem,3.8vw,3.8rem);
  line-height:1.05;
  font-weight:700;
  color:#0A052D;
}

.c-projects__title span{
  color:#C98028;
}

.c-projects__intro{
  margin-top:1.5rem;
  font-size:clamp(1rem,1.4vw,1.125rem);
  line-height:1.75;
  color:#6d6d6d;
}

/* =========================================
   NAV
========================================= */

.c-projects__nav{
  display:none;
}

/* =========================================
   GRID / WRAP
========================================= */

.c-projects__grid-wrap{
  position:relative;
}

.c-projects__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
}

.c-projects__item{
  grid-column:span 4;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:#0A052D;
  min-height:520px;
}

.c-projects__item--featured{
  grid-column:span 8;
  min-height:680px;
}

/* =========================================
   LINK / MEDIA
========================================= */

.c-projects__link,
.c-projects__media{
  display:block;
  width:100%;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.c-projects__media{
  position:relative;
}

.c-projects__image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:
    transform .6s ease,
    filter .35s ease;
}

.c-projects__item:hover .c-projects__image{
  transform:scale(1.04);
  filter:brightness(.72);
}

/* =========================================
   OVERLAY
========================================= */

.c-projects__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:32px;
  background:linear-gradient(
    180deg,
    rgba(10,5,45,.06) 0%,
    rgba(10,5,45,.82) 100%
  );
}

.c-projects__content{
  width:100%;
  color:#fff;
  transform:translateY(14px) scale(.985);
  filter:blur(4px);
  opacity:.92;
  transition:
    opacity .35s ease,
    transform .35s ease,
    filter .35s ease;
}

.c-projects__item:hover .c-projects__content{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* =========================================
   TEXT CONTENT
========================================= */

.c-projects__category{
  display:inline-flex;
  padding:.55rem .9rem;
  margin-bottom:18px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
}

.c-projects__name{
  margin:0;
  font-size:clamp(1.6rem,2.4vw,2.6rem);
  line-height:1.08;
  font-weight:700;
}

.c-projects__client{
  margin-top:10px;
  font-size:.95rem;
  font-weight:300;
  opacity:.82;
}

.c-projects__description{
  margin-top:18px;
  font-size:1rem;
  line-height:1.65;
  max-width:58ch;
  opacity:.92;
}

.c-projects__services{
  margin:24px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:14px;
}

.c-projects__service{
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-size:.95rem;
  line-height:1.6;
}

.c-projects__service-text{
  flex:1;
}

.c-projects__check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
  flex-shrink:0;
  border-radius:6px;
  background:linear-gradient(180deg,#DFB37E 0%,#C98028 100%);
  color:#0A052D;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

.c-projects__check svg{
  width:12px;
  height:12px;
  display:block;
}

/* =========================================
   FOOTER
========================================= */

.c-projects__footer{
  margin-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.c-projects__highlight{
  display:inline-flex;
  align-items:center;
  padding:.75rem 1rem;
  border-radius:999px;
  background:#C98028;
  color:#fff;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.c-projects__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:48px;
  padding:0 22px;
  border-radius:6px;
  background:linear-gradient(90deg,#DFB37E 0%,#C98028 100%);
  color:#0A052D;
  font-size:14px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease,
    color .25s ease;
}

.c-projects__item:hover .c-projects__cta{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
  filter:brightness(1.04);
}

.c-projects__cta svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  transition:transform .25s ease;
}

.c-projects__item:hover .c-projects__cta svg{
  transform:translate(3px,-3px);
}

/* =========================================
   TABLET / MOBILE
========================================= */

@media (max-width: 991px){

  .c-projects{
    padding:48px 0;
  }

  .c-projects__container{
    width:calc(100% - 32px);
  }

  .c-projects__header{
    margin:0 0 16px;
    text-align:left;
  }

  .c-projects__title{
    font-size:1.8rem;
  }

  .c-projects__nav{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    margin:0 0 16px;
  }

  .c-projects__arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(41,31,70,.14);
    border-radius:999px;
    background:#fff;
    color:#291F46;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(41,31,70,.08);
    transition:
      transform .2s ease,
      background-color .2s ease,
      border-color .2s ease,
      color .2s ease,
      box-shadow .2s ease,
      opacity .2s ease;
  }

  .c-projects__arrow:hover{
    transform:translateY(-1px);
    border-color:rgba(201,128,40,.35);
    color:#C98028;
    box-shadow:0 14px 28px rgba(41,31,70,.12);
  }

  .c-projects__arrow:focus{
    outline:none;
  }

  .c-projects__arrow:focus-visible{
    outline:3px solid #C98028;
    outline-offset:3px;
  }

  .c-projects__arrow:disabled{
    opacity:.45;
    cursor:default;
    transform:none;
    box-shadow:none;
    pointer-events:none;
  }

  .c-projects__arrow span{
    font-size:20px;
    line-height:1;
  }

  .c-projects__grid-wrap{
    overflow:hidden;
  }

  .c-projects__grid{
    display:flex;
    flex-wrap:nowrap;
    gap:16px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0 0 12px;
    scrollbar-width:none;
  }

  .c-projects__grid::-webkit-scrollbar{
    display:none;
  }

  .c-projects__item,
  .c-projects__item--featured{
    flex:0 0 78%;
    width:78%;
    max-width:78%;
    min-width:78%;
    min-height:520px;
    grid-column:auto;
    scroll-snap-align:center;
    border-radius:16px;
  }

  .c-projects__overlay{
    padding:20px 16px;
  }

  .c-projects__content{
    opacity:1;
    transform:none;
    filter:none;
  }

  .c-projects__name{
    font-size:clamp(1.3rem,4vw,1.8rem);
    line-height:1.15;
  }

  .c-projects__description,
  .c-projects__service,
  .c-projects__client{
    font-size:1rem;
    line-height:1.5;
  }

  .c-projects__footer{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================================
   MOBILE SMALL
========================================= */

@media (max-width: 640px){

  .c-projects__cta{
    width:auto;
  }

  .c-projects__item,
  .c-projects__item--featured{
    flex:0 0 86%;
    width:86%;
    max-width:86%;
    min-width:86%;
    min-height:480px;
  }
}