@charset "UTF-8";

/* ======================================================
   CPR — PROJECT-SPECIFIC STYLES
   Scoped to .page--cpr
   - Hero image
   - Overview visual
   - Logo construction block
   - Color strip
   - Type block
   - Result spacing
   - Two-column text on wide screens
====================================================== */


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

.page--cpr .project-hero {
  /* Let shared project.css handle most of it.
     Slightly tighter bottom spacing so the hero
     image feels connected but not cramped. */
  padding-bottom: var(--space-2);
}

.page--cpr .project-hero-media {
  padding: var(--space-2) 0 var(--space-3);
}

/* Default size for laptops / typical desktops */
.page--cpr .project-hero-media img {
  display: block;
  max-width: 960px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Larger screens: give the design more breathing room */
@media (min-width: 1200px) {
  .page--cpr .project-hero-media img {
    max-width: 1120px;
  }
}

@media (min-width: 1440px) {
  .page--cpr .project-hero-media img {
    max-width: 1280px;
  }
}


/* ======================================================
   OVERVIEW VISUAL
   (logo variations composite)
====================================================== */

.page--cpr .project-media-item--cpr-overview {
  margin: 0;
  margin-top: var(--space-3);
  margin-left: 0;
  margin-right: auto;
  max-width: 720px;
}

.page--cpr .project-media-item--cpr-overview img {
  display: block;
  width: 100%;
  height: auto;
}


/* ======================================================
   LOGO SYSTEM
   (logo construction figure)
====================================================== */

.page--cpr .section--cpr-logo {
  padding-top: 0;
  padding-bottom: var(--space-3);
}

.page--cpr .project-media-item--cpr-logo {
  margin: var(--space-3) 0 0 0;
  padding: 0;
  max-width: 960px;
}

@media (min-width: 1200px) {
  .page--cpr .project-media-item--cpr-logo {
    max-width: 1120px;
  }
}

@media (min-width: 1440px) {
  .page--cpr .project-media-item--cpr-logo {
    max-width: 1280px;
  }
}

.page--cpr .project-media-item--cpr-logo img {
  display: block;
  width: 100%;
  height: auto;
}


/* ======================================================
   SYSTEM
   (COLOR STRIP + TYPE BLOCK)
====================================================== */

.page--cpr .section--cpr-system {
  padding-block: var(--space-3);
}

/* COLOR STRIP */

.page--cpr .cpr-color-strip {
  margin: var(--space-3) 0;
  max-width: 960px;
}

.page--cpr .cpr-color-strip img {
  display: block;
  width: 100%;
  height: auto;
}

/* TYPE BLOCK */

.page--cpr .cpr-type-block {
  margin: var(--space-3) 0;
  max-width: 1280px;
}

.page--cpr .cpr-type-block img {
  display: block;
  width: 100%;
  height: auto;
}

/* SYSTEM SUBSECTIONS */

.page--cpr .cpr-system-copy {
  position: relative;
  padding-top: 1.5rem;
  margin-top: var(--space-3);
}

.page--cpr .cpr-system-label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.page--cpr .cpr-system-copy--type {
  margin-top: calc(var(--space-4) * 1.5);
}

.page--cpr .cpr-system-divider {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: var(--space-5) 0;
}


/* ======================================================
   RESULT
====================================================== */

.page--cpr .section--cpr-result {
  padding-block: var(--space-4);
}


/* ======================================================
   CPR — TEXT COLUMNS ON WIDER SCREENS
====================================================== */

@media (min-width: 900px) {
  .page--cpr .section-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    align-items: start;
  }

  .page--cpr .section-text p {
    margin: 0;
    align-self: start;
  }
	
	@media (min-width: 900px) {
  .page--cpr .section-text--cpr-logo .section-text-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .page--cpr .section-text--cpr-logo .section-text-column .section-body {
    margin: 0;
  }
}an... idiot?
	


/* Keep paragraph rhythm consistent
   (works in 1-column and 2-column layouts) */

.page--cpr .section-text p + p {
  margin-top: var(--space-2);
}

@media (min-width: 900px) {
  /* In grid mode, move spacing to the grid itself */
  .page--cpr .section-text p + p {
    margin-top: 0;
  }

  .page--cpr .section-text {
    row-gap: var(--space-2);
  }
}


/* ======================================================
   SECTION FOOTER
====================================================== */

@media (min-width: 900px) {
  .page--cpr .section-footer {
    grid-column: 1;
    margin-top: var(--space-2);
  }
}


/* ======================================================
   RESULT ARTIFACT
====================================================== */

.cpr-result-artifact {
  margin-top: var(--space-3);
  max-width: 420px;
}

@media (min-width: 900px) {
  .page--cpr .cpr-result-artifact {
    grid-column: 1;
  }
}

.cpr-result-artifact img {
  display: block;
  width: 100%;
  height: auto;
}


/* ======================================================
   RESULT CTA
====================================================== */

.page--cpr .section--cpr-result .section-body--cta {
  grid-column: 1 / -1;
  flex-basis: 100%;
}


/* ======================================================
   OPTIONAL RESULT IMAGE
====================================================== */

/*
.page--cpr .cpr-result-media {
  margin-top: var(--space-3);
  margin-left: 0;
  margin-right: auto;
  width: 100%;
  max-width: 720px;
}

.page--cpr .cpr-result-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
}
*/