/* Import main design system */
@import url('style.css');
@import url('jumbo.css');

/* CarGurus specific variables */
:root {
  --cargurus-primary: #55A0CE;
  --cargurus-secondary: #046096;
  --cargurus-text-dark: #000000;
  --cargurus-text-light: #727272;
  --cargurus-bg-light: #55A0CE;
  --cargurus-grey-light: rgba(0, 0, 0, 0.05);
  --cargurus-border: #55A0CE;
}

/* Override JumboCode green elements with CarGurus blue */
.hero-image-container {
  border-color: var(--cargurus-border);
  background: var(--cargurus-bg-light);
}

/* Override problem icon sizing for CarGurus */
.problem-icon {
  width: 25px;
  height: 25px;
}

.problem-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Product showcase section styling */
.product-showcase-section {
  padding-top: 80px;
}

/* Old vs New Calculator comparison */
.calc-compare {
  background: #EBEBEB;
  border-radius: 16px;
  padding: 48px 45px;
}

.calc-compare-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 45px;
}

.calc-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calc-note {
  max-width: 270px;
  width: 100%;
  text-align: center;
  font-size: var(--type-size-meta);
  font-weight: 400;
  color: #000;
  margin: 0 auto;
}

.calc-strong { font-weight: 600; }

/* Align notes per column to match Figma: old (right), new (left) */
.calc-compare-row .calc-col:first-child .calc-note {
  margin: 0 0 0 auto;
  padding-right: 1.5%;
}
.calc-compare-row .calc-col:last-child .calc-note {
  margin: 0 auto 0 0;
  padding-left: 1.5%;
}

.calc-frame {
  width: 100%;
  max-width: 397px; /* new: 397; old will be slightly narrower via class */
  height: auto;
  border-radius: 8px;
  display: block;
}

.calc-frame.old { max-width: 368px; }

@media (max-width: 948px) {
  .calc-compare { padding: 32px 24px; }
  .calc-compare-row { gap: 24px; }
  .calc-note { width: auto; max-width: 245px; }
  /* Keep proportional scaling: old (368px) vs new (397px) => ~0.927 */
  .calc-frame { max-width: 45vw; }
  .calc-frame.old { max-width: calc(45vw * 0.927); }
}

@media (max-width: 600px) {
  .calc-compare { padding: 24px 16px; }
  .calc-compare-row { gap: 12px; }
  .calc-frame { max-width: 42vw; }
  .calc-frame.old { max-width: calc(42vw * 0.927); }
  .calc-note { max-width: 220px; font-weight: 400; font-size: 12px; }
}

@media (max-width: 500px) {
  .calc-compare { padding: 20px 12px; }
  .calc-compare-row { gap: 10px; }
  .calc-frame { max-width: 40vw; }
  .calc-frame.old { max-width: calc(40vw * 0.927); }
  .calc-note { max-width: 200px; font-size: 12px; }
}

.product-showcase-image {
  border-radius: 16px;
  text-align: center;
}

.product-showcase-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Impact wrapper background and padding */
.impact-frame {
  background: #DCECF3;
  border-radius: 16px;
  padding: 32px clamp(16px, 8vw, 48px);
  border: 1px solid #00A1DD;
}

/* Spaced impact container with auto-width cards */
.impact-spaced {
  justify-content: space-between;
  gap: 32px;
}

.impact-spaced .impact-card {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
}

