/* ============================================================
   CHALUMEAU HUGUES
   ACCUEIL
   ============================================================ */


/* SLIDER */

.home-slider {
  position: relative;

  height: clamp(500px, 66vh, 760px);

  margin-top: 10px;

  overflow: hidden;

  background: #111;
}

.home-slides,
.home-slide {
  position: absolute;

  inset: 0;
}

.home-slide {
  opacity: 0;
  visibility: hidden;

  transition:
    opacity .65s ease,
    visibility .65s ease;
}

.home-slide.is-active {
  opacity: 1;
  visibility: visible;

  z-index: 1;
}

.home-slide > img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.home-slide-shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.60),
      rgba(0,0,0,.20) 46%,
      rgba(0,0,0,.06)
    );
}

.home-slide-content {
  position: absolute;

  z-index: 2;

  left: 0;
  right: 0;
  bottom: 0;

  padding-bottom: clamp(34px,4.2vw,60px);

  color: #fff;
}

.home-slide-copy {
  max-width: 760px;
}

.home-slide-meta {
  margin-bottom: 10px;

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

  letter-spacing: .18em;

  text-transform: uppercase;

  color: rgba(255,255,255,.82);
}


/* TITRE SLIDER */

.home-slide-copy h1,
.home-slide-copy h2 {
  margin: 0;

  color: #fff;

  font-size: clamp(30px,3.5vw,46px);
  font-weight: 400;

  line-height: 1;

  letter-spacing: -.03em;

  text-transform: uppercase;
}

.home-slide-copy p {
  max-width: 560px;

  margin: 16px 0 0;

  color: rgba(255,255,255,.90);

  font-size: 14px;

  line-height: 1.75;
}


/* INTRO */

.home-intro {
  padding: 32px 0 36px;
}

.home-intro-grid {
  display: grid;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(300px,.8fr);

  gap: 45px;

  align-items: end;
}

.home-title,
.home-section-title {
  font-size: var(--title-section-size);
}

.home-intro-text {
  display: flex;

  gap: 20px;
}

.home-intro-line {
  flex: 0 0 1px;

  width: 1px;

  background: #111;
}

.home-intro-text p {
  margin: 0 0 12px;

  color: #555;

  font-size: 14px;

  line-height: 1.78;
}


/* PROJETS */

.home-projects {
  padding: 28px 0 58px;

  border-top: 1px solid var(--line);
}

.home-section-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;

  margin-bottom: 22px;
}

.home-projects-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 22px;
}

.home-project-large {
  grid-column: 1 / -1;
}

.home-project-image {
  height: 300px;

  overflow: hidden;
}

.home-project-large .home-project-image {
  height: clamp(390px,42vw,590px);
}

.home-project-image img {
  height: 100%;

  object-fit: cover;
}

.home-project-info {
  display: flex;

  justify-content: space-between;

  gap: 24px;

  padding-top: 9px;
}

.home-project-info h3 {
  margin: 0;

  font-size: var(--title-content-size);
  font-weight: 400;

  line-height: 1.25;
}


/* APPROCHE */

.home-approach {
  padding: 56px 0;

  background: var(--bg-soft);
}

.home-approach-grid {
  display: grid;

  grid-template-columns:
    minmax(0,1.1fr)
    minmax(320px,.9fr);

  gap: 42px;
}

.home-approach-image {
  min-height: 470px;
}

.home-approach-image img {
  height: 100%;

  object-fit: cover;
}


/* CONTACT */

.home-contact {
  padding: 58px 0 66px;
}

.home-contact-inner {
  max-width: 820px;

  margin: 0 auto;

  text-align: center;
}

.home-contact-inner h2 {
  font-size: var(--title-section-size);
}


/* MOBILE */

@media (max-width: 700px) {

  .home-slider {
    height: 64vh;

    min-height: 500px;
  }

  .home-slide-copy h1,
  .home-slide-copy h2 {
    font-size: 30px;
  }

  .home-intro-grid,
  .home-approach-grid,
  .home-projects-grid {
    grid-template-columns: 1fr;
  }

  .home-project-large {
    grid-column: auto;
  }

  .home-project-image,
  .home-project-large .home-project-image {
    height: auto;

    aspect-ratio: 4 / 3;
  }

}