/* =========================================================
   JSC COMPONENT CONTRACT
   File: jsc-projects.css
   Layer: Components / Projects Index
   Version: 1.0

   PURPOSE
   ---------------------------------------------------------
   Reusable projects index page for featured project cards.

   OWNS
   - Projects hero
   - Projects grid
   - Project card layout
   - Project card hover states
   - Closing statement
   - Subtle reveal motion hooks

   DEPENDS ON
   - jsc-tokens.css
   - jsc-layout-tokens.css
   - jsc-layout.css
========================================================= */
/* ========================================================
   LOCAL PROJECTS SPACING TOKENS
======================================================== */

:root{
  --jsc-projects-hero-pt: clamp(64px, 8vw, 120px);
  --jsc-projects-hero-pb: clamp(24px, 3vw, 40px);

  --jsc-projects-grid-pt: clamp(16px, 2vw, 28px);
  --jsc-projects-grid-pb: clamp(48px, 6vw, 96px);

  --jsc-projects-card-pad: clamp(18px, 2vw, 24px);

  --jsc-projects-gap: clamp(20px, 2.2vw, 32px);

  --jsc-projects-card-radius: 30px;
  --jsc-projects-media-radius: 22px;
  --jsc-projects-card-shadow-rest: 0 10px 24px rgb(var(--jsc-rgb-black) / 0.03);
  --jsc-projects-card-shadow-hover: 0 18px 42px rgb(var(--jsc-rgb-black) / 0.10);
  --jsc-projects-card-border-hover: rgb(var(--jsc-rgb-gold) / 0.26);
}



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

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


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

.elementor .jsc-projects-hero{
  position: relative;
  padding: var(--jsc-projects-hero-pt) 80px var(--jsc-projects-hero-pb);
}

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

.elementor .jsc-projects-hero__heading-group.e-con,
.elementor .jsc-projects-hero__heading-group.elementor-element{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  max-width: 720px;
}

.elementor .jsc-projects-hero__label{
  margin: 0 0 16px !important;
  color: var(--jsc-text-on-dark-soft, var(--jsc-text-on-light-soft)) !important;
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 0.9;
}

.elementor .jsc-projects-hero__title{
  margin: 0 0 18px !important;
  max-width: 12ch;
  color: var(--jsc-text-on-light) !important;
  font-size: clamp(3rem, 5vw, 5rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance;
}

.elementor .jsc-projects-hero__lead,
.elementor .jsc-projects-hero__lead .elementor-widget-container,
.elementor .jsc-projects-hero__lead p{
  margin: 0 !important;
  max-width: 54ch;
  color: var(--jsc-text-on-light-soft) !important;
  font-size: clamp(1.02rem, 1.18vw, 1.16rem) !important;
  line-height: 1.78 !important;
  letter-spacing: 0.055em !important;
  text-wrap: pretty;
}

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

.elementor .jsc-projects-hero__cta{
  margin-top: 1.2em !important;
}


/* ========================================================
   3) GRID SECTION
======================================================== */

.elementor .jsc-projects-grid{
  position: relative;
  padding: var(--jsc-projects-grid-pt) 80px var(--jsc-projects-grid-pb);
}

.elementor .jsc-projects-grid__inner.e-con,
.elementor .jsc-projects-grid__inner.elementor-element{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 26px) !important;
  align-items: start !important;
}

@media (max-width: 1024px){
  .elementor .jsc-projects-grid__inner.e-con,
  .elementor .jsc-projects-grid__inner.elementor-element{
    grid-template-columns: 1fr !important;
  }
}


/* ========================================================
   4) PROJECT CARD
======================================================== */

.elementor .jsc-project-card.e-con,
.elementor .jsc-project-card.elementor-element{
  display: block !important;
  min-width: 0 !important;
}

.elementor .jsc-project-card__inner.e-con,
.elementor .jsc-project-card__inner.elementor-element{
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  height: 100%;
  padding: clamp(18px, 1.8vw, 22px) !important;
  background: var(--jsc-surface-light-soft) !important;
  border: 1px solid var(--jsc-divider-dark) !important;
  border-radius: var(--jsc-projects-card-radius) !important;
  box-shadow: var(--jsc-projects-card-shadow-rest);
  transition:
    transform 420ms var(--jsc-ease),
    border-color 320ms var(--jsc-ease),
    box-shadow 420ms var(--jsc-ease),
    background-color 320ms var(--jsc-ease);
  transform: translate3d(0, 0, 0);
  will-change: transform, box-shadow;
}

.elementor .jsc-project-card:hover .jsc-project-card__inner{
  transform: translate3d(0, -4px, 0);
  border-color: var(--jsc-projects-card-border-hover);
  box-shadow: var(--jsc-projects-card-shadow-hover);
}

/* ========================================================
   5) CARD MEDIA
======================================================== */

.elementor .jsc-project-card__media.e-con,
.elementor .jsc-project-card__media.elementor-element{
  display: block !important;
  min-width: 0 !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  border-radius: var(--jsc-projects-media-radius) !important;
  background: var(--jsc-paper-deep) !important;
  position: relative;
}

.elementor .jsc-project-card__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(var(--jsc-rgb-black) / 0%) 45%,
    rgb(var(--jsc-rgb-black) / 0.10) 100%
  );
  opacity: 0;
  transition: opacity 420ms var(--jsc-ease);
  pointer-events: none;
}

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

