/* =========================================================
   JSC COMPONENT CONTRACT
   File: jsc-featured-project.css
   Layer: Components / Featured Project
   Version: 1.3

   PURPOSE
   ---------------------------------------------------------
   Reusable featured project template for portfolio pages.

   OWNS
   - Hero section layout
   - Tightened featured-project typography
   - Elementor image gallery presentation
   - Outro statement
   - Subtle reveal motion states

   DEPENDS ON
   - jsc-tokens.css
   - jsc-layout-tokens.css
   - jsc-layout.css
========================================================= */


/* ========================================================
   1) ROOT
======================================================== */

.elementor .jsc-featured-project{
  position: relative;
  color: var(--jsc-text-on-light);
}


/* ========================================================
   2) HERO SECTION
======================================================== */

.elementor .jsc-fp-hero{
  position: relative;
  padding: clamp(24px, 3vw, 36px) 0 clamp(10px, 1.5vw, 18px);
}

.elementor .jsc-fp-hero__inner.e-con,
.elementor .jsc-fp-hero__inner.elementor-element{
  display: grid !important;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr) !important;
  gap: clamp(34px, 4vw, 64px) !important;
  align-items: center !important;

  padding: clamp(44px, 4.5vw, 60px) !important;
  background: var(--jsc-surface-light-soft) !important;
  border: 1px solid var(--jsc-divider-dark) !important;
  border-radius: 36px !important;

  --container-widget-width: 100%;
  --container-widget-flex-grow: 0;
  --container-widget-height: initial;
}

@media (max-width: 1024px){
  .elementor .jsc-fp-hero__inner.e-con,
  .elementor .jsc-fp-hero__inner.elementor-element{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 34px !important;
  }
}


/* ========================================================
   3) HERO COLUMNS
======================================================== */

.elementor .jsc-fp-hero__content.e-con,
.elementor .jsc-fp-hero__content.elementor-element{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: 440px;
}

.elementor .jsc-fp-hero__media.e-con,
.elementor .jsc-fp-hero__media.elementor-element{
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  align-self: center !important;
}


/* ========================================================
   4) HERO TYPOGRAPHY
======================================================== */

.elementor .jsc-fp-hero__title{
  margin: 0 0 22px !important;
  max-width: 9ch;
  color: var(--jsc-text-on-light) !important;
  font-size: clamp(3.05rem, 4.3vw, 4.5rem) !important;
  line-height: 0.93 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance;
}

.elementor .jsc-fp-hero__lead,
.elementor .jsc-fp-hero__lead .elementor-widget-container,
.elementor .jsc-fp-hero__lead p{
  margin: 0 !important;
  max-width: 26ch;
  color: var(--jsc-text-on-light-soft) !important;
  font-size: clamp(1.04rem, 1.12vw, 1.14rem) !important;
  line-height: 1.78 !important;
  letter-spacing: 0.05em !important;
  text-wrap: pretty;
}

.elementor .jsc-fp-hero__lead p + p{
  margin-top: 0.85em !important;
}


/* ========================================================
   5) HERO IMAGE
======================================================== */

.elementor .jsc-fp-hero__img-wrap.e-con,
.elementor .jsc-fp-hero__img-wrap.elementor-element{
  overflow: hidden !important;
  border-radius: 28px !important;
  background: var(--jsc-paper-deep) !important;
}

.elementor .jsc-fp-hero__img,
.elementor .jsc-fp-hero__img img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.elementor .jsc-fp-hero__img img{
  aspect-ratio: 1.48 / 1 !important;
  object-fit: cover !important;
  transition: transform var(--jsc-slow) var(--jsc-ease);
}

.elementor .jsc-fp-hero__media:hover .jsc-fp-hero__img img{
  transform: scale(1.018);
}

.elementor .jsc-fp-hero__caption-wrap.e-con,
.elementor .jsc-fp-hero__caption-wrap.elementor-element{
  margin-top: 16px !important;
  max-width: 34ch;
}

.elementor .jsc-fp-hero__caption{
  margin: 0 !important;
  color: var(--jsc-text-on-light-soft) !important;
  font-size: clamp(0.95rem, 0.98vw, 1.02rem) !important;
  line-height: 1.62 !important;
  letter-spacing: 0.065em !important;
  text-wrap: pretty;
}

/* ========================================================
   6) GALLERY
======================================================== */

.elementor .jsc-fp-gallery{
  position: relative;
  padding: clamp(18px, 1vw, 25px) 0 clamp(18px, 2vw, 24px);
}

.elementor .jsc-fp-gallery__inner.e-con,
.elementor .jsc-fp-gallery__inner.elementor-element{
  display: block !important;
}

.elementor .jsc-fp-gallery__description,
.elementor .jsc-fp-gallery__description-link{
  padding: clamp(8px, 1vw, 15px) 20px clamp(18px, 2vw, 24px);
}

.elementor .jsc-fp-gallery__widget{
  width: 100%;
}

.elementor .jsc-fp-gallery__widget .e-gallery,
.elementor .jsc-fp-gallery__widget .gallery,
.elementor .jsc-fp-gallery__widget .elementor-image-gallery{
  width: 100%;
}

.elementor .jsc-fp-gallery__widget .gallery{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px) !important;
}

@media (max-width: 1024px){
  .elementor .jsc-fp-gallery__widget .gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px){
  .elementor .jsc-fp-gallery__widget .gallery{
    grid-template-columns: 1fr;
  }
}

.elementor .jsc-fp-gallery__widget .gallery-item{
  margin: 0 !important;
  width: auto !important;
}

.elementor .jsc-fp-gallery__widget .gallery-icon,
.elementor .jsc-fp-gallery__widget .gallery-item > div,
.elementor .jsc-fp-gallery__widget a{
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: var(--jsc-paper-deep);
}

.elementor .jsc-fp-gallery__widget img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition:
    transform 520ms var(--jsc-ease),
    filter 520ms var(--jsc-ease);
}

.elementor .jsc-fp-gallery__widget a:hover img{
  transform: scale(1.035);
  filter: saturate(1.02);
}

.elementor .jsc-fp-gallery__widget .gallery-caption,
.elementor .jsc-fp-gallery__widget figcaption{
  display: none !important;
}


/* ========================================================
   7) OUTRO
======================================================== */

.elementor .jsc-fp-outro{
  padding: 18px 0 clamp(18px, 2vw, 24px);
}

.elementor .jsc-fp-outro__text{
  margin: 0 auto !important;
  max-width: 44ch;
  color: var(--jsc-text-on-light-soft) !important;
  text-align: center !important;
  font-size: clamp(1rem, 1.08vw, 1.08rem) !important;
  line-height: 1.82 !important;
  letter-spacing: 0.11em !important;
  text-wrap: pretty;
}

.elementor .jsc-fp-outro__text.jsc-fp-outro__text-left{
  text-align: left !important;
}


/* ========================================================
   8) REVEAL
======================================================== */

.elementor .jsc-fp-reveal{
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 700ms var(--jsc-ease),
    transform 700ms var(--jsc-ease);
  will-change: opacity, transform;
}

.elementor .jsc-fp-reveal.is-inview{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ========================================================
   9) REDUCED MOTION
======================================================== */

@media (prefers-reduced-motion: reduce){
  .elementor .jsc-fp-reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }

  .elementor .jsc-fp-hero__img img,
  .elementor .jsc-fp-gallery__widget img{
    transition: none;
  }

  .elementor .jsc-fp-hero__media:hover .jsc-fp-hero__img img,
  .elementor .jsc-fp-gallery__widget a:hover img{
    transform: none;
    filter: none;
  }
}