/* =========================================================
   REAR SUSPENSION PROJECT
========================================================= */

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

  margin: 0 auto;

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


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

.suspension-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);
}


.suspension-header-eyebrow {
  margin: 0 0 var(--space-16);

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

  letter-spacing: 4px;

  color: var(--grey);
}


.suspension-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);
}


.suspension-header-title span {
  margin-left: var(--space-8);

  font-style: italic;

  color: var(--accent);
}


.suspension-header-subtitle {
  max-width: 700px;

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

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

  line-height: 1.7;

  letter-spacing: 0.5px;

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


/* =========================================================
   COMMON TYPOGRAPHY
========================================================= */

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

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

  font-weight: 400;

  letter-spacing: 2px;

  color: var(--accent);
}


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

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

  letter-spacing: 2px;

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


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

.suspension-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);
}


.suspension-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);
}


.suspension-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
========================================================= */

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


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

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


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

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

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

  letter-spacing: 2px;

  color: var(--accent);
}


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

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

  line-height: 1.5;

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


/* =========================================================
   MAIN IMAGE
========================================================= */

.suspension-hero-image {
  width: 100%;

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

  overflow: hidden;
}


.suspension-hero-image img {
  width: 100%;
  height: auto;

  display: block;
}


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

.design-process {
  padding: var(--space-80) 0;

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


.design-process-heading {
  margin-bottom: var(--space-48);
}


.design-process-heading h2 {
  margin: 0;

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

  color: var(--black);
}


.design-process-grid {
  display: grid;

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

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


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

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


.process-step span {
  display: block;

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

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

  color: var(--accent);
}


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

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

  color: var(--black);
}


.process-step p {
  margin: 0;

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

  line-height: 1.6;

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


/* =========================================================
   MAIN TECHNICAL SECTIONS
========================================================= */

.suspension-section {
  display: grid;

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

  gap: var(--space-80);

  align-items: center;

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

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


.suspension-section-reverse {
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 0.85fr);
}


.suspension-section-reverse .suspension-section-copy {
  order: 2;
}


.suspension-section-reverse .suspension-section-media {
  order: 1;
}


.suspension-section-copy h2 {
  margin: 0 0 var(--space-24);

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

  line-height: 1.15;

  color: var(--black);
}


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

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

  line-height: 1.7;

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


.suspension-section-copy ul {
  margin: 0;

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


.suspension-section-copy li {
  margin-bottom: var(--space-12);

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

  line-height: 1.6;

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


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

.suspension-section-media {
  min-width: 0;
}


.suspension-section-media img {
  width: 100%;
  height: auto;

  display: block;
}


.suspension-media-stack {
  display: grid;

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


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

.analysis-feature {
  padding: var(--space-80) 0;

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


/* =============================
   HEADING
============================= */

.analysis-feature-heading {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-80);

  align-items: end;

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


.analysis-feature-heading h2 {
  margin: 0;

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

  line-height: 1.1;

  color: var(--black);
}


.analysis-feature-heading > p {
  max-width: 520px;

  margin: 0;

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

  line-height: 1.7;

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


/* =============================
   MAIN IMAGE
============================= */

.analysis-feature-image {
  width: 100%;

  display: flex;

  justify-content: center;

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


.analysis-feature-image img {
  width: min(820px, 100%);

  height: auto;

  display: block;

  object-fit: contain;
}


/* =============================
   IMAGE CAPTION
============================= */

.analysis-feature-caption {
  max-width: 820px;

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

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

  line-height: 1.5;

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


/* =============================
   ENGINEERING INSIGHTS
============================= */

.geometry-insights {
  display: grid;

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

  gap: var(--space-24);

  margin-top: var(--space-24);
}


.geometry-insight {
  padding-top: var(--space-16);

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


.geometry-insight span {
  display: block;

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

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

  color: var(--accent);
}


.geometry-insight h3 {
  margin: 0 0 var(--space-8);

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

  color: var(--black);
}


.geometry-insight p {
  margin: 0;

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

  line-height: 1.6;

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

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

.suspension-statement {
  max-width: 900px;

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

  text-align: center;
}


.suspension-statement > p {
  margin-bottom: var(--space-16);

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

  letter-spacing: 4px;

  color: var(--accent);
}


.suspension-statement h2 {
  margin: 0;

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

  line-height: 1.2;

  color: var(--black);
}


/* =========================================================
   SUBSYSTEMS
========================================================= */

.subsystems-section {
  padding: var(--space-96) 0;

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


.subsystems-heading {
  max-width: 700px;

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


.subsystems-heading h2 {
  margin: 0 0 var(--space-16);

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

  color: var(--black);
}


.subsystems-heading > p:last-child {
  margin: 0;

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

  line-height: 1.7;

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


.subsystems-grid {
  display: grid;

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

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


.subsystem-card {
  min-width: 0;
}


.subsystem-image {
  overflow: hidden;
}


.subsystem-image img {
  width: 100%;

  aspect-ratio: 16 / 10;

  display: block;

  object-fit: cover;

  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}


.subsystem-card:hover .subsystem-image img {
  transform: scale(1.02);

  opacity: 0.92;
}


.subsystem-copy {
  padding-top: var(--space-16);
}


.subsystem-copy span {
  display: block;

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

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

  color: var(--accent);
}


.subsystem-copy h3 {
  margin: 0 0 var(--space-12);

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

  color: var(--black);
}


.subsystem-copy p {
  max-width: 500px;

  margin: 0;

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

  line-height: 1.6;

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


/* =========================================================
   FINAL ASSEMBLY
========================================================= */

.final-assembly {
  padding: var(--space-96) 0;

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


.final-assembly-heading {
  max-width: 700px;

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


.final-assembly-heading h2 {
  margin: 0 0 var(--space-16);

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

  line-height: 1.15;

  color: var(--black);
}


.final-assembly-heading > p:last-child {
  margin: 0;

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

  line-height: 1.7;

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


/* =============================
   TWO COLUMN / ONE ROW
============================= */

.final-assembly-grid {
  display: grid;

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

  gap: var(--space-24);

  width: 100%;
}


/* =============================
   ASSEMBLY ITEM
============================= */

.final-assembly-item {
  margin: 0;

  min-width: 0;
}


.final-assembly-image {
  width: 100%;

  aspect-ratio: 4 / 3;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:transparent;
}


.final-assembly-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

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


/* CAPTION */

.final-assembly-item figcaption {
  display: grid;

  grid-template-columns: 28px 1fr;

  gap: var(--space-8);

  align-items: center;

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

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


.final-assembly-item figcaption span {
  font-size: var(--font-10);

  color: var(--accent);
}


.final-assembly-item figcaption p {
  margin: 0;

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

  color: var(--black);
}


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

.suspension-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);
}


.suspension-reflection h2 {
  margin: 0;

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

  line-height: 1.2;

  color: var(--black);
}


.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) {

  .suspension-overview {
    grid-template-columns: 1fr;

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


  .design-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }


  .suspension-section,
  .suspension-section-reverse {
    grid-template-columns: 1fr;

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


  .suspension-section-reverse .suspension-section-copy,
  .suspension-section-reverse .suspension-section-media {
    order: initial;
  }


  .analysis-feature-heading {
    grid-template-columns: 1fr;

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


  .suspension-reflection {
    grid-template-columns: 1fr;

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

}


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

@media (max-width: 650px) {

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


  .suspension-header {
    margin-bottom: var(--space-48);
  }


  .suspension-header-title {
    font-size: var(--font-44);
  }


  .suspension-overview-copy h2,
  .design-process-heading h2,
  .analysis-feature-heading h2,
  .subsystems-heading h2,
  .final-assembly-heading h2,
  .suspension-statement h2 {
    font-size: var(--font-36);
  }


  .design-process-grid,
  .subsystems-grid {
    grid-template-columns: 1fr;
  }


  .suspension-section {
    padding: var(--space-64) 0;
  }


  .subsystems-section,
  .final-assembly {
    padding: var(--space-64) 0;
  }


  .suspension-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: var(--font-10);
  letter-spacing: 1.5px;
  color: #555;
  text-decoration: none;
}

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


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

.component-gallery-section {
  padding: var(--space-96) 0;

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


.component-gallery-heading {
  max-width: 700px;

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


.component-gallery-heading h2 {
  margin: 0 0 var(--space-16);

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

  line-height: 1.15;

  color: var(--black);
}


.component-gallery-heading > p:last-child {
  margin: 0;

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

  line-height: 1.7;

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


/* =============================
   3 × 3 GRID
============================= */

.component-gallery-grid {
  display: grid;

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

  column-gap: var(--space-24);
  row-gap: var(--space-48);
}


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

.component-gallery-item {
  margin: 0;

  min-width: 0;
}


/* IMAGE AREA */

.component-gallery-image {
  width: 100%;

  aspect-ratio: 1 / 1;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: transparent;
}


.component-gallery-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  padding: var(--space-24);

  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}


.component-gallery-item:hover .component-gallery-image img {
  transform: scale(1.04);

  opacity: 0.9;
}


/* CAPTION */

.component-gallery-item figcaption {
  display: grid;

  grid-template-columns: 28px 1fr;

  gap: var(--space-8);

  align-items: center;

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

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


.component-gallery-item figcaption span {
  font-size: var(--font-10);

  color: var(--accent);
}


.component-gallery-item figcaption p {
  margin: 0;

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

  color: var(--black);
}