/* ==========================================================================
   Kodiyo — what-we-do.css
   Sections unique to the What We Do page. The page hero, the centred
   statements and the closing CTA are shared blocks and live in components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. What's in every email
   Six items, each hung off a hairline rule. The rule draws down as the card
   reveals (see js/what-we-do.js); without JS it is simply already drawn.
   -------------------------------------------------------------------------- */
.checklist__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.checklist__title {
  font-size: var(--fs-h2);
}

.checklist__lead {
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  color: var(--color-muted);
}

.checklist__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl) var(--space-xl);
}

.checklist__item {
  position: relative;
  padding-left: var(--space-md);
}

/* The rule is its own element so it can be animated without touching layout. */
.checklist__rule {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--color-line-strong);
  transform-origin: top center;
}

.checklist__name {
  font-family: var(--font-sub);
  font-weight: var(--weight-mid);
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-fg);
}

.checklist__text {
  margin-top: var(--space-md);
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 32ch;
}

@media (min-width: 700px) {
  .checklist__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .checklist__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3xl) var(--space-2xl);
  }
}

/* --------------------------------------------------------------------------
   2. Photoshoot-quality imagery
   Copy on the left, a scattered collage on the right. Each photo keeps its own
   proportions — widths are a share of the collage box, heights follow.
   -------------------------------------------------------------------------- */
.showcase__title {
  text-align: center;
  font-size: var(--fs-h2);
  margin-bottom: var(--space-3xl);
}

.showcase__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
}

.showcase__text {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 34ch;
}

.collage {
  position: relative;
  width: min(100%, 460px);
  margin-inline: auto;
  aspect-ratio: 1 / 1.05;
}

.collage__shot {
  position: absolute;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.5);
  will-change: transform;
}

/* Portrait, top-left. */
.collage__shot:nth-child(1) { width: 53%; left: 0;     top: 0;    z-index: 1; }
/* Portrait, right and lower. */
.collage__shot:nth-child(2) { width: 51%; left: 48.5%; top: 17%;  z-index: 2; }
/* Landscape, bottom-centre — overlaps both. */
.collage__shot:nth-child(3) { width: 58%; left: 6%;    top: 54%;  z-index: 3; }

@media (min-width: 900px) {
  .showcase__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(var(--space-2xl), 6vw, var(--space-4xl));
  }

  .showcase__copy {
    padding-inline-start: var(--content-inset);
  }

  .collage {
    width: min(100%, 520px);
    margin-inline: auto 0;
  }
}

/* --------------------------------------------------------------------------
   3. Personalization — the premium upgrade
   A sliding carousel of personalized image examples on the left, the
   explanation on the right.
   -------------------------------------------------------------------------- */
.upgrade__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.upgrade__title {
  font-size: var(--fs-h2);
}

.upgrade__lead {
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  color: var(--color-muted);
}

.upgrade__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
}

/* The carousel ---------------------------------------------------------- 
   One slide at a time, filling the box. Slides are stacked in a single grid
   cell; js/what-we-do.js moves the outgoing one out to the left while the
   incoming one arrives from the right. */
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  height: clamp(320px, 48vh, 480px);
}

.carousel__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
}

.carousel__slide {
  grid-area: 1 / 1;
  display: grid;
  /* Explicit, definite tracks: without them the row is auto-sized and the
     image's percentage height cannot resolve, so it falls back to its
     intrinsic size and overflows the box. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  height: 100%;
  will-change: transform;
}

.carousel__slide img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

/* Without JS the slides cannot take turns, so show only the first. */
html:not(.js) .carousel__slide + .carousel__slide {
  display: none;
}

/* The explanation ------------------------------------------------------- */
.upgrade__body > * + * {
  margin-top: var(--space-lg);
}

.upgrade__para {
  color: var(--color-muted);
  line-height: 1.65;
  max-width: 48ch;
}

.upgrade__subhead {
  font-family: var(--font-sub);
  font-weight: var(--weight-mid);
  font-size: var(--fs-body);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-fg);
  margin-top: var(--space-xl);
}

/* Tighten the gap between a subhead and the paragraph it introduces. */
.upgrade__subhead + .upgrade__para {
  margin-top: var(--space-2xs);
}

@media (min-width: 900px) {
  .upgrade__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(var(--space-2xl), 5vw, var(--space-3xl));
    align-items: start;
  }

  .carousel {
    position: sticky;
    top: calc(var(--header-h) + var(--space-2xl));
  }
}