/* =========================================================
   MISCELLANEOUS CAD PAGE
========================================================= */

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

  margin: 0 auto;

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

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


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

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


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

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

  letter-spacing: 4px;

  color: var(--grey);
}


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


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

  font-style: italic;

  color: var(--accent);
}


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

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

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

  letter-spacing: 2px;

  color: var(--accent);
}


/* =========================================================
   INTRO
========================================================= */

.misc-intro {
  display: grid;

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

  gap: var(--space-80);

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


.misc-intro-copy h2 {
  max-width: 520px;

  margin: 0;

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

  line-height: 1.1;

  letter-spacing: -1px;

  color: var(--black);
}


.misc-intro-text p {
  margin: 0 0 var(--space-16);

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

  line-height: 1.7;

  color: var(--dark-grey);

  text-align: justify;

  text-justify: inter-word;
}


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

.misc-project {
  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);
}


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


.misc-project.reverse .misc-project-copy {
  order: 2;
}


.misc-project.reverse .misc-project-media {
  order: 1;
}


/* =========================================================
   PROJECT COPY
========================================================= */

.misc-project-number {
  margin: 0 0 var(--space-24);

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

  letter-spacing: 2px;

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


.misc-project-copy h2 {
  margin: 0 0 var(--space-24);

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

  line-height: 1.15;

  color: var(--black);
}


.misc-project-copy > p:not(
  .misc-project-number,
  .misc-kicker
) {
  margin: 0 0 var(--space-24);

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

  line-height: 1.7;

  color: var(--dark-grey);

  text-align: justify;

  text-justify: inter-word;
}


.misc-project-copy ul {
  margin: 0;

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


.misc-project-copy li {
  margin-bottom: var(--space-12);

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

  line-height: 1.6;

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


/* =========================================================
   TAGS
========================================================= */

.misc-project-tags {
  display: flex;

  flex-wrap: wrap;

  gap: var(--space-8);

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


.misc-project-tags span {
  padding: var(--space-8) var(--space-12);

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

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

  letter-spacing: 1px;

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


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

.misc-project-media {
  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: center;
}


/* SINGLE PROJECT IMAGE */

.misc-project-media > img {
  width: 100%;

  height: 420px;

  display: block;

  object-fit: contain;

  margin: 0 auto;
}


/* =========================================================
   FOUR IMAGE GRID
========================================================= */

.misc-media-grid {
  display: grid;

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

  gap: var(--space-12);

  align-items: stretch;
}


.misc-media-grid img {
  width: 100%;

  height: 280px;

  display: block;

  object-fit: contain;

  margin: 0 auto;
}


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

.misc-gallery {
  display: grid;

  gap: var(--space-24);

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

  align-items: stretch;
}


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


.misc-gallery.three-columns {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


.misc-gallery figure {
  margin: 0;

  display: flex;

  flex-direction: column;
}


.misc-gallery img {
  width: 100%;

  height: 320px;

  display: block;

  object-fit: contain;

  margin: 0 auto;
}


.misc-gallery figcaption {
  margin-top: auto;

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

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

  letter-spacing: 2px;

  color: var(--grey);
}


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

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

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


.misc-analysis-heading {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: var(--space-80);

  align-items: end;

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


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

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

  font-weight: 300;

  color: var(--black);
}


.misc-analysis-heading > p {
  margin: 0;

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

  line-height: 1.7;

  color: var(--dark-grey);

  text-align: justify;

  text-justify: inter-word;
}


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

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


.misc-reflection h2 {
  max-width: 520px;

  margin: 0;

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

  font-weight: 300;

  line-height: 1.2;

  color: var(--black);
}


.misc-reflection-copy p {
  margin: 0 0 var(--space-16);

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

  line-height: 1.7;

  color: var(--dark-grey);

  text-align: justify;

  text-justify: inter-word;
}


/* =========================================================
   IMAGE INTERACTION
========================================================= */

.misc-project-media img,
.misc-gallery img,
.misc-media-grid img {
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}


.misc-project-media img:hover,
.misc-gallery img:hover,
.misc-media-grid img:hover {
  transform: scale(1.01);

  opacity: 0.94;
}


/* =========================================================
   COOLING FIXTURE ANALYSIS
========================================================= */

.misc-analysis .misc-media-grid {
  margin-top: var(--space-32);
}


.misc-analysis .misc-media-grid img {
  width: 100%;

  height: 280px;

  display: block;

  object-fit: contain;
}


/* =========================================================
   PROJECT NAVIGATION
========================================================= */

.cae-project-nav {
  display: flex;

  justify-content: space-between;

  gap: var(--space-24);

  padding: var(--space-32) 0 var(--space-48);
}


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


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

@media (max-width: 900px) {

  .misc-intro {
    grid-template-columns: 1fr;

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


  .misc-project,
  .misc-project.reverse {
    grid-template-columns: 1fr;

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


  .misc-project.reverse .misc-project-copy,
  .misc-project.reverse .misc-project-media {
    order: initial;
  }


  .misc-project-media > img {
    height: 380px;
  }


  .misc-gallery.three-columns {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


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

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


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

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

}


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

@media (max-width: 650px) {

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


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


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


  .misc-intro-copy h2,
  .misc-analysis-heading h2 {
    font-size: var(--font-36);
  }


  .misc-gallery.two-columns,
  .misc-gallery.three-columns,
  .misc-media-grid {
    grid-template-columns: 1fr;
  }


  .misc-project {
    padding: var(--space-64) 0;
  }


  .misc-analysis {
    padding: var(--space-64) 0;
  }


  .misc-reflection {
    padding: var(--space-64) 0;
  }


  .misc-project-media > img,
  .misc-gallery img,
  .misc-media-grid img,
  .misc-analysis .misc-media-grid img {
    height: auto;

    max-height: 420px;

    object-fit: contain;
  }


  .misc-intro-text p,
  .misc-project-copy > p:not(
    .misc-project-number,
    .misc-kicker
  ),
  .misc-analysis-heading > p,
  .misc-reflection-copy p {
    text-align: left;
  }

}