/* =========================================================
   WARWICK MOTO PROJECT
========================================================= */

.moto-page {
  width: min(1200px, calc(100% - 80px));

  margin: 0 auto;

  padding-bottom: var(--space-96);

  font-family: var(--font-main);
}


/* =========================================================
   HEADER
========================================================= */

.moto-page .project-header {
  width: 100%;

  margin-bottom: var(--space-64);

  padding: var(--space-24) 0 var(--space-32);

  text-align: center;

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


.moto-page .project-header-eyebrow {
  margin: 0 0 var(--space-16);

  font-size: var(--font-10);

  letter-spacing: 4px;

  color: var(--grey);
}


.moto-page .project-header-title {
  margin: 0;

  font-size: clamp(
    var(--font-44),
    5vw,
    var(--font-62)
  );

  font-weight: 300;

  line-height: 1;

  letter-spacing: -2px;

  color: var(--black);
}


.moto-page .project-header-title span {
  margin-left: var(--space-8);

  font-style: italic;

  color: var(--accent);
}


.moto-page .project-header-subtitle {
  max-width: 700px;

  margin: var(--space-24) auto 0;

  font-size: var(--font-12);

  line-height: 1.7;

  color: var(--dark-grey);
}


/* =========================================================
   COMMON LABELS
========================================================= */

.moto-page .project-kicker {
  margin: 0 0 var(--space-12);

  font-size: var(--font-10);

  letter-spacing: 2px;

  color: var(--accent);
}


.moto-page .project-section-index {
  margin: 0 0 var(--space-24);

  font-size: var(--font-12);

  letter-spacing: 2px;

  color: var(--mid-grey);
}


/* =========================================================
   OVERVIEW
========================================================= */

.moto-page .project-overview {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(260px, 0.7fr);

  gap: var(--space-80);

  align-items: start;

  padding-bottom: var(--space-64);
}


.moto-page .project-overview-copy h2 {
  max-width: 720px;

  margin: 0 0 var(--space-24);

  font-size: var(--font-44);
  font-weight: 300;

  line-height: 1.1;

  letter-spacing: -1px;

  color: var(--black);
}


.moto-page .project-overview-copy > p:not(.project-kicker) {
  max-width: 720px;

  margin: 0 0 var(--space-16);

  font-size: var(--font-16);

  line-height: 1.7;

  color: var(--dark-grey);
}


/* =========================================================
   PROJECT DATA
========================================================= */

.moto-page .project-data {
  border-top: 1px solid var(--accent);
}


.moto-page .project-data-item {
  padding: var(--space-16) 0;

  border-bottom: 1px solid var(--light-grey);
}


.moto-page .project-data-item span {
  display: block;

  margin-bottom: var(--space-8);

  font-size: var(--font-10);

  letter-spacing: 2px;

  color: var(--accent);
}


.moto-page .project-data-item p {
  margin: 0;

  font-size: var(--font-14);

  line-height: 1.5;

  color: var(--dark-grey);
}


/* =========================================================
   HERO
========================================================= */

.moto-page .project-hero-image {
  width: 100%;

  margin-bottom: var(--space-96);

  overflow: hidden;
}


.moto-page .project-hero-image img {
  width: 100%;
  height: auto;

  display: block;
}


/* =========================================================
   PROCESS
========================================================= */

.moto-page .project-process {
  padding: var(--space-80) 0;

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


.moto-page .project-process-heading {
  margin-bottom: var(--space-48);
}


.moto-page .project-process-heading h2 {
  margin: 0;

  font-size: var(--font-44);
  font-weight: 300;

  color: var(--black);
}


.moto-page .project-process-grid {
  display: grid;

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

  gap: var(--space-24);
}


.moto-page .project-process-step {
  padding-top: var(--space-16);

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


.moto-page .project-process-step span {
  display: block;

  margin-bottom: var(--space-24);

  font-size: var(--font-10);

  color: var(--accent);
}


.moto-page .project-process-step h3 {
  margin: 0 0 var(--space-12);

  font-size: var(--font-20);
  font-weight: 400;

  color: var(--black);
}


.moto-page .project-process-step p {
  margin: 0;

  font-size: var(--font-14);

  line-height: 1.6;

  color: var(--dark-grey);
}


/* =========================================================
   CHAPTER DIVIDER
========================================================= */

.moto-page .moto-chapter {
  max-width: 850px;

  margin: var(--space-96) auto;

  text-align: center;
}


.moto-page .moto-chapter h2 {
  margin: 0 0 var(--space-24);

  font-size: var(--font-52);
  font-weight: 300;

  line-height: 1.1;

  color: var(--black);
}


.moto-page .moto-chapter > p:last-child {
  max-width: 700px;

  margin: 0 auto;

  font-size: var(--font-16);

  line-height: 1.7;

  color: var(--dark-grey);
}


.moto-page .moto-chapter-secondary {
  padding-top: var(--space-80);

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


/* =========================================================
   STANDARD PROJECT SECTION
========================================================= */

.moto-page .project-section {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: var(--space-80);

  align-items: center;

  padding: var(--space-80) 0;

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


.moto-page .project-section.reverse {
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, 0.9fr);
}


.moto-page .project-section.reverse .project-section-copy {
  order: 2;
}


.moto-page .project-section.reverse .project-section-media {
  order: 1;
}


/* =========================================================
   SECTION COPY
========================================================= */

.moto-page .project-section-copy h2 {
  margin: 0 0 var(--space-24);

  font-size: var(--font-36);
  font-weight: 300;

  line-height: 1.15;

  color: var(--black);
}


.moto-page .project-section-copy > p:not(
  .project-kicker,
  .project-section-index
) {
  margin: 0 0 var(--space-24);

  font-size: var(--font-16);

  line-height: 1.7;

  color: var(--dark-grey);
}


.moto-page .project-section-copy ul {
  margin: 0;

  padding-left: var(--space-24);
}


.moto-page .project-section-copy li {
  margin-bottom: var(--space-12);

  font-size: var(--font-14);

  line-height: 1.6;

  color: var(--dark-grey);
}


/* =========================================================
   MEDIA
========================================================= */

.moto-page .project-section-media {
  min-width: 0;
}


.moto-page .project-section-media img {
  width: 100%;
  height: auto;

  display: block;

  object-fit: contain;
}


.moto-page .project-media-stack {
  display: grid;

  gap: var(--space-16);
}


.moto-page .project-media-grid-2 {
  display: grid;

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

  gap: var(--space-16);
}


/* =========================================================
   STATEMENT
========================================================= */

.moto-page .project-statement {
  max-width: 900px;

  margin: var(--space-96) auto;

  text-align: center;
}


.moto-page .project-statement > p {
  margin-bottom: var(--space-16);

  font-size: var(--font-10);

  letter-spacing: 4px;

  color: var(--accent);
}


.moto-page .project-statement h2 {
  margin: 0;

  font-size: var(--font-44);
  font-weight: 300;

  line-height: 1.2;

  color: var(--black);
}


/* =========================================================
   FEATURE
========================================================= */

.moto-page .project-feature {
  padding: var(--space-80) 0;

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


.moto-page .project-feature-heading {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-80);

  align-items: end;

  margin-bottom: var(--space-48);
}


.moto-page .project-feature-heading h2 {
  margin: 0;

  font-size: var(--font-44);
  font-weight: 300;

  line-height: 1.1;

  color: var(--black);
}


.moto-page .project-feature-heading > p {
  margin: 0;

  font-size: var(--font-16);

  line-height: 1.7;

  color: var(--dark-grey);
}


/* =========================================================
   GALLERY
========================================================= */

.moto-page .project-gallery {
  display: grid;

  gap: var(--space-24);
}


.moto-page .project-gallery.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


.moto-page .project-gallery figure {
  margin: 0;
}


.moto-page .project-gallery img {
  width: 100%;
  height: auto;

  display: block;

  object-fit: contain;
}


.moto-page .project-gallery figcaption {
  padding-top: var(--space-8);

  font-size: var(--font-10);

  letter-spacing: 2px;

  color: var(--grey);
}


/* =========================================================
   FINAL FEATURE
========================================================= */

.moto-page .project-final {
  padding: var(--space-96) 0;

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


.moto-page .project-final-heading {
  max-width: 700px;

  margin-bottom: var(--space-48);
}


.moto-page .project-final-heading h2 {
  margin: 0 0 var(--space-16);

  font-size: var(--font-44);
  font-weight: 300;

  color: var(--black);
}


.moto-page .project-final-heading > p:last-child {
  margin: 0;

  font-size: var(--font-16);

  line-height: 1.7;

  color: var(--dark-grey);
}


.moto-page .project-final-image img {
  width: 100%;
  height: auto;

  display: block;
}


.moto-page .project-final-image-stack {
  display: grid;

  gap: var(--space-24);
}


/* =========================================================
   REFLECTION
========================================================= */

.moto-page .project-reflection {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-80);

  padding: var(--space-80) 0;

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


.moto-page .project-reflection h2 {
  margin: 0;

  font-size: var(--font-36);
  font-weight: 300;

  line-height: 1.2;

  color: var(--black);
}


.moto-page .project-reflection-copy p {
  margin: 0 0 var(--space-16);

  font-size: var(--font-16);

  line-height: 1.7;

  color: var(--dark-grey);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .moto-page .project-overview {
    grid-template-columns: 1fr;

    gap: var(--space-48);
  }


  .moto-page .project-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .moto-page .project-section,
  .moto-page .project-section.reverse {
    grid-template-columns: 1fr;

    gap: var(--space-48);
  }


  .moto-page .project-section.reverse .project-section-copy,
  .moto-page .project-section.reverse .project-section-media {
    order: initial;
  }


  .moto-page .project-feature-heading {
    grid-template-columns: 1fr;

    gap: var(--space-24);
  }


  .moto-page .project-reflection {
    grid-template-columns: 1fr;

    gap: var(--space-32);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .moto-page {
    width: calc(100% - 40px);
  }


  .moto-page .project-header-title {
    font-size: var(--font-44);
  }


  .moto-page .moto-chapter h2 {
    font-size: var(--font-36);
  }


  .moto-page .project-overview-copy h2,
  .moto-page .project-process-heading h2,
  .moto-page .project-feature-heading h2,
  .moto-page .project-final-heading h2,
  .moto-page .project-statement h2 {
    font-size: var(--font-36);
  }


  .moto-page .project-process-grid,
  .moto-page .project-gallery.two-columns,
  .moto-page .project-media-grid-2 {
    grid-template-columns: 1fr;
  }


  .moto-page .project-section {
    padding: var(--space-64) 0;
  }


  .moto-page .project-final {
    padding: var(--space-64) 0;
  }


  .moto-page .project-reflection {
    padding: var(--space-64) 0;
  }

}


.cae-project-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0 52px;
}

.cae-project-nav a {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #555;
  text-decoration: none;
}

.cae-project-nav a:hover {
  color: var(--accent);
}

/* =========================================================
   BESPOKE BATTERY PACK GALLERY
========================================================= */

.moto-page .battery-gallery {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, 0.9fr);

  gap: var(--space-48);

  align-items: center;
}


/* BOTH FIGURES */

.moto-page .battery-gallery figure {
  margin: 0;

  display: flex;

  flex-direction: column;
}


/* LEFT — BATTERY PACK PHOTO */

.moto-page .battery-gallery figure:first-child img {
  width: 100%;

  height: 460px;

  display: block;

  object-fit: cover;

  object-position: center;

  margin: 0;
}


/* RIGHT — MOUNTING SYSTEM CAD */

.moto-page .battery-gallery figure:last-child {
  align-items: center;
}


.moto-page .battery-gallery figure:last-child img {
  width: 88%;

  height: 400px;

  display: block;

  object-fit: contain;

  margin: 0 auto;
}


/* CAPTIONS */

.moto-page .battery-gallery figcaption {
  width: 100%;

  padding-top: var(--space-12);

  font-size: var(--font-10);

  letter-spacing: 2px;

  color: var(--grey);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .moto-page .battery-gallery {
    grid-template-columns: 1fr;

    gap: var(--space-32);
  }


  .moto-page .battery-gallery figure:first-child img,
  .moto-page .battery-gallery figure:last-child img {
    width: 100%;

    height: auto;

    max-height: 460px;

    object-fit: contain;
  }

}

/* =========================================================
   FRAME & POWERTRAIN — FEATURED IMAGE ARRANGEMENT
========================================================= */

.moto-page .powertrain-media {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 0.85fr);

  gap: 0;

  width: 125%;

  margin-left: -25%;

  align-items: center;
}


/* LEFT IMAGE */

.moto-page .powertrain-media img:first-child {
  width: 100%;

  height: 440px;

  display: block;

  object-fit: contain;

  object-position: center;

  position: relative;

  z-index: 1;
}


/* RIGHT IMAGE */

.moto-page .powertrain-media img:last-child {
  width: 115%;

  height: 470px;

  display: block;

  object-fit: contain;

  object-position: center;

  margin-left: -18%;

  position: relative;

  z-index: 2;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .moto-page .powertrain-media {
    width: 100%;

    margin-left: 0;

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

    gap: var(--space-16);
  }


  .moto-page .powertrain-media img:first-child,
  .moto-page .powertrain-media img:last-child {
    width: 100%;

    height: 360px;

    margin-left: 0;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .moto-page .powertrain-media {
    grid-template-columns: 1fr;

    gap: var(--space-24);
  }


  .moto-page .powertrain-media img:first-child,
  .moto-page .powertrain-media img:last-child {
    width: 100%;

    height: auto;

    max-height: 420px;

    margin-left: 0;
  }

}