/*
 * Content Columns component (views/components/content-columns.twig).
 * Kept outside src/styles because the Vue CLI build is not currently runnable;
 * values mirror the theme variables in src/styles/abstracts/_variables.scss.
 * The markup reuses .fields-of-work / .custom-case-study-columns, so these rules
 * also cover what the Customizer CSS provides for the hand-built case studies.
 */

.content-columns .custom-case-study-columns {
  background: transparent;
}

.content-columns .custom-case-study-columns h3 {
  border-bottom: 10px solid #9dcdfa;
}

.content-columns hr.brand--light-blue {
  color: #9dcdfa;
}

/* Matches the original 30px image-to-headline gap (flex stops margins collapsing) */
.content-columns .content-columns__image {
  margin-bottom: 0.9375rem;
}

.content-columns__image img {
  display: block;
  width: 100%;
  height: auto;
}

.content-columns .field-of-work__field {
  display: flex;
  flex-direction: column;
}

.content-columns__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: auto;
  margin-bottom: 1.875rem; /* same as .rich-text p, so stacked columns keep their spacing */
  padding-top: 0.5rem;
}

/* .rich-text a forces green link text; restore the button colours */
.content-columns .button--primary,
.content-columns .button--primary:hover {
  color: #fff;
}

.content-columns .button--secondary {
  color: #458406;
}

.content-columns .button--secondary:hover {
  color: #2ac769;
}

.content-columns .button--tertiary,
.content-columns .button--tertiary:hover {
  color: #282828;
}

@media screen and (min-width: 768px) {
  .content-columns .content-columns--2-col .field-of-work__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
  .content-columns .custom-case-study-columns.wide {
    width: 120%;
    margin-left: -10%;
  }
}

@media screen and (min-width: 1600px) {
  .content-columns .custom-case-study-columns.wide {
    width: 136%;
    margin-left: -18%;
  }
}