/* ==========================================================================
   Sonex Branding — Project case study pages
   Perfect Associate · Pinios Bakes · Oravida

   A key visual beside the write-up, then the same centred carousel used on
   the home page (styles for it live in home.css, which these pages also load).
   ========================================================================== */

/* Each case study sizes its own track, key visual and carousel — set the
   custom properties on the page's <main>. */
.pj-intro {
  display: flex;
  padding: 10px;
  max-width: var(--pj-max, 1440px);
  margin-inline: auto;
}

.pj-intro__media {
  flex: 0 0 var(--pj-media, 439px);
  max-width: var(--pj-media, 439px);
  padding: 10px;
}

.pj-intro__media img {
  width: 100%;
  height: auto;
}

.pj-intro__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px;
}

.pj-intro__title {
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--c-green-hover);
}

.pj-intro__text {
  margin-top: 20px;
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 19px;
  color: #EEEDED;
}

/* The copy is written as short stacked paragraphs with a tight leading */
.pj-intro__text p {
  margin: 0 0 1.6em;
}

.pj-intro__text p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Carousel wrapper — the slide styling itself comes from home.css
   -------------------------------------------------------------------------- */

.pj-carousel {
  padding: 10px;
}

/* The case-study carousels sit tighter than the home page one */
.pj-carousel .carousel {
  margin-bottom: 0;
}

.pj-carousel .carousel__dots {
  padding-top: 20px;
}

.pj-carousel .carousel__track {
  gap: var(--pj-gap, 29px);
}

.pj-carousel .carousel__slide {
  height: var(--pj-slide-h, 500px);
  flex: 0 0 calc((100% - 2 * var(--pj-gap, 29px)) / 3);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .pj-intro {
    flex-direction: column;
  }

  .pj-intro__media {
    flex: 1 1 auto;
    max-width: 100%;
    align-self: center;
  }

  .pj-carousel .carousel__slide {
    flex: 0 0 calc((100% - var(--pj-gap, 29px)) / 2);
  }

  .pj-intro__media img {
    max-width: 432px;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .pj-intro__title {
    font-size: var(--fs-h3);
  }

  .pj-intro__text {
    line-height: 1.5;
  }
}

@media (max-width: 767px) {
  .pj-carousel .carousel__track {
    gap: 0;
  }

  .pj-carousel .carousel__slide {
    flex: 0 0 100%;
    height: auto;
    aspect-ratio: 1;
  }
}