.elementor .jsc-project-card__img img{
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  transition:
    transform 620ms var(--jsc-ease),
    filter 420ms var(--jsc-ease);
  transform: scale(1);
}

.elementor .jsc-project-card:hover .jsc-project-card__img img{
  transform: scale(1.035);
  filter: saturate(1.03);
}

.elementor .jsc-project-card:hover .jsc-project-card__media::after{
  opacity: 1;
}

/* ========================================================
   6) CARD CONTENT
======================================================== */

.elementor .jsc-project-card__content.e-con,
.elementor .jsc-project-card__content.elementor-element{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto;
}

.elementor .jsc-project-card__meta{
  margin: 0 0 10px !important;
  color: var(--jsc-text-on-light-soft) !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  opacity: 0.92;
}

.elementor .jsc-project-card__title{
  margin: 0 0 10px !important;
  max-width: 11ch;
  color: var(--jsc-text-on-light) !important;
  font-size: clamp(1.85rem, 2vw, 2.35rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance;
}

.elementor .jsc-project-card__desc,
.elementor .jsc-project-card__desc .elementor-widget-container,
.elementor .jsc-project-card__desc p{
  margin: 0 !important;
  max-width: 30ch;
  color: var(--jsc-text-on-light-soft) !important;
  font-size: clamp(0.98rem, 1vw, 1.03rem) !important;
  line-height: 1.68 !important;
  letter-spacing: 0.05em !important;
  text-wrap: pretty;
}

.elementor .jsc-project-card__link{
  display: inline-block;
  margin: 18px 0 0 !important;
  color: var(--jsc-text-on-light) !important;
  font-size: 0.88rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  position: relative;
  padding-bottom: 9px;
}

.elementor .jsc-project-card__link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 1px;
  background: rgb(var(--jsc-rgb-gold) / 0.82);
  transition:
    width 320ms var(--jsc-ease),
    transform 320ms var(--jsc-ease),
    opacity 320ms var(--jsc-ease);
  transform-origin: left center;
}

.elementor .jsc-project-card:hover .jsc-project-card__link::after{
  width: 62px;
}

/* ========================================================
   7) LINK WRAPPER SAFETY
======================================================== */

/* Use this if the entire card is wrapped in a link widget or linkable container */
.elementor .jsc-project-card a{
  color: inherit;
  text-decoration: none !important;
}

.elementor .jsc-project-card a:hover,
.elementor .jsc-project-card a:focus{
  color: inherit;
  text-decoration: none !important;
}


/* ========================================================
   8) OUTRO
======================================================== */

.elementor .jsc-projects-outro{
  position: relative;
  padding: clamp(24px, 1vw, 30px) 0 clamp(32px, 4vw, 52px);
}

.elementor .jsc-projects-outro__inner.e-con,
.elementor .jsc-projects-outro__inner.elementor-element{
  display: block !important;
  align-items: center !important;
}

.elementor .jsc-projects-outro__text,
.elementor .jsc-projects-outro__text .elementor-widget-container,
.elementor .jsc-projects-outro__text p{
  margin: 0 auto !important;
  max-width: 62ch;
  color: var(--jsc-text-on-light-soft) !important;
  text-align: center !important;
  font-size: clamp(1rem, 1.12vw, 1.12rem) !important;
  line-height: 1.86 !important;
  letter-spacing: 0.075em !important;
  text-wrap: pretty;
}

.elementor .jsc-projects-outro__title,
.elementor .jsc-projects-outro__link{
  width: auto !important;
  max-width: max-content !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding-top: 15px
}

.elementor .jsc-projects-outro__title .elementor-heading-title,
.elementor .jsc-projects-outro__link .elementor-heading-title{
  margin: 0 !important;
  text-align: center !important;
}

.elementor .jsc-projects-outro__title .elementor-heading-title{
  margin-bottom: 10px !important;
}

.elementor .jsc-projects-outro__link .elementor-heading-title a{
  display: inline-block !important;
}

/* ========================================================
   9) REVEAL MOTION
======================================================== */

.elementor .jsc-projects .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-projects .jsc-fp-reveal.is-inview{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.elementor .jsc-projects-grid__inner > .jsc-project-card:nth-child(2){
  transition-delay: 80ms;
}

.elementor .jsc-projects-grid__inner > .jsc-project-card:nth-child(3){
  transition-delay: 140ms;
}

.elementor .jsc-projects-grid__inner > .jsc-project-card:nth-child(4){
  transition-delay: 200ms;
}


/* ========================================================
   10) REDUCED MOTION
======================================================== */

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

  .elementor .jsc-project-card__inner,
  .elementor .jsc-project-card__img img,
  .elementor .jsc-project-card__media::after,
  .elementor .jsc-project-card__link::after{
    transition: none;
  }

  .elementor .jsc-project-card:hover .jsc-project-card__inner{
    transform: none;
    box-shadow: var(--jsc-projects-card-shadow-rest);
  }

  .elementor .jsc-project-card:hover .jsc-project-card__img img{
    transform: none;
    filter: none;
  }

  .elementor .jsc-project-card:hover .jsc-project-card__media::after{
    opacity: 0;
  }
}