/* Impact cards responsive breakpoint */
@media (max-width: 850px) {
  .impact-frame {
    width: fit-content;
    margin: 0;
  }
  
  .impact-spaced {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  
  .impact-spaced .impact-card {
    width: auto;
    text-align: left;
  }
}

.image-caption {
  font-size: 14px;
  color: #000000;
  margin-top: 8px;
  text-align: left;
  font-weight: 200;
}

.image-caption-full {
  width: 100%;
  max-width: 900px;
  margin-top: 8px;
}

.visit-site-link {
  color: #107BBC;
}

.visit-site-link:hover {
  color: #509DCB;
}

.process-link-text {
  color: #107BBC;
}

.process-link:hover .process-link-text {
  color: #509DCB;
}

.impact-number {
  color: #107BBC;
}

.goal-card {
  border-color: #107BBC;
}

.goal-number {
  border-color: #107BBC;
  color: #107BBC;
}

.description-card.positive {
  border-color: var(--cargurus-primary);
}

.description-card.positive.black-thumbs {
  border-color: var(--cargurus-border);
}

/* Problem showcase responsive image styling */
.showcase-grid {
  display: flex;
  justify-content: flex-start;
  gap: 48px;
  max-width: 900px;
}

.showcase-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.showcase-image {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.showcase-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  border: 1px solid #EBEBEB;
}

/* CarGurus problem section images - different aspect ratio (870x1028) */
.showcase-img-cg {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 870 / 1028;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  border: 1px solid #EBEBEB;
}

.showcase-description {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 418px;
}

/* Ensure showcase images stack and shrink on small screens */
@media (max-width: 900px) {
  .showcase-grid {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-small);
    width: 100%;
  }
  .showcase-item {
    flex: 1 1 0;
    min-width: 0;
  }
  .showcase-image { width: 100%; }
}

/* Solution layout - text left, image right */
.solution-layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 8vw, 64px);
  width: 100%;
  max-width: 900px;
  padding: clamp(16px, 4vw, 40px) clamp(24px, 4vw, 48px);
  background: #EBEBEB;
  border-radius: 16px;
}

.solution-text {
  flex: 1;
  max-width: 475px;
  padding-top: 16px;
}

.solution-title-cg {
  padding-bottom: 24px;
}

.solution-subtitle-cg {
  padding-bottom: 8px;
}

.solution-bullets {
  margin: 16px 0 0 0;
  padding: 0;
  list-style: none;
}

.solution-bullets li {
  font-size: 16px;
  font-weight: 300;
  color: #000000;
  line-height: 1.33;
  margin-bottom: 8px;
  position: relative;
  padding-left: 16px;
}

.solution-bullets li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #000000;
  font-weight: 300;
}

.solution-bullets li:last-child {
  margin-bottom: 0;
}

.solution-img {
  width: auto;
  max-width: clamp(200px, 30vw, 250px);
  min-width: 200px;
  height: auto;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  margin-left: auto;
}

/* Solution image grid styling (for other sections) */
.solution-grid-frame {
  width: 100%;
  max-width: 900px;
  background: var(--cargurus-grey-light);
  border-radius: 16px;
  padding: clamp(16px, 4vw, 32px) clamp(16px, 4vw, 48px);
  margin-top: 32px;
}

.solution-image-grid {
  display: flex;
  gap: clamp(16px, 4vw, 48px);
  justify-content: space-between;
  align-items: flex-start;
  margin: 8px 0;
  padding-inline: 0;
  flex-wrap: nowrap; /* keep in one row */
}

.solution-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.solution-caption {
  font-size: var(--type-size-meta);
  font-weight: 200;
  color: #000;
  margin-top: 8px;
  text-align: left;
  width: 100%;
}

/* Solution grid images - responsive sizing for 3-in-a-row layout */
.solution-image-grid .solution-img {
  width: 100%;
  min-width: 0;
  height: auto;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}

/* Remove bottom padding from solution containers */
.solution-card {
  padding-bottom: 0;
  max-height: 615px;
  overflow: hidden;
}

/* Responsive adjustments for solution layout */
@media (max-width: 650px) {
  .solution-layout {
    flex-direction: column;
    gap: 16px;
    text-align: left;
  }
  
  .solution-text {
    max-width: 100%;
  }
  
  .solution-image {
    width: 100%;
  }
  
  .solution-img {
    max-width: 150px;
  }
  .solution-bullets li {
    display: none;
  }
  
  .solution-img {
    margin-left: 0;
  }
}

/* Responsive adjustments for solution grid */
@media (max-width: 650px) {
  .solution-image-grid {
    flex-direction: row; /* keep side-by-side */
    gap: clamp(16px, 4vw, 48px);
    align-items: flex-start;
    max-height: none;
    padding-inline: 0;
  }
  

  
  .solution-grid-frame {
    padding: clamp(16px, 4vw, 32px) clamp(16px, 4vw, 48px);
  }
}



/* Alternative approach using solution-card targeting */
/* Focus opacity per solution showcase using sibling targeting from the Solution section */
.solution-section + .solution-showcase-section .solution-image-grid .solution-img:nth-child(2),
.solution-section + .solution-showcase-section .solution-image-grid .solution-img:nth-child(3) {
  opacity: 0.3;
}

.solution-section + .solution-showcase-section + .solution-showcase-section .solution-image-grid .solution-img:nth-child(1),
.solution-section + .solution-showcase-section + .solution-showcase-section .solution-image-grid .solution-img:nth-child(3) {
  opacity: 0.3;
}

.solution-section + .solution-showcase-section + .solution-showcase-section + .solution-showcase-section .solution-image-grid .solution-img:nth-child(1),
.solution-section + .solution-showcase-section + .solution-showcase-section + .solution-showcase-section .solution-image-grid .solution-img:nth-child(2) {
  opacity: 0.3;
}

/* Research quote card (from Figma) */
.research-quote {
  background: #EBEBEB;
  border-radius: 16px;
  border: 1px solid #107BBC;
  /* Responsive padding with clamp */
  padding: clamp(16px, 4vw, 32px) clamp(24px, 6vw, 48px);
  /* left-aligned within the container */
  margin-top: 32px;
  max-width: 696px;
}

.research-quote .quote-text {
  color: #107BBC;
  font-weight: 400;
  font-size: var(--type-size-heading);
  line-height: 1.5;
  margin: 0;
  max-width: 600px;
  width: 100%;
}

.research-quote .quote-attrib {
  color: #666666;
  font-weight: 300;
  font-size: var(--type-size-meta);
  margin: 16px 0 0;
  line-height: 1.5;
}

/* Section spacing utilities */
.section-large {
  padding-top: var(--spacing-casestudy);
}

.secion-meduim {
  padding-top: var(--spacing-section);
}

/* Remove inherited bottom padding on main Process blocks to avoid extra gap */
.process-section.section-large {
  padding-bottom: 0;
}

/* Elevate inter-section spacing for CarGurus case study
   Keep bottom padding from base styles; increase only top spacing to 160px */
.problem-section,
.goal-section,
.solution-section {
  padding-top: var(--spacing-casestudy);
}

/* Competitive comparison row */
.comp-row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  padding-top: 32px;
}

.comp-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 8px;
  display: block;
}

.comp-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
}

.comp-title {
  font-weight: 400;
  font-size: var(--type-size-heading);
  line-height: 1.5;
  color: var(--cargurus-text-dark);
  margin: 0;
}

.comp-text {
  font-weight: 300;
  font-size: var(--type-size-body);
  line-height: 1.5;
  color: var(--cargurus-text-light);
  margin: 0;
}

/* Figma-comp text list */
.comp-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.comp-item { display: flex; flex-direction: column; gap: 4px; }

.comp-item-title {
  font-weight: 600;
  font-size: var(--type-size-body);
  line-height: 1.35;
  color: #000000;
  margin: 0;
}

.comp-item-desc {
  font-weight: 400;
  font-size: var(--type-size-meta);
  line-height: 1.2;
  color: #727272;
  margin: 0;
}

/* Accent color span for selected titles */
.comp-accent { color: #107BBC; }

@media (max-width: 948px) {
  .comp-row {
    flex-direction: column;
    gap: 48px;
    padding-top: 36px;
  }
  .comp-columns {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 16px;
  }
}

/* Two text columns next to the image */
.comp-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  row-gap: 0;
  align-items: start;
}

@media (max-width: 600px) {
  .comp-columns {
    grid-template-columns: 1fr;
  }
  .comp-item-desc { display: none; }
  .comp-item-title { font-size: var(--type-size-meta); font-weight: 400; }
  .comp-accent {font-weight: 600; }
  .comp-image {
    max-width: clamp(250px, 65vw, 350px); }
  .comp-row {gap: 32px; }
  /* Extra spacing between item 5 and 6 when single-column */
  .comp-columns .comp-list + .comp-list > .comp-item:first-child { margin-top: 16px; }